// Packages — tracking cards with carrier progress.
const STAGES = ['Ordered','Shipped','In transit','Out for delivery','Delivered'];
function stageIndex(pct){ return Math.min(STAGES.length-1, Math.round((pct/100)*(STAGES.length-1))); }

// A package counts as delivered once its final stage is reached.
const isDelivered = p => p.status === 'Delivered' || p.pct >= 100;

// One shipment, rendered as a divided row inside the unified Shipments card
// (consistent with the table-row lists on Bills / Subscriptions / Receipts).
function PackageRow({ p, onEdit }) {
  const idx = stageIndex(p.pct);
  const delivered = isDelivered(p);
  const railTint = delivered ? 'green' : p.tint;
  return (
    <div className="pkg-row" onClick={() => onEdit(p)}>
      <div className="pkg-row-head">
        <IconChip icon={delivered ? 'package-check' : 'package'} tint={railTint} size={44} radius={13} />
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:16, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{p.name}</div>
          <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap', marginTop:2 }}>
            <span style={{ fontSize:12.5, color:'var(--fg-3)' }}>{p.carrier} · <span className="zd-mono" style={{ fontSize:12 }}>{p.tracking}</span></span>
            {p.items && p.items.length > 0 && <span className="att-pin" title="What's inside"><Icon name="package" size={11} />{`${p.items.reduce((s,i)=>s+(i.qty||1),0)} item${p.items.reduce((s,i)=>s+(i.qty||1),0)===1?'':'s'}`}</span>}
            <MailboxBadge addr={mailboxFor(p)} variant="mini" />
          </div>
        </div>
        <div style={{ textAlign:'right' }}>
          <span className={`badge ${delivered ? 'b-green' : p.pct >= 70 ? 'b-teal' : 'b-gold'}`}>{p.status}</span>
          <div style={{ fontSize:12.5, color:'var(--fg-2)', marginTop:6, fontWeight:600 }}>{p.eta}</div>
        </div>
        <div className="pkg-acts" onClick={e => e.stopPropagation()}>
          {p.trackUrl
            ? <a className="pkg-track" href={p.trackUrl} target="_blank" rel="noopener noreferrer" title={`Track on ${p.carrier}`}><Icon name="external-link" size={14} /> Track</a>
            : <button className="pkg-track ghost" onClick={() => onEdit(p)} title="Add a tracking link"><Icon name="link" size={14} /> Add link</button>}
          <button className="iconbtn" onClick={() => onEdit(p)} title="Edit package"><Icon name="pencil" size={16} /></button>
        </div>
      </div>
      {/* progress rail */}
      <div style={{ position:'relative', display:'flex', justifyContent:'space-between', marginTop:18 }}>
        <div style={{ position:'absolute', top:9, left:10, right:10, height:3, background:'var(--surface-sunk)', borderRadius:9 }} />
        <div style={{ position:'absolute', top:9, left:10, height:3, borderRadius:9, background:tintFg(railTint),
          width:`calc(${(idx/(STAGES.length-1))*100}% - ${idx===STAGES.length-1?0:0}px)`, maxWidth:'calc(100% - 20px)' }} />
        {STAGES.map((s,i) => (
          <div key={s} style={{ position:'relative', zIndex:1, textAlign:'center', flex:1 }}>
            <div style={{ width:20, height:20, borderRadius:'50%', margin:'0 auto',
              background: i <= idx ? tintFg(railTint) : 'var(--surface)', border:`2px solid ${i<=idx?tintFg(railTint):'var(--border-strong)'}`,
              display:'grid', placeItems:'center' }}>
              {i < idx && <Icon name="check" size={11} color="#fff" />}
              {i === idx && <span style={{ width:7, height:7, borderRadius:'50%', background:'#fff' }} />}
            </div>
            <div style={{ fontSize:10.5, marginTop:7, color: i <= idx ? 'var(--fg-1)' : 'var(--fg-4)', fontWeight: i===idx?700:500 }}>{s}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Packages() {
  const D = window.ZD_DATA;
  const [pkgs, setPkgs] = useState(D.packages);
  const [creating, setCreating] = useState(false);
  const [editing, setEditing] = useState(null);
  const [q, setQ] = useState('');
  const [tab, setTab] = useState('all');
  const [carrierF, setCarrierF] = useState('all');
  const [stageF, setStageF] = useState('all');
  const sort = useSort('pct', 'desc');
  useCreateShortcut(() => setCreating(true));
  const carriers = ['Amazon Logistics','UPS','USPS','FedEx','DHL'];
  const carrierTint = { 'Amazon Logistics':'teal','UPS':'gold','USPS':'blue','FedEx':'purple','DHL':'red' };
  const addPkg = form => {
    setPkgs(list => [{ id:'p' + Date.now(), name: form.name, carrier: form.carrier || 'UPS',
      tracking: form.tracking || '—', status:'Label created', pct:15, tint: carrierTint[form.carrier] || 'gold',
      eta: form.eta || 'Pending', trackUrl: (form.trackUrl || '').trim() }, ...list]);
    setCreating(false);
  };
  const saveEdit = form => {
    const idx = Math.max(0, STAGES.indexOf(form.stage));
    const pct = Math.round((idx / (STAGES.length - 1)) * 100);
    setPkgs(list => list.map(x => x.id === editing.id ? { ...x, name: form.name, carrier: form.carrier,
      tracking: form.tracking, status: form.stage, pct, tint: carrierTint[form.carrier] || x.tint, eta: form.eta, trackUrl: (form.trackUrl || '').trim() } : x));
    setEditing(null);
  };
  const delPkg = () => { setPkgs(list => list.filter(x => x.id !== editing.id)); setEditing(null); };

  const carrierOpts = [{ value:'all', label:'All carriers' }, ...carriers.map(c => ({ value:c, label:c, tint: carrierTint[c] }))];
  const stageOpts = [{ value:'all', label:'All stages' }, ...STAGES.map(s => ({ value:s, label:s }))];

  // search → carrier → stage, then sort, then split into active / delivered.
  let matched = pkgs.filter(p =>
    (carrierF === 'all' || p.carrier === carrierF) &&
    (stageF === 'all' || STAGES[stageIndex(p.pct)] === stageF) &&
    (p.name.toLowerCase().includes(q.toLowerCase()) ||
     p.carrier.toLowerCase().includes(q.toLowerCase()) ||
     String(p.tracking).toLowerCase().includes(q.toLowerCase()))
  );
  matched = sort.apply(matched, {
    pct:     p => p.pct,
    name:    p => p.name.toLowerCase(),
    carrier: p => p.carrier.toLowerCase(),
  });

  // Status quick-tabs (consistent with Bills / Subscriptions). Counts are global.
  const counts = {
    all: pkgs.length,
    active: pkgs.filter(p => !isDelivered(p)).length,
    delivered: pkgs.filter(isDelivered).length,
  };
  let rows = tab === 'active' ? matched.filter(p => !isDelivered(p))
           : tab === 'delivered' ? matched.filter(isDelivered)
           : matched;
  // In the "All" view, keep delivered shipments at the bottom (active stays on top).
  if (tab === 'all') rows = [...rows].sort((a, b) => (isDelivered(a) ? 1 : 0) - (isDelivered(b) ? 1 : 0));

  const filtering = q || carrierF !== 'all' || stageF !== 'all' || tab !== 'all';
  const clearFilters = () => { setQ(''); setCarrierF('all'); setStageF('all'); setTab('all'); };

  return (
    <div className="screen-inner">
      <div className="statrow">
        <StatCard label="In transit" value={pkgs.filter(p => !isDelivered(p)).length} sub="Across 3 carriers" icon="truck" tint="teal" />
        <StatCard label="Arriving today" value="1" sub="AirPods Pro by 9 PM" icon="package-check" tint="gold" />
        <StatCard label="Delivered" value={pkgs.filter(isDelivered).length} sub={pkgs.some(isDelivered) ? 'Arrived & accounted for' : 'Nothing delivered yet'} icon="check-circle-2" tint="green" />
      </div>

      <div className="card rise" style={{ overflow:'hidden' }}>
        <div className="card-pad" style={{ paddingBottom:0 }}>
          <SectionHeader title="Packages" sub="Auto-detected from shipping confirmations"
            actionEl={<Btn variant="primary" icon="plus" kbd="C" title="Track package — press C" onClick={() => setCreating(true)}>Track package</Btn>} />
          <div className="filterbar">
            <div className="search" style={{ flex:'1 1 220px' }}><Icon name="search" size={17} /><input placeholder="Search item, carrier or tracking #…" value={q} onChange={e => setQ(e.target.value)} />{q && <button className="x-clear" onClick={() => setQ('')}><Icon name="x" size={14} /></button>}</div>
            <Dropdown value={carrierF} options={carrierOpts} onChange={setCarrierF} icon="truck" minWidth={158} />
            <Dropdown value={stageF} options={stageOpts} onChange={setStageF} icon="circle-dot" minWidth={160} />
            <Dropdown icon="arrow-up-down" minWidth={186} value={`${sort.sortKey}:${sort.sortDir}`}
              options={[
                { value:'pct:desc',     label:'Progress (furthest)' },
                { value:'pct:asc',      label:'Progress (earliest)' },
                { value:'name:asc',     label:'Item (A → Z)' },
                { value:'carrier:asc',  label:'Carrier (A → Z)' },
              ]}
              onChange={v => { const [k, d] = v.split(':'); sort.set(k, d); }} />
          </div>

          <div className="filtbar-2">
            <div className="tabs">
              {[['all','All'],['active','Active'],['delivered','Delivered']].map(([id,lbl]) => (
                <button key={id} className={tab === id ? 'on' : ''} onClick={() => setTab(id)}>{lbl} <span className="tab-n">{counts[id]}</span></button>
              ))}
            </div>
            <div className="result-meta">
              <span>{rows.length} {rows.length === 1 ? 'package' : 'packages'}</span>
              {filtering && <button className="viewall" onClick={clearFilters}>Clear filters</button>}
            </div>
          </div>
        </div>

        {rows.length === 0 ? (
          <div className="table-empty" style={{ borderTop:'1px solid var(--border)' }}>
            <Icon name="search-x" size={26} color="var(--fg-4)" />
            <span>No packages match your filters.</span>
            {filtering && <button className="viewall" onClick={clearFilters}>Clear filters</button>}
          </div>
        ) : (
          <div className="pkg-list">
            {rows.map(p => <PackageRow key={p.id} p={p} onEdit={setEditing} />)}
          </div>
        )}
      </div>

      {creating && <EntityDrawer title="Track a package" sub="Add a package to follow its delivery"
        icon="package" tint="teal" submitLabel="Track" submitIcon="plus"
        initial={{ name:'', carrier:'UPS', tracking:'', eta:'', trackUrl:'' }}
        fields={[
          { key:'name', label:'Item', type:'text', icon:'package', placeholder:'e.g. Nike Pegasus 41', required:true },
          { key:'carrier', label:'Carrier', type:'select', icon:'truck', options: carriers.map(c => ({ value:c, label:c })) },
          { key:'tracking', label:'Tracking number', type:'text', icon:'hash', placeholder:'1Z999AA10…' },
          { key:'eta', label:'Expected delivery', type:'text', icon:'calendar', placeholder:'e.g. Wed, Jun 4' },
          { key:'trackUrl', label:'Tracking link', type:'text', icon:'link', placeholder:'https://… carrier tracking page' },
        ]}
        onClose={() => setCreating(false)} onSubmit={addPkg} />}

      {editing && <EntityDrawer title="Edit package" sub="Manually update status if it didn’t sync from email"
        icon="package" tint={editing.tint} submitLabel="Save changes" submitIcon="check"
        topContent={editing.items && editing.items.length > 0 ? (
          <div className="field"><div className="k">What’s inside</div><LineItems items={editing.items} mode="contents" /></div>
        ) : null}
        initial={{ name:editing.name, carrier:editing.carrier, tracking:editing.tracking, stage: STAGES[stageIndex(editing.pct)], eta:editing.eta, trackUrl: editing.trackUrl || '' }}
        fields={[
          { key:'name', label:'Item', type:'text', icon:'package', placeholder:'Item name', required:true },
          { key:'stage', label:'Delivery stage', type:'select', icon:'truck', options: STAGES.map(s => ({ value:s, label:s })) },
          { key:'carrier', label:'Carrier', type:'select', icon:'truck', options: carriers.map(c => ({ value:c, label:c })), half:true },
          { key:'eta', label:'Expected delivery', type:'text', icon:'calendar', placeholder:'e.g. Wed, Jun 4', half:true },
          { key:'tracking', label:'Tracking number', type:'text', icon:'hash', placeholder:'1Z999AA10…' },
          { key:'trackUrl', label:'Tracking link', type:'text', icon:'link', placeholder:'https://… carrier tracking page' },
        ]}
        onClose={() => setEditing(null)} onSubmit={saveEdit} onDelete={delPkg} />}
    </div>
  );
}
window.Packages = Packages;