// ============================================================
// BusManager — Modul Kas (Buku Kas + Input) — wired
// ============================================================

function ManajemenKas({ initialAction, onClearInitial }) {
  const { actions, version } = useApp();
  void version;
  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [formTipe, setFormTipe] = useState("masuk");
  const [confirmDel, setConfirmDel] = useState(null);
  const [search, setSearch] = useState("");
  const [filterTipe, setFilterTipe] = useState("all");
  const [filterCat, setFilterCat] = useState("all");
  const [filterPeriode, setFilterPeriode] = useState("mei");
  const toast = useToast();

  useEffect(() => {
    if (initialAction === "new") { setEditingId(null); setShowForm(true); onClearInitial?.(); }
  }, [initialAction]);

  const tx = useMemo(() => {
    return window.CASH_TX.filter(t => {
      const m = !search || t.deskripsi.toLowerCase().includes(search.toLowerCase());
      const mt = filterTipe === "all" || t.tipe === filterTipe;
      const mc = filterCat === "all" || t.catId === parseInt(filterCat);
      const mp = filterPeriode === "all" ||
        (filterPeriode === "mei" && t.tanggal.startsWith("2026-05")) ||
        (filterPeriode === "apr" && t.tanggal.startsWith("2026-04"));
      return m && mt && mc && mp;
    }).sort((a,b) => a.tanggal.localeCompare(b.tanggal) || a.id - b.id);
  }, [search, filterTipe, filterCat, filterPeriode, version]);

  const txWithSaldo = useMemo(() => {
    let saldo = 0;
    return tx.map(t => {
      saldo += (t.tipe === "masuk" ? t.jumlah : -t.jumlah);
      return { ...t, saldo };
    });
  }, [tx]);

  const totalMasuk = tx.filter(t => t.tipe === "masuk").reduce((s,t) => s + t.jumlah, 0);
  const totalKeluar = tx.filter(t => t.tipe === "keluar").reduce((s,t) => s + t.jumlah, 0);
  const saldoAkhir = totalMasuk - totalKeluar;

  const handleSave = (data) => {
    try {
      actions.saveCashTx(data);
      toast.push(editingId ? "Transaksi diperbarui" : "Transaksi kas tersimpan");
      setShowForm(false);
      setEditingId(null);
    } catch (e) { toast.push(e.message, "error"); }
  };

  const handleDelete = (id) => {
    try {
      actions.deleteCashTx(id);
      toast.push("Transaksi dihapus");
    } catch (e) { toast.push(e.message, "error"); }
  };

  const printKasReport = () => {
    const periodeLabel = filterPeriode === "mei" ? "Mei 2026" : filterPeriode === "apr" ? "April 2026" : "Semua periode";
    window.printReport({
      title: "Buku Kas",
      periode: periodeLabel,
      summary: [
        { lbl: "Total Kas Masuk", val: window.RP(totalMasuk) },
        { lbl: "Total Kas Keluar", val: window.RP(totalKeluar) },
        { lbl: "Saldo Bersih", val: window.RP(saldoAkhir) },
      ],
      headers: [
        { label: "Tanggal", width: "90px" },
        { label: "Deskripsi" },
        { label: "Kategori", width: "160px" },
        { label: "Masuk", align: "right", width: "120px" },
        { label: "Keluar", align: "right", width: "120px" },
        { label: "Saldo", align: "right", width: "120px" },
      ],
      rows: txWithSaldo.map(t => [
        window.FDATE_SHORT(t.tanggal),
        t.deskripsi + (t.isAuto ? " <small style='color:#999'>(auto)</small>" : ""),
        window.getCat(t.catId)?.nama || "—",
        t.tipe === "masuk" ? window.RP(t.jumlah) : "—",
        t.tipe === "keluar" ? window.RP(t.jumlah) : "—",
        window.RP(t.saldo),
      ]),
      totals: [
        { value: "TOTAL", colspan: 3 },
        window.RP(totalMasuk),
        window.RP(totalKeluar),
        window.RP(saldoAkhir),
      ],
    });
  };

  return (
    <div>
      <div className="page-head">
        <div className="ttl">
          <h2>Manajemen Kas</h2>
          <div className="sub">Pencatatan kas masuk & keluar dengan saldo berjalan</div>
        </div>
        <div className="actions">
          <button className="btn" onClick={() => exportKasExcel(txWithSaldo)}><I.Download size={15} /> Export Excel</button>
          <button className="btn" onClick={printKasReport}><I.Print size={15} /> Cetak PDF</button>
          <button className="btn btn-primary" onClick={() => { setEditingId(null); setFormTipe("masuk"); setShowForm(true); }}>
            <I.Plus size={15} /> Catat Kas
          </button>
        </div>
      </div>

      {/* Summary cards */}
      <div className="grid grid-3 mb-4">
        <div className="kpi" style={{background: "var(--st-lunas-tint)", border: "1px solid oklch(0.85 0.08 155)"}}>
          <div className="label">
            <div className="ic-bg" style={{background: "white", color: "var(--st-lunas)"}}><I.ArrowDown size={15} /></div>
            Total Kas Masuk · {filterPeriode === "mei" ? "Mei" : filterPeriode === "apr" ? "April" : "All"} 2026
          </div>
          <div className="value mono" style={{color: "oklch(0.30 0.10 155)"}}>{window.RP(totalMasuk)}</div>
          <div className="delta">{tx.filter(t => t.tipe === "masuk").length} transaksi</div>
        </div>
        <div className="kpi" style={{background: "var(--st-batal-tint)", border: "1px solid oklch(0.85 0.08 25)"}}>
          <div className="label">
            <div className="ic-bg" style={{background: "white", color: "var(--st-batal)"}}><I.ArrowUp size={15} /></div>
            Total Kas Keluar · {filterPeriode === "mei" ? "Mei" : filterPeriode === "apr" ? "April" : "All"} 2026
          </div>
          <div className="value mono" style={{color: "oklch(0.40 0.16 25)"}}>{window.RP(totalKeluar)}</div>
          <div className="delta">{tx.filter(t => t.tipe === "keluar").length} transaksi</div>
        </div>
        <div className="kpi" style={{background: "var(--brand)", color: "white", border: "1px solid var(--brand)"}}>
          <div className="label" style={{color: "oklch(1 0 0 / .85)"}}>
            <div className="ic-bg" style={{background: "oklch(1 0 0 / .15)", color: "white"}}><I.PiggyBank size={15} /></div>
            Saldo Bersih
          </div>
          <div className="value mono" style={{color: "white"}}>{window.RP(saldoAkhir)}</div>
          <div className="delta" style={{color: "oklch(1 0 0 / .75)"}}>Saldo periode terpilih</div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <h3>Buku Kas</h3>
          <span className="sub">Chronological · saldo berjalan</span>
        </div>

        <div style={{padding: "12px 18px", borderBottom: "1px solid var(--divider)"}}>
          <div className="toolbar" style={{margin: 0}}>
            <div className="search">
              <I.Search size={16} className="ic" />
              <input placeholder="Cari deskripsi..." value={search} onChange={e => setSearch(e.target.value)} />
            </div>
            <div className="chip-filter">
              <I.Calendar size={14} style={{color: "var(--ink-mute)"}} />
              <select value={filterPeriode} onChange={e => setFilterPeriode(e.target.value)}>
                <option value="mei">Mei 2026</option>
                <option value="apr">April 2026</option>
                <option value="all">Semua periode</option>
              </select>
            </div>
            <div className="chip-filter">
              <I.Wallet size={14} style={{color: "var(--ink-mute)"}} />
              <select value={filterTipe} onChange={e => setFilterTipe(e.target.value)}>
                <option value="all">Masuk & Keluar</option>
                <option value="masuk">Hanya Kas Masuk</option>
                <option value="keluar">Hanya Kas Keluar</option>
              </select>
            </div>
            <div className="chip-filter">
              <I.Tag size={14} style={{color: "var(--ink-mute)"}} />
              <select value={filterCat} onChange={e => setFilterCat(e.target.value)}>
                <option value="all">Semua kategori</option>
                {window.CASH_CATS.map(c => <option key={c.id} value={c.id}>{c.nama}</option>)}
              </select>
            </div>
            <div className="sp" />
            <button className="btn btn-sm" onClick={() => { setEditingId(null); setFormTipe("keluar"); setShowForm(true); }}>
              <I.ArrowUp size={14} style={{color: "var(--danger)"}} /> Kas Keluar
            </button>
            <button className="btn btn-sm btn-primary" onClick={() => { setEditingId(null); setFormTipe("masuk"); setShowForm(true); }}>
              <I.ArrowDown size={14} /> Kas Masuk
            </button>
          </div>
        </div>

        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{width: 100}}>Tanggal</th>
                <th>Deskripsi</th>
                <th>Kategori</th>
                <th className="right" style={{width: 130}}>Masuk</th>
                <th className="right" style={{width: 130}}>Keluar</th>
                <th className="right" style={{width: 150}}>Saldo</th>
                <th style={{width: 80}}></th>
              </tr>
            </thead>
            <tbody>
              {txWithSaldo.map(t => {
                const cat = window.getCat(t.catId);
                return (
                  <tr key={t.id}>
                    <td className="mono" style={{fontSize: 12, color: "var(--ink-mute)"}}>{window.FDATE_SHORT(t.tanggal)}</td>
                    <td>
                      <div style={{fontWeight: 500, fontSize: 13, display: "flex", alignItems: "center", gap: 8}}>
                        {t.deskripsi}
                        {t.isAuto && <span className="badge auto no-dot" title="Auto-generate dari sewa">AUTO</span>}
                      </div>
                    </td>
                    <td><span className="badge no-dot" style={{background: "var(--surface-sunken)", color: "var(--ink-2)", fontWeight: 500}}>{cat?.nama}</span></td>
                    <td className="num right" style={{color: t.tipe === "masuk" ? "oklch(0.40 0.10 155)" : "var(--ink-soft)", fontWeight: t.tipe === "masuk" ? 600 : 400}}>
                      {t.tipe === "masuk" ? window.RP(t.jumlah) : "—"}
                    </td>
                    <td className="num right" style={{color: t.tipe === "keluar" ? "oklch(0.45 0.16 25)" : "var(--ink-soft)", fontWeight: t.tipe === "keluar" ? 600 : 400}}>
                      {t.tipe === "keluar" ? window.RP(t.jumlah) : "—"}
                    </td>
                    <td className="num right" style={{fontWeight: 700, background: "var(--surface-2)"}}>
                      {window.RP(t.saldo)}
                    </td>
                    <td>
                      <div className="row-actions">
                        <button className="btn btn-sm btn-ghost btn-icon"
                          disabled={t.isAuto}
                          title={t.isAuto ? "Auto dari sewa — edit lewat modul Sewa" : "Edit"}
                          onClick={() => { setEditingId(t.id); setFormTipe(t.tipe); setShowForm(true); }}>
                          <I.Edit size={14} />
                        </button>
                        <button className="btn btn-sm btn-ghost btn-icon"
                          disabled={t.isAuto}
                          title={t.isAuto ? "Auto tidak bisa dihapus" : "Hapus"}
                          onClick={() => setConfirmDel(t.id)}>
                          <I.Trash size={14} />
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })}
              {txWithSaldo.length === 0 && (
                <tr><td colSpan={7}><EmptyState ic={I.Wallet} title="Belum ada transaksi" hint="Catat kas masuk atau keluar dengan tombol di atas" /></td></tr>
              )}
            </tbody>
            {txWithSaldo.length > 0 && (
              <tfoot>
                <tr style={{background: "var(--surface-2)", borderTop: "2px solid var(--border-strong)"}}>
                  <td colSpan={3} style={{padding: 14, fontWeight: 700}}>SUBTOTAL PERIODE</td>
                  <td className="num right mono" style={{padding: 14, color: "oklch(0.40 0.10 155)", fontWeight: 700}}>{window.RP(totalMasuk)}</td>
                  <td className="num right mono" style={{padding: 14, color: "oklch(0.45 0.16 25)", fontWeight: 700}}>{window.RP(totalKeluar)}</td>
                  <td className="num right mono" style={{padding: 14, fontWeight: 700, fontSize: 14}}>{window.RP(saldoAkhir)}</td>
                  <td></td>
                </tr>
              </tfoot>
            )}
          </table>
        </div>
      </div>

      <Modal open={showForm} onClose={() => { setShowForm(false); setEditingId(null); }}
        title={editingId ? "Edit Transaksi Kas" : (formTipe === "masuk" ? "Catat Kas Masuk" : "Catat Kas Keluar")}
        icon={formTipe === "masuk" ? <I.ArrowDown size={20} style={{color: "var(--success)"}} /> : <I.ArrowUp size={20} style={{color: "var(--danger)"}} />}>
        <KasForm
          editingId={editingId} tipe={formTipe} setTipe={setFormTipe}
          onCancel={() => { setShowForm(false); setEditingId(null); }}
          onSave={handleSave}
        />
      </Modal>

      <ConfirmDialog open={!!confirmDel} onClose={() => setConfirmDel(null)}
        onConfirm={() => handleDelete(confirmDel)}
        title="Hapus transaksi kas?"
        confirmLabel="Ya, Hapus"
        danger
        body="Transaksi kas akan dihapus permanen. Saldo akan tersesuaikan otomatis."
      />
    </div>
  );
}

