// Pengeluaran (expense tracker) + AsetTetap (fixed asset register).
const { useState: useState$ops, useMemo: useMemo$ops } = React;

// ── Pengeluaran ────────────────────────────────────────────────────────────

function Pengeluaran({ period, role }) {
  const [categoryFilter, setCategoryFilter] = useState$ops('all');
  const [query, setQuery] = useState$ops('');

  // Decorate expenses with derived code/jid
  const allExpenses = useMemo$ops(() => {
    return EXPENSES
      .filter(e => e.date.startsWith(period))
      .map(e => {
        const [jid, code] = e.id.split(':');
        return { ...e, jid, code };
      });
  }, [period]);

  const items = useMemo$ops(() => {
    return allExpenses
      .filter(e => categoryFilter === 'all' || e.code === categoryFilter)
      .filter(e => !query || e.desc.toLowerCase().includes(query.toLowerCase()))
      .sort((a, b) => b.date.localeCompare(a.date));
  }, [allExpenses, categoryFilter, query]);

  // Categories from expense accounts present in period
  const categoryStats = useMemo$ops(() => {
    const map = new Map();
    allExpenses.forEach(e => {
      if (!map.has(e.code)) map.set(e.code, { code: e.code, name: ACC[e.code]?.name || e.code, total: 0, count: 0 });
      const m = map.get(e.code);
      m.total += e.amount; m.count += 1;
    });
    return [...map.values()].sort((a, b) => b.total - a.total);
  }, [allExpenses]);

  const grandTotal = allExpenses.reduce((s, e) => s + e.amount, 0);
  const filteredTotal = items.reduce((s, e) => s + e.amount, 0);
  const can = ROLES[role].can;

  const accentBase = 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))';

  return (
    <div className="col gap-4">
      {/* Summary */}
      <div className="stat-grid" style={{gridTemplateColumns:'repeat(4, 1fr)'}}>
        <KpiCard label="Total Pengeluaran" value={rupiah(grandTotal, { sym: true })} delta={grandTotal * -0.04} deltaLabel="vs bulan lalu" highlight />
        <KpiCard label="Jumlah Transaksi" value={String(allExpenses.length)} delta={allExpenses.length} deltaLabel="entri bulan ini" />
        <KpiCard label="Kategori Aktif" value={String(categoryStats.length)} delta={categoryStats.length} deltaLabel="dari 8 kategori" />
        <KpiCard label="Rata-rata / Transaksi" value={rupiah(allExpenses.length ? grandTotal / allExpenses.length : 0, { sym: true })} delta={0} deltaLabel="bulan ini" />
      </div>

      <div style={{display:'grid', gridTemplateColumns:'320px 1fr', gap:14}}>
        {/* Category breakdown */}
        <Card>
          <div className="card-header"><div><div className="card-title">Per Kategori</div><div className="card-desc">Klik untuk filter</div></div></div>
          <div className="card-body col gap-2">
            <button
              onClick={() => setCategoryFilter('all')}
              className={'nav-item' + (categoryFilter === 'all' ? ' active' : '')}
              style={{justifyContent:'space-between', padding:'8px 10px'}}
            >
              <span style={{fontSize:12.5, fontWeight:500}}>Semua Kategori</span>
              <span className="tnum" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{rupiah(grandTotal, { compact: true })}</span>
            </button>
            {categoryStats.map(c => {
              const pct = (c.total / grandTotal) * 100;
              return (
                <button
                  key={c.code}
                  onClick={() => setCategoryFilter(c.code)}
                  className={'nav-item' + (categoryFilter === c.code ? ' active' : '')}
                  style={{flexDirection:'column', alignItems:'stretch', gap:6, padding:'8px 10px'}}
                >
                  <div className="row between" style={{width:'100%'}}>
                    <div style={{display:'flex', flexDirection:'column', alignItems:'flex-start', minWidth:0}}>
                      <span className="acct-code" style={{fontSize:10}}>{c.code}</span>
                      <span style={{fontSize:12, fontWeight:500, marginTop:2}}>{c.name}</span>
                    </div>
                    <div style={{textAlign:'right'}}>
                      <div className="tnum" style={{fontSize:12, fontWeight:600}}>{rupiah(c.total, { compact: true })}</div>
                      <div style={{fontSize:10, color:'hsl(var(--muted-foreground))'}}>{c.count} transaksi · {pct.toFixed(1)}%</div>
                    </div>
                  </div>
                  <div className="progress" style={{width:'100%'}}>
                    <div className="progress-bar" style={{width: pct + '%'}} />
                  </div>
                </button>
              );
            })}
          </div>
        </Card>

        {/* Transactions */}
        <Card>
          <div className="card-header">
            <div>
              <div className="card-title">Daftar Pengeluaran</div>
              <div className="card-desc">{items.length} transaksi · total {rupiah(filteredTotal, { sym: true })}</div>
            </div>
            <div className="row gap-2">
              <input className="input sm" placeholder="Cari…" value={query} onChange={e => setQuery(e.target.value)} style={{width:200}} />
              <Btn icon="download" size="sm">Ekspor</Btn>
              {can.entry && <Btn tone="primary" icon="plus" size="sm">Tambah</Btn>}
            </div>
          </div>
          <div className="card-body flush">
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr>
                    <th style={{width:110}}>Tanggal</th>
                    <th style={{width:130}}>No. Jurnal</th>
                    <th>Keterangan</th>
                    <th>Kategori</th>
                    <th className="num" style={{width:160}}>Nilai</th>
                  </tr>
                </thead>
                <tbody>
                  {items.length === 0 && <tr><td colSpan={5} className="empty">Tidak ada pengeluaran pada filter ini.</td></tr>}
                  {items.map((e, i) => (
                    <tr key={i}>
                      <td className="muted tnum">{formatDateID(e.date)}</td>
                      <td className="code">{e.jid}</td>
                      <td>{e.desc}</td>
                      <td>
                        <div className="row gap-2" style={{alignItems:'center'}}>
                          <span className="acct-code">{e.code}</span>
                          <span style={{fontSize:12}}>{ACC[e.code]?.name}</span>
                        </div>
                      </td>
                      <td className="num tnum" style={{fontWeight:500}}>{rupiah(e.amount, { sym: true })}</td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr>
                    <td colSpan={4} style={{fontWeight:600}}>Total</td>
                    <td className="num tnum" style={{fontWeight:600}}>{rupiah(filteredTotal, { sym: true })}</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

// ── Aset Tetap ─────────────────────────────────────────────────────────────

function depreciationToDate(asset, asOfPeriod) {
  // Straight-line depreciation, monthly basis from acquired date to asOfPeriod end.
  if (!asset.useful || asset.useful <= 0) return 0;
  const acquired = new Date(asset.acquired);
  const [y, m] = asOfPeriod.split('-').map(Number);
  const asOf = new Date(y, m, 0); // last day of period
  const months = Math.max(0, (asOf.getFullYear() - acquired.getFullYear()) * 12 + (asOf.getMonth() - acquired.getMonth()));
  const totalMonths = asset.useful * 12;
  const used = Math.min(months, totalMonths);
  const dep = (asset.cost / totalMonths) * used;
  return Math.min(dep, asset.cost);
}

function AsetTetap({ period, role }) {
  const [groupFilter, setGroupFilter] = useState$ops('all');
  const [query, setQuery] = useState$ops('');

  const items = useMemo$ops(() => {
    return FIXED_ASSETS
      .filter(a => groupFilter === 'all' || a.cat === groupFilter)
      .filter(a => !query || a.name.toLowerCase().includes(query.toLowerCase()) || a.id.toLowerCase().includes(query.toLowerCase()))
      .map(a => ({ ...a, dep: a.accum, net: a.net }))
      .sort((a, b) => b.cost - a.cost);
  }, [groupFilter, query, period]);

  const totals = items.reduce((acc, a) => {
    acc.cost += a.cost; acc.dep += a.dep; acc.net += a.net;
    return acc;
  }, { cost: 0, dep: 0, net: 0 });

  const groups = useMemo$ops(() => {
    const m = new Map();
    FIXED_ASSETS.forEach(a => {
      if (!m.has(a.cat)) m.set(a.cat, { group: a.cat, count: 0, cost: 0 });
      const g = m.get(a.cat); g.count += 1; g.cost += a.cost;
    });
    return [...m.values()];
  }, []);

  const can = ROLES[role].can;

  return (
    <div className="col gap-4">
      <div className="stat-grid" style={{gridTemplateColumns:'repeat(4, 1fr)'}}>
        <KpiCard label="Harga Perolehan" value={rupiah(totals.cost, { sym: true })} delta={0} deltaLabel={`${items.length} aktiva`} />
        <KpiCard label="Akumulasi Penyusutan" value={rupiah(totals.dep, { sym: true })} delta={-totals.dep} deltaLabel="terakumulasi" />
        <KpiCard label="Nilai Buku Bersih" value={rupiah(totals.net, { sym: true })} delta={totals.net} deltaLabel={periodLabel(period)} highlight />
        <KpiCard label="Penyusutan Bulan Ini" value={rupiah(accountMovement('5-2010', period).debit, { sym: true })} delta={0} deltaLabel="garis lurus" />
      </div>

      {/* Group tabs */}
      <Card>
        <div className="card-body" style={{padding:'12px 16px'}}>
          <div className="row" style={{gap:8, flexWrap:'wrap'}}>
            <button
              onClick={() => setGroupFilter('all')}
              className={'tab' + (groupFilter === 'all' ? ' active' : '')}
              style={{padding:'6px 12px'}}
            >
              Semua ({FIXED_ASSETS.length})
            </button>
            {groups.map(g => (
              <button
                key={g.group}
                onClick={() => setGroupFilter(g.group)}
                className={'tab' + (groupFilter === g.group ? ' active' : '')}
                style={{padding:'6px 12px'}}
              >
                {g.group} ({g.count})
              </button>
            ))}
            <input className="input sm" placeholder="Cari aset…" value={query} onChange={e => setQuery(e.target.value)} style={{marginLeft:'auto', width:220}} />
            <Btn icon="download" size="sm">Ekspor</Btn>
            {can.entry && <Btn tone="primary" icon="plus" size="sm">Tambah Aset</Btn>}
          </div>
        </div>
      </Card>

      {/* Register */}
      <Card>
        <div className="card-header"><div><div className="card-title">Register Aset Tetap</div><div className="card-desc">Per {formatDateID(period + '-30')} · Penyusutan garis lurus</div></div></div>
        <div className="card-body flush">
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th style={{width:110}}>Kode</th>
                  <th>Nama Aset</th>
                  <th>Kelompok</th>
                  <th style={{width:110}}>Tgl Perolehan</th>
                  <th className="num" style={{width:60}}>Umur</th>
                  <th className="num" style={{width:140}}>Harga Perolehan</th>
                  <th className="num" style={{width:140}}>Akum. Penyusutan</th>
                  <th className="num" style={{width:140}}>Nilai Buku</th>
                  <th style={{width:90}}>Status</th>
                </tr>
              </thead>
              <tbody>
                {items.map(a => {
                  const ratio = a.cost > 0 ? a.net / a.cost : 0;
                  const tone = ratio > 0.5 ? 'ok' : ratio > 0.2 ? 'warn' : 'danger';
                  const label = ratio > 0.5 ? 'Baik' : ratio > 0.2 ? 'Susut' : 'Akhir';
                  return (
                    <tr key={a.id}>
                      <td className="code">{a.id}</td>
                      <td style={{fontWeight:500}}>{a.name}</td>
                      <td className="muted">{a.cat}</td>
                      <td className="muted tnum">{formatDateID(a.acquired)}</td>
                      <td className="num tnum muted">{a.useful ? a.useful + ' th' : '—'}</td>
                      <td className="num tnum">{rupiah(a.cost)}</td>
                      <td className="num tnum muted">({rupiah(a.dep)})</td>
                      <td className="num tnum" style={{fontWeight:500}}>{rupiah(a.net, { sym: true })}</td>
                      <td><Pill tone={tone} dot>{label}</Pill></td>
                    </tr>
                  );
                })}
              </tbody>
              <tfoot>
                <tr>
                  <td colSpan={5} style={{fontWeight:600}}>Total ({items.length} aktiva)</td>
                  <td className="num tnum" style={{fontWeight:600}}>{rupiah(totals.cost)}</td>
                  <td className="num tnum" style={{fontWeight:600}}>({rupiah(totals.dep)})</td>
                  <td className="num tnum" style={{fontWeight:600}}>{rupiah(totals.net, { sym: true })}</td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { Pengeluaran, depreciationToDate, AsetTetap });