/* =========================================================================
   Çevik Yaşam — BÜTÇE & NAKİT AKIŞI
   Hesap bakiyeleri + gelir/gider akışı (bekliyor / alındı / yapıldı).
   ADHD dostu: net durum, çalışan bakiye, tek tıkla işaretle.
   ========================================================================= */

const STATUS_META = {
  bekliyor: { label: "Bekliyor", color: "var(--ml-ink-4)", bg: "var(--ml-paper-2)" },
  alindi: { label: "Alındı", color: "var(--ml-success)", bg: "var(--ml-success-bg)" },
  yapildi: { label: "Yapıldı", color: "var(--ml-info)", bg: "var(--ml-info-bg)" },
};

const CF_FIELDS = [
  { name: "label", label: "Kalem", placeholder: "örn. Kira · İmes Spor geliri" },
  { name: "type", label: "Tür", type: "select", options: [{ value: "gider", label: "Gider (−)" }, { value: "gelir", label: "Gelir (+)" }], default: "gider" },
  { name: "amount", label: "Tutar (₺, pozitif yaz)", type: "number", default: 0 },
  { name: "day", label: "Ayın günü (0 = sürekli)", type: "number", min: 0, max: 31, default: 1 },
  { name: "account", label: "Hesap", type: "dropdown", options: [], default: "ac-is" },
  { name: "note", label: "Not", placeholder: "opsiyonel", optional: true },
];

