// Stock Opname — Sesi penghitungan fisik & adjustment
const { useState: useStateO, useMemo: useMemoO } = React;

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

  const filtered = useMemoO(() => {
    let list = OPNAME;
    if (gudang !== 'all') list = list.filter(o => o.gudang === gudang);
    if (filter !== 'all') list = list.filter(o => o.status === filter);
    return list;
  }, [gudang, filter]);

  const inProgress = OPNAME.filter(o => o.status === 'in-progress').length;
  const totalVariance = OPNAME.reduce((s, o) => s + (o.variance || 0), 0);
  const totalAdjValue = OPNAME.flatMap(o => o.adjustments || []).reduce((s, a) => {
    const p = PROD[a.sku];
    return s + (p ? a.diff * p.cost : 0);
  }, 0);

  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="Sesi Berjalan" value={inProgress} hint="Opname sedang dilakukan" icon="rotate" tone={inProgress > 0 ? 'accent' : 'neutral'} />
        <Kpi label="Sesi Selesai (Bln Ini)" value={OPNAME.filter(o => o.status === 'completed' && o.tgl.startsWith('2026-04')).length} hint="April 2026" icon="check" tone="success" />
        <Kpi label="Total Selisih SKU" value={totalVariance} hint="Akumulasi SKU dengan selisih (semua sesi)" icon="layers" tone="warn" />
        <Kpi label="Nilai Adjustment YTD" value={'Rp ' + rupiah(KPI.selisihOpnameYTD, { compact: true })} hint="Total nilai shortage 2026 (negatif)" icon="layers" tone="danger" />
      </div>

      <div className="filter-bar">
        <select value={filter} onChange={e => setFilter(e.target.value)}>
          <option value="all">Semua status</option>
          <option value="in-progress">Berjalan</option>
          <option value="completed">Selesai</option>
        </select>
        <div style={{flex:1}} />
        {ROLES[role].can.opname && (
          <Btn icon="plus" tone="primary" onClick={() => pushToast({ msg: 'Mulai sesi opname baru (belum diimplementasi di demo)', type: 'info' })}>
            Sesi Opname Baru
          </Btn>
        )}
      </div>

      <Card style={{padding:0}}>
        <table className="table compact">
          <thead>
            <tr>
              <th style={{width:'12%'}}>No. Sesi</th>
              <th style={{width:'9%'}}>Tanggal</th>
              <th>Zone / Cakupan</th>
              <th style={{width:'10%'}}>Gudang</th>
              <th style={{width:'18%'}}>Petugas</th>
              <th style={{width:'12%'}}>Progres</th>
              <th className="num" style={{width:'7%'}}>Selisih</th>
              <th style={{width:'12%'}}>Status</th>
              <th style={{width:'5%'}}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(o => {
              const pct = o.target ? Math.round((o.counted / o.target) * 100) : 0;
              return (
                <tr key={o.id} onClick={() => setDrawer(o)} style={{cursor:'pointer'}}>
                  <td className="num-mono" style={{fontSize:11.5, fontWeight:500, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{o.id}</td>
                  <td>{formatDateID(o.tgl)}</td>
                  <td>
                    <div style={{fontWeight:500}}>{o.zone}</div>
                    {o.notes && <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{o.notes}</div>}
                  </td>
                  <td>{gudangShort(o.gudang)}</td>
                  <td style={{fontSize:11.5}}>
                    {o.petugas.join(', ')}
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>Pengawas: {o.pengawas}</div>
                  </td>
                  <td>
                    <div className="row" style={{gap:6, alignItems:'center'}}>
                      <div style={{flex:1, height:6, background:'hsl(var(--muted))', borderRadius:3, overflow:'hidden'}}>
                        <div style={{
                          width:`${pct}%`,
                          height:'100%',
                          background: pct === 100 ? 'hsl(142 55% 42%)' : 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))',
                          transition:'width 200ms',
                        }} />
                      </div>
                      <span className="num-mono" style={{fontSize:11, minWidth:36, textAlign:'right'}}>{o.counted}/{o.target}</span>
                    </div>
                    {o.started && <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>Mulai {o.started}{o.finished ? ` · Selesai ${o.finished}` : ''}</div>}
                  </td>
                  <td className="num num-mono" style={{color: o.variance > 0 ? 'hsl(35 80% 38%)' : 'hsl(var(--muted-foreground))', fontWeight: o.variance > 0 ? 600 : 400}}>{o.variance || 0}</td>
                  <td><StatusPill status={o.status} /></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 sesi opname.</td></tr>
            )}
          </tbody>
        </table>
      </Card>

      {/* Quick reference card */}
      <Card>
        <SectionHead title="Panduan Stock Opname" hint="Standar prosedur internal" />
        <div className="grid-2" style={{gap:14, marginTop:8}}>
          <div className="info-cell">
            <div className="info-label" style={{color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>Frekuensi</div>
            <ul style={{fontSize:11.5, lineHeight:1.6, marginTop:6, paddingLeft:18, color:'hsl(var(--foreground))'}}>
              <li>Cycle count per zone — mingguan</li>
              <li>Opname penuh (full count) — kuartalan</li>
              <li>Opname adhoc — saat ada selisih besar</li>
            </ul>
          </div>
          <div className="info-cell">
            <div className="info-label" style={{color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>Toleransi Selisih</div>
            <ul style={{fontSize:11.5, lineHeight:1.6, marginTop:6, paddingLeft:18, color:'hsl(var(--foreground))'}}>
              <li>SKU low-value: ±5% dari sistem</li>
              <li>SKU high-value (&gt;Rp 500rb/unit): ±2%</li>
              <li>Selisih &gt; toleransi: investigasi & berita acara</li>
            </ul>
          </div>
        </div>
      </Card>

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

function OpnameDrawer({ doc, onClose, role, pushToast }) {
  const adjValue = (doc.adjustments || []).reduce((s, a) => {
    const p = PROD[a.sku];
    return s + (p ? a.diff * p.cost : 0);
  }, 0);

  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}}>Stock Opname Session</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={`Pengawas ${doc.pengawas}`} />

          <div className="grid-2" style={{gap:10}}>
            <div className="info-cell">
              <div className="info-label">Cakupan</div>
              <div className="info-value" style={{fontSize:13, marginTop:4}}>{doc.zone}</div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{doc.target} SKU target</div>
            </div>
            <div className="info-cell">
              <div className="info-label">Petugas</div>
              <div className="info-value" style={{fontSize:13, marginTop:4}}>{doc.petugas.join(', ')}</div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>Mulai {doc.started}{doc.finished ? ` · Selesai ${doc.finished}` : ' · sedang berjalan'}</div>
            </div>
          </div>

          {doc.adjustments && doc.adjustments.length > 0 ? (
            <div>
              <SectionHead title="Adjustment Stok" hint={`${doc.adjustments.length} SKU dengan selisih · Nilai total ${rupiah(adjValue, { sym: true, compact: true })}`} />
              <Card style={{padding:0}}>
                <table className="table compact">
                  <thead>
                    <tr>
                      <th>SKU / Nama</th>
                      <th className="num">Sistem</th>
                      <th className="num">Aktual</th>
                      <th className="num">Selisih</th>
                      <th className="num">Nilai (Rp)</th>
                      <th>Alasan</th>
                    </tr>
                  </thead>
                  <tbody>
                    {doc.adjustments.map((a, i) => {
                      const p = PROD[a.sku];
                      const nilai = p ? a.diff * p.cost : 0;
                      return (
                        <tr key={i}>
                          <td>
                            <SkuTag sku={a.sku} />
                            <div style={{fontSize:11.5, marginTop:3}}>{p?.name}</div>
                          </td>
                          <td className="num num-mono">{a.system}</td>
                          <td className="num num-mono">{a.actual}</td>
                          <td className="num num-mono" style={{color: a.diff < 0 ? 'hsl(0 70% 48%)' : 'hsl(142 55% 32%)', fontWeight:600}}>
                            {a.diff > 0 ? '+' : ''}{a.diff}
                          </td>
                          <td className="num num-mono" style={{color: nilai < 0 ? 'hsl(0 70% 48%)' : 'hsl(142 55% 32%)'}}>
                            {nilai < 0 ? '-' : '+'}{rupiah(Math.abs(nilai))}
                          </td>
                          <td style={{fontSize:11.5}}>{a.reason}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colSpan={4}><strong>Total Nilai Adjustment</strong></td>
                      <td className="num num-mono" style={{color: adjValue < 0 ? 'hsl(0 70% 48%)' : 'hsl(142 55% 32%)'}}>
                        <strong>{adjValue < 0 ? '-' : '+'}Rp {rupiah(Math.abs(adjValue))}</strong>
                      </td>
                      <td></td>
                    </tr>
                  </tfoot>
                </table>
              </Card>
            </div>
          ) : doc.status === 'in-progress' ? (
            <div className="info-cell" style={{textAlign:'center', padding:20, background:'hsl(var(--accent-h) var(--accent-s) 96%)'}}>
              <Icon name="rotate" size={20} className="icon" />
              <div style={{fontSize:13, fontWeight:500, marginTop:6}}>Sesi sedang berjalan</div>
              <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:4}}>{doc.counted} dari {doc.target} SKU sudah dihitung. Adjustment akan dicatat saat sesi diselesaikan.</div>
            </div>
          ) : (
            <div className="empty" style={{textAlign:'center', padding:20}}>Tidak ada selisih pada sesi ini.</div>
          )}

          {doc.status === 'in-progress' && ROLES[role].can.opname && (
            <div className="row gap-2" style={{justifyContent:'flex-end', paddingTop:8, borderTop:'1px solid hsl(var(--border))'}}>
              <Btn icon="x" tone="ghost">Pause Sesi</Btn>
              <Btn icon="check" tone="primary" onClick={() => { pushToast({ msg: `${doc.id} diselesaikan & adjustment di-posting`, type: 'success' }); onClose(); }}>Selesaikan & Posting</Btn>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.StockOpname = StockOpname;