// Transfer antar-gudang
const { useState: useStateT, useMemo: useMemoT } = React;

function TransferAntar({ gudang, role, pushToast }) {
  const [filter, setFilter] = useStateT('all');
  const [drawer, setDrawer] = useStateT(null);

  const filtered = useMemoT(() => {
    let list = TRANSFER;
    if (gudang !== 'all') list = list.filter(t => t.from === gudang || t.to === gudang);
    if (filter !== 'all') list = list.filter(t => t.status === filter);
    return list;
  }, [gudang, filter]);

  const inTransit = TRANSFER.filter(t => t.status === 'in-transit').length;
  const pending = TRANSFER.filter(t => t.status === 'pending').length;

  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="Transfer Aktif"  value={inTransit + pending} hint={`${inTransit} in-transit, ${pending} menunggu kirim`} icon="shuffle" tone="accent" />
        <Kpi label="Selesai Bulan Ini" value={TRANSFER.filter(t => t.status === 'received' && t.tgl.startsWith('2026-04')).length} hint="Sudah diterima gudang tujuan" icon="check" tone="success" />
        <Kpi label="Total Item Dipindah" value={TRANSFER.reduce((s, t) => s + t.items.reduce((a, i) => a + i.qty, 0), 0)} hint="Akumulasi unit di semua transfer" icon="package" />
        <Kpi label="Avg Lead Time" value="1.2 hari" hint="Pusat → cabang regional" icon="clock" />
      </div>

      <div className="filter-bar">
        <select value={filter} onChange={e => setFilter(e.target.value)}>
          <option value="all">Semua status</option>
          <option value="pending">Menunggu Kirim</option>
          <option value="in-transit">Dalam Perjalanan</option>
          <option value="received">Diterima</option>
        </select>
        <div style={{flex:1}} />
        <Btn icon="download" tone="ghost">Export CSV</Btn>
        {ROLES[role].can.transfer && (
          <Btn icon="plus" tone="primary" onClick={() => pushToast({ msg: 'Form transfer baru (belum diimplementasi di demo)', type: 'info' })}>
            Transfer Baru
          </Btn>
        )}
      </div>

      <Card style={{padding:0}}>
        <table className="table compact">
          <thead>
            <tr>
              <th style={{width:'12%'}}>No. Transfer</th>
              <th style={{width:'9%'}}>Tanggal</th>
              <th style={{width:'22%'}}>Rute</th>
              <th className="num" style={{width:'7%'}}>Item</th>
              <th className="num" style={{width:'7%'}}>Total Qty</th>
              <th style={{width:'12%'}}>Pengirim</th>
              <th style={{width:'14%'}}>Status</th>
              <th style={{width:'12%'}}>ETA / Diterima</th>
              <th style={{width:'5%'}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(t => {
              const totalQty = t.items.reduce((s, i) => s + i.qty, 0);
              return (
                <tr key={t.id} onClick={() => setDrawer(t)} style={{cursor:'pointer'}}>
                  <td className="num-mono" style={{fontSize:11.5, fontWeight:500, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{t.id}</td>
                  <td>{formatDateID(t.tgl)}</td>
                  <td>
                    <div className="row" style={{gap:6, alignItems:'center'}}>
                      <span className="pill" style={{background:'hsl(var(--muted))', fontSize:11}}>{gudangShort(t.from)}</span>
                      <Icon name="arrowRight" size={12} className="icon" />
                      <span className="pill" style={{background:'hsl(var(--accent-h) var(--accent-s) 92%)', color:'hsl(var(--accent-h) var(--accent-s) 28%)', fontSize:11}}>{gudangShort(t.to)}</span>
                    </div>
                  </td>
                  <td className="num num-mono">{t.items.length}</td>
                  <td className="num num-mono">{totalQty}</td>
                  <td style={{fontSize:11.5}}>{t.sender}</td>
                  <td>
                    <StatusPill status={t.status} />
                    {t.sentAt && t.status === 'in-transit' && <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>Berangkat {t.sentAt}</div>}
                  </td>
                  <td style={{fontSize:11.5}}>
                    {t.receivedAt ? <span style={{color:'hsl(142 55% 32%)'}}>{t.receivedAt}</span> : t.eta ? <>ETA {formatDateID(t.eta)}</> : '—'}
                    {t.receiver && <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>oleh {t.receiver}</div>}
                  </td>
                  <td><Icon name="chevronRight" size={13} className="icon" /></td>
                </tr>
              );
            })}
            {filtered.length === 0 && (
              <tr><td colSpan={9} className="empty" style={{padding:32, textAlign:'center'}}>Belum ada transfer dengan filter ini.</td></tr>
            )}
          </tbody>
        </table>
      </Card>

      {drawer && <TransferDrawer doc={drawer} onClose={() => setDrawer(null)} role={role} pushToast={pushToast} />}
    </div>
  );
}

function TransferDrawer({ doc, onClose, role, pushToast }) {
  return (
    <div className="drawer-backdrop" onMouseDown={onClose}>
      <div className="drawer" onMouseDown={e => e.stopPropagation()}>
        <div className="drawer-header">
          <div>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>Inter-Warehouse Transfer</div>
            <div style={{fontSize:18, fontWeight:600, fontFamily:"'IBM Plex Mono', monospace", marginTop:2, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{doc.id}</div>
            <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{formatDateID(doc.tgl)}</div>
          </div>
          <button className="btn ghost sm" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="drawer-body stack-6">
          <DocHeader id={doc.id} status={doc.status} meta={`Pengirim ${doc.sender}`} />

          <div className="info-cell">
            <div className="info-label">Rute Transfer</div>
            <div className="row" style={{gap:10, marginTop:6, alignItems:'center'}}>
              <div style={{flex:1, padding:'8px 10px', background:'hsl(var(--muted))', borderRadius:6}}>
                <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>From</div>
                <div style={{fontSize:13, fontWeight:600, marginTop:2}}>{gudangLabel(doc.from)}</div>
              </div>
              <Icon name="arrowRight" size={16} />
              <div style={{flex:1, padding:'8px 10px', background:'hsl(var(--accent-h) var(--accent-s) 94%)', borderRadius:6, border:'1px solid hsl(var(--accent-h) var(--accent-s) 80%)'}}>
                <div style={{fontSize:10.5, color:'hsl(var(--accent-h) var(--accent-s) 32%)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>To</div>
                <div style={{fontSize:13, fontWeight:600, marginTop:2, color:'hsl(var(--accent-h) var(--accent-s) 22%)'}}>{gudangLabel(doc.to)}</div>
              </div>
            </div>
            {doc.eta && <div style={{fontSize:11.5, marginTop:8, color:'hsl(var(--muted-foreground))'}}>ETA tiba: <strong style={{color:'hsl(var(--foreground))'}}>{formatDateID(doc.eta)}</strong>{doc.sentAt && ` · Berangkat ${doc.sentAt}`}</div>}
            {doc.receivedAt && <div style={{fontSize:11.5, marginTop:8, color:'hsl(142 55% 32%)'}}>Diterima {doc.receivedAt} oleh {doc.receiver}</div>}
          </div>

          <div>
            <SectionHead title="Item Transfer" hint={`${doc.items.length} SKU · ${doc.items.reduce((s,i)=>s+i.qty,0)} unit`} />
            <Card style={{padding:0}}>
              <table className="table compact">
                <thead>
                  <tr>
                    <th>SKU / Nama</th>
                    <th>Bin Asal</th>
                    <th>Bin Tujuan</th>
                    <th className="num">Qty</th>
                    <th>UoM</th>
                  </tr>
                </thead>
                <tbody>
                  {doc.items.map((it, i) => {
                    const p = PROD[it.sku];
                    return (
                      <tr key={i}>
                        <td>
                          <SkuTag sku={it.sku} />
                          <div style={{fontSize:11.5, marginTop:3}}>{p?.name}</div>
                        </td>
                        <td><BinLoc loc={p?.bin?.[doc.from] || '—'} /></td>
                        <td><BinLoc loc={p?.bin?.[doc.to] || '—'} /></td>
                        <td className="num num-mono">{it.qty}</td>
                        <td>{p?.uom}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </Card>
          </div>

          {doc.status === 'pending' && ROLES[role].can.transfer && (
            <div className="row gap-2" style={{justifyContent:'flex-end', paddingTop:8, borderTop:'1px solid hsl(var(--border))'}}>
              <Btn icon="truck" tone="primary" onClick={() => { pushToast({ msg: `${doc.id} berangkat ke ${gudangShort(doc.to)}`, type: 'success' }); onClose(); }}>Kirim Sekarang</Btn>
            </div>
          )}
          {doc.status === 'in-transit' && (
            <div className="row gap-2" style={{justifyContent:'flex-end', paddingTop:8, borderTop:'1px solid hsl(var(--border))'}}>
              <Btn icon="check" tone="primary" onClick={() => { pushToast({ msg: `${doc.id} diterima di ${gudangShort(doc.to)}`, type: 'success' }); onClose(); }}>Konfirmasi Diterima</Btn>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.TransferAntar = TransferAntar;