function Butce() {
  const A = useCollection("budget-accounts", CY.accountsDefault);
  const CF = useCollection("budget-cashflow", CY.cashflowDefault);
  const D = useCollection("budget-debts", CY.debtsDefault);
  const [editAcc, setEditAcc] = useState(null);
  const [editCf, setEditCf] = useState(null);
  const [delCf, setDelCf] = useState(null);
  const [editDebt, setEditDebt] = useState(null);
  const [filter, setFilter] = useState("all"); // all | gelir | gider | bekliyor

  const fmt = CY.fmtTL;
  const accOpts = A.active.map((a) => ({ value: a.id, label: a.name }));
  const accName = (id) => (A.active.find((a) => a.id === id) || {}).name || "—";

  const totalBalance = A.active.reduce((s, a) => s + (a.balance || 0), 0);
  const todayDom = new Date().getDate();
  const cfList = CF.active;
  const beklenenGelir = cfList.filter((c) => c.type === "gelir" && c.status !== "alindi").reduce((s, c) => s + Math.abs(c.amount), 0);
  const alinanGelir = cfList.filter((c) => c.type === "gelir" && c.status === "alindi").reduce((s, c) => s + Math.abs(c.amount), 0);
  const odenenGider = cfList.filter((c) => c.type === "gider" && c.status === "yapildi").reduce((s, c) => s + Math.abs(c.amount), 0);
  const bekleyenGider = cfList.filter((c) => c.type === "gider" && c.status !== "yapildi").reduce((s, c) => s + Math.abs(c.amount), 0);
  const aylikNet = cfList.reduce((s, c) => s + c.amount, 0);
  const toplamBorc = D.active.reduce((s, d) => s + (d.amount || 0), 0);

  // çalışan bakiye projeksiyonu (güne göre sıralı)
  const ordered = [...cfList].sort((a, b) => (a.day || 32) - (b.day || 32));
  let run = totalBalance;
  const withRun = ordered.map((c) => { run += c.amount; return { ...c, run }; });
  const minRun = Math.min(totalBalance, ...withRun.map((c) => c.run));

  const shown = withRun.filter((c) =>
    filter === "all" ? true : filter === "bekliyor" ? c.status === "bekliyor" : c.type === filter
  );

  const cycle = (c) => {
    const order = c.type === "gelir" ? ["bekliyor", "alindi"] : ["bekliyor", "yapildi"];
    const next = order[(order.indexOf(c.status) + 1) % order.length];
    CF.update(c.id, { status: next });
    // hesap bakiyesini güncelle: yapıldı/alındı olunca uygula
    const acc = A.active.find((a) => a.id === c.account);
    if (acc) {
      const wasApplied = c.status !== "bekliyor";
      const nowApplied = next !== "bekliyor";
      if (!wasApplied && nowApplied) A.update(acc.id, { balance: acc.balance + c.amount });
      if (wasApplied && !nowApplied) A.update(acc.id, { balance: acc.balance - c.amount });
    }
  };

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="Para · nakit akışı"
        title="Bütçe & Nakit Akışı"
        sub="Hesap bakiyelerini güncel tut, gelir/gideri alındı/yapıldı işaretle. Sistem çalışan bakiyeyi ve net durumu otomatik hesaplar — kafanda tutmana gerek yok."
        right={<Btn variant="primary" icon="plus" onClick={() => setEditCf({})}>Hareket ekle</Btn>} />

      <HowTo id="butce" when="Hesabı değişince + ay başı"
        summary="ADHD'de en sık kaçan şey paranın <strong>görünürlüğü.</strong> Burada her şey tek ekranda: ne girdi, ne çıktı, ne bekliyor, ay sonunda ne kalır."
        steps={[
          "Banka/nakit <strong>bakiyelerini</strong> kartlardan güncelle — gerçek tutarı yaz.",
          "Bir gider ödeyince <strong>Yapıldı</strong>, gelir gelince <strong>Alındı</strong> işaretle; bakiye otomatik düşer/artar.",
          "<strong>Çalışan bakiye</strong> sütunu, ay içinde hangi gün eksiye düşersen onu önceden gösterir.",
          "Net durum kırmızıysa: geliri öne çek, gideri ertele ya da küçült — Görevler'e bir 'tahsilat' işi düş.",
        ]} />

      {/* ÖZET ŞERİT */}
      <div className="cy-budget-stats">
        <Card className="flat"><Eyebrow>Toplam bakiye</Eyebrow><div className="cy-bstat" style={{ color: totalBalance < 0 ? "var(--ml-red)" : "var(--ml-ink)" }}>{fmt(totalBalance)}</div><div className="cy-muted" style={{ fontSize: 11.5 }}>{A.active.length} hesap</div></Card>
        <Card className="flat"><Eyebrow>Bekleyen gelir</Eyebrow><div className="cy-bstat" style={{ color: "var(--ml-success)" }}>{fmt(beklenenGelir)}</div><div className="cy-muted" style={{ fontSize: 11.5 }}>{fmt(alinanGelir)} alındı</div></Card>
        <Card className="flat"><Eyebrow>Bekleyen gider</Eyebrow><div className="cy-bstat" style={{ color: "var(--ml-red)" }}>{fmt(bekleyenGider)}</div><div className="cy-muted" style={{ fontSize: 11.5 }}>{fmt(odenenGider)} ödendi</div></Card>
        <Card className="flat" style={{ borderColor: aylikNet < 0 ? "var(--ml-red-100)" : "var(--ml-line)" }}><Eyebrow>Aylık net</Eyebrow><div className="cy-bstat" style={{ color: aylikNet < 0 ? "var(--ml-red)" : "var(--ml-success)" }}>{fmt(aylikNet)}</div><div className="cy-muted" style={{ fontSize: 11.5 }}>ay sonu tahmini</div></Card>
      </div>

      {minRun < 0 && (
        <Card className="tint" style={{ marginTop: 16, borderLeft: "3px solid var(--ml-red)", display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
          <Icon name="alert" style={{ width: 18, color: "var(--ml-red)", flex: "none" }} />
          <div style={{ flex: 1, minWidth: 240, fontSize: 13.5, color: "var(--ml-ink-2)" }}>
            Bu ay çalışan bakiye <b style={{ color: "var(--ml-red)" }}>{fmt(minRun)}</b> seviyesine kadar düşüyor. Geliri öne çekmen ya da bir gideri ertelemen gerekebilir.
          </div>
          <Btn variant="ghost" size="sm" icon="flag" onClick={() => window.cyGoto && window.cyGoto("gorevler")}>Tahsilat işi ekle</Btn>
        </Card>
      )}

      {/* HESAPLAR */}
      <div className="cy-between" style={{ margin: "28px 0 14px" }}>
        <h3 className="cy-h3">Hesaplar</h3>
        <Btn variant="ghost" size="sm" icon="plus" onClick={() => setEditAcc({})}>Hesap ekle</Btn>
      </div>
      <div className="cy-acc-grid">
        {A.active.map((a) => (
          <Card key={a.id} className="flat" style={{ padding: 16 }}>
            <div className="cy-between" style={{ alignItems: "flex-start" }}>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{a.name}</div>
                <span className="cy-tag-mini" style={{ marginTop: 4, display: "inline-block" }}>{a.kind}</span>
              </div>
              <RowMenu onEdit={() => setEditAcc(a)} onDelete={() => A.remove(a.id)} />
            </div>
            <div style={{ fontSize: 22, fontWeight: 700, marginTop: 10, color: a.balance < 0 ? "var(--ml-red)" : "var(--ml-ink)", letterSpacing: "-0.02em" }}>{fmt(a.balance)}</div>
            {a.note && <div className="cy-muted" style={{ fontSize: 11.5, marginTop: 3 }}>{a.note}</div>}
            <Btn variant="ghost" size="sm" icon="pen" onClick={() => setEditAcc(a)} style={{ marginTop: 8, padding: "5px 0", color: "var(--ml-ink-3)" }}>Bakiye güncelle</Btn>
          </Card>
        ))}
      </div>

      {/* NAKİT AKIŞI */}
      <div className="cy-between" style={{ margin: "28px 0 12px", flexWrap: "wrap", gap: 10 }}>
        <h3 className="cy-h3">Nakit akışı</h3>
        <div className="cy-seg" style={{ flexWrap: "wrap" }}>
          {[{ k: "all", l: "Tümü" }, { k: "gelir", l: "Gelir" }, { k: "gider", l: "Gider" }, { k: "bekliyor", l: "Bekleyen" }].map((o) => (
            <button key={o.k} className={"cy-choice" + (filter === o.k ? " on" : "")} onClick={() => setFilter(o.k)}>{o.l}</button>
          ))}
        </div>
      </div>
      <Card style={{ padding: 0, overflow: "hidden" }}>
        <div className="cy-cf-head">
          <span style={{ width: 34 }}>Gün</span>
          <span style={{ flex: 1 }}>Kalem</span>
          <span className="cy-cf-num">Tutar</span>
          <span className="cy-cf-num cy-cf-run">Çalışan bakiye</span>
          <span style={{ width: 96 }}>Durum</span>
          <span style={{ width: 66 }} />
        </div>
        {shown.map((c) => {
          const sm = STATUS_META[c.status] || STATUS_META.bekliyor;
          return (
            <div key={c.id} className={"cy-cf-row" + (c.status !== "bekliyor" ? " done" : "") + (c.day === todayDom ? " is-today" : "")}>
              <span style={{ width: 34, fontFamily: "var(--ml-font-mono)", fontSize: 12, color: c.day === todayDom ? "var(--ml-red)" : "var(--ml-ink-4)", fontWeight: c.day === todayDom ? 700 : 400 }}>{c.day === 0 ? "—" : c.day}{c.day === todayDom ? "•" : ""}</span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ fontSize: 13.5, fontWeight: 500 }}>{c.label}</span>
                <span className="cy-muted" style={{ fontSize: 11.5, display: "block" }}>{accName(c.account)}{c.note ? " · " + c.note : ""}</span>
              </span>
              <span className="cy-cf-num" style={{ color: c.amount >= 0 ? "var(--ml-success)" : "var(--ml-red)", fontWeight: 600 }}>{c.amount >= 0 ? "+" : ""}{fmt(c.amount)}</span>
              <span className="cy-cf-num cy-cf-run" style={{ color: c.run < 0 ? "var(--ml-red)" : "var(--ml-ink-3)" }}>{fmt(c.run)}</span>
              <span style={{ width: 96 }}>
                <button className="cy-status-pill" style={{ color: sm.color, background: sm.bg }} onClick={() => cycle(c)} title="Durumu değiştir">{sm.label}</button>
              </span>
              <span style={{ display: "flex", gap: 2, flex: "none" }}>
                {c.status === "bekliyor"
                  ? <button className="cy-iconbtn-sm" title={c.type === "gelir" ? "Alındı işaretle" : "Yapıldı işaretle"} onClick={() => cycle(c)} style={{ color: c.type === "gelir" ? "var(--ml-success)" : "var(--ml-info)" }}><Icon name="check" style={{ width: 16 }} /></button>
                  : <button className="cy-iconbtn-sm" title="Geri al (bekliyor)" onClick={() => cycle(c)}><Icon name="repeat" style={{ width: 15 }} /></button>}
                <RowMenu onEdit={() => setEditCf(c)} onDelete={() => setDelCf(c)} />
              </span>
            </div>
          );
        })}
        {!shown.length && <div className="cy-empty" style={{ margin: 16 }}>Bu filtrede hareket yok.</div>}
      </Card>

      {/* BİRİKMİŞ BORÇLAR */}
      <div className="cy-between" style={{ margin: "28px 0 12px" }}>
        <h3 className="cy-h3">Birikmiş borçlar</h3>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="cy-mono" style={{ fontSize: 15, fontWeight: 700, color: "var(--ml-red)" }}>{fmt(toplamBorc)}</span>
          <Btn variant="ghost" size="sm" icon="plus" onClick={() => setEditDebt({})}>Borç ekle</Btn>
        </div>
      </div>
      <div className="cy-debt-grid">
        {D.active.map((d) => (
          <div key={d.id} className="cy-debt-row">
            <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500 }}>{d.label}</span>
            <span className="cy-mono" style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ml-red)" }}>{fmt(d.amount)}</span>
            <button className="cy-iconbtn-sm" title="Ödeme görevi oluştur" onClick={() => { CF.add({ label: d.label + " — ödeme", day: 1, amount: -Math.abs(d.amount), type: "gider", account: A.active[0] ? A.active[0].id : "ac-is", period: "aylik", status: "bekliyor", note: "Birikmiş borç ödemesi" }); setFilter("gider"); }}><Icon name="arrowRight" style={{ width: 15 }} /></button>
            <RowMenu onEdit={() => setEditDebt(d)} onDelete={() => D.remove(d.id)} />
          </div>
        ))}
      </div>

      {editAcc && <EditSheet eyebrow={editAcc.id ? "Hesabı düzenle" : "Yeni hesap"} title={editAcc.id ? "Hesap / bakiye" : "Hesap ekle"}
        fields={[{ name: "name", label: "Hesap adı", placeholder: "örn. İş Bankası" }, { name: "balance", label: "Güncel bakiye (₺, eksi olabilir)", type: "number", default: 0 }, { name: "kind", label: "Tür", type: "select", options: ["Banka", "Nakit", "Kart", "Diğer"], default: "Banka" }, { name: "note", label: "Not", optional: true }]}
        initial={editAcc.id ? editAcc : null} onClose={() => setEditAcc(null)}
        onSave={(v) => {
          if (editAcc.id) {
            const old = A.active.find((a) => a.id === editAcc.id);
            const diff = Number(v.balance) - (old ? old.balance : 0);
            A.update(editAcc.id, v);
            if (Math.abs(diff) >= 1) {
              CF.add({ label: "Kategorize edilmemiş " + (diff < 0 ? "gider" : "gelir"), day: todayDom, amount: diff, type: diff < 0 ? "gider" : "gelir", account: editAcc.id, period: "aylik", status: diff < 0 ? "yapildi" : "alindi", note: "Bakiye düzeltmesi · " + CY.today.label });
            }
          } else A.add(v);
          setEditAcc(null);
        }} />}

      {editCf && <EditSheet eyebrow={editCf.id ? "Hareketi düzenle" : "Yeni hareket"} title={editCf.id ? "Gelir / gider" : "Hareket ekle"}
        fields={CF_FIELDS.map((f) => f.name === "account" ? { ...f, options: accOpts } : f)}
        initial={editCf.id ? { ...editCf, amount: Math.abs(editCf.amount) } : null} onClose={() => setEditCf(null)}
        onSave={(v) => { const amt = (v.type === "gider" ? -1 : 1) * Math.abs(Number(v.amount) || 0); const rec = { ...v, amount: amt }; editCf.id ? CF.update(editCf.id, rec) : CF.add({ ...rec, status: "bekliyor" }); setEditCf(null); }} />}
      {delCf && <ConfirmSheet body={`"${delCf.label}" hareketi silinecek.`} onClose={() => setDelCf(null)} onConfirm={() => { CF.remove(delCf.id); setDelCf(null); }} />}

      {editDebt && <EditSheet eyebrow={editDebt.id ? "Borcu düzenle" : "Yeni borç"} title="Birikmiş borç"
        fields={[{ name: "label", label: "Kime / ne", placeholder: "örn. Muhasebeci" }, { name: "amount", label: "Tutar (₺)", type: "number", default: 0 }]}
        initial={editDebt.id ? editDebt : null} onClose={() => setEditDebt(null)}
        onSave={(v) => { editDebt.id ? D.update(editDebt.id, v) : D.add(v); setEditDebt(null); }} />}
    </div>
  );
}

Object.assign(window, { Butce });