function KasForm({ editingId, tipe, setTipe, onCancel, onSave }) {
  const existing = editingId ? window.CASH_TX.find(t => t.id === editingId) : null;
  const [f, setF] = useState(existing ? {
    ...existing, jumlah: String(existing.jumlah), referensi: existing.rentalId ? String(existing.rentalId) : "",
  } : {
    tanggal: window.todayISO(), catId: "", deskripsi: "", jumlah: "", referensi: "",
  });
  const [errors, setErrors] = useState({});
  const set = (k, v) => { setF(x => ({...x, [k]: v})); setErrors(e => ({ ...e, [k]: null })); };
  const cats = window.CASH_CATS.filter(c => c.tipe === tipe && c.aktif);

  // When tipe changes externally, reset catId if not in new list
  useEffect(() => {
    if (f.catId && !cats.find(c => c.id === parseInt(f.catId))) set("catId", "");
  }, [tipe]);

  const submit = () => {
    const e = {};
    if (!f.tanggal) e.tanggal = "wajib";
    if (!f.catId) e.catId = "Pilih kategori";
    if (!f.deskripsi?.trim()) e.deskripsi = "Deskripsi wajib diisi";
    if (!f.jumlah || parseInt(f.jumlah) <= 0) e.jumlah = "Jumlah harus > 0";
    setErrors(e);
    if (Object.keys(e).length) return;
    onSave({
      ...(editingId ? { id: editingId } : {}),
      tanggal: f.tanggal,
      catId: parseInt(f.catId),
      tipe,
      deskripsi: f.deskripsi.trim(),
      jumlah: parseInt(f.jumlah),
      rentalId: f.referensi ? parseInt(f.referensi) : null,
    });
  };

  return (
    <div>
      <div className="field mb-3">
        <label className="lbl">Tipe Transaksi</label>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8}}>
          <button type="button" onClick={() => setTipe("masuk")}
            disabled={!!editingId}
            className="btn" style={{
              height: 50, borderRadius: 10,
              background: tipe === "masuk" ? "var(--st-lunas-tint)" : "var(--surface)",
              border: `1px solid ${tipe === "masuk" ? "var(--st-lunas)" : "var(--border-strong)"}`,
              color: tipe === "masuk" ? "oklch(0.30 0.10 155)" : "var(--ink-2)",
              fontWeight: 700,
              opacity: editingId ? .7 : 1,
            }}>
            <I.ArrowDown size={18} /> Kas Masuk
          </button>
          <button type="button" onClick={() => setTipe("keluar")}
            disabled={!!editingId}
            className="btn" style={{
              height: 50, borderRadius: 10,
              background: tipe === "keluar" ? "var(--st-batal-tint)" : "var(--surface)",
              border: `1px solid ${tipe === "keluar" ? "var(--st-batal)" : "var(--border-strong)"}`,
              color: tipe === "keluar" ? "oklch(0.42 0.17 25)" : "var(--ink-2)",
              fontWeight: 700,
              opacity: editingId ? .7 : 1,
            }}>
            <I.ArrowUp size={18} /> Kas Keluar
          </button>
        </div>
        {editingId && <div className="hint">Tipe tidak bisa diubah saat edit.</div>}
      </div>

      <div className="field-row" style={{gridTemplateColumns: "1fr 2fr"}}>
        <div className="field">
          <label className="lbl">Tanggal <span className="req">*</span></label>
          <input type="date" className={`input ${errors.tanggal ? "err" : ""}`} value={f.tanggal} onChange={e => set("tanggal", e.target.value)} />
        </div>
        <div className="field">
          <label className="lbl">Kategori <span className="req">*</span></label>
          <select className={`select ${errors.catId ? "err" : ""}`} value={f.catId} onChange={e => set("catId", e.target.value)}>
            <option value="">— Pilih kategori —</option>
            {cats.map(c => <option key={c.id} value={c.id}>{c.nama}</option>)}
          </select>
        </div>
      </div>

      <div className="field mt-3">
        <label className="lbl">Deskripsi <span className="req">*</span></label>
        <input className={`input ${errors.deskripsi ? "err" : ""}`} placeholder="cth: BBM trip Malang BJL-01" value={f.deskripsi} onChange={e => set("deskripsi", e.target.value)} />
      </div>

      <div className="field-row mt-3" style={{gridTemplateColumns: "1fr 1fr"}}>
        <div className="field">
          <label className="lbl">Jumlah (Rp) <span className="req">*</span></label>
          <div className="input-prefix-wrap">
            <span className="input-prefix">Rp</span>
            <input type="number" className={`input mono ${errors.jumlah ? "err" : ""}`} placeholder="0" value={f.jumlah} onChange={e => set("jumlah", e.target.value)} />
          </div>
        </div>
        <div className="field">
          <label className="lbl">Referensi Sewa (opsional)</label>
          <select className="select" value={f.referensi} onChange={e => set("referensi", e.target.value)}>
            <option value="">— Tidak terkait —</option>
            {window.RENTALS.filter(r => r.status !== "batal").slice(0, 30).map(r => (
              <option key={r.id} value={r.id}>{r.kode} · {window.getCustomer(r.customerId)?.nama}</option>
            ))}
          </select>
        </div>
      </div>

      <div className="field mt-3">
        <label className="lbl">Bukti / Foto (opsional)</label>
        <div style={{border: "1.5px dashed var(--border-strong)", borderRadius: 10, padding: 20, textAlign: "center", color: "var(--ink-mute)", background: "var(--surface-2)"}}>
          <I.Camera size={20} style={{display: "block", margin: "0 auto 6px"}} />
          <div style={{fontSize: 13, fontWeight: 600, color: "var(--ink-2)"}}>Tarik file ke sini atau klik untuk upload</div>
          <div style={{fontSize: 11.5, marginTop: 4}}>JPG, PNG, atau PDF · max 5MB</div>
        </div>
      </div>

      <div style={{display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--divider)"}}>
        <button className="btn" onClick={onCancel}>Batal</button>
        <button className="btn btn-primary" onClick={submit}><I.Check size={14} /> Simpan</button>
      </div>
    </div>
  );
}

function exportKasExcel(txList) {
  const lines = ["Tanggal\tDeskripsi\tKategori\tTipe\tJumlah\tSaldo"];
  txList.forEach(t => {
    lines.push([
      t.tanggal, t.deskripsi, window.getCat(t.catId)?.nama || "",
      t.tipe, t.jumlah, t.saldo || 0,
    ].join("\t"));
  });
  const blob = new Blob([lines.join("\n")], { type: "text/tab-separated-values" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = `buku-kas-${window.todayISO()}.tsv`;
  a.click();
}

Object.assign(window, { ManajemenKas, KasForm, exportKasExcel });