/* ============================================================
   EDUCARE — Financeiro (entradas, saídas, saldo, gráficos)
   ============================================================ */
(function () {
  const { useState } = React;
  const Icon = window.Icon;
  const brl = (n) => "R$ " + (Number(n) || 0).toLocaleString("pt-BR");

  const PAY_STATUS = {
    pago: { label: "Pago", cls: "ok" },
    pendente: { label: "Em aberto", cls: "muted" },
    parcial: { label: "Parcial", cls: "warn" },
    atrasado: { label: "Atrasado", cls: "warn" },
    agendado: { label: "Agendado", cls: "muted" },
  };
  const METHODS = ["Pix", "Cartão", "Transferência", "Dinheiro", "Boleto"];

  function groupSum(arr, keyFn) {
    const m = {};
    arr.forEach((x) => { const k = keyFn(x); if (!k) return; m[k] = (m[k] || 0) + (Number(x.value) || 0); });
    return Object.keys(m).map((k) => ({ label: k, value: m[k] })).sort((a, b) => b.value - a.value);
  }

  function HBars({ items, color, empty }) {
    if (!items.length) return <p className="help-text" style={{ margin: 0 }}>{empty || "Sem dados."}</p>;
    const max = Math.max.apply(null, items.map((i) => i.value).concat([1]));
    return (
      <div className="hbars">
        {items.map((i) => (
          <div className="hbar" key={i.label}>
            <span className="hb-l">{i.label}</span>
            <div className="hb-track"><i style={{ width: (i.value / max * 100) + "%", background: color }}></i></div>
            <span className="hb-v">{brl(i.value)}</span>
          </div>
        ))}
      </div>
    );
  }

  function MonthlyChart({ data }) {
    const max = Math.max.apply(null, data.flatMap((d) => [d.receita, d.despesa]).concat([1]));
    return (
      <>
        <div className="mchart">
          {data.map((d) => (
            <div className="mcol" key={d.m}>
              <div className="mbars">
                <i className="mb r" style={{ height: (d.receita / max * 100) + "%" }} title={"Entradas: " + brl(d.receita)}></i>
                <i className="mb d" style={{ height: (d.despesa / max * 100) + "%" }} title={"Saídas: " + brl(d.despesa)}></i>
              </div>
              <span className="mlbl">{d.m}</span>
            </div>
          ))}
        </div>
        <div className="mlegend"><span><i className="ld r"></i> Entradas</span><span><i className="ld d"></i> Saídas</span></div>
      </>
    );
  }

  /* ---------------- Modais ---------------- */
  function RecModal({ onClose, onSaved }) {
    const [pid, setPid] = useState("");
    const [desc, setDesc] = useState("Sessão psicopedagógica · 50 min");
    const [value, setValue] = useState("");
    const [method, setMethod] = useState("Pix");
    const [status, setStatus] = useState("pago");
    const [date, setDate] = useState(window.todayISO ? window.todayISO() : "2026-06-04");
    const [err, setErr] = useState("");
    function save() {
      if (!value || Number(value) <= 0) { setErr("Informe um valor válido."); return; }
      const bi = window.Billing;
      if (pid && bi) {
        // Receita de paciente entra pela FONTE ÚNICA (cobrança por atendimento).
        bi.recordSession(pid, date, Number(value), "realizado");
        if (status === "pago") bi.payPeriod(pid, "mes", bi.monthKeyOf(date), Number(value), method);
      } else {
        window.addRecebimento({ pid, date, desc, value, method: status === "pago" ? method : "—", status });
      }
      onSaved();
    }
    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <div className="modal-head"><div><h3>Registrar recebimento</h3><p>Entrada de sessão, avaliação ou outro serviço.</p></div><button className="x" onClick={onClose}><Icon name="x" size={18} /></button></div>
          <div className="modal-body">
            <div className="fld"><label>Paciente</label><select className="ctrl" value={pid} onChange={(e) => setPid(e.target.value)}><option value="">— (avulso)</option>{(window.PATIENTS || []).map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}</select></div>
            <div className="fld"><label>Descrição</label><input className="ctrl" value={desc} onChange={(e) => setDesc(e.target.value)} /></div>
            <div className="grid-2">
              <div className="fld"><label>Valor (R$)</label><input className="ctrl" type="number" min="0" value={value} onChange={(e) => setValue(e.target.value)} placeholder="0" /></div>
              <div className="fld"><label>Data</label><input className="ctrl" type="date" value={date} onChange={(e) => setDate(e.target.value)} /></div>
            </div>
            <div className="grid-2">
              <div className="fld"><label>Status</label><select className="ctrl" value={status} onChange={(e) => setStatus(e.target.value)}><option value="pago">Pago</option><option value="pendente">Pendente</option><option value="agendado">Agendado</option><option value="atrasado">Atrasado</option></select></div>
              <div className="fld"><label>Forma</label><select className="ctrl" value={method} onChange={(e) => setMethod(e.target.value)} disabled={status !== "pago"}>{METHODS.map((m) => <option key={m}>{m}</option>)}</select></div>
            </div>
            {err && <p className="form-err" style={{ color: "#EF4444", fontWeight: 700, fontSize: 13.5, margin: "0 0 4px" }}>{err}</p>}
            <div className="form-actions" style={{ marginTop: 14 }}><button className="btn btn-ghost btn-sm" onClick={onClose}>Cancelar</button><button className="btn btn-primary btn-sm" onClick={save}><Icon name="plus" size={16} /> Registrar</button></div>
          </div>
        </div>
      </div>
    );
  }

  function DespModal({ onClose, onSaved }) {
    const [desc, setDesc] = useState("");
    const [category, setCategory] = useState("Materiais");
    const [value, setValue] = useState("");
    const [method, setMethod] = useState("Cartão");
    const [date, setDate] = useState(window.todayISO ? window.todayISO() : "2026-06-04");
    const [err, setErr] = useState("");
    function save() {
      if (!desc.trim()) { setErr("Descreva a despesa."); return; }
      if (!value || Number(value) <= 0) { setErr("Informe um valor válido."); return; }
      window.addDespesa({ date, desc, category, value, method });
      onSaved();
    }
    return (
      <div className="modal-scrim" onClick={onClose}>
        <div className="modal" onClick={(e) => e.stopPropagation()}>
          <div className="modal-head"><div><h3>Registrar despesa</h3><p>Saída da empresa (aluguel, materiais, impostos…).</p></div><button className="x" onClick={onClose}><Icon name="x" size={18} /></button></div>
          <div className="modal-body">
            <div className="fld"><label>Descrição</label><input className="ctrl" value={desc} onChange={(e) => setDesc(e.target.value)} placeholder="Ex: Aluguel da sala" /></div>
            <div className="grid-2">
              <div className="fld"><label>Categoria</label><select className="ctrl" value={category} onChange={(e) => setCategory(e.target.value)}>{(window.DESPESA_CATS || []).map((c) => <option key={c}>{c}</option>)}</select></div>
              <div className="fld"><label>Forma</label><select className="ctrl" value={method} onChange={(e) => setMethod(e.target.value)}>{METHODS.map((m) => <option key={m}>{m}</option>)}</select></div>
            </div>
            <div className="grid-2">
              <div className="fld"><label>Valor (R$)</label><input className="ctrl" type="number" min="0" value={value} onChange={(e) => setValue(e.target.value)} placeholder="0" /></div>
              <div className="fld"><label>Data</label><input className="ctrl" type="date" value={date} onChange={(e) => setDate(e.target.value)} /></div>
            </div>
            {err && <p className="form-err" style={{ color: "#EF4444", fontWeight: 700, fontSize: 13.5, margin: "0 0 4px" }}>{err}</p>}
            <div className="form-actions" style={{ marginTop: 14 }}><button className="btn btn-ghost btn-sm" onClick={onClose}>Cancelar</button><button className="btn btn-primary btn-sm" onClick={save}><Icon name="plus" size={16} /> Registrar</button></div>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- Tela ---------------- */
  function Financeiro() {
    const [tab, setTab] = useState("recebimentos");
    const [filter, setFilter] = useState("todos");
    const [recView, setRecView] = useState("cards"); // cards | lista
    const [modal, setModal] = useState(null); // "rec" | "desp" | null
    const [, force] = useState(0);

    const bi = window.Billing;
    const num = (v) => Number(v) || 0;
    const avulso = (window.PAYMENTS || []).filter((p) => !p.pid); // após migração, só avulso
    const desps = window.DESPESAS || [];
    const PAT = window.PATIENTS || [];
    const nomeDe = (pid) => (PAT.find((x) => x.id === pid) || {}).name || "—";

    // Receitas DERIVADAS do billing (fonte única) + avulsos manuais
    const lines = bi ? bi.ledgerLines() : [];
    const billReceita = bi ? bi.receita() : 0;
    const billAberto = bi ? bi.emAberto() : 0;
    const billAtrasado = bi ? bi.atrasadoTotal() : 0;
    const avPago = avulso.filter((p) => p.status === "pago").reduce((s, p) => s + num(p.value), 0);
    const avAReceber = avulso.filter((p) => p.status === "pendente" || p.status === "agendado").reduce((s, p) => s + num(p.value), 0);
    const avAtrasado = avulso.filter((p) => p.status === "atrasado").reduce((s, p) => s + num(p.value), 0);

    const receita = billReceita + avPago;
    const aReceber = billAberto + avAReceber;
    const atrasado = billAtrasado + avAtrasado;
    const despesa = desps.reduce((s, d) => s + num(d.value), 0);
    const saldo = receita - despesa;

    // Por forma de pagamento (recebido)
    const formaMap = {};
    lines.forEach((l) => { if (l.paid > 0) { const k = l.method || "Outros"; formaMap[k] = (formaMap[k] || 0) + l.paid; } });
    avulso.filter((p) => p.status === "pago").forEach((p) => { const k = (p.method && p.method !== "—") ? p.method : "Outros"; formaMap[k] = (formaMap[k] || 0) + num(p.value); });
    const porForma = Object.keys(formaMap).map((k) => ({ label: k, value: formaMap[k] })).sort((a, b) => b.value - a.value);
    const porCategoria = groupSum(desps, (d) => d.category || "Outros");

    // Linhas unificadas p/ a tabela (billing + avulso), com status normalizado
    const uiStatus = (s) => s === "pago" ? "pago" : s === "atrasado" ? "atrasado" : s === "parcial" ? "parcial" : "pendente";
    const recRows = lines.filter((l) => l.status !== "none").map((l) => ({ name: nomeDe(l.pid), pid: l.pid, dateDisp: bi.fmtDMY(l.date), desc: l.desc, method: l.method || "—", status: uiStatus(l.status), rem: l.rem, value: l.value }))
      .concat(avulso.map((p) => ({ name: "Avulso", pid: "", dateDisp: p.date, desc: p.desc, method: p.method || "—", status: uiStatus(p.status), rem: 0, value: num(p.value) })));
    const isPend = (r) => r.status !== "pago";
    recRows.sort((a, b) => { const pa = isPend(a) ? 0 : 1, pb = isPend(b) ? 0 : 1; if (pa !== pb) return pa - pb; return (a.name || "").localeCompare(b.name || "", "pt-BR"); });
    const rows = recRows.filter((r) => filter === "todos" || (filter === "pendente" ? (r.status === "pendente" || r.status === "parcial") : r.status === filter));

    // Lançamentos (entradas derivadas + saídas)
    const ledger = recRows.map((r) => ({ tipo: "entrada", date: r.dateDisp, desc: r.desc, who: r.name, value: r.value, status: r.status }))
      .concat(desps.map((d) => ({ tipo: "saida", date: d.date, desc: d.desc, who: d.category, value: d.value })));

    return (
      <>
        <div className="crumb">Dashboard <Icon name="chevR" size={13} /> <span className="cur">Financeiro</span></div>
        <div className="page-head">
          <div>
            <h1><Icon name="wallet" size={26} /> Financeiro</h1>
            <p className="sub">Entradas, saídas e saldo da clínica — com gráficos e lançamentos.</p>
          </div>
          <div className="dh-actions">
            <button className="btn btn-ghost btn-sm" onClick={() => setModal("desp")}><Icon name="plus" size={16} /> Despesa</button>
            <button className="btn btn-primary btn-sm" onClick={() => setModal("rec")}><Icon name="plus" size={16} /> Recebimento</button>
          </div>
        </div>

        <div className="fin-summary">
          <div className="fin-card accent"><div className="fl"><span className="fi"><Icon name="wallet" size={16} /></span> Entradas (recebido)</div><div className="fv">{brl(receita)}</div></div>
          <div className="fin-card"><div className="fl"><span className="fi" style={{ background: "var(--accent-soft)", color: "var(--accent-strong)" }}><Icon name="arrowRight" size={16} /></span> Saídas (despesas)</div><div className="fv">{brl(despesa)}</div></div>
          <div className={"fin-card " + (saldo >= 0 ? "pos" : "neg")}><div className="fl"><span className="fi" style={{ background: "var(--primary-soft)", color: "var(--primary)" }}><Icon name="chart" size={16} /></span> Saldo do mês</div><div className="fv">{brl(saldo)}</div></div>
          <div className="fin-card"><div className="fl"><span className="fi" style={{ background: "var(--accent-soft)", color: "var(--accent-strong)" }}><Icon name="bell" size={16} /></span> A receber</div><div className="fv">{brl(aReceber)}{atrasado > 0 && <span className="fsub"> · {brl(atrasado)} atrasado</span>}</div></div>
          <div className="fin-card"><div className="fl"><span className="fi" style={{ background: "var(--surface-3)", color: "var(--text-2)" }}><Icon name="clipboardCheck" size={16} /></span> Atendimentos no mês</div><div className="fv">{bi ? lines.filter((l) => l.ym === bi.monthKeyOf(bi.todayISO())).reduce((s, l) => s + l.count, 0) : 0}</div></div>
        </div>

        <div className="fin-charts">
          <div className="chart-card wide">
            <div className="ch-title"><b>Entradas × Saídas</b><span>últimos 6 meses</span></div>
            <MonthlyChart data={window.FIN_MONTHLY || []} />
          </div>
          <div className="chart-card">
            <div className="ch-title"><b>Receita por forma</b><span>recebido</span></div>
            <HBars items={porForma} color="var(--primary)" empty="Nenhum recebimento pago." />
          </div>
          <div className="chart-card">
            <div className="ch-title"><b>Despesas por categoria</b></div>
            <HBars items={porCategoria} color="var(--accent)" empty="Nenhuma despesa." />
          </div>
        </div>

        <div className="toolbar">
          <div className="seg">
            {[["recebimentos", "Recebimentos"], ["despesas", "Despesas"], ["lancamentos", "Lançamentos"]].map(([k, l]) => (
              <button key={k} className={tab === k ? "on" : ""} onClick={() => setTab(k)}>{l}</button>
            ))}
          </div>
          {tab === "recebimentos" && (
            <div className="seg" style={{ marginLeft: "auto" }}>
              {[["cards", "Cards"], ["lista", "Lista"]].map(([k, l]) => (
                <button key={k} className={recView === k ? "on" : ""} onClick={() => setRecView(k)}>{l}</button>
              ))}
            </div>
          )}
        </div>

        {tab === "recebimentos" && recView === "cards" && window.AtendPagamentos && (
          <window.AtendPagamentos embed onNavigate={(id) => { /* mantém no Financeiro */ }} />
        )}

        {tab === "recebimentos" && recView === "lista" && (
          <>
            <div className="seg" style={{ marginBottom: 10 }}>
              {[["todos", "Todos"], ["pago", "Pagos"], ["pendente", "Pendentes"], ["atrasado", "Atrasados"]].map(([k, l]) => (
                <button key={k} className={filter === k ? "on" : ""} onClick={() => setFilter(k)}>{l}</button>
              ))}
            </div>
            <div className="pay-table">
              <div className="pay-row head"><span>Paciente</span><span className="hide-sm">Descrição</span><span className="hide-sm">Forma</span><span>Status</span><span style={{ textAlign: "right" }}>Valor</span></div>
              {rows.length === 0 && <div className="rail-empty" style={{ padding: 24 }}>Nenhum lançamento.</div>}
              {rows.map((p, i) => {
                const pat = window.PATIENTS.find((x) => x.id === p.pid);
                const st = PAY_STATUS[p.status] || PAY_STATUS.pago;
                return (
                  <div className="pay-row" key={i}>
                    <div className="pp">{pat ? <span className={"avatar sm " + pat.color}>{pat.initials}</span> : <span className="avatar sm" style={{ background: "var(--surface-3)", color: "var(--text-3)" }}>—</span>}<div><b>{p.name}</b><div className="pdate">{p.dateDisp}</div></div></div>
                    <div className="hide-sm pdesc">{p.desc}</div>
                    <div className="hide-sm pdate">{p.method}</div>
                    <div><span className={"tag " + st.cls}><i className="d"></i>{p.status === "parcial" ? "Parcial · falta " + brl(p.rem) : st.label}</span></div>
                    <div className="pval">{brl(p.value)}</div>
                  </div>
                );
              })}
            </div>
          </>
        )}

        {tab === "despesas" && (
          <div className="pay-table">
            <div className="pay-row head desp"><span>Despesa</span><span className="hide-sm">Categoria</span><span className="hide-sm">Forma</span><span style={{ textAlign: "right" }}>Valor</span></div>
            {desps.map((d, i) => (
              <div className="pay-row desp" key={i}>
                <div className="pp"><span className="avatar sm" style={{ background: "var(--accent-soft)", color: "var(--accent-strong)" }}><Icon name="arrowRight" size={15} /></span><div><b>{d.desc}</b><div className="pdate">{d.date}</div></div></div>
                <div className="hide-sm"><span className="cat-chip">{d.category}</span></div>
                <div className="hide-sm pdate">{d.method}</div>
                <div className="pval out">- {brl(d.value)}</div>
              </div>
            ))}
            {desps.length === 0 && <div className="rail-empty" style={{ padding: 24 }}>Nenhuma despesa registrada.</div>}
          </div>
        )}

        {tab === "lancamentos" && (
          <div className="pay-table">
            <div className="pay-row head"><span>Lançamento</span><span className="hide-sm">Referência</span><span>Tipo</span><span style={{ textAlign: "right" }}>Valor</span></div>
            {ledger.map((l, i) => (
              <div className="pay-row lanc" key={i}>
                <div className="pp"><span className="avatar sm" style={l.tipo === "entrada" ? { background: "var(--primary-soft)", color: "var(--primary)" } : { background: "var(--accent-soft)", color: "var(--accent-strong)" }}><Icon name={l.tipo === "entrada" ? "wallet" : "arrowRight"} size={15} /></span><div><b>{l.desc}</b><div className="pdate">{l.date}</div></div></div>
                <div className="hide-sm pdate">{l.who || "—"}</div>
                <div><span className={"tag " + (l.tipo === "entrada" ? "ok" : "warn")}><i className="d"></i>{l.tipo === "entrada" ? "Entrada" : "Saída"}</span></div>
                <div className={"pval" + (l.tipo === "saida" ? " out" : "")}>{l.tipo === "saida" ? "- " : "+ "}{brl(l.value)}</div>
              </div>
            ))}
          </div>
        )}

        {modal === "rec" && <RecModal onClose={() => setModal(null)} onSaved={() => { setModal(null); force((n) => n + 1); }} />}
        {modal === "desp" && <DespModal onClose={() => setModal(null)} onSaved={() => { setModal(null); force((n) => n + 1); }} />}
      </>
    );
  }

  window.Financeiro = Financeiro;
})();