// Buku Besar (General Ledger) and Jurnal Umum.
const { useState: useState$ledger, useMemo: useMemo$ledger } = React;

// ── Buku Besar ─────────────────────────────────────────────────────────────

function BukuBesar({ period }) {
  const [accountCode, setAccountCode] = useState$ledger('1-1010');
  const [filter, setFilter] = useState$ledger('');

  const account = ACC[accountCode];
  const opening = OPENING_BALANCES[accountCode] || 0;
  const direction = (account.type === 'aset' || account.type === 'beban') ? 'debit' : 'credit';

  const movements = useMemo$ledger(() => {
    const lines = [];
    JOURNALS
      .filter(j => j.date.startsWith(period) && j.status === 'posted')
      .sort((a, b) => a.date.localeCompare(b.date) || a.id.localeCompare(b.id))
      .forEach(j => {
        j.lines.forEach(l => {
          if (l.code === accountCode) lines.push({ date: j.date, jid: j.id, desc: j.desc, debit: l.debit, credit: l.credit });
        });
      });
    return lines;
  }, [accountCode, period]);

  let running = opening;
  const rows = movements.map(m => {
    if (direction === 'debit') running += m.debit - m.credit;
    else running += m.credit - m.debit;
    return { ...m, balance: running };
  });

  const totalDebit = movements.reduce((s, m) => s + m.debit, 0);
  const totalCredit = movements.reduce((s, m) => s + m.credit, 0);
  const closing = direction === 'debit' ? opening + totalDebit - totalCredit : opening + totalCredit - totalDebit;

  const filtered = filter
    ? rows.filter(r => r.desc.toLowerCase().includes(filter.toLowerCase()) || r.jid.toLowerCase().includes(filter.toLowerCase()))
    : rows;

  // Account picker grouped by type
  const grouped = useMemo$ledger(() => {
    const g = { aset: [], liabilitas: [], ekuitas: [], pendapatan: [], beban: [] };
    ACCOUNTS.forEach(a => g[a.type]?.push(a));
    return g;
  }, []);

  return (
    <div className="col gap-4">
      <div style={{display:'grid', gridTemplateColumns:'280px 1fr', gap:14}}>
        {/* Account picker */}
        <Card>
          <div className="card-header"><div><div className="card-title">Daftar Akun</div><div className="card-desc">Pilih untuk lihat mutasi</div></div></div>
          <div className="card-body flush" style={{maxHeight:560, overflowY:'auto'}}>
            {[
              ['aset', 'Aset'],
              ['liabilitas', 'Liabilitas'],
              ['ekuitas', 'Ekuitas'],
              ['pendapatan', 'Pendapatan'],
              ['beban', 'Beban'],
            ].map(([k, label]) => (
              <div key={k}>
                <div className="sidebar-section" style={{padding:'8px 14px 4px'}}>{label}</div>
                {grouped[k].map(a => (
                  <button
                    key={a.code}
                    onClick={() => setAccountCode(a.code)}
                    className={'nav-item' + (accountCode === a.code ? ' active' : '')}
                    style={{padding:'7px 14px', borderRadius:0, gap:10}}
                  >
                    <span className="acct-code" style={{minWidth:54}}>{a.code}</span>
                    <span style={{fontSize:12, flex:1, textAlign:'left'}}>{a.name}</span>
                  </button>
                ))}
              </div>
            ))}
          </div>
        </Card>

        {/* Ledger table */}
        <Card>
          <div className="card-header">
            <div>
              <div className="card-title row gap-2"><span className="acct-code">{account.code}</span><span>{account.name}</span></div>
              <div className="card-desc">Mutasi periode {periodLabel(period)} · saldo normal {direction === 'debit' ? 'Debet' : 'Kredit'}</div>
            </div>
            <div className="row gap-2">
              <input className="input sm" placeholder="Cari keterangan…" value={filter} onChange={e => setFilter(e.target.value)} style={{width:200}} />
              <Btn icon="download" size="sm">Ekspor</Btn>
            </div>
          </div>

          <div className="card-body" style={{paddingBottom:0}}>
            <div className="stat-grid" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:10, marginBottom:12}}>
              <div className="stat" style={{padding:'10px 12px'}}>
                <div className="stat-label" style={{fontSize:10}}>Saldo Awal</div>
                <div className="tnum" style={{fontSize:14, fontWeight:600, marginTop:2}}>{rupiah(opening, { sym: true })}</div>
              </div>
              <div className="stat" style={{padding:'10px 12px'}}>
                <div className="stat-label" style={{fontSize:10}}>Total Debet</div>
                <div className="tnum" style={{fontSize:14, fontWeight:600, marginTop:2}}>{rupiah(totalDebit)}</div>
              </div>
              <div className="stat" style={{padding:'10px 12px'}}>
                <div className="stat-label" style={{fontSize:10}}>Total Kredit</div>
                <div className="tnum" style={{fontSize:14, fontWeight:600, marginTop:2}}>{rupiah(totalCredit)}</div>
              </div>
              <div className="stat" style={{padding:'10px 12px', background:'hsl(var(--accent-h) var(--accent-s) 96%)', borderColor:'hsl(var(--accent-h) var(--accent-s) 80%)'}}>
                <div className="stat-label" style={{fontSize:10}}>Saldo Akhir</div>
                <div className="tnum" style={{fontSize:14, fontWeight:600, marginTop:2}}>{rupiah(closing, { sym: true })}</div>
              </div>
            </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:120}}>No. Jurnal</th>
                    <th>Keterangan</th>
                    <th className="num" style={{width:130}}>Debet</th>
                    <th className="num" style={{width:130}}>Kredit</th>
                    <th className="num" style={{width:150}}>Saldo</th>
                  </tr>
                </thead>
                <tbody>
                  <tr style={{background:'hsl(220 22% 98%)'}}>
                    <td colSpan={5} className="muted" style={{fontStyle:'italic'}}>Saldo Awal</td>
                    <td className="num tnum" style={{fontWeight:500}}>{rupiah(opening, { sym: true })}</td>
                  </tr>
                  {filtered.length === 0 && (
                    <tr><td colSpan={6} className="empty">Tidak ada mutasi pada periode ini.</td></tr>
                  )}
                  {filtered.map((r, i) => (
                    <tr key={i}>
                      <td className="muted tnum">{formatDateID(r.date)}</td>
                      <td className="code">{r.jid}</td>
                      <td>{r.desc}</td>
                      <td className="num tnum">{r.debit ? rupiah(r.debit) : '—'}</td>
                      <td className="num tnum">{r.credit ? rupiah(r.credit) : '—'}</td>
                      <td className="num tnum" style={{fontWeight:500}}>{rupiah(r.balance, { sym: true })}</td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr>
                    <td colSpan={3} style={{fontWeight:600}}>Saldo Akhir</td>
                    <td className="num tnum" style={{fontWeight:600}}>{rupiah(totalDebit)}</td>
                    <td className="num tnum" style={{fontWeight:600}}>{rupiah(totalCredit)}</td>
                    <td className="num tnum" style={{fontWeight:600}}>{rupiah(closing, { sym: true })}</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}

// ── Jurnal Umum ────────────────────────────────────────────────────────────

function JurnalUmum({ period, role }) {
  const [statusFilter, setStatusFilter] = useState$ledger('all');
  const [query, setQuery] = useState$ledger('');
  const [expandedId, setExpandedId] = useState$ledger(null);

  const journals = useMemo$ledger(() => {
    return JOURNALS
      .filter(j => j.date.startsWith(period))
      .filter(j => statusFilter === 'all' || j.status === statusFilter)
      .filter(j => !query || j.desc.toLowerCase().includes(query.toLowerCase()) || j.id.toLowerCase().includes(query.toLowerCase()))
      .sort((a, b) => b.date.localeCompare(a.date) || b.id.localeCompare(a.id));
  }, [statusFilter, query, period]);

  const totals = journals.reduce((acc, j) => {
    const sum = j.lines.reduce((s, l) => s + l.debit, 0);
    acc.amount += sum;
    if (j.status === 'posted') acc.posted += 1;
    if (j.status === 'pending') acc.pending += 1;
    return acc;
  }, { amount: 0, posted: 0, pending: 0 });

  const can = ROLES[role].can;

  return (
    <div className="col gap-4">
      {/* Toolbar */}
      <Card>
        <div className="card-body" style={{padding:'14px 18px'}}>
          <div className="row" style={{gap:12, flexWrap:'wrap'}}>
            <div className="tabs">
              {[['all','Semua'], ['posted','Posted'], ['pending','Pending']].map(([k, label]) => (
                <button key={k} onClick={() => setStatusFilter(k)} className={'tab' + (statusFilter === k ? ' active' : '')}>{label}</button>
              ))}
            </div>
            <input className="input sm" placeholder="Cari nomor jurnal atau keterangan…" value={query} onChange={e => setQuery(e.target.value)} style={{flex:1, minWidth:240}} />
            <div className="row gap-2">
              <Btn icon="filter" size="sm">Filter</Btn>
              <Btn icon="download" size="sm">Ekspor</Btn>
              {can.entry && <Btn tone="primary" icon="plus" size="sm">Entri Baru</Btn>}
            </div>
          </div>
          <div className="row gap-4 mt-3" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
            <span>{journals.length} entri</span>
            <span>·</span>
            <span><b style={{color:'hsl(var(--success))'}}>{totals.posted}</b> posted</span>
            <span><b style={{color:'hsl(var(--warning))'}}>{totals.pending}</b> pending</span>
            <span style={{marginLeft:'auto'}}>Total nilai: <b className="tnum" style={{color:'hsl(var(--foreground))'}}>{rupiah(totals.amount, { sym: true })}</b></span>
          </div>
        </div>
      </Card>

      {/* Journal list */}
      <Card>
        <div className="card-body flush">
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th style={{width:32}}></th>
                  <th style={{width:100}}>Tanggal</th>
                  <th style={{width:130}}>No. Jurnal</th>
                  <th>Keterangan</th>
                  <th className="num" style={{width:160}}>Nilai</th>
                  <th style={{width:110}}>Status</th>
                  <th style={{width:140}}></th>
                </tr>
              </thead>
              <tbody>
                {journals.length === 0 && (
                  <tr><td colSpan={7} className="empty">Tidak ada entri pada filter ini.</td></tr>
                )}
                {journals.map(j => {
                  const sum = j.lines.reduce((s, l) => s + l.debit, 0);
                  const isOpen = expandedId === j.id;
                  return (
                    <Fragment key={j.id}>
                      <tr style={{cursor:'pointer'}} onClick={() => setExpandedId(isOpen ? null : j.id)}>
                        <td><Icon name={isOpen ? 'chevronDown' : 'chevronRight'} size={14} className="icon" /></td>
                        <td className="muted tnum">{formatDateID(j.date)}</td>
                        <td className="code">{j.id}</td>
                        <td>{j.desc}</td>
                        <td className="num tnum" style={{fontWeight:500}}>{rupiah(sum, { sym: true })}</td>
                        <td>{j.status === 'posted' ? <Pill tone="ok" dot>Posted</Pill> : <Pill tone="warn" dot>Pending</Pill>}</td>
                        <td onClick={e => e.stopPropagation()}>
                          <div className="row gap-2" style={{justifyContent:'flex-end'}}>
                            {j.status === 'pending' && can.approve && <Btn tone="primary" size="sm" icon="check">Setujui</Btn>}
                            {can.entry && j.status === 'pending' && <Btn tone="ghost" size="sm" icon="edit">Edit</Btn>}
                            {!can.approve && !can.entry && <Btn tone="ghost" size="sm" icon="search">Lihat</Btn>}
                          </div>
                        </td>
                      </tr>
                      {isOpen && (
                        <tr>
                          <td></td>
                          <td colSpan={6} style={{background:'hsl(220 22% 98%)', padding:'12px 18px'}}>
                            <table className="table" style={{background:'transparent'}}>
                              <thead>
                                <tr>
                                  <th style={{width:120}}>Akun</th>
                                  <th>Nama Akun</th>
                                  <th className="num" style={{width:140}}>Debet</th>
                                  <th className="num" style={{width:140}}>Kredit</th>
                                </tr>
                              </thead>
                              <tbody>
                                {j.lines.map((l, i) => (
                                  <tr key={i}>
                                    <td className="code">{l.code}</td>
                                    <td>{ACC[l.code]?.name || '—'}</td>
                                    <td className="num tnum">{l.debit ? rupiah(l.debit) : '—'}</td>
                                    <td className="num tnum">{l.credit ? rupiah(l.credit) : '—'}</td>
                                  </tr>
                                ))}
                              </tbody>
                              <tfoot>
                                <tr>
                                  <td colSpan={2} style={{fontWeight:600}}>Total</td>
                                  <td className="num tnum" style={{fontWeight:600}}>{rupiah(j.lines.reduce((s,l)=>s+l.debit,0))}</td>
                                  <td className="num tnum" style={{fontWeight:600}}>{rupiah(j.lines.reduce((s,l)=>s+l.credit,0))}</td>
                                </tr>
                              </tfoot>
                            </table>
                          </td>
                        </tr>
                      )}
                    </Fragment>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { BukuBesar, JurnalUmum });