// Laporan — Kartu stok, valuasi per gudang, slow-moving, turnover
const { useState: useStateL, useMemo: useMemoL } = React;

function Laporan({ gudang, role, period, pushToast }) {
  const [tab, setTab] = useStateL('valuasi'); // valuasi | kartu | slowmoving | turnover
  const [skuSel, setSkuSel] = useStateL('OLI-PT-5W30-4L');

  return (
    <div className="stack-6">
      <div className="row" style={{gap:0, borderBottom:'1px solid hsl(var(--border))'}}>
        {[
          { id: 'valuasi',    label: 'Valuasi Stok',     icon: 'layers' },
          { id: 'kartu',      label: 'Kartu Stok',       icon: 'history' },
          { id: 'slowmoving', label: 'Slow Moving',      icon: 'clock' },
          { id: 'turnover',   label: 'Turnover',         icon: 'rotate' },
        ].map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={tabStyle(tab === t.id)}>
            <Icon name={t.icon} size={12} className="icon" /> {t.label}
          </button>
        ))}
        <div style={{flex:1}} />
        <Btn icon="download" tone="ghost">Export PDF</Btn>
      </div>

      {tab === 'valuasi' && <ValuasiTab gudang={gudang} period={period} />}
      {tab === 'kartu' && <KartuStokTab skuSel={skuSel} setSkuSel={setSkuSel} />}
      {tab === 'slowmoving' && <SlowMovingTab />}
      {tab === 'turnover' && <TurnoverTab />}
    </div>
  );
}

