// Sparepart inventory management
const { useState: useStateSp, useMemo: useMemoSp } = React;

function SparepartPage({ role, pushToast }) {
  const [filter, setFilter] = useStateSp('all');
  const [cat, setCat] = useStateSp('all');
  const [q, setQ] = useStateSp('');

  const categories = ['all', ...Array.from(new Set(SPAREPART.map(s => s.kategori)))];

  const filtered = useMemoSp(() => SPAREPART.filter(s => {
    if (cat !== 'all' && s.kategori !== cat) return false;
    if (filter === 'low' && stockLevel(s) !== 'low') return false;
    if (filter === 'out' && s.stok > 0) return false;
    if (q) {
      const hay = `${s.nama} ${s.sku} ${s.merk}`.toLowerCase();
      if (!hay.includes(q.toLowerCase())) return false;
    }
    return true;
  }), [filter, cat, q]);

  const totalValue = SPAREPART.reduce((s, sp) => s + sp.stok * sp.hargaBeli, 0);
  const lowStock = SPAREPART.filter(s => stockLevel(s) === 'low');

  return (
    <div>
      <PageHeader
        eyebrow="Inventory"
        title="Sparepart & Stok"
        subtitle={`${SPAREPART.length} SKU aktif · ${lowStock.length} item stok rendah perlu reorder`}
        actions={<><Btn icon="upload" tone="outline">Import CSV</Btn><Btn icon="plus">Tambah SKU</Btn></>}
      />

      <div className="grid mb-6" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
        <Kpi label="Total SKU" value={SPAREPART.length} hint="aktif tersedia" icon="package" tone="info" />
        <Kpi label="Nilai Inventory" value={rupiah(totalValue, {compact:true})} hint="harga modal" icon="dollar" tone="good" />
        <Kpi label="Stok Rendah" value={lowStock.length} hint="≤ minimum stok" icon="alert" tone="warn" />
        <Kpi label="Terjual 30hr" value={SPAREPART.reduce((s, sp) => s + sp.terjual30d, 0)} hint="unit total" icon="trending" tone="accent" />
      </div>

      {lowStock.length > 0 && (
        <Card style={{padding:14, marginBottom:14, background:'hsl(var(--warn) / 0.06)', borderColor:'hsl(var(--warn) / 0.3)'}}>
          <div className="row gap-2" style={{alignItems:'flex-start'}}>
            <div style={{width:36, height:36, borderRadius:8, background:'hsl(var(--warn) / 0.18)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
              <Icon name="alert" size={18} color="hsl(var(--warn))" />
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:13, fontWeight:650, marginBottom:3}}>{lowStock.length} sparepart hampir habis</div>
              <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginBottom:6}}>Reorder sebelum stok kosong agar tidak menolak customer.</div>
              <div className="row gap-1" style={{flexWrap:'wrap'}}>
                {lowStock.slice(0, 5).map(s => (
                  <span key={s.id} className="svc-item-chip" style={{borderColor:'hsl(var(--warn) / 0.4)'}}>{s.nama.split(' ').slice(0,3).join(' ')} ({s.stok})</span>
                ))}
              </div>
            </div>
            <Btn tone="outline">Buat PO</Btn>
          </div>
        </Card>
      )}

      <Card style={{padding:12, marginBottom:12}}>
        <div className="row gap-2" style={{flexWrap:'wrap', alignItems:'center'}}>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Cari nama, SKU, merk…" style={{flex:1, minWidth:200, padding:'7px 12px', border:'1px solid hsl(var(--border))', borderRadius:8, fontSize:13, background:'hsl(var(--card))'}} />
          <select value={cat} onChange={e => setCat(e.target.value)} style={{padding:'7px 10px', border:'1px solid hsl(var(--border))', borderRadius:8, fontSize:13, background:'hsl(var(--card))'}}>
            {categories.map(c => <option key={c} value={c}>{c === 'all' ? 'Semua kategori' : c}</option>)}
          </select>
          <div className="row gap-1" style={{background:'hsl(var(--muted))', borderRadius:8, padding:3}}>
            {[{id:'all',l:'Semua'},{id:'low',l:'Stok Rendah'},{id:'out',l:'Habis'}].map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)} style={{padding:'5px 11px', fontSize:12, fontWeight:600, borderRadius:6, background: filter === f.id ? 'hsl(var(--card))' : 'transparent', border:'none', cursor:'pointer'}}>{f.l}</button>
            ))}
          </div>
        </div>
      </Card>

      <Card style={{padding:0, overflow:'hidden'}}>
        <table className="table">
          <thead>
            <tr>
              <th>Sparepart</th>
              <th style={{width:90}}>Kategori</th>
              <th style={{width:90}}>Merk</th>
              <th style={{width:140}}>Stok</th>
              <th style={{width:120}}>Harga Jual</th>
              <th style={{width:100}}>Terjual 30hr</th>
              <th style={{width:120}}>Margin</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(sp => {
              const lvl = stockLevel(sp);
              const margin = Math.round(((sp.hargaJual - sp.hargaBeli) / sp.hargaJual) * 100);
              const pct = Math.min(100, Math.round((sp.stok / (sp.min * 3)) * 100));
              return (
                <tr key={sp.id}>
                  <td>
                    <div style={{fontWeight:600, fontSize:13}}>{sp.nama}</div>
                    <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{sp.sku}</div>
                  </td>
                  <td><Pill tone="muted">{sp.kategori}</Pill></td>
                  <td style={{fontSize:12}}>{sp.merk}</td>
                  <td>
                    <div className="row gap-2" style={{alignItems:'center'}}>
                      <span className="mono" style={{fontSize:13, fontWeight:650, minWidth:32, color: lvl === 'low' ? 'hsl(var(--warn))' : lvl === 'out' ? 'hsl(var(--danger))' : 'inherit'}}>{sp.stok}</span>
                      <div className="stock-meter">
                        <div className="stock-meter-fill" style={{width: pct + '%', background: lvl === 'low' ? 'hsl(var(--warn))' : lvl === 'out' ? 'hsl(var(--danger))' : 'hsl(var(--good))'}} />
                      </div>
                      <span style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>min {sp.min}</span>
                    </div>
                  </td>
                  <td className="mono" style={{fontVariantNumeric:'tabular-nums', fontWeight:600}}>{rupiah(sp.hargaJual, {compact:true})}</td>
                  <td className="mono" style={{fontSize:12}}>{sp.terjual30d}</td>
                  <td>
                    <span style={{fontSize:12, fontWeight:600, color: margin >= 30 ? 'hsl(var(--good))' : 'hsl(var(--muted-foreground))'}}>{margin}%</span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

window.SparepartPage = SparepartPage;