// screens/finances.jsx — Bills + Expenses + Reports (P&L)
// All literals routed through tt() — castellano-first per PRODUCT.md.

function Finances({ ctx }) {
  const { data } = ctx;
  const tt = ctx.tt;
  const [tab, setTab] = React.useState("bills");
  return (
    <>
      <div className="main-top">
        <div className="title">
          <h1 className="display">{tt("fin.title")}</h1>
          <div className="sub">{tt("fin.sub", { n: data.apartments.length })}</div>
        </div>
        <div className="actions">
          <HeaderTools ctx={ctx} />
          <button className="btn"><Icon name="file" size={14} /> {tt("btn.exportCsv")}</button>
          <RecordMenu ctx={ctx} />
        </div>
      </div>

      <div className="main-scroll">
        <Tabs underline value={tab} onChange={setTab} tabs={[
          { value: "bills", label: tt("fin.tab.bills"), icon: "euro", count: data.bills.filter((b) => b.period === "2026-05").length },
          { value: "expenses", label: tt("fin.tab.expenses"), icon: "receipt" },
          { value: "reports", label: tt("fin.tab.reports"), icon: "trendUp" },
        ]} />

        <div style={{ marginTop: 22 }}>
          {tab === "bills" && <BillsLedger ctx={ctx} />}
          {tab === "expenses" && <ExpensesLedger ctx={ctx} />}
          {tab === "reports" && <ReportsPanel ctx={ctx} />}
        </div>
      </div>
    </>
  );
}

