// Stok Keluar — Pengiriman (Delivery Order) ke customer
const { useState: useStateK, useMemo: useMemoK } = React;

function StokKeluar({ gudang, role, pushToast }) {
  const [tab, setTab] = useStateK('pengiriman'); // pengiriman | so
  const [filter, setFilter] = useStateK('all');
  const [q, setQ] = useStateK('');
  const [drawer, setDrawer] = useStateK(null);

  const filtered = useMemoK(() => {
    let list = PENGIRIMAN;
    if (gudang !== 'all') list = list.filter(p => p.gudang === gudang);
    if (filter !== 'all') list = list.filter(p => p.status === filter);
    if (q) {
      const s = q.toLowerCase();
      list = list.filter(p =>
        p.id.toLowerCase().includes(s) ||
        (CUSTOMERS.find(c => c.id === p.customer)?.name || '').toLowerCase().includes(s) ||
        (p.soRef || '').toLowerCase().includes(s)
      );
    }
    return list;
  }, [gudang, filter, q]);

  const filteredSO = useMemoK(() => {
    let list = SO_OPEN;
    if (gudang !== 'all') list = list.filter(s => s.gudang === gudang);
    return list;
  }, [gudang]);

  const totalNilai = filtered.reduce((s, d) => s + d.total, 0);
  const dueToday = SO_OPEN.filter(s => s.due === TODAY).length;

  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="DO Hari Ini"      value={PENGIRIMAN.filter(d => d.tgl === TODAY).length} hint="Delivery order keluar hari ini" icon="outbox" />
        <Kpi label="Pending Pick"     value={PENGIRIMAN.filter(d => d.status === 'pending' || d.status === 'picking').length} hint="Menunggu picking & loading" icon="clock" tone="warn" />
        <Kpi label="SO Jatuh Tempo"   value={dueToday} hint="Sales order belum di-pick, due hari ini" icon="clipboard" tone={dueToday > 0 ? 'warn' : 'neutral'} />
        <Kpi label="Nilai Pengiriman" value={'Rp ' + rupiah(totalNilai, { compact: true })} hint="Harga jual × qty (filter aktif)" icon="layers" tone="success" />
      </div>

      <div className="row" style={{gap:0, borderBottom:'1px solid hsl(var(--border))'}}>
        <button onClick={() => setTab('pengiriman')} style={tabStyle(tab === 'pengiriman')}>
          Pengiriman (DO)
          <span style={{marginLeft:6, fontSize:11, padding:'1px 5px', background:'hsl(var(--muted))', borderRadius:8}}>{PENGIRIMAN.length}</span>
        </button>
        <button onClick={() => setTab('so')} style={tabStyle(tab === 'so')}>
          SO Belum Pick
          <span style={{marginLeft:6, fontSize:11, padding:'1px 5px', background:'hsl(var(--muted))', borderRadius:8}}>{SO_OPEN.length}</span>
        </button>
      </div>

      {tab === 'pengiriman' && (
        <>
          <div className="filter-bar">
            <Icon name="search" size={13} className="icon" />
            <input
              className="filter-search"
              placeholder="Cari DO, customer, atau SO ref…"
              value={q}
              onChange={e => setQ(e.target.value)}
            />
            <select value={filter} onChange={e => setFilter(e.target.value)}>
              <option value="all">Semua status</option>
              <option value="pending">Menunggu</option>
              <option value="picking">Picking</option>
              <option value="shipped">Dikirim</option>
              <option value="delivered">Diterima</option>
            </select>
            <div style={{flex:1}} />
            <Btn icon="download" tone="ghost">Export CSV</Btn>
            {ROLES[role].can.issue && (
              <Btn icon="plus" tone="primary" onClick={() => pushToast({ msg: 'Form DO baru (belum diimplementasi di demo)', type: 'info' })}>
                DO Baru
              </Btn>
            )}
          </div>

          <Card style={{padding:0}}>
            <table className="table compact">
              <thead>
                <tr>
                  <th style={{width:'12%'}}>No. DO</th>
                  <th style={{width:'9%'}}>Tanggal</th>
                  <th>Customer / SO Ref</th>
                  <th style={{width:'9%'}}>Gudang</th>
                  <th className="num" style={{width:'6%'}}>Item</th>
                  <th className="num" style={{width:'12%'}}>Nilai</th>
                  <th style={{width:'10%'}}>Status</th>
                  <th style={{width:'10%'}}>Picker</th>
                  <th style={{width:'5%'}}></th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(d => {
                  const cust = CUSTOMERS.find(c => c.id === d.customer);
                  return (
                    <tr key={d.id} onClick={() => setDrawer(d)} style={{cursor:'pointer'}}>
                      <td className="num-mono" style={{fontSize:11.5, fontWeight:500, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{d.id}</td>
                      <td>{formatDateID(d.tgl)}</td>
                      <td>
                        <div style={{fontWeight:500}}>{cust?.name}</div>
                        <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontFamily:"'IBM Plex Mono', monospace"}}>{d.soRef}</div>
                      </td>
                      <td>{gudangShort(d.gudang)}</td>
                      <td className="num num-mono">{d.items.length}</td>
                      <td className="num num-mono">{rupiah(d.total, { compact: true })}</td>
                      <td>
                        <StatusPill status={d.status} />
                        {d.courier && <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{d.courier}</div>}
                      </td>
                      <td style={{fontSize:11.5}}>{d.picker}</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'}}>Tidak ada DO yang cocok dengan filter.</td></tr>
                )}
              </tbody>
              <tfoot>
                <tr>
                  <td colSpan={4}><strong>Total {filtered.length} DO</strong></td>
                  <td className="num num-mono">{filtered.reduce((s, d) => s + d.items.length, 0)}</td>
                  <td className="num num-mono"><strong>{rupiah(totalNilai, { compact: true })}</strong></td>
                  <td colSpan={3}></td>
                </tr>
              </tfoot>
            </table>
          </Card>
        </>
      )}

      {tab === 'so' && (
        <Card style={{padding:0}}>
          <table className="table compact">
            <thead>
              <tr>
                <th style={{width:'13%'}}>No. SO</th>
                <th style={{width:'10%'}}>Tanggal</th>
                <th>Customer</th>
                <th style={{width:'10%'}}>Gudang</th>
                <th className="num" style={{width:'6%'}}>Item</th>
                <th className="num" style={{width:'14%'}}>Nilai</th>
                <th style={{width:'10%'}}>Due</th>
                <th style={{width:'8%'}}>Prioritas</th>
                <th style={{width:'8%'}}></th>
              </tr>
            </thead>
            <tbody>
              {filteredSO.map(so => {
                const cust = CUSTOMERS.find(c => c.id === so.customer);
                const dueDays = Math.floor((new Date(so.due) - new Date(TODAY)) / 86400000);
                return (
                  <tr key={so.id}>
                    <td className="num-mono" style={{fontSize:11.5, fontWeight:500, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{so.id}</td>
                    <td>{formatDateID(so.tgl)}</td>
                    <td>
                      <div style={{fontWeight:500}}>{cust?.name}</div>
                      <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>{cust?.kontak} · {cust?.kota}</div>
                    </td>
                    <td>{gudangShort(so.gudang)}</td>
                    <td className="num num-mono">{so.items}</td>
                    <td className="num num-mono">{rupiah(so.value, { compact: true })}</td>
                    <td>
                      {formatDateID(so.due)}
                      <div style={{fontSize:10.5, color: dueDays < 0 ? 'hsl(0 70% 48%)' : dueDays === 0 ? 'hsl(35 80% 38%)' : 'hsl(var(--muted-foreground))'}}>
                        {dueDays < 0 ? `Telat ${Math.abs(dueDays)}h` : dueDays === 0 ? 'Hari ini' : `${dueDays} hari lagi`}
                      </div>
                    </td>
                    <td><StatusPill status={so.priority} /></td>
                    <td>
                      {ROLES[role].can.issue && (
                        <button className="btn ghost sm" onClick={() => pushToast({ msg: `Picking ${so.id} dimulai`, type: 'info' })}>
                          <Icon name="package" size={12} /> Pick
                        </button>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      )}

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

function DODrawer({ doc, onClose, role, pushToast }) {
  const cust = CUSTOMERS.find(c => c.id === doc.customer);

  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}}>Delivery Order</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)} · {gudangLabel(doc.gudang)}
            </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={`Picker ${doc.picker}${doc.courier ? ' · ' + doc.courier : ''}`} />

          <div className="grid-2" style={{gap:10}}>
            <div className="info-cell">
              <div className="info-label">Customer</div>
              <div className="info-value" style={{fontSize:13}}>{cust?.name}</div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{cust?.kontak} · {cust?.kota} · {cust?.term}</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Sales Order</div>
              <div className="info-value" style={{fontSize:13, fontFamily:"'IBM Plex Mono', monospace"}}>{doc.soRef || '—'}</div>
              {doc.shippedAt && <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>Shipped {doc.shippedAt}{doc.deliveredAt ? ' · Delivered ' + doc.deliveredAt : ''}</div>}
            </div>
          </div>

          <div>
            <SectionHead title="Item Pengiriman" hint={`${doc.items.length} baris`} />
            <Card style={{padding:0}}>
              <table className="table compact">
                <thead>
                  <tr>
                    <th>SKU / Nama</th>
                    <th>Bin</th>
                    <th className="num">Qty</th>
                    <th>UoM</th>
                    <th className="num">Harga</th>
                    <th className="num">Subtotal</th>
                  </tr>
                </thead>
                <tbody>
                  {doc.items.map((it, i) => {
                    const p = PROD[it.sku];
                    const harga = p?.price || 0;
                    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.gudang] || '—'} /></td>
                        <td className="num num-mono">{it.qty}</td>
                        <td>{it.uom}</td>
                        <td className="num num-mono">{rupiah(harga)}</td>
                        <td className="num num-mono">{rupiah(it.qty * harga)}</td>
                      </tr>
                    );
                  })}
                </tbody>
                <tfoot>
                  <tr>
                    <td colSpan={5}><strong>Total Nilai DO</strong></td>
                    <td className="num num-mono"><strong>Rp {rupiah(doc.total)}</strong></td>
                  </tr>
                </tfoot>
              </table>
            </Card>
          </div>

          {doc.status === 'pending' && ROLES[role].can.issue && (
            <div className="row gap-2" style={{justifyContent:'flex-end', paddingTop:8, borderTop:'1px solid hsl(var(--border))'}}>
              <Btn icon="package" tone="primary" onClick={() => { pushToast({ msg: `${doc.id} mulai picking`, type: 'success' }); onClose(); }}>Mulai Picking</Btn>
            </div>
          )}
          {doc.status === 'picking' && ROLES[role].can.issue && (
            <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} sudah dimuat & dikirim`, type: 'success' }); onClose(); }}>Tandai Dikirim</Btn>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.StokKeluar = StokKeluar;