// Dashboard — CV Mitra Logistik WMS
const { useState: useStateD, useMemo: useMemoD } = React;

function Dashboard({ gudang, role, pushToast, setPage }) {
  const [zoneFocus, setZoneFocus] = useStateD(null);

  // Filter products by gudang
  const visibleStock = useMemoD(() => {
    if (gudang === 'all') return PRODUCTS.map(p => ({ ...p, qty: totalStockSKU(p) }));
    return PRODUCTS.map(p => ({ ...p, qty: p.stock[gudang] || 0 }));
  }, [gudang]);

  const lowStock = visibleStock.filter(p => p.qty > 0 && p.qty < p.min);
  const kosong   = visibleStock.filter(p => p.qty === 0);

  // Inbound/outbound today
  const todayFlow = DAILY_FLOW[DAILY_FLOW.length - 1];
  const yestFlow  = DAILY_FLOW[DAILY_FLOW.length - 2];
  const inDelta   = ((todayFlow.in  - yestFlow.in)  / yestFlow.in)  * 100;
  const outDelta  = ((todayFlow.out - yestFlow.out) / yestFlow.out) * 100;

  // Per-gudang valuation (rough estimate using current stock × cost)
  const gudangValuation = useMemoD(() => {
    return GUDANG_LIST.map(g => ({
      ...g,
      value: PRODUCTS.reduce((s, p) => s + (p.stock[g.id] || 0) * p.cost, 0),
      lines: PRODUCTS.filter(p => (p.stock[g.id] || 0) > 0).length,
    }));
  }, []);

  return (
    <div className="stack-6">
      {/* KPI strip */}
      <div className="grid-4">
        <Kpi
          label="Nilai Stok"
          value={'Rp ' + rupiah(KPI.nilaiStok, { compact: true })}
          hint="Valuasi total 3 gudang (HPP)"
          icon="layers" tone="success"
        />
        <Kpi
          label="Inbound Hari Ini"
          value={todayFlow.in.toLocaleString('id-ID')}
          hint={
            <span>
              {inDelta >= 0 ? '↑' : '↓'} {Math.abs(inDelta).toFixed(0)}% vs kemarin · {KPI.poTerlambat} PO terlambat
            </span>
          }
          icon="inbox"
        />
        <Kpi
          label="Outbound Hari Ini"
          value={todayFlow.out.toLocaleString('id-ID')}
          hint={
            <span>
              {outDelta >= 0 ? '↑' : '↓'} {Math.abs(outDelta).toFixed(0)}% vs kemarin · {KPI.soDueHariIni} SO due
            </span>
          }
          icon="outbox" tone="warn"
        />
        <Kpi
          label="Inventory Days"
          value={KPI.turnoverDays + ' hari'}
          hint="Days inventory outstanding (DIO)"
          icon="rotate"
          progress={Math.min(100, (KPI.turnoverDays / 60) * 100)}
        />
      </div>

      {/* Floor map + Activity feed */}
      <div className="grid-2" style={{gridTemplateColumns:'1.6fr 1fr', gap:16}}>
        <Card>
          <SectionHead
            title="Floor Map — Gudang Pusat (Cikarang)"
            hint="Klik zona untuk detail · Warna = persentase utilisasi rak"
            action={<Pill tone="accent" dot>{(KPI.utilisasiPusat * 100).toFixed(0)}% terisi</Pill>}
          />
          <FloorMap focus={zoneFocus} setFocus={setZoneFocus} />
          <FloorLegend />
          {zoneFocus && <ZoneDetail zone={FLOOR_ZONES.find(z => z.id === zoneFocus)} onClose={() => setZoneFocus(null)} />}
        </Card>

        <Card>
          <SectionHead
            title="Aktivitas Hari Ini"
            hint={`Update terakhir ${TODAY.split('-').reverse().join('/')} · 09:18 WIB`}
            action={<Btn icon="bell" tone="ghost">Semua</Btn>}
          />
          <div className="timeline">
            {ACTIVITY.map(a => (
              <div key={a.id} className="timeline-item">
                <span className="timeline-time">{a.time}</span>
                <span className={'timeline-marker' + (a.urgent ? ' urgent' : '')} />
                <div>
                  <div className="timeline-text">{a.text}</div>
                  <div className="timeline-who">oleh {a.who}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Inbound / Outbound trend chart */}
      <Card>
        <SectionHead
          title="Alur Stok 22 Hari Terakhir"
          hint="Bar gelap = masuk · Bar terang = keluar · Hari ini ditandai"
          action={
            <div className="row gap-2">
              <Btn icon="download" tone="ghost">Export</Btn>
              <Btn icon="trending" tone="outline" onClick={() => setPage('laporan')}>Lihat Laporan</Btn>
            </div>
          }
        />
        <FlowChart />
      </Card>

      {/* Three-column: Per-Gudang Valuation, Low Stock, Pending Approvals */}
      <div className="grid-2" style={{gridTemplateColumns:'1.1fr 1fr 1fr', display:'grid', gap:16}}>
        <Card>
          <SectionHead
            title="Valuasi per Gudang"
            hint="Nilai stok aktual berdasarkan HPP per item"
          />
          <table className="table compact">
            <thead>
              <tr>
                <th>Gudang</th>
                <th className="num">SKU Aktif</th>
                <th className="num">Utilisasi</th>
                <th className="num">Nilai</th>
              </tr>
            </thead>
            <tbody>
              {gudangValuation.map(g => {
                const util = g.id === 'pusat' ? KPI.utilisasiPusat
                          : g.id === 'bandung' ? KPI.utilisasiBandung
                          : KPI.utilisasiSurabaya;
                return (
                  <tr key={g.id}>
                    <td>
                      <div style={{fontWeight:500}}>{g.kota}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{g.kepala} · {g.area_m2} m²</div>
                    </td>
                    <td className="num num-mono">{g.lines}</td>
                    <td className="num num-mono">{(util * 100).toFixed(0)}%</td>
                    <td className="num num-mono">{rupiah(g.value, { compact: true })}</td>
                  </tr>
                );
              })}
            </tbody>
            <tfoot>
              <tr>
                <td><strong>Total</strong></td>
                <td className="num num-mono">{KPI.totalSKU}</td>
                <td className="num num-mono">—</td>
                <td className="num num-mono"><strong>{rupiah(KPI.nilaiStok, { compact: true })}</strong></td>
              </tr>
            </tfoot>
          </table>
        </Card>

        <Card>
          <SectionHead
            title="Stok Kritis"
            hint={`${kosong.length} kosong · ${lowStock.length} di bawah min`}
            action={<Btn icon="package" tone="ghost" onClick={() => setPage('master')}>Lihat Semua</Btn>}
          />
          <div className="stack-6" style={{gap:6}}>
            {[...kosong, ...lowStock].slice(0, 6).map(p => (
              <div key={p.sku} className="row" style={{gap:8, padding:'6px 8px', borderRadius:4, background:'hsl(var(--muted) / 0.3)'}}>
                <SkuTag sku={p.sku} />
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:12, fontWeight:500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{p.name}</div>
                </div>
                <div className="num-mono" style={{fontSize:11.5}}>
                  <span style={{color: p.qty === 0 ? 'hsl(0 70% 48%)' : 'hsl(35 80% 38%)', fontWeight:600}}>{p.qty}</span>
                  <span style={{color:'hsl(var(--muted-foreground))'}}> / min {p.min}</span>
                </div>
              </div>
            ))}
            {kosong.length + lowStock.length === 0 && <div className="empty" style={{padding:16}}>Tidak ada SKU di bawah minimum.</div>}
          </div>
        </Card>

        <Card>
          <SectionHead
            title="Menunggu Verifikasi"
            hint="GR & Transfer yang perlu approval"
            action={ROLES[role].can.approve ? <Pill tone="warn" dot>Anda dapat approve</Pill> : null}
          />
          <div className="stack-6" style={{gap:6}}>
            {PENERIMAAN.filter(g => g.status === 'pending' || g.status === 'partial').map(g => (
              <div key={g.id} className="row" style={{gap:8, padding:'8px 10px', border:'1px solid hsl(var(--border))', borderRadius:4}}>
                <Icon name="inbox" size={14} className="icon" />
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:12, fontWeight:500, fontFamily:"'IBM Plex Mono', monospace"}}>{g.id}</div>
                  <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{SUPPLIERS.find(s => s.id === g.supplier)?.name} · {g.items.length} item</div>
                </div>
                <StatusPill status={g.status} />
              </div>
            ))}
            {TRANSFER.filter(t => t.status === 'pending').map(t => (
              <div key={t.id} className="row" style={{gap:8, padding:'8px 10px', border:'1px solid hsl(var(--border))', borderRadius:4}}>
                <Icon name="shuffle" size={14} className="icon" />
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:12, fontWeight:500, fontFamily:"'IBM Plex Mono', monospace"}}>{t.id}</div>
                  <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{gudangShort(t.from)} → {gudangShort(t.to)} · {t.items.length} item</div>
                </div>
                <StatusPill status={t.status} />
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

// ── Floor map widget (signature visualization) ─────────────────────────────

function FloorMap({ focus, setFocus }) {
  return (
    <div className="floor-map">
      <svg viewBox="0 0 100 86" preserveAspectRatio="xMidYMid meet">
        {/* Outer building outline */}
        <rect x="2" y="3" width="96" height="82" rx="1.5"
              fill="white" stroke="hsl(215 22% 80%)" strokeWidth="0.5" />

        {/* Loading dock indicator (right edge) */}
        <g>
          <rect x="96" y="62" width="4" height="22" fill="hsl(38 60% 90%)" stroke="hsl(35 60% 60%)" strokeWidth="0.3" strokeDasharray="0.8 0.6" />
          <text x="98" y="76" textAnchor="middle" className="floor-zone-occ" transform="rotate(-90 98 76)" style={{fontSize:'2px'}}>LOADING</text>
        </g>

        {/* Zones */}
        {FLOOR_ZONES.map(z => {
          const occColor = z.occupancy > 0.85 ? 'danger' : z.occupancy > 0.7 ? 'warn' : '';
          const isStaging = z.id === 'STG';
          const isFocused = focus === z.id;
          return (
            <g key={z.id}
               className={'floor-zone' + (isStaging ? ' staging' : '')}
               onClick={() => setFocus(focus === z.id ? null : z.id)}
               style={isFocused ? { filter: 'brightness(0.92)' } : undefined}>
              <rect x={z.x} y={z.y} width={z.w} height={z.h} rx="0.8"
                    style={isFocused ? { strokeWidth: 1.5, stroke: 'hsl(var(--accent-h) var(--accent-s) 40%)' } : undefined} />
              {!isStaging && (
                <>
                  <text x={z.x + 1.5} y={z.y + 5} className="floor-zone-id">{z.id}</text>
                  <text x={z.x + 1.5} y={z.y + 8.5} className="floor-zone-label">{z.label}</text>
                  {/* Occupancy bar inside zone */}
                  <rect x={z.x + 1.5} y={z.y + z.h - 4} width={z.w - 3} height="1.5" className="floor-occ-bar" rx="0.3" />
                  <rect x={z.x + 1.5} y={z.y + z.h - 4} width={(z.w - 3) * z.occupancy} height="1.5"
                        className={'floor-occ-fill ' + occColor} rx="0.3" />
                  <text x={z.x + z.w - 1.5} y={z.y + z.h - 5.5} textAnchor="end" className="floor-zone-occ">
                    {(z.occupancy * 100).toFixed(0)}% · {z.racks} rak
                  </text>
                </>
              )}
              {isStaging && (
                <>
                  <text x={z.x + z.w / 2} y={z.y + z.h / 2 + 1} textAnchor="middle" className="floor-zone-id" style={{fontSize:'3.5px'}}>STAGING</text>
                  <text x={z.x + z.w / 2} y={z.y + z.h / 2 + 5} textAnchor="middle" className="floor-zone-occ">Inbound · Pre-shipping</text>
                </>
              )}
            </g>
          );
        })}

        {/* Aisle lines (decorative) */}
        <line x1="2" y1="29" x2="98" y2="29" stroke="hsl(215 22% 88%)" strokeWidth="0.25" strokeDasharray="0.6 0.6" />
        <line x1="2" y1="57" x2="98" y2="57" stroke="hsl(215 22% 88%)" strokeWidth="0.25" strokeDasharray="0.6 0.6" />

        {/* Compass */}
        <g transform="translate(92, 8)">
          <circle r="3" fill="white" stroke="hsl(215 22% 70%)" strokeWidth="0.2" />
          <text textAnchor="middle" y="0.8" style={{fontSize:'1.8px', fill:'hsl(215 22% 32%)', fontFamily:"'IBM Plex Mono', monospace", fontWeight:600}}>N</text>
          <path d="M 0 -2 L 0.6 0 L 0 -0.4 L -0.6 0 Z" fill="hsl(0 70% 50%)" />
        </g>
      </svg>
    </div>
  );
}

function FloorLegend() {
  return (
    <div className="floor-legend">
      <span><span className="floor-legend-swatch" style={{background:'hsl(var(--accent-h) var(--accent-s) 55%)'}} /> Normal &lt;70%</span>
      <span><span className="floor-legend-swatch" style={{background:'hsl(38 90% 50%)'}} /> Padat 70-85%</span>
      <span><span className="floor-legend-swatch" style={{background:'hsl(0 70% 52%)'}} /> Penuh &gt;85%</span>
      <span><span className="floor-legend-swatch" style={{background:'hsl(38 60% 90%)', border:'1px dashed hsl(35 60% 60%)'}} /> Staging</span>
    </div>
  );
}

function ZoneDetail({ zone, onClose }) {
  if (!zone) return null;
  const skuCount = PRODUCTS.filter(p => p.cat === zone.category).length;
  const stockTotal = PRODUCTS.filter(p => p.cat === zone.category).reduce((s, p) => s + (p.stock.pusat || 0), 0);
  return (
    <div style={{marginTop:12, padding:12, background:'hsl(var(--accent-h) var(--accent-s) 96%)', borderRadius:6, border:'1px solid hsl(var(--accent-h) var(--accent-s) 80%)'}}>
      <div className="row between mb-2">
        <div>
          <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:600}}>Zone {zone.id}</div>
          <div style={{fontSize:14, fontWeight:600, marginTop:2}}>{zone.label}</div>
        </div>
        <button className="btn ghost sm" onClick={onClose}><Icon name="x" size={13} /></button>
      </div>
      <div className="grid-4" style={{gap:10}}>
        <div className="info-cell"><div className="info-label">Utilisasi</div><div className="info-value" style={{fontSize:14}}>{(zone.occupancy * 100).toFixed(0)}%</div></div>
        <div className="info-cell"><div className="info-label">Total Rak</div><div className="info-value" style={{fontSize:14}}>{zone.racks}</div></div>
        <div className="info-cell"><div className="info-label">SKU Aktif</div><div className="info-value" style={{fontSize:14}}>{skuCount}</div></div>
        <div className="info-cell"><div className="info-label">Stok di Pusat</div><div className="info-value" style={{fontSize:14}}>{stockTotal}</div></div>
      </div>
    </div>
  );
}

// ── Inbound/Outbound flow chart ────────────────────────────────────────────

function FlowChart() {
  const max = Math.max(...DAILY_FLOW.flatMap(d => [d.in, d.out]));
  const today = TODAY;
  return (
    <div>
      <div className="flow-chart">
        {DAILY_FLOW.map((d, i) => {
          const isToday = d.date === today;
          const inH  = (d.in  / max) * 95;
          const outH = (d.out / max) * 95;
          return (
            <div key={d.date} className={'flow-bar' + (isToday ? ' today' : '')} title={`${d.date}\nMasuk: ${d.in} · Keluar: ${d.out}`}>
              <div className="in" style={{height: inH + '%'}} />
              <div className="out" style={{height: outH + '%'}} />
            </div>
          );
        })}
      </div>
      <div className="row between" style={{marginTop:6, fontSize:10.5, color:'hsl(var(--muted-foreground))', fontFamily:"'IBM Plex Mono', monospace"}}>
        <span>1 Apr</span>
        <span>10</span>
        <span>15</span>
        <span>20</span>
        <span style={{fontWeight:600, color:'hsl(var(--accent-h) var(--accent-s) 35%)'}}>Hari ini (22)</span>
      </div>
      <div className="row" style={{marginTop:8, gap:14, fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
        <span><span className="floor-legend-swatch" style={{background:'hsl(var(--accent-h) var(--accent-s) 55%)'}} /> Inbound (unit)</span>
        <span><span className="floor-legend-swatch" style={{background:'hsl(var(--accent-h) var(--accent-s) 75%)'}} /> Outbound (unit)</span>
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;