// ───────────────────────── BILLS ─────────────────────────
function BillsLedger({ ctx }) {
  const { data, markPaid, nav } = ctx;
  const tt = ctx.tt;
  const [statusFilter, setStatusFilter] = React.useState("all");
  const [aptFilter, setAptFilter] = React.useState("all");

  const filtered = data.bills.filter((b) => {
    if (statusFilter !== "all" && b.status !== statusFilter) return false;
    if (aptFilter !== "all" && b.aptId !== aptFilter) return false;
    return true;
  });

  const grouped = filtered.reduce((acc, b) => {
    acc[b.period] = acc[b.period] || [];
    acc[b.period].push(b);
    return acc;
  }, {});
  const periods = Object.keys(grouped).sort().reverse();

  const totals = {
    paid: filtered.filter((b) => b.status === "paid").reduce((s, b) => s + b.amount, 0),
    pending: filtered.filter((b) => b.status === "pending").reduce((s, b) => s + b.amount, 0),
    overdue: filtered.filter((b) => b.status === "overdue").reduce((s, b) => s + b.amount, 0),
  };

  return (
    <>
      <div className="grid-stat-4" style={{ marginBottom: 18, gridTemplateColumns: "repeat(4, 1fr)" }}>
        <Stat icon="check" label={tt("fin.stat.collected")} value={fmtEUR(totals.paid)} />
        <Stat icon="clock" label={tt("fin.stat.pending")} value={fmtEUR(totals.pending)} />
        <Stat icon="bell"  label={tt("fin.stat.overdue")} value={fmtEUR(totals.overdue)}
              sub={totals.overdue > 0 ? <span style={{ color: "var(--ef-danger)" }}>{tt("fin.needsFollowUp")}</span> : null} />
        <Stat icon="euro" label={tt("fin.stat.totalBilled")} value={fmtEUR(totals.paid + totals.pending + totals.overdue)} />
      </div>

      <div className="flex center gap-2" style={{ marginBottom: 14, flexWrap: "wrap" }}>
        <Tabs value={statusFilter} onChange={setStatusFilter} tabs={[
          { value: "all",     label: tt("fin.filter.all") },
          { value: "paid",    label: tt("fin.filter.paid") },
          { value: "pending", label: tt("fin.filter.pending") },
          { value: "overdue", label: tt("fin.filter.overdue") },
        ]} />
        <div style={{ width: 1, height: 22, background: "var(--ef-line)", margin: "0 4px" }} />
        <FilterPills value={aptFilter} onChange={setAptFilter}
                     options={[{ value: "all", label: tt("fin.allFlats") }, ...data.apartments.map((a) => ({ value: a.id, label: a.name }))]} />
      </div>

      {periods.map((p) => (
        <Card className="flush" key={p} style={{ marginBottom: 16 }}>
          <div style={{ padding: "14px 20px", display: "flex", alignItems: "center", borderBottom: "1px solid var(--ef-line)", background: "var(--ef-bg-soft)" }}>
            <h3 style={{ fontSize: 14 }}>{monthLabel(p, true)}</h3>
            <span className="muted txt-sm" style={{ marginLeft: 12 }}>
              {tt("fin.bills.summary", { n: grouped[p].length, amt: fmtEUR(grouped[p].reduce((s, b) => s + b.amount, 0)) })}
            </span>
            <span className="num b500" style={{ marginLeft: "auto" }}>
              {tt("fin.bills.collected", { amt: fmtEUR(grouped[p].filter((b) => b.status === "paid").reduce((s, b) => s + b.amount, 0)) })}
            </span>
          </div>
          <table className="table">
            <thead>
              <tr>
                <th>{tt("col.bill")}</th>
                <th>{tt("col.tenant")}</th>
                <th>{tt("col.apartment")}</th>
                <th>{tt("fin.col.type")}</th>
                <th>{tt("col.due")}</th>
                <th className="num">{tt("col.amount")}</th>
                <th>{tt("col.status")}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {grouped[p].map((b) => {
                const tn = b.tenantId && data.byId.tenant(b.tenantId);
                const apt = data.byId.apt(b.aptId);
                return (
                  <tr key={b.id}>
                    <td>
                      <div className="b500" style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                        {b.label}
                        {b.source === "ai" && (
                          <span title={tt("ai.processed") || "Procesado por IA"}
                                style={{
                                  display: "inline-flex", alignItems: "center", gap: 2,
                                  fontSize: 10, padding: "1px 6px", borderRadius: 999,
                                  background: "var(--ef-accent-soft)", color: "var(--ef-accent-deep)",
                                  fontWeight: 500, letterSpacing: "0.02em",
                                }}>
                            <Icon name="spark" size={9} /> IA
                          </span>
                        )}
                      </div>
                    </td>
                    <td>{tn
                      ? <span className="flex center gap-2" onClick={(e) => { e.stopPropagation(); nav("tenant", tn.id); }}>
                          <div className="avatar sm">{initials(tn.name)}</div>
                          {tn.name}
                        </span>
                      : <span className="muted">{tt("fin.allTenants")}</span>}</td>
                    <td><Link onClick={() => nav("apartment", apt.id)}>{apt.name}</Link></td>
                    <td><Pill>{labelOfType(b.type)}</Pill></td>
                    <td className="num muted">{fmtDate(b.dueDate, { short: true })}</td>
                    <td className="num b500">{fmtEUR(b.amount)}</td>
                    <td><StatusBadge status={b.status} /></td>
                    <td style={{ width: 140 }}>
                      <div className="flex gap-1" onClick={(e) => e.stopPropagation()} style={{ justifyContent: "flex-end" }}>
                        {b.status !== "paid" && (
                          <MarkPaidPopover ctx={ctx} bill={b}
                                           onConfirm={(method) => markPaid(b.id, { method, amount: fmtEUR(b.amount, { decimals: false }) })} />
                        )}
                        <RowMenu items={[
                          { icon: "eye",      label: tt("bill.view")     || "Ver detalle",     onClick: () => ctx.showToast && ctx.showToast("Detalle de factura (mock)") },
                          { icon: "settings", label: tt("bill.edit")     || "Editar",          onClick: () => ctx.showToast && ctx.showToast("Editar factura (mock)") },
                          { icon: "file",     label: tt("bill.exportPdf")|| "Exportar PDF",    onClick: () => ctx.showToast && ctx.showToast("Factura.pdf descargada") },
                          { divider: true },
                          { icon: "x",        label: tt("bill.delete")   || "Eliminar", danger: true, onClick: () => ctx.confirm && ctx.confirm({
                              title: (tt("bill.delete") || "Eliminar") + " · " + (b.label || ""),
                              body: tt("bill.deleteConfirm") || "Esta acción no se puede deshacer. La factura quedará eliminada del registro.",
                              confirmLabel: tt("bill.delete") || "Eliminar",
                              danger: true,
                              onConfirm: () => ctx.showToast && ctx.showToast({ message: tt("toast.billDeleted") || "Factura eliminada", undo: () => ctx.showToast(tt("toast.undone") || "Restaurada") }),
                            }) },
                        ]} />
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      ))}
    </>
  );
}

// ───────────────────────── EXPENSES ─────────────────────────
function ExpensesLedger({ ctx }) {
  const { data, nav } = ctx;
  const tt = ctx.tt;
  const [aptFilter, setAptFilter] = React.useState("all");
  const [catFilter, setCatFilter] = React.useState("all");

  const filtered = data.expenses.filter((e) => {
    if (aptFilter !== "all" && e.aptId !== aptFilter) return false;
    if (catFilter !== "all" && e.category !== catFilter) return false;
    return true;
  });
  const total = filtered.reduce((s, e) => s + e.amount, 0);
  const categories = Array.from(new Set(data.expenses.map((e) => e.category)));

  const categoryLabel = (c) => {
    const key = `fin.cat.${c}`;
    const t = tt(key);
    if (t && t !== key) return t;
    return c[0].toUpperCase() + c.slice(1);
  };

  return (
    <>
      <div className="grid-stat-4" style={{ marginBottom: 18 }}>
        <Stat icon="receipt"  label={tt("fin.stat.expensesTotal")} value={fmtEUR(total)} sub={<span className="muted">{tt("fin.itemCount", { n: filtered.length })}</span>} />
        <Stat icon="wrench"   label={tt("fin.stat.maintenance")}    value={fmtEUR(filtered.filter((e) => e.category === "maintenance").reduce((s, e) => s + e.amount, 0))} />
        <Stat icon="building" label={tt("fin.stat.community")}      value={fmtEUR(filtered.filter((e) => e.category === "community").reduce((s, e) => s + e.amount, 0))} />
        <Stat icon="file"     label={tt("fin.stat.tax")}            value={fmtEUR(filtered.filter((e) => e.category === "tax").reduce((s, e) => s + e.amount, 0))} />
      </div>

      <div className="flex center gap-2" style={{ marginBottom: 14, flexWrap: "wrap" }}>
        <FilterPills value={aptFilter} onChange={setAptFilter}
                     options={[{ value: "all", label: tt("fin.allFlats") }, ...data.apartments.map((a) => ({ value: a.id, label: a.name }))]} />
        <div style={{ width: 1, height: 22, background: "var(--ef-line)" }} />
        <FilterPills value={catFilter} onChange={setCatFilter}
                     options={[{ value: "all", label: tt("fin.allCategories") }, ...categories.map((c) => ({ value: c, label: categoryLabel(c) }))]} />
      </div>

      <Card className="flush">
        <table className="table">
          <thead>
            <tr>
              <th>{tt("fin.col.date")}</th>
              <th>{tt("fin.col.label")}</th>
              <th>{tt("col.apartment")}</th>
              <th>{tt("fin.col.vendor")}</th>
              <th>{tt("fin.col.category")}</th>
              <th className="num">{tt("col.amount")}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.sort((a, b) => b.date.localeCompare(a.date)).map((e) => {
              const apt = data.byId.apt(e.aptId);
              return (
                <tr key={e.id} onClick={() => nav("apartment", e.aptId)}>
                  <td className="num">{fmtDate(e.date, { short: true })}</td>
                  <td><div className="b500">{e.label}</div></td>
                  <td><Link onClick={() => nav("apartment", e.aptId)}>{apt.name}</Link></td>
                  <td className="muted">{e.vendor}</td>
                  <td><Pill>{categoryLabel(e.category)}</Pill></td>
                  <td className="num b500">−{fmtEUR(e.amount)}</td>
                  <td style={{ width: 44 }} onClick={(ev) => ev.stopPropagation()}>
                    <RowMenu items={[
                      { icon: "eye",      label: tt("bill.view")     || "Ver detalle",      onClick: () => ctx.showToast && ctx.showToast("Detalle del gasto (mock)") },
                      { icon: "settings", label: tt("bill.edit")     || "Editar",           onClick: () => ctx.showToast && ctx.showToast("Editar gasto (mock)") },
                      { icon: "file",     label: tt("bill.attach")   || "Adjuntar factura", onClick: () => ctx.showToast && ctx.showToast("Adjuntar PDF (mock)") },
                      { divider: true },
                      { icon: "x",        label: tt("bill.delete")   || "Eliminar", danger: true, onClick: () => ctx.confirm && ctx.confirm({
                          title: (tt("bill.delete") || "Eliminar") + " · " + (e.label || ""),
                          body: tt("expense.deleteConfirm") || "Esta acción no se puede deshacer.",
                          confirmLabel: tt("bill.delete") || "Eliminar",
                          danger: true,
                          onConfirm: () => ctx.showToast && ctx.showToast({ message: tt("toast.expenseDeleted") || "Gasto eliminado", undo: () => ctx.showToast(tt("toast.undone") || "Restaurado") }),
                        }) },
                    ]} />
                  </td>
                </tr>
              );
            })}
            {filtered.length === 0 && <tr><td colSpan="6"><Empty icon="receipt" title={tt("fin.noExpenses")} /></td></tr>}
          </tbody>
        </table>
      </Card>
    </>
  );
}

// ───────────────────────── REPORTS (P&L) ─────────────────────────
function ReportsPanel({ ctx }) {
  const { data, nav } = ctx;
  const tt = ctx.tt;
  const totalRevenue = Object.values(data.aptYTD).reduce((s, x) => s + x.revenue, 0);
  const totalExpenses = Object.values(data.aptYTD).reduce((s, x) => s + x.expenses, 0);
  const totalMortgage = Object.values(data.aptYTD).reduce((s, x) => s + x.mortgage, 0);
  const totalNet = Object.values(data.aptYTD).reduce((s, x) => s + x.net, 0);

  return (
    <>
      <div className="grid-stat-4" style={{ marginBottom: 18 }}>
        <Stat icon="upTrend"   label={tt("fin.stat.ytdRevenue")}  value={fmtEUR(totalRevenue)} delta="+5.2%" deltaDir="up" />
        <Stat icon="downTrend" label={tt("fin.stat.ytdExpenses")} value={fmtEUR(totalExpenses)} />
        <Stat icon="building"  label={tt("fin.stat.mortgagePaid")} value={fmtEUR(totalMortgage)} sub={<span className="muted">{tt("fin.mortgage.range")}</span>} />
        <Stat icon="euro"      label={tt("fin.stat.netYtd")} value={fmtEUR(totalNet, { sign: totalNet > 0 })}
              sub={<span style={{ color: totalNet >= 0 ? "var(--ef-accent-deep)" : "var(--ef-danger)" }}>
                {tt("fin.margin", { n: Math.round((totalNet / totalRevenue) * 100) })}
              </span>} />
      </div>

      <div className="split-23">
        <Card>
          <div className="card-head">
            <h3>{tt("fin.reports.revByApt")}</h3>
            <div className="muted txt-sm head-right">{tt("fin.reports.ytdRange")}</div>
          </div>
          <div className="flex col gap-3" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {data.apartments.map((a) => {
              const r = data.aptYTD[a.id];
              const profitable = r.net >= 0;
              return (
                <div key={a.id} onClick={() => nav("apartment", a.id)} style={{ cursor: "pointer" }}>
                  <div className="flex between" style={{ marginBottom: 6 }}>
                    <div className="flex center gap-2">
                      <div style={{ width: 24, height: 24, borderRadius: 6, overflow: "hidden" }}><AptArchHero aptId={a.id} /></div>
                      <span className="b500">{a.name}</span>
                      <span className="muted txt-xs">· {a.neighborhood}</span>
                    </div>
                    <div className="flex center gap-3">
                      <span className="num b500">{fmtEUR(r.revenue)}</span>
                      <Pill tone={profitable ? "positive" : "danger"}>
                        {fmtEUR(r.net, { sign: profitable })} {tt("fin.reports.legend.net").toLowerCase()}
                      </Pill>
                    </div>
                  </div>
                  <div style={{ display: "flex", gap: 2, height: 22, borderRadius: 6, overflow: "hidden", background: "var(--ef-bg-soft)" }}>
                    <div style={{ width: `${(r.expenses / r.revenue) * 100}%`, background: "var(--ef-muted)" }} title={`${tt("fin.reports.legend.expenses")} ${fmtEUR(r.expenses)}`} />
                    <div style={{ width: `${(r.mortgage / r.revenue) * 100}%`, background: "var(--ef-warn)" }} title={`${tt("fin.reports.legend.mortgage")} ${fmtEUR(r.mortgage)}`} />
                    <div style={{ flex: 1, background: profitable ? "var(--ef-accent-deep)" : "var(--ef-danger)", display: "flex", alignItems: "center", padding: "0 6px", color: "var(--ef-bg)", fontSize: 11, fontWeight: 500 }}>
                      {profitable ? "" : tt("fin.reports.loss")}
                    </div>
                  </div>
                </div>
              );
            })}
            <div className="flex gap-3 txt-xs muted" style={{ marginTop: 6 }}>
              <span className="flex center gap-1"><i style={{ width: 10, height: 10, background: "var(--ef-muted)", borderRadius: 2 }} /> {tt("fin.reports.legend.expenses")}</span>
              <span className="flex center gap-1"><i style={{ width: 10, height: 10, background: "var(--ef-warn)", borderRadius: 2 }} /> {tt("fin.reports.legend.mortgage")}</span>
              <span className="flex center gap-1"><i style={{ width: 10, height: 10, background: "var(--ef-accent-deep)", borderRadius: 2 }} /> {tt("fin.reports.legend.net")}</span>
            </div>
          </div>
        </Card>

        <Card>
          <div className="card-head"><h3>{tt("fin.reports.pl")}</h3><div className="muted txt-sm head-right">{tt("fin.reports.ytd")}</div></div>
          <table className="table" style={{ marginTop: -10 }}>
            <tbody>
              <tr><td className="muted">{tt("fin.reports.revenue")}</td><td className="num"></td></tr>
              <tr><td>{tt("fin.reports.academicRent")}</td><td className="num">{fmtEUR(totalRevenue * 0.86)}</td></tr>
              <tr><td>{tt("fin.reports.shortStays")}</td><td className="num">{fmtEUR(totalRevenue * 0.10)}</td></tr>
              <tr><td>{tt("fin.reports.utility")}</td><td className="num">{fmtEUR(totalRevenue * 0.04)}</td></tr>
              <tr style={{ background: "var(--ef-bg-soft)" }}>
                <td className="b500">{tt("fin.reports.totalRev")}</td>
                <td className="num b500">{fmtEUR(totalRevenue)}</td>
              </tr>
              <tr><td className="muted">{tt("fin.reports.expenses")}</td><td></td></tr>
              <tr><td>{tt("fin.reports.maint")}</td><td className="num">−{fmtEUR(totalExpenses * 0.42)}</td></tr>
              <tr><td>{tt("fin.stat.community")}</td><td className="num">−{fmtEUR(totalExpenses * 0.30)}</td></tr>
              <tr><td>{tt("fin.reports.utilities")}</td><td className="num">−{fmtEUR(totalExpenses * 0.18)}</td></tr>
              <tr><td>{tt("fin.reports.ibi")}</td><td className="num">−{fmtEUR(totalExpenses * 0.10)}</td></tr>
              <tr style={{ background: "var(--ef-bg-soft)" }}>
                <td className="b500">{tt("fin.reports.operatingExp")}</td>
                <td className="num b500">−{fmtEUR(totalExpenses)}</td>
              </tr>
              <tr><td className="muted">{tt("fin.reports.financing")}</td><td></td></tr>
              <tr><td>{tt("fin.reports.mortgage")}</td><td className="num">−{fmtEUR(totalMortgage)}</td></tr>
              <tr style={{ background: "var(--ef-accent-soft)", color: "var(--ef-accent-deep)" }}>
                <td className="b500">{tt("fin.reports.netResult")}</td>
                <td className="num b500">{fmtEUR(totalNet, { sign: totalNet > 0 })}</td>
              </tr>
            </tbody>
          </table>
        </Card>
      </div>

      <SectionTitle>{tt("fin.reports.monthlyCash")}</SectionTitle>
      <Card>
        <BarChart data={data.monthlySeries} />
      </Card>
    </>
  );
}

// ───────────────────────── FilterPills ─────────────────────────
function FilterPills({ value, onChange, options }) {
  return (
    <div className="flex center gap-1" style={{ flexWrap: "wrap" }}>
      {options.map((o) => (
        <button key={o.value} className={`chip ${o.value === value ? "solid" : ""}`}
                style={{ cursor: "pointer", border: o.value === value ? "1px solid transparent" : "1px solid var(--ef-line)" }}
                onClick={() => onChange(o.value)}>
          {o.label}
        </button>
      ))}
    </div>
  );
}

window.Finances = Finances;