// ============================================================
// BusManager — Laporan & Settings — wired
// ============================================================

function Laporan() {
  const { version } = useApp();
  void version;
  const [active, setActive] = useState("rekap-sewa");
  const [periode, setPeriode] = useState("bulan-ini");

  return (
    <div>
      <div className="page-head">
        <div className="ttl">
          <h2>Laporan & Rekap</h2>
          <div className="sub">Visibilitas operasional · ekspor PDF / Excel</div>
        </div>
        <div className="actions">
          <div className="chip-filter">
            <I.Calendar size={14} style={{color: "var(--ink-mute)"}} />
            <select value={periode} onChange={e => setPeriode(e.target.value)}>
              <option value="hari-ini">Hari Ini</option>
              <option value="minggu-ini">Minggu Ini</option>
              <option value="bulan-ini">Bulan Ini · Mei 2026</option>
              <option value="custom">Custom Range...</option>
            </select>
          </div>
        </div>
      </div>

      <div className="tabs">
        {[
          { k: "rekap-sewa", l: "Rekap Sewa" },
          { k: "per-bus", l: "Pendapatan per Bus" },
          { k: "kas", l: "Rekap Kas" },
          { k: "laba-rugi", l: "Laba / Rugi", adminOnly: true },
          { k: "sopir", l: "Aktivitas Sopir" },
        ].map(t => (
          <button key={t.k} className={`tab ${active === t.k ? "active" : ""}`} onClick={() => setActive(t.k)}>
            {t.l}
            {t.adminOnly && <I.Lock size={11} style={{marginLeft: 4, opacity: .6}} />}
          </button>
        ))}
      </div>

      {active === "rekap-sewa" && <RekapSewa />}
      {active === "per-bus" && <RekapPerBus />}
      {active === "kas" && <RekapKas />}
      {active === "laba-rugi" && <RekapLabaRugi />}
      {active === "sopir" && <RekapSopir />}
    </div>
  );
}