function ValuasiTab({ gudang, period }) {
  const perGudang = GUDANG_LIST.map(g => {
    const items = PRODUCTS.map(p => ({ p, qty: p.stock[g.id] || 0 })).filter(x => x.qty > 0);
    const nilai = items.reduce((s, x) => s + x.qty * x.p.cost, 0);
    const totalQty = items.reduce((s, x) => s + x.qty, 0);
    return { ...g, items: items.length, qty: totalQty, nilai };
  });
  const totalNilai = perGudang.reduce((s, g) => s + g.nilai, 0);

  // Per kategori breakdown
  const perKat = KATEGORI.filter(k => k.id !== 'all').map(k => {
    const list = PRODUCTS.filter(p => p.cat === k.id);
    let nilai = 0, qty = 0;
    list.forEach(p => {
      Object.values(p.stock).forEach(s => { qty += s; nilai += s * p.cost; });
    });
    return { ...k, count: list.length, qty, nilai, pct: 0 };
  });
  const totalNilaiKat = perKat.reduce((s, k) => s + k.nilai, 0);
  perKat.forEach(k => { k.pct = totalNilaiKat > 0 ? (k.nilai / totalNilaiKat) * 100 : 0; });
  perKat.sort((a, b) => b.nilai - a.nilai);

  return (
    <div className="stack-6">
      <Card>
        <SectionHead title="Valuasi per Gudang" hint={`Per ${formatDateID(TODAY)}`} />
        <table className="table compact" style={{marginTop:8}}>
          <thead>
            <tr>
              <th>Gudang</th>
              <th>Kepala</th>
              <th className="num">Kapasitas (m³)</th>
              <th className="num">Utilisasi</th>
              <th className="num">SKU Aktif</th>
              <th className="num">Total Qty</th>
              <th className="num">Nilai Stok (HPP)</th>
              <th className="num">% dari Total</th>
            </tr>
          </thead>
          <tbody>
            {perGudang.map(g => {
              const util = ({ pusat: KPI.utilisasiPusat, bandung: KPI.utilisasiBandung, surabaya: KPI.utilisasiSurabaya })[g.id];
              const pct = totalNilai > 0 ? (g.nilai / totalNilai) * 100 : 0;
              return (
                <tr key={g.id}>
                  <td style={{fontWeight:500}}>{g.name}</td>
                  <td style={{fontSize:12}}>{g.kepala}</td>
                  <td className="num num-mono">{g.kapasitas_m3.toLocaleString('id-ID')}</td>
                  <td className="num num-mono">{(util * 100).toFixed(0)}%</td>
                  <td className="num num-mono">{g.items}</td>
                  <td className="num num-mono">{g.qty.toLocaleString('id-ID')}</td>
                  <td className="num num-mono"><strong>Rp {rupiah(g.nilai)}</strong></td>
                  <td className="num num-mono">{pct.toFixed(1)}%</td>
                </tr>
              );
            })}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan={4}><strong>Total Konsolidasi</strong></td>
              <td className="num num-mono"><strong>{KPI.totalSKU}</strong></td>
              <td className="num num-mono"><strong>{perGudang.reduce((s, g) => s + g.qty, 0).toLocaleString('id-ID')}</strong></td>
              <td className="num num-mono"><strong>Rp {rupiah(totalNilai)}</strong></td>
              <td className="num num-mono"><strong>100,0%</strong></td>
            </tr>
          </tfoot>
        </table>
      </Card>

      <Card>
        <SectionHead title="Valuasi per Kategori" hint="Distribusi nilai inventaris berdasar kelompok produk" />
        <div style={{marginTop:10}}>
          {perKat.map(k => (
            <div key={k.id} className="row" style={{gap:10, padding:'8px 0', borderBottom:'1px solid hsl(var(--border))', alignItems:'center'}}>
              <div style={{width:140, fontSize:12.5, fontWeight:500}}>{k.label}</div>
              <div style={{width:60, fontSize:11, color:'hsl(var(--muted-foreground))', textAlign:'right'}} className="num-mono">{k.count} SKU</div>
              <div style={{flex:1, height:8, background:'hsl(var(--muted))', borderRadius:4, overflow:'hidden'}}>
                <div style={{
                  width: `${k.pct}%`,
                  height: '100%',
                  background: `hsl(var(--accent-h) var(--accent-s) ${50 - k.pct/4}%)`,
                  transition: 'width 200ms',
                }} />
              </div>
              <div style={{width:80, fontSize:11.5, fontWeight:600, textAlign:'right'}} className="num-mono">{k.pct.toFixed(1)}%</div>
              <div style={{width:120, fontSize:12, fontWeight:600, textAlign:'right'}} className="num-mono">Rp {rupiah(k.nilai, { compact: true })}</div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function KartuStokTab({ skuSel, setSkuSel }) {
  const p = PROD[skuSel];
  // Synthesize a stock card from PENERIMAAN, PENGIRIMAN, TRANSFER, OPNAME for selected SKU
  const movements = useMemoL(() => {
    const mv = [];
    PENERIMAAN.forEach(gr => {
      gr.items.forEach(it => {
        if (it.sku === skuSel) mv.push({ tgl: gr.tgl, ref: gr.id, type: 'IN', desc: `GR dari ${SUPPLIERS.find(s => s.id === gr.supplier)?.name}`, gudang: gr.gudang, qty: it.qty, status: gr.status });
      });
    });
    PENGIRIMAN.forEach(d => {
      d.items.forEach(it => {
        if (it.sku === skuSel) mv.push({ tgl: d.tgl, ref: d.id, type: 'OUT', desc: `DO ke ${CUSTOMERS.find(c => c.id === d.customer)?.name}`, gudang: d.gudang, qty: it.qty, status: d.status });
      });
    });
    TRANSFER.forEach(t => {
      t.items.forEach(it => {
        if (it.sku === skuSel) {
          mv.push({ tgl: t.tgl, ref: t.id, type: 'OUT', desc: `Transfer ke ${gudangShort(t.to)}`, gudang: t.from, qty: it.qty, status: t.status });
          if (t.status === 'received') {
            mv.push({ tgl: t.receivedAt?.split(' ')[0] || t.tgl, ref: t.id, type: 'IN', desc: `Transfer dari ${gudangShort(t.from)}`, gudang: t.to, qty: it.qty, status: t.status });
          }
        }
      });
    });
    OPNAME.forEach(o => {
      (o.adjustments || []).forEach(a => {
        if (a.sku === skuSel) mv.push({ tgl: o.tgl, ref: o.id, type: 'ADJ', desc: `Opname adj: ${a.reason}`, gudang: o.gudang, qty: a.diff, status: 'completed' });
      });
    });
    mv.sort((a, b) => a.tgl.localeCompare(b.tgl) || a.ref.localeCompare(b.ref));
    let saldo = totalStockSKU(p) - mv.reduce((s, m) => s + (m.type === 'OUT' ? -m.qty : m.qty), 0);
    return mv.map(m => {
      saldo += m.type === 'OUT' ? -m.qty : m.qty;
      return { ...m, saldo };
    });
  }, [skuSel, p]);

  return (
    <div className="stack-6">
      <Card>
        <div className="row" style={{gap:12, alignItems:'center'}}>
          <div style={{flex:1}}>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>Pilih SKU</div>
            <select value={skuSel} onChange={e => setSkuSel(e.target.value)} style={{width:'100%', marginTop:4, padding:'6px 10px', border:'1px solid hsl(var(--border))', borderRadius:6, fontSize:13, fontFamily:"'IBM Plex Mono', monospace"}}>
              {PRODUCTS.map(prod => (
                <option key={prod.sku} value={prod.sku}>{prod.sku} — {prod.name}</option>
              ))}
            </select>
          </div>
          <div style={{flex:1}}>
            <SkuTag sku={p.sku} />
            <div style={{fontSize:14, fontWeight:600, marginTop:4}}>{p.name}</div>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{KATEGORI.find(k => k.id === p.cat)?.label} · UoM {p.uom} · HPP Rp {rupiah(p.cost)}</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>Saldo Akhir</div>
            <div style={{fontSize:24, fontWeight:600, fontFamily:"'IBM Plex Mono', monospace", color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{totalStockSKU(p)}</div>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{p.uom} · Min {p.min} / Max {p.max}</div>
          </div>
        </div>
      </Card>

      <Card style={{padding:0}}>
        <table className="table compact">
          <thead>
            <tr>
              <th style={{width:'9%'}}>Tanggal</th>
              <th style={{width:'12%'}}>Ref Dokumen</th>
              <th>Keterangan</th>
              <th style={{width:'9%'}}>Gudang</th>
              <th style={{width:'7%'}}>Tipe</th>
              <th className="num" style={{width:'7%'}}>Masuk</th>
              <th className="num" style={{width:'7%'}}>Keluar</th>
              <th className="num" style={{width:'8%'}}>Saldo</th>
              <th style={{width:'9%'}}>Status</th>
            </tr>
          </thead>
          <tbody>
            {movements.length === 0 && (
              <tr><td colSpan={9} className="empty" style={{padding:32, textAlign:'center'}}>Tidak ada pergerakan stok untuk SKU ini.</td></tr>
            )}
            {movements.map((m, i) => (
              <tr key={i}>
                <td>{formatDateID(m.tgl)}</td>
                <td className="num-mono" style={{fontSize:11.5, color:'hsl(var(--accent-h) var(--accent-s) 32%)'}}>{m.ref}</td>
                <td style={{fontSize:12}}>{m.desc}</td>
                <td>{gudangShort(m.gudang)}</td>
                <td>
                  <span className="pill" style={{
                    fontSize:10,
                    padding:'2px 6px',
                    background: m.type === 'IN' ? 'hsl(142 55% 92%)' : m.type === 'OUT' ? 'hsl(0 60% 94%)' : 'hsl(35 80% 92%)',
                    color: m.type === 'IN' ? 'hsl(142 55% 28%)' : m.type === 'OUT' ? 'hsl(0 60% 38%)' : 'hsl(35 80% 32%)',
                  }}>{m.type}</span>
                </td>
                <td className="num num-mono" style={{color: m.type === 'IN' ? 'hsl(142 55% 32%)' : 'hsl(var(--muted-foreground))'}}>
                  {m.type === 'IN' ? `+${m.qty}` : m.type === 'ADJ' && m.qty > 0 ? `+${m.qty}` : ''}
                </td>
                <td className="num num-mono" style={{color: m.type === 'OUT' || (m.type === 'ADJ' && m.qty < 0) ? 'hsl(0 70% 48%)' : 'hsl(var(--muted-foreground))'}}>
                  {m.type === 'OUT' ? `-${m.qty}` : m.type === 'ADJ' && m.qty < 0 ? m.qty : ''}
                </td>
                <td className="num num-mono" style={{fontWeight:600}}>{m.saldo}</td>
                <td><StatusPill status={m.status} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

function SlowMovingTab() {
  const totalStuckValue = SLOW_MOVING.reduce((s, x) => s + x.value, 0);
  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="SKU Slow-Moving" value={SLOW_MOVING.length} hint="Tidak bergerak > 5 hari" icon="clock" tone="warn" />
        <Kpi label="Nilai Tertahan" value={'Rp ' + rupiah(totalStuckValue, { compact: true })} hint="Modal kerja yang tidak berputar" icon="layers" tone="warn" />
        <Kpi label="Avg Days" value={Math.round(SLOW_MOVING.reduce((s, x) => s + x.daysSinceLast, 0) / SLOW_MOVING.length)} hint="Rata-rata hari sejak transaksi terakhir" icon="history" />
        <Kpi label="Rekomendasi" value={SLOW_MOVING.filter(x => x.daysSinceLast > 7).length} hint="Pertimbangkan promo/diskon" icon="package" tone="accent" />
      </div>

      <Card style={{padding:0}}>
        <table className="table compact">
          <thead>
            <tr>
              <th style={{width:'14%'}}>SKU</th>
              <th>Nama Produk</th>
              <th style={{width:'10%'}}>Kategori</th>
              <th className="num" style={{width:'8%'}}>Stok</th>
              <th style={{width:'12%'}}>Aging</th>
              <th className="num" style={{width:'10%'}}>Hari Idle</th>
              <th className="num" style={{width:'14%'}}>Nilai Tertahan</th>
              <th style={{width:'12%'}}>Rekomendasi</th>
            </tr>
          </thead>
          <tbody>
            {SLOW_MOVING.map(x => {
              const p = PROD[x.sku];
              const band = x.daysSinceLast >= 10 ? 'stale' : x.daysSinceLast >= 7 ? 'warn' : 'fresh';
              return (
                <tr key={x.sku}>
                  <td><SkuTag sku={x.sku} /></td>
                  <td>
                    <div style={{fontSize:12, fontWeight:500}}>{p?.name}</div>
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>HPP Rp {rupiah(p?.cost)} · Jual Rp {rupiah(p?.price)}</div>
                  </td>
                  <td style={{fontSize:11.5}}>{KATEGORI.find(k => k.id === p?.cat)?.label}</td>
                  <td className="num num-mono">{x.stock}</td>
                  <td>
                    <span className={`age-band ${band}`}>{band === 'stale' ? '> 10 hari' : band === 'warn' ? '7-10 hari' : '< 7 hari'}</span>
                  </td>
                  <td className="num num-mono">{x.daysSinceLast}</td>
                  <td className="num num-mono"><strong>Rp {rupiah(x.value, { compact: true })}</strong></td>
                  <td style={{fontSize:11}}>
                    {x.daysSinceLast >= 10 ? 'Diskon 15-20%' : x.daysSinceLast >= 7 ? 'Promo bundle' : 'Monitor'}
                  </td>
                </tr>
              );
            })}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan={6}><strong>Total Modal Tertahan</strong></td>
              <td className="num num-mono"><strong>Rp {rupiah(totalStuckValue, { compact: true })}</strong></td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </Card>
    </div>
  );
}

function TurnoverTab() {
  // Synthesize turnover per category
  const perKat = KATEGORI.filter(k => k.id !== 'all').map(k => {
    const skus = PRODUCTS.filter(p => p.cat === k.id);
    const stockValue = skus.reduce((s, p) => s + totalStockSKU(p) * p.cost, 0);
    // Synthesize cogs from PENGIRIMAN
    let cogs = 0;
    PENGIRIMAN.forEach(d => {
      d.items.forEach(it => {
        const prod = PROD[it.sku];
        if (prod && prod.cat === k.id) cogs += it.qty * prod.cost;
      });
    });
    // Annualize crudely (data spans ~22 days → multiply by ~16)
    const annualCogs = cogs * 16;
    const turnover = stockValue > 0 ? annualCogs / stockValue : 0;
    const days = turnover > 0 ? 365 / turnover : 999;
    return { ...k, stockValue, annualCogs, turnover, days };
  });
  perKat.sort((a, b) => b.turnover - a.turnover);

  return (
    <div className="stack-6">
      <div className="grid-4">
        <Kpi label="Inventory Days (Avg)" value={`${KPI.turnoverDays} hari`} hint="DIO konsolidasi semua gudang" icon="rotate" />
        <Kpi label="Turnover Tercepat" value={perKat[0]?.label || '—'} hint={`${perKat[0]?.days.toFixed(0)} hari rotasi`} icon="package" tone="success" />
        <Kpi label="Turnover Terlambat" value={perKat[perKat.length-1]?.label || '—'} hint={`${perKat[perKat.length-1]?.days.toFixed(0)} hari rotasi`} icon="clock" tone="warn" />
        <Kpi label="Target Industri" value="30 hari" hint="Benchmark distribusi sparepart" icon="layers" />
      </div>

      <Card style={{padding:0}}>
        <table className="table compact">
          <thead>
            <tr>
              <th>Kategori</th>
              <th className="num">Nilai Stok (HPP)</th>
              <th className="num">COGS Tahunan (est.)</th>
              <th className="num">Turnover (x/thn)</th>
              <th className="num">Inventory Days</th>
              <th>Rating</th>
            </tr>
          </thead>
          <tbody>
            {perKat.map(k => {
              const rating = k.days <= 30 ? 'cepat' : k.days <= 60 ? 'normal' : k.days <= 90 ? 'lambat' : 'stagnan';
              const ratingTone = ({ cepat: 'success', normal: 'neutral', lambat: 'warn', stagnan: 'danger' })[rating];
              const ratingLabel = ({ cepat: 'Cepat ✓', normal: 'Normal', lambat: 'Lambat', stagnan: 'Stagnan' })[rating];
              return (
                <tr key={k.id}>
                  <td style={{fontWeight:500}}>{k.label}</td>
                  <td className="num num-mono">Rp {rupiah(k.stockValue, { compact: true })}</td>
                  <td className="num num-mono">Rp {rupiah(k.annualCogs, { compact: true })}</td>
                  <td className="num num-mono">{k.turnover.toFixed(1)}x</td>
                  <td className="num num-mono">{k.days.toFixed(0)} hari</td>
                  <td>
                    <span className="pill" style={{
                      fontSize:10.5, padding:'2px 8px',
                      background: ratingTone === 'success' ? 'hsl(142 55% 92%)' : ratingTone === 'warn' ? 'hsl(35 80% 92%)' : ratingTone === 'danger' ? 'hsl(0 60% 94%)' : 'hsl(var(--muted))',
                      color: ratingTone === 'success' ? 'hsl(142 55% 28%)' : ratingTone === 'warn' ? 'hsl(35 80% 32%)' : ratingTone === 'danger' ? 'hsl(0 60% 38%)' : 'hsl(var(--muted-foreground))',
                      fontWeight: 600,
                    }}>{ratingLabel}</span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>

      <Card>
        <SectionHead title="Catatan Analisis" hint="Auto-generated insights" />
        <ul style={{fontSize:12, lineHeight:1.7, marginTop:8, paddingLeft:18, color:'hsl(var(--foreground))'}}>
          <li><strong>Turnover keseluruhan {KPI.turnoverDays} hari</strong> — di atas target industri 30 hari. Indikasi over-stocking pada kategori tertentu.</li>
          <li><strong>{perKat[perKat.length-1]?.label}</strong> punya rotasi paling lambat ({perKat[perKat.length-1]?.days.toFixed(0)} hari). Pertimbangkan pengurangan PO atau program promo.</li>
          <li><strong>{perKat[0]?.label}</strong> berputar paling cepat ({perKat[0]?.days.toFixed(0)} hari). Pastikan reorder point konservatif untuk hindari stockout.</li>
          <li>Total nilai modal di slow-moving SKU: <strong>Rp {rupiah(SLOW_MOVING.reduce((s, x) => s + x.value, 0), { compact: true })}</strong>. Lihat tab Slow Moving.</li>
        </ul>
      </Card>
    </div>
  );
}

window.Laporan = Laporan;