function RekapSewa() {
  const mei = window.RENTALS.filter(r => r.start?.startsWith("2026-05"));
  const byStatus = {
    booking: mei.filter(r => r.status === "booking"),
    dp: mei.filter(r => r.status === "dp"),
    lunas: mei.filter(r => r.status === "lunas"),
    selesai: mei.filter(r => r.status === "selesai"),
    batal: mei.filter(r => r.status === "batal"),
  };
  const totalNilai = mei.filter(r => r.status !== "batal").reduce((s,r) => s + (r.harga || 0), 0);

  const cetak = () => {
    window.printReport({
      title: "Rekap Sewa",
      periode: "Mei 2026",
      summary: [
        { lbl: "Total Transaksi", val: mei.length },
        { lbl: "Nilai Kontrak", val: window.RP(totalNilai) },
        { lbl: "Aktif", val: mei.length - byStatus.batal.length },
        { lbl: "Batal", val: byStatus.batal.length },
      ],
      headers: [
        { label: "Kode", width: "110px" },
        { label: "Tanggal", width: "90px" },
        { label: "Penyewa" },
        { label: "Tujuan" },
        { label: "Unit", width: "70px" },
        { label: "Nilai", align: "right", width: "120px" },
        { label: "Status", width: "70px" },
      ],
      rows: mei.sort((a,b) => a.start.localeCompare(b.start)).map(r => [
        r.kode, window.FDATE_SHORT(r.start),
        window.getCustomer(r.customerId)?.nama || "—",
        r.tujuan, window.getBus(r.busId)?.kode || "—",
        window.RP(r.harga), window.STATUS_LABEL[r.status],
      ]),
      totals: [
        { value: "TOTAL", colspan: 5 },
        window.RP(totalNilai),
        "",
      ],
    });
  };

  return (
    <div>
      <div style={{display: "flex", justifyContent: "flex-end", gap: 8, marginBottom: 14}}>
        <button className="btn" onClick={cetak}><I.Print size={15} /> Cetak PDF</button>
      </div>
      <div className="grid grid-4 mb-4">
        <div className="kpi">
          <div className="label">Total Transaksi</div>
          <div className="value">{mei.length}</div>
          <div className="delta">{mei.length - byStatus.batal.length} aktif · {byStatus.batal.length} batal</div>
        </div>
        <div className="kpi">
          <div className="label">Nilai Kontrak</div>
          <div className="value mono">{window.RP(totalNilai)}</div>
          <div className="delta">excl. transaksi batal</div>
        </div>
        <div className="kpi">
          <div className="label">Rata-rata per Trip</div>
          <div className="value mono">{window.RP(totalNilai / Math.max(1, mei.length - byStatus.batal.length))}</div>
        </div>
        <div className="kpi">
          <div className="label">Utilisasi Armada</div>
          <div className="value">68<span className="unit">%</span></div>
          <div className="delta up"><I.TrendUp size={12} /> +12% vs April</div>
        </div>
      </div>

      <div className="grid mb-4" style={{gridTemplateColumns: "1fr 1fr"}}>
        <div className="card">
          <div className="card-head"><h3>Breakdown Status</h3></div>
          <div style={{padding: 18}}>
            {Object.entries(byStatus).map(([k, list]) => {
              const pct = mei.length ? (list.length / mei.length) * 100 : 0;
              const colors = {booking: "var(--st-booking)", dp: "var(--st-dp)", lunas: "var(--st-lunas)", selesai: "oklch(0.62 0.008 250)", batal: "var(--st-batal)"};
              return (
                <div key={k} style={{marginBottom: 14}}>
                  <div style={{display: "flex", justifyContent: "space-between", marginBottom: 5, fontSize: 13}}>
                    <strong>{window.STATUS_LABEL[k]}</strong>
                    <span className="mono"><strong>{list.length}</strong> · {window.RP(list.reduce((s,r) => s + (r.harga || 0), 0))}</span>
                  </div>
                  <div className="prog" style={{height: 8}}><div className="fill" style={{width: `${pct}%`, background: colors[k]}} /></div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Trend Harian — Mei 2026</h3></div>
          <div style={{padding: 18}}>
            <div className="bar-chart" style={{height: 180, gap: 4}}>
              {Array.from({length: 31}, (_, i) => {
                const d = String(i+1).padStart(2,"0");
                const trips = window.RENTALS.filter(r => r.start === `2026-05-${d}` && r.status !== "batal");
                const v = trips.length;
                const h = (v / 3) * 100;
                return (
                  <div key={i} className="bar-col">
                    <div className="bar" style={{height: `${Math.max(h, 2)}%`, background: v > 0 ? "var(--brand)" : "var(--border)", borderRadius: "3px 3px 1px 1px"}} title={`${i+1} Mei: ${v} trip`} />
                    {(i+1) % 5 === 0 || i === 0 ? <div style={{fontSize: 10, color: "var(--ink-mute)"}}>{i+1}</div> : <div style={{height: 12}} />}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Detail Transaksi Mei 2026</h3><span className="sub">{mei.length} transaksi</span></div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr><th>Kode</th><th>Tanggal</th><th>Penyewa</th><th>Tujuan</th><th>Unit</th><th className="right">Nilai</th><th>Status</th></tr>
            </thead>
            <tbody>
              {mei.sort((a,b) => a.start.localeCompare(b.start)).map(r => (
                <tr key={r.id}>
                  <td className="mono" style={{fontSize: 12, color: "var(--ink-mute)"}}>{r.kode}</td>
                  <td>{window.FDATE_SHORT(r.start)}</td>
                  <td style={{fontSize: 13}}>{window.getCustomer(r.customerId)?.nama}</td>
                  <td style={{fontSize: 13}}>{r.tujuan}</td>
                  <td className="mono" style={{fontSize: 12}}>{window.getBus(r.busId)?.kode}</td>
                  <td className="num right">{window.RP(r.harga)}</td>
                  <td><StatusBadge s={r.status} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function RekapPerBus() {
  const data = window.BUSES.map(b => {
    const rentals = window.RENTALS.filter(r => r.busId === b.id && r.status !== "batal");
    const total = rentals.reduce((s,r) => s + (r.harga || 0), 0);
    return { bus: b, trips: rentals.length, total, rentals };
  }).sort((a,b) => b.total - a.total);
  const maxTotal = Math.max(...data.map(d => d.total), 1);
  const grand = data.reduce((s,d) => s + d.total, 0);

  const cetak = () => {
    window.printReport({
      title: "Pendapatan per Unit Bus",
      periode: "All time",
      summary: [
        { lbl: "Total Unit", val: data.length },
        { lbl: "Total Trip", val: data.reduce((s,d) => s+d.trips, 0) },
        { lbl: "Total Pendapatan", val: window.RP(grand) },
      ],
      headers: [
        { label: "Peringkat", width: "70px" },
        { label: "Unit", width: "80px" },
        { label: "Plat" },
        { label: "Trip", align: "right", width: "80px" },
        { label: "Total Pendapatan", align: "right", width: "160px" },
      ],
      rows: data.map((d, i) => [
        `#${i+1}`, d.bus.kode, d.bus.plate, `${d.trips}x`, window.RP(d.total),
      ]),
      totals: [
        { value: "TOTAL", colspan: 3 },
        data.reduce((s,d) => s + d.trips, 0) + "x",
        window.RP(grand),
      ],
    });
  };

  return (
    <div>
      <div style={{display: "flex", justifyContent: "flex-end", marginBottom: 14}}>
        <button className="btn" onClick={cetak}><I.Print size={15} /> Cetak PDF</button>
      </div>
      <div className="card mb-4">
        <div className="card-head"><h3>Pendapatan per Unit Bus</h3><span className="sub">All time · ranked</span></div>
        <div style={{padding: 20}}>
          {data.map((d, i) => {
            const pct = (d.total / maxTotal) * 100;
            return (
              <div key={d.bus.id} style={{display: "grid", gridTemplateColumns: "32px 200px 1fr 140px 80px", gap: 16, alignItems: "center", padding: "10px 0", borderBottom: "1px solid var(--divider)"}}>
                <div style={{fontSize: 13, fontWeight: 700, color: "var(--ink-mute)"}}>#{i+1}</div>
                <BusChip id={d.bus.id} />
                <div className="prog" style={{height: 14, borderRadius: 8, background: "var(--surface-sunken)"}}>
                  <div className="fill" style={{
                    width: `${Math.max(pct, 1)}%`,
                    background: i === 0 ? "var(--brand)" : `oklch(${0.65 - i*0.02} ${0.13 - i*0.01} 235)`,
                    borderRadius: 8,
                  }} />
                </div>
                <div className="mono text-r" style={{fontWeight: 700, fontSize: 14}}>{window.RP(d.total)}</div>
                <div className="text-r" style={{fontSize: 12, color: "var(--ink-mute)"}}>{d.trips} trip</div>
              </div>
            );
          })}
          <div style={{display: "flex", justifyContent: "space-between", padding: "16px 0 0", marginTop: 10, borderTop: "2px solid var(--border-strong)"}}>
            <strong>TOTAL ARMADA</strong>
            <span className="mono" style={{fontWeight: 700, fontSize: 16}}>{window.RP(grand)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function RekapKas() {
  const masuk = window.CASH_TX.filter(t => t.tipe === "masuk" && t.tanggal.startsWith("2026-05"));
  const keluar = window.CASH_TX.filter(t => t.tipe === "keluar" && t.tanggal.startsWith("2026-05"));
  const masukByCat = {};
  const keluarByCat = {};
  masuk.forEach(t => { masukByCat[t.catId] = (masukByCat[t.catId] || 0) + t.jumlah; });
  keluar.forEach(t => { keluarByCat[t.catId] = (keluarByCat[t.catId] || 0) + t.jumlah; });

  const tMasuk = masuk.reduce((s,t) => s + t.jumlah, 0);
  const tKeluar = keluar.reduce((s,t) => s + t.jumlah, 0);

  const cetak = () => {
    const rows = [];
    rows.push(["KAS MASUK", "", ""]);
    Object.entries(masukByCat).forEach(([cid, v]) => {
      rows.push(["", window.getCat(parseInt(cid))?.nama, window.RP(v)]);
    });
    rows.push(["<strong>Subtotal Masuk</strong>", "", `<strong>${window.RP(tMasuk)}</strong>`]);
    rows.push(["KAS KELUAR", "", ""]);
    Object.entries(keluarByCat).forEach(([cid, v]) => {
      rows.push(["", window.getCat(parseInt(cid))?.nama, window.RP(v)]);
    });
    rows.push(["<strong>Subtotal Keluar</strong>", "", `<strong>${window.RP(tKeluar)}</strong>`]);
    window.printReport({
      title: "Rekap Kas",
      periode: "Mei 2026",
      summary: [
        { lbl: "Kas Masuk", val: window.RP(tMasuk) },
        { lbl: "Kas Keluar", val: window.RP(tKeluar) },
        { lbl: "Saldo Bersih", val: window.RP(tMasuk - tKeluar) },
      ],
      headers: [{ label: "Section", width: "200px" }, { label: "Kategori" }, { label: "Jumlah", align: "right" }],
      rows,
      totals: [{ value: "SALDO BERSIH", colspan: 2 }, window.RP(tMasuk - tKeluar)],
    });
  };

  return (
    <div>
      <div style={{display: "flex", justifyContent: "flex-end", marginBottom: 14}}>
        <button className="btn" onClick={cetak}><I.Print size={15} /> Cetak PDF</button>
      </div>
      <div className="grid grid-2">
        <div className="card">
          <div className="card-head">
            <div className="ic-bg" style={{width: 28, height: 28, borderRadius: 8, background: "var(--st-lunas-tint)", color: "var(--st-lunas)", display: "grid", placeItems: "center"}}><I.ArrowDown size={15} /></div>
            <h3>Kas Masuk per Kategori</h3>
            <span className="sub" style={{marginLeft: "auto"}}>Mei 2026</span>
          </div>
          <div style={{padding: 18}}>
            {Object.entries(masukByCat).length === 0
              ? <EmptyState ic={I.Wallet} title="Belum ada kas masuk di periode ini" />
              : Object.entries(masukByCat).map(([cid, v]) => {
                const pct = tMasuk ? (v / tMasuk) * 100 : 0;
                return (
                  <div key={cid} style={{marginBottom: 14}}>
                    <div style={{display: "flex", justifyContent: "space-between", marginBottom: 5, fontSize: 13}}>
                      <strong>{window.getCat(parseInt(cid))?.nama}</strong>
                      <span className="mono">{window.RP(v)} <span style={{color: "var(--ink-mute)"}}>· {pct.toFixed(0)}%</span></span>
                    </div>
                    <div className="prog" style={{height: 8}}><div className="fill" style={{width: `${pct}%`, background: "var(--st-lunas)"}} /></div>
                  </div>
                );
              })}
            {tMasuk > 0 && <div style={{marginTop: 14, paddingTop: 14, borderTop: "2px solid var(--border-strong)", display: "flex", justifyContent: "space-between"}}>
              <strong>TOTAL</strong>
              <span className="mono" style={{fontWeight: 700, color: "var(--st-lunas)"}}>{window.RP(tMasuk)}</span>
            </div>}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div className="ic-bg" style={{width: 28, height: 28, borderRadius: 8, background: "var(--st-batal-tint)", color: "var(--st-batal)", display: "grid", placeItems: "center"}}><I.ArrowUp size={15} /></div>
            <h3>Kas Keluar per Kategori</h3>
            <span className="sub" style={{marginLeft: "auto"}}>Mei 2026</span>
          </div>
          <div style={{padding: 18}}>
            {Object.entries(keluarByCat).length === 0
              ? <EmptyState ic={I.Wallet} title="Belum ada kas keluar di periode ini" />
              : Object.entries(keluarByCat).map(([cid, v]) => {
                const pct = tKeluar ? (v / tKeluar) * 100 : 0;
                return (
                  <div key={cid} style={{marginBottom: 14}}>
                    <div style={{display: "flex", justifyContent: "space-between", marginBottom: 5, fontSize: 13}}>
                      <strong>{window.getCat(parseInt(cid))?.nama}</strong>
                      <span className="mono">{window.RP(v)} <span style={{color: "var(--ink-mute)"}}>· {pct.toFixed(0)}%</span></span>
                    </div>
                    <div className="prog" style={{height: 8}}><div className="fill" style={{width: `${pct}%`, background: "var(--st-batal)"}} /></div>
                  </div>
                );
              })}
            {tKeluar > 0 && <div style={{marginTop: 14, paddingTop: 14, borderTop: "2px solid var(--border-strong)", display: "flex", justifyContent: "space-between"}}>
              <strong>TOTAL</strong>
              <span className="mono" style={{fontWeight: 700, color: "var(--st-batal)"}}>{window.RP(tKeluar)}</span>
            </div>}
          </div>
        </div>
      </div>
    </div>
  );
}

function RekapLabaRugi() {
  const masuk = window.CASH_TX.filter(t => t.tipe === "masuk" && t.tanggal.startsWith("2026-05")).reduce((s,t) => s + t.jumlah, 0);
  const keluar = window.CASH_TX.filter(t => t.tipe === "keluar" && t.tanggal.startsWith("2026-05")).reduce((s,t) => s + t.jumlah, 0);
  const laba = masuk - keluar;
  const margin = masuk > 0 ? ((laba / masuk) * 100).toFixed(1) : "0.0";

  const pendBy = window.CASH_TX.filter(t => t.tipe === "masuk" && t.tanggal.startsWith("2026-05")).reduce((acc, t) => {
    const k = window.getCat(t.catId)?.nama; acc[k] = (acc[k] || 0) + t.jumlah; return acc;
  }, {});
  const pengBy = window.CASH_TX.filter(t => t.tipe === "keluar" && t.tanggal.startsWith("2026-05")).reduce((acc, t) => {
    const k = window.getCat(t.catId)?.nama; acc[k] = (acc[k] || 0) + t.jumlah; return acc;
  }, {});

  const cetak = () => {
    const rows = [];
    rows.push(["<strong>PENDAPATAN</strong>", ""]);
    Object.entries(pendBy).forEach(([k, v]) => rows.push([`&nbsp;&nbsp;&nbsp;&nbsp;${k}`, window.RP(v)]));
    rows.push([`<strong>Total Pendapatan</strong>`, `<strong>${window.RP(masuk)}</strong>`]);
    rows.push(["<strong>PENGELUARAN</strong>", ""]);
    Object.entries(pengBy).forEach(([k, v]) => rows.push([`&nbsp;&nbsp;&nbsp;&nbsp;${k}`, window.RP(v)]));
    rows.push([`<strong>Total Pengeluaran</strong>`, `<strong>${window.RP(keluar)}</strong>`]);
    window.printReport({
      title: "Laporan Laba/Rugi",
      periode: "Mei 2026",
      summary: [
        { lbl: "Pendapatan", val: window.RP(masuk) },
        { lbl: "Pengeluaran", val: window.RP(keluar) },
        { lbl: "Laba Bersih", val: window.RP(laba) },
        { lbl: "Margin", val: margin + "%" },
      ],
      headers: [{ label: "Akun" }, { label: "Jumlah", align: "right" }],
      rows,
      totals: ["LABA BERSIH", window.RP(laba)],
    });
  };

  return (
    <div>
      <div style={{display: "flex", justifyContent: "flex-end", marginBottom: 14}}>
        <button className="btn" onClick={cetak}><I.Print size={15} /> Cetak PDF</button>
      </div>

      <div className="card mb-4" style={{background: "linear-gradient(135deg, var(--brand), var(--brand-2))", color: "white", border: 0}}>
        <div style={{padding: 28}}>
          <div style={{fontSize: 12, textTransform: "uppercase", letterSpacing: ".08em", opacity: .8, fontWeight: 700}}>Laba Bersih · Mei 2026</div>
          <div className="mono" style={{fontSize: 42, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 4}}>{window.RP(laba)}</div>
          <div style={{fontSize: 14, marginTop: 6, opacity: .9}}>
            Margin operasional: <strong>{margin}%</strong>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Laporan Laba / Rugi Sederhana</h3></div>
        <div style={{padding: 0}}>
          <table className="tbl" style={{fontSize: 14}}>
            <tbody>
              <tr><td colSpan={2} style={{padding: "14px 20px", background: "var(--st-lunas-tint)", fontWeight: 700, color: "oklch(0.30 0.10 155)"}}>PENDAPATAN</td></tr>
              {Object.entries(pendBy).map(([k, v]) => (
                <tr key={k}><td style={{paddingLeft: 32, color: "var(--ink-2)"}}>{k}</td><td className="num right">{window.RP(v)}</td></tr>
              ))}
              <tr style={{background: "var(--surface-2)", fontWeight: 700}}>
                <td>Total Pendapatan</td><td className="num right">{window.RP(masuk)}</td>
              </tr>

              <tr><td colSpan={2} style={{padding: "14px 20px", background: "var(--st-batal-tint)", fontWeight: 700, color: "oklch(0.42 0.16 25)"}}>PENGELUARAN</td></tr>
              {Object.entries(pengBy).map(([k, v]) => (
                <tr key={k}><td style={{paddingLeft: 32, color: "var(--ink-2)"}}>{k}</td><td className="num right">{window.RP(v)}</td></tr>
              ))}
              <tr style={{background: "var(--surface-2)", fontWeight: 700}}>
                <td>Total Pengeluaran</td><td className="num right">{window.RP(keluar)}</td>
              </tr>

              <tr style={{background: "var(--brand-tint)", fontWeight: 700, fontSize: 16}}>
                <td style={{padding: 16, color: "var(--brand-ink)"}}>LABA BERSIH</td>
                <td className="num right" style={{padding: 16, color: "var(--brand)"}}>{window.RP(laba)}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function RekapSopir() {
  const data = window.DRIVERS.filter(d => d.status === "aktif").map(d => {
    const trips = window.RENTALS.filter(r => r.driverIds?.includes(d.id) && r.status !== "batal");
    return { driver: d, trips: trips.length, recent: trips.slice(-3) };
  }).sort((a,b) => b.trips - a.trips);

  const cetak = () => {
    window.printReport({
      title: "Aktivitas Sopir",
      periode: "Mei 2026",
      headers: [{ label: "Sopir" }, { label: "HP" }, { label: "Trip", align: "right", width: "100px" }],
      rows: data.map(d => [d.driver.nama, d.driver.phone, `${d.trips}x`]),
      totals: ["TOTAL", "", data.reduce((s,d) => s + d.trips, 0) + "x"],
    });
  };

  return (
    <div>
      <div style={{display: "flex", justifyContent: "flex-end", marginBottom: 14}}>
        <button className="btn" onClick={cetak}><I.Print size={15} /> Cetak PDF</button>
      </div>
      <div className="card">
        <div className="card-head"><h3>Aktivitas Sopir — Mei 2026</h3></div>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead><tr><th>Sopir</th><th>No HP</th><th className="right">Total Trip</th><th>Trip Terakhir</th></tr></thead>
            <tbody>
              {data.map(d => (
                <tr key={d.driver.id}>
                  <td><PersonChip name={d.driver.nama} /></td>
                  <td className="mono" style={{fontSize: 13}}>{d.driver.phone}</td>
                  <td className="num right" style={{fontWeight: 700, fontSize: 16, color: "var(--brand)"}}>{d.trips}<span style={{fontSize: 12, color: "var(--ink-mute)", fontWeight: 400}}> trip</span></td>
                  <td style={{fontSize: 12, color: "var(--ink-mute)"}}>
                    {d.recent.length ? d.recent.map(r => r.tujuan).join(" · ") : <em>belum ada trip</em>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// SETTINGS — wired
// ============================================================
function Settings() {
  const { version } = useApp();
  void version;
  const [tab, setTab] = useState("profil");
  const toast = useToast();

  return (
    <div>
      <div className="page-head">
        <div className="ttl">
          <h2>Settings</h2>
          <div className="sub">Konfigurasi sistem · profil perusahaan · backup data</div>
        </div>
      </div>

      <div className="tabs">
        {[
          { k: "profil", l: "Profil Perusahaan", ic: I.Building },
          { k: "users", l: "User Management", ic: I.Users },
          { k: "backup", l: "Backup & Restore", ic: I.Database },
          { k: "audit", l: "Audit Log", ic: I.Clock },
        ].map(t => (
          <button key={t.k} className={`tab ${tab === t.k ? "active" : ""}`} onClick={() => setTab(t.k)}>
            <t.ic size={14} style={{marginRight: 6, verticalAlign: "-2px"}} />{t.l}
          </button>
        ))}
      </div>

      {tab === "profil" && <ProfilPerusahaan toast={toast} />}
      {tab === "users" && <UserManagement toast={toast} />}
      {tab === "backup" && <BackupRestore toast={toast} />}
      {tab === "audit" && <AuditLog />}
    </div>
  );
}

function ProfilPerusahaan({ toast }) {
  const { actions } = useApp();
  const [f, setF] = useState({ ...window.SETTINGS });
  const set = (k, v) => setF(x => ({...x, [k]: v}));
  const save = () => {
    actions.saveSettings(f);
    toast.push("Profil perusahaan tersimpan");
  };
  return (
    <div className="card">
      <div className="card-head"><h3>Profil Perusahaan</h3><span className="sub">Tampil di invoice, header laporan, dll</span></div>
      <div style={{padding: 20}}>
        <div className="grid" style={{gridTemplateColumns: "200px 1fr", gap: 24}}>
          <div>
            <label className="lbl" style={{marginBottom: 8}}>Logo</label>
            <div style={{width: 160, height: 160, borderRadius: 12, border: "1.5px dashed var(--border-strong)", display: "grid", placeItems: "center", background: "var(--surface-2)"}}>
              <div style={{textAlign: "center"}}>
                <div style={{width: 70, height: 70, borderRadius: 18, background: "linear-gradient(135deg, var(--brand), var(--brand-2))", color: "white", fontWeight: 700, fontSize: 32, display: "grid", placeItems: "center", margin: "0 auto 8px"}}>B</div>
                <div style={{fontSize: 11, color: "var(--ink-mute)"}}>Klik untuk ganti logo</div>
              </div>
            </div>
          </div>
          <div>
            <div className="field"><label className="lbl">Nama PO <span className="req">*</span></label><input className="input" value={f.nama} onChange={e => set("nama", e.target.value)} /></div>
            <div className="field mt-3"><label className="lbl">Alamat</label><textarea className="textarea" value={f.alamat} onChange={e => set("alamat", e.target.value)} /></div>
            <div className="field-row mt-3" style={{gridTemplateColumns: "1fr 1fr"}}>
              <div className="field"><label className="lbl">No Telepon</label><input className="input mono" value={f.telp} onChange={e => set("telp", e.target.value)} /></div>
              <div className="field"><label className="lbl">NPWP</label><input className="input mono" value={f.npwp} onChange={e => set("npwp", e.target.value)} /></div>
            </div>
            <div className="field-row mt-3" style={{gridTemplateColumns: "1fr 1fr"}}>
              <div className="field"><label className="lbl">Email</label><input className="input" value={f.email} onChange={e => set("email", e.target.value)} /></div>
              <div className="field"><label className="lbl">Website (opsional)</label><input className="input" value={f.website || ""} onChange={e => set("website", e.target.value)} /></div>
            </div>
            <div style={{display: "flex", justifyContent: "flex-end", marginTop: 18}}>
              <button className="btn btn-primary" onClick={save}>
                <I.Save size={14} /> Simpan Perubahan
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function UserManagement({ toast }) {
  const { actions } = useApp();
  const [showForm, setShowForm] = useState(false);
  const [editing, setEditing] = useState(null);
  const [confirmDel, setConfirmDel] = useState(null);
  return (
    <div className="card">
      <div className="card-head">
        <h3>User Sistem</h3>
        <span className="sub">{window.USERS.length} user · {window.USERS.filter(u => u.role === "Admin").length} admin + {window.USERS.filter(u => u.role === "Staff").length} staff</span>
        <div style={{marginLeft: "auto"}}>
          <button className="btn btn-sm btn-primary" onClick={() => { setEditing(null); setShowForm(true); }}>
            <I.Plus size={14} /> Tambah User
          </button>
        </div>
      </div>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead><tr><th>User</th><th>Email</th><th>Role</th><th>Login Terakhir</th><th>Status</th><th></th></tr></thead>
          <tbody>
            {window.USERS.map(u => (
              <tr key={u.id}>
                <td>
                  <div style={{display: "flex", alignItems: "center", gap: 10}}>
                    <div className="avatar" style={{width: 32, height: 32}}>{u.inisial}</div>
                    <div style={{fontWeight: 600}}>{u.nama}</div>
                  </div>
                </td>
                <td className="mono" style={{fontSize: 12}}>{u.email}</td>
                <td><span className="badge role no-dot">{u.role}</span></td>
                <td style={{fontSize: 12, color: "var(--ink-mute)"}}>{u.lastLogin ? window.FDATETIME(u.lastLogin) : "—"}</td>
                <td><span className={`badge ${u.aktif ? "aktif" : "nonaktif"}`}>{u.aktif ? "Aktif" : "Nonaktif"}</span></td>
                <td>
                  <div className="row-actions">
                    <button className="btn btn-sm btn-ghost btn-icon" title="Reset password" onClick={() => toast.push(`Password ${u.nama} direset ke "passwordbaru123"`)}><I.Lock size={14} /></button>
                    <button className="btn btn-sm btn-ghost btn-icon" onClick={() => { setEditing(u); setShowForm(true); }}><I.Edit size={14} /></button>
                    <button className="btn btn-sm btn-ghost btn-icon" onClick={() => setConfirmDel(u)}><I.Trash size={14} /></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Modal open={showForm} onClose={() => { setShowForm(false); setEditing(null); }}
        title={editing ? `Edit ${editing.nama}` : "Tambah User Baru"}
        icon={<I.User size={20} style={{color: "var(--brand)"}} />}>
        <UserForm editing={editing}
          onCancel={() => { setShowForm(false); setEditing(null); }}
          onSave={(d) => {
            try {
              actions.saveUser(d);
              toast.push(editing ? "User diperbarui" : "User berhasil dibuat");
              setShowForm(false); setEditing(null);
            } catch (e) { toast.push(e.message, "error"); }
          }} />
      </Modal>

      <ConfirmDialog open={!!confirmDel} onClose={() => setConfirmDel(null)}
        onConfirm={() => {
          try { actions.deleteUser(confirmDel.id); toast.push("User dihapus"); }
          catch (e) { toast.push(e.message, "error"); }
        }}
        title={`Hapus user ${confirmDel?.nama}?`} confirmLabel="Ya, Hapus" danger
        body="User akan kehilangan akses ke sistem. Login history tetap tersimpan di audit log."/>
    </div>
  );
}

function UserForm({ editing, onCancel, onSave }) {
  const [f, setF] = useState(editing ? { ...editing } : { nama: "", email: "", role: "Staff", password: "" });
  const [errors, setErrors] = useState({});
  const set = (k, v) => { setF(x => ({...x, [k]: v})); setErrors(e => ({...e, [k]: null})); };
  const submit = () => {
    const e = {};
    if (!f.nama?.trim()) e.nama = "wajib";
    if (!f.email?.trim()) e.email = "wajib";
    if (!editing && !f.password?.trim()) e.password = "wajib";
    setErrors(e);
    if (Object.keys(e).length) return;
    const payload = { ...(editing ? { id: editing.id } : {}), nama: f.nama.trim(), email: f.email.trim(), role: f.role };
    onSave(payload);
  };
  return (
    <div>
      <div className="field-row" style={{gridTemplateColumns: "1fr 1fr"}}>
        <div className="field"><label className="lbl">Nama Lengkap <span className="req">*</span></label><input className={`input ${errors.nama ? "err" : ""}`} value={f.nama} onChange={e => set("nama", e.target.value)} autoFocus /></div>
        <div className="field"><label className="lbl">Email / Username <span className="req">*</span></label><input className={`input mono ${errors.email ? "err" : ""}`} type="email" value={f.email} onChange={e => set("email", e.target.value)} /></div>
      </div>
      <div className="field mt-3">
        <label className="lbl">Role <span className="req">*</span></label>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8}}>
          {["Admin", "Staff"].map(r => (
            <label key={r} className="card card-pad" style={{cursor: "pointer", padding: 12, borderColor: f.role === r ? "var(--brand)" : "var(--border)", background: f.role === r ? "var(--brand-tint)" : "var(--surface)"}}>
              <div style={{display: "flex", alignItems: "center", gap: 8}}><input type="radio" name="rl" checked={f.role === r} onChange={() => set("role", r)} /> <strong>{r}</strong></div>
              <div style={{fontSize: 12, color: "var(--ink-mute)", marginTop: 4}}>
                {r === "Admin" ? "Akses penuh, user management, laporan keuangan" : "Input sewa & kas, lihat jadwal. Tanpa hapus / laba-rugi."}
              </div>
            </label>
          ))}
        </div>
      </div>
      {!editing && <div className="field mt-3"><label className="lbl">Password Awal <span className="req">*</span></label><input className={`input mono ${errors.password ? "err" : ""}`} type="password" placeholder="Min 8 karakter" value={f.password} onChange={e => set("password", e.target.value)} /></div>}
      <div style={{display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--divider)"}}>
        <button className="btn" onClick={onCancel}>Batal</button>
        <button className="btn btn-primary" onClick={submit}><I.Save size={14} /> Simpan</button>
      </div>
    </div>
  );
}

function BackupRestore({ toast }) {
  const { actions } = useApp();
  const [confirmReset, setConfirmReset] = useState(false);
  const fileRef = useRef(null);

  const restore = () => {
    const file = fileRef.current?.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target.result);
        ["BUSES","DRIVERS","CUSTOMERS","CASH_CATS","RENTALS","CASH_TX","USERS","AUDIT","SETTINGS"].forEach(k => {
          if (data[k] !== undefined) window[k] = data[k];
        });
        localStorage.setItem("busmanager_data_v2", JSON.stringify(data));
        toast.push("Restore berhasil. Reload halaman...");
        setTimeout(() => window.location.reload(), 1000);
      } catch (err) {
        toast.push("File backup tidak valid", "error");
      }
    };
    reader.readAsText(file);
  };

  return (
    <div className="grid grid-2">
      <div className="card">
        <div className="card-head"><h3>Backup Database</h3><span className="sub">Manual & otomatis</span></div>
        <div style={{padding: 20}}>
          <div className="mini-stat" style={{marginBottom: 16}}>
            <div className="lbl">Backup terakhir (otomatis)</div>
            <div className="val">{new Date().toLocaleDateString("id-ID", {day:"2-digit", month:"long", year:"numeric"})}, 02:00 WIB</div>
          </div>
          <div className="field mb-3">
            <label className="lbl">Backup Otomatis Harian</label>
            <div style={{display: "flex", gap: 12, alignItems: "center", padding: "8px 0"}}>
              <span className="switch on" />
              <span style={{fontSize: 13}}>Aktif · setiap hari pukul 02:00</span>
            </div>
            <div className="hint">Backup disimpan di folder lokal: <code style={{fontFamily: "var(--font-mono)", fontSize: 11.5, background: "var(--surface-sunken)", padding: "1px 5px", borderRadius: 4}}>/var/backups/busmanager/</code> · retensi 30 hari</div>
          </div>
          <button className="btn btn-primary w-full" onClick={() => { actions.backup(); toast.push("Backup berhasil dibuat & diunduh"); }}>
            <I.Download size={15} /> Backup & Download Sekarang
          </button>
          <div className="divider" />
          <div className="lbl mb-2">Reset Data</div>
          <div style={{fontSize: 12.5, color: "var(--ink-mute)", marginBottom: 10}}>
            Mengembalikan seluruh data ke kondisi demo awal. Berguna untuk testing.
          </div>
          <button className="btn btn-danger w-full" onClick={() => setConfirmReset(true)}>
            <I.Refresh size={15} /> Reset ke Data Demo
          </button>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Restore Database</h3><span className="sub" style={{color: "var(--danger)"}}>Aksi destruktif</span></div>
        <div style={{padding: 20}}>
          <div className="field-warn mb-3">
            <I.Alert className="ic" />
            <div>
              Restore akan menimpa seluruh data saat ini dengan data dari file backup.
              <strong> Tidak dapat di-undo.</strong> Pastikan Anda backup data terkini sebelum restore.
            </div>
          </div>
          <div className="field">
            <label className="lbl">Pilih File Backup (.json)</label>
            <input ref={fileRef} type="file" accept=".json" className="input" />
          </div>
          <button className="btn btn-danger w-full mt-3" onClick={restore}>
            <I.Upload size={15} /> Restore Database
          </button>
        </div>
      </div>

      <ConfirmDialog open={confirmReset} onClose={() => setConfirmReset(false)}
        onConfirm={() => { actions.resetAllData(); toast.push("Data direset ke kondisi demo awal"); }}
        title="Reset seluruh data?" confirmLabel="Ya, Reset" danger
        body="Semua transaksi, master data, dan user yang Anda buat akan dihapus dan dikembalikan ke kondisi demo awal." />
    </div>
  );
}

function AuditLog() {
  const { version } = useApp();
  void version;
  const [search, setSearch] = useState("");
  const list = window.AUDIT.filter(a =>
    !search ||
    a.user?.toLowerCase().includes(search.toLowerCase()) ||
    a.target?.toLowerCase().includes(search.toLowerCase()) ||
    a.model?.toLowerCase().includes(search.toLowerCase())
  );
  return (
    <div className="card">
      <div className="card-head">
        <h3>Audit Log</h3>
        <span className="sub">{window.AUDIT.length} entry tersimpan · 200 terakhir</span>
        <div style={{marginLeft: "auto"}}>
          <div className="search" style={{position: "relative"}}>
            <I.Search size={14} style={{position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--ink-mute)"}} />
            <input className="input" style={{paddingLeft: 32, height: 32, fontSize: 12.5}} placeholder="Cari user / target" value={search} onChange={e => setSearch(e.target.value)} />
          </div>
        </div>
      </div>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead><tr><th style={{width: 160}}>Waktu</th><th>User</th><th>Aksi</th><th>Target</th><th>Detail</th></tr></thead>
          <tbody>
            {list.map(a => (
              <tr key={a.id}>
                <td className="mono" style={{fontSize: 12}}>{window.FDATETIME(a.ts)}</td>
                <td style={{fontWeight: 600, fontSize: 13}}>{a.user}</td>
                <td>
                  <span className="badge no-dot" style={{
                    background: a.action === "Create" ? "var(--st-lunas-tint)" : a.action === "Cancel" || a.action === "Delete" ? "var(--st-batal-tint)" : "var(--st-dp-tint)",
                    color: a.action === "Create" ? "var(--st-lunas)" : a.action === "Cancel" || a.action === "Delete" ? "var(--st-batal)" : "oklch(0.50 0.13 70)",
                  }}>{a.action}</span>
                  <span style={{fontSize: 12, color: "var(--ink-mute)", marginLeft: 6}}>{a.model}</span>
                </td>
                <td className="mono" style={{fontSize: 12, color: "var(--brand)"}}>{a.target}</td>
                <td style={{fontSize: 13, color: "var(--ink-2)"}}>{a.desc || "—"}</td>
              </tr>
            ))}
            {list.length === 0 && <tr><td colSpan={5}><EmptyState ic={I.Clock} title="Tidak ada entry audit yang cocok" /></td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { Laporan, Settings });