/* ANISAN — Faturamento. Livro de RECEITAS, espelhando "Compras / pagamentos do
   dia": cadastrar receita no catálogo + lançar receita, lista editável, com
   classificação pelo PLANO DE RECEITAS (grupo 3). A diferença é o sentido —
   aqui entram recebimentos (recebido / a receber), com conta de entrada. */

function Faturamento({ unit, period }) {
  const store = window.useStore();
  const D = window.ANISAN_DATA;
  const data = store.data;
  const cons = window.isCons(unit);
  const mobile = window.useIsMobile();

  const [lancDlg, setLancDlg] = React.useState(null);   // lançar/editar receita
  const [cadDlg, setCadDlg] = React.useState(null);     // cadastrar receita no catálogo
  const [recDlg, setRecDlg] = React.useState(null);     // confirmar recebimento

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  const REC_WORDING = { toggle: "Receber", toggleDone: "✓ Recebido", pending: "A receber", done: "Recebido", due: "prev.", doneAt: "recebido em" };

  const receitasAll = cons ? window.allReceitas(data) : (data.receitas[unit] || []).map(r => ({ ...r, _u: unit }));
  const receitas = receitasAll.filter(r => window.dateInRange(r.prev, period));
  const aReceber = receitas.filter(r => !r.recebido);
  const recebidas = receitas.filter(r => r.recebido);
  const sum = (a) => a.reduce((s, r) => s + (Number(r.value) || 0), 0);

  // ---- CRUD ----
  const setRec = (tu, id, patch) => store.set(d => { const r = d.receitas[tu].find(x => x.id === id); if (r) Object.assign(r, patch); }, "receitas");
  const delRec = (tu, id) => store.set(d => { d.receitas[tu] = d.receitas[tu].filter(x => x.id !== id); }, "receitas");
  const saveLanc = () => {
    const f = lancDlg;
    const tu = f._u || (cons ? D.units[0] : unit);
    const rec = {
      name: f.descricao || "Receita", value: window.parseBRL(f.valor), plano: f.plano || "", prev: f.prev || "",
      recebido: !!f.recebido,
      conta: f.recebido ? (f.conta || "Cash") : "",
      recebimento: f.recebido ? (f.recebimento || window.todayISO()) : "",
    };
    store.set(d => {
      if (f.id) { const r = d.receitas[f._u].find(x => x.id === f.id); if (r) Object.assign(r, rec); }
      else d.receitas[tu].push({ id: window.uid(), ...rec });
    }, "receitas");
    setLancDlg(null);
  };
  const editLanc = (r) => setLancDlg({ id: r.id, _u: r._u, descricao: r.name, valor: String(r.value), conta: r.conta || "Cash", plano: r.plano || "", prev: window.ddmmToISO(r.prev) || "", recebido: !!r.recebido, recebimento: r.recebimento || "" });

  // Receber: marcar abre confirmação (conta de entrada + dia do recebimento).
  const requestToggle = (r) => {
    if (r.recebido) { setRec(r._u, r.id, { recebido: false, conta: "", recebimento: "" }); return; }
    setRecDlg({ _u: r._u, id: r.id, name: r.name, value: r.value, conta: r.conta || "Cash", data: window.todayISO() });
  };
  const confirmRec = () => { const f = recDlg; setRec(f._u, f.id, { recebido: true, conta: f.conta || "Cash", recebimento: f.data || window.todayISO() }); setRecDlg(null); };

  // ---- catálogo de receitas ----
  const saveCad = () => {
    const f = cadDlg;
    store.set(d => {
      if (!d.receitasCadastradas) d.receitasCadastradas = [];
      if (f.id) { const c = d.receitasCadastradas.find(x => x.id === f.id); if (c) Object.assign(c, { nome: f.nome || "Receita", plano: f.plano || "", conta: f.conta || "Cash" }); }
      else d.receitasCadastradas.push({ id: window.uid(), nome: f.nome || "Receita", plano: f.plano || "", conta: f.conta || "Cash" });
    }, "receitasCadastradas");
    setCadDlg(null);
  };

  const SectionTitle = window.SectionTitle, Button = window.Button, LedgerRow = window.LedgerRow,
    Select = window.Select, Input = window.Input, Dialog = window.Dialog, StatCard = window.StatCard;

  return (
    <div style={{ padding: mobile ? "18px 14px 40px" : "26px 32px 48px" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, flexWrap: "wrap", marginBottom: 16 }}>
        <SectionTitle style={{ margin: 0 }} meta={cons ? "todas as unidades" : "Unidade " + unit}>Receitas do dia</SectionTitle>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <Button size="sm" onClick={() => setCadDlg({ nome: "", plano: "", conta: "Cash" })}>+ Cadastrar receita</Button>
          <Button size="sm" variant="primary" onClick={() => setLancDlg({ descricao: "", valor: "", conta: "Cash", plano: "", prev: window.todayISO(), recebido: false, _u: cons ? D.units[0] : unit })}>Lançar receita</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
        <StatCard label="A receber" count={aReceber.length} value={window.BRL(sum(aReceber))} accent="var(--clay)" />
        <StatCard label="Recebido" count={recebidas.length} value={window.BRL(sum(recebidas))} accent="var(--jade)" />
      </div>

      <ul style={{ listStyle: "none", margin: "0 0 16px", padding: 0, border: "1px solid var(--hairline)", borderRadius: "var(--radius)", overflow: "hidden", background: "var(--surface)" }}>
        {receitas.map((r) => (
          <LedgerRow key={r._u + r.id} name={cons ? r.name + "  ·  " + r._u : r.name} value={r.value} paid={r.recebido} wording={REC_WORDING}
            dueDate={r.prev ? window.dateLabel(r.prev) : null} paidDate={r.recebimento ? window.dateLabel(r.recebimento) : null}
            category={window.planoNome(r.plano) ? window.planoLabel(r.plano) : null}
            onToggle={() => requestToggle(r)} onEdit={() => editLanc(r)} onDelete={() => delRec(r._u, r.id)} />
        ))}
        {receitas.length === 0 && <li style={{ padding: "20px 16px", fontFamily: "var(--font-body)", fontSize: 13, color: "var(--muted-2)", textAlign: "center" }}>Nenhuma receita no período. Use “Lançar receita”.</li>}
      </ul>

      <p style={{ fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--muted-2)", lineHeight: 1.6, margin: "0 2px 0", maxWidth: 720 }}>
        Lance cada receita do dia já classificada pelo plano de receitas (grupo 3). Aperte “Receber” para confirmar a entrada — escolha a conta de entrada e o dia. O que ficar sem confirmar entra como “a receber”.
      </p>

      {/* ---- Lançar / editar receita ---- */}
      <Dialog open={!!lancDlg} title={lancDlg && lancDlg.id ? "Editar receita" : "Lançar receita"} onClose={() => setLancDlg(null)} width={520}
        footer={<><Button onClick={() => setLancDlg(null)}>Cancelar</Button><Button variant="solid" onClick={saveLanc}>{lancDlg && lancDlg.id ? "Salvar" : "Lançar"}</Button></>}>
        {lancDlg && (
          <div style={{ display: "grid", gap: 16 }}>
            {!lancDlg.id && (data.receitasCadastradas || []).length > 0 && (
              <Select label="Receita cadastrada" placeholder="Escolher do catálogo…"
                value={lancDlg.cadId || ""}
                onChange={(cid) => { const cad = (data.receitasCadastradas || []).find(x => x.id === cid); setLancDlg({ ...lancDlg, cadId: cid, descricao: cad ? cad.nome : lancDlg.descricao, plano: cad ? cad.plano : lancDlg.plano, conta: cad ? cad.conta : lancDlg.conta }); }}
                options={(data.receitasCadastradas || []).map(c => ({ value: c.id, label: c.nome }))} />
            )}
            {cons && !lancDlg.id && <Select label="Unidade" value={lancDlg._u} onChange={(v) => setLancDlg({ ...lancDlg, _u: v })} options={D.units} />}
            <Input label="Descrição" value={lancDlg.descricao} onChange={(v) => setLancDlg({ ...lancDlg, descricao: v })} icon="tag" placeholder="Origem da receita" />
            <Select label="Classificação (plano de receitas)" placeholder="Buscar conta… ex.: 3.1.3 Receitas cartões de crédito" value={lancDlg.plano}
              onChange={(v) => setLancDlg({ ...lancDlg, plano: v, descricao: (!lancDlg.descricao || lancDlg.descricao === window.planoNome(lancDlg.plano)) ? (window.planoNome(v) || lancDlg.descricao) : lancDlg.descricao })}
              options={window.receitaSelectGroups} />
            {lancDlg.plano && (
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 11px", background: "var(--fill-positive)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)" }}>
                <i data-lucide="folder-tree" style={{ width: 13, height: 13, strokeWidth: 1.7, color: "var(--jade)", flexShrink: 0 }}></i>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--paper)" }}>{window.planoTrail(lancDlg.plano) || window.planoLabel(lancDlg.plano)}</span>
              </div>
            )}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <Input label="Valor" prefix="R$" value={lancDlg.valor} onChange={(v) => setLancDlg({ ...lancDlg, valor: v })} placeholder="0,00" />
              <Input label="Previsão" type="date" value={lancDlg.prev} onChange={(v) => setLancDlg({ ...lancDlg, prev: v })} icon="calendar" inputStyle={{ colorScheme: "dark" }} />
            </div>
            <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
              <input type="checkbox" checked={lancDlg.recebido} onChange={(e) => setLancDlg({ ...lancDlg, recebido: e.target.checked, recebimento: e.target.checked ? (lancDlg.recebimento || window.todayISO()) : "" })} style={{ accentColor: "var(--jade)", width: 16, height: 16 }} />
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--paper)" }}>Já foi recebido</span>
            </label>
            {lancDlg.recebido && (
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, padding: "14px", background: "var(--fill-positive)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)" }}>
                <Select label="Conta de entrada" value={lancDlg.conta} onChange={(v) => setLancDlg({ ...lancDlg, conta: v })} options={D.contasOpcoes} accent="var(--jade)" />
                <Input label="Dia do recebimento" type="date" value={lancDlg.recebimento} onChange={(v) => setLancDlg({ ...lancDlg, recebimento: v })} icon="calendar-check" accent="var(--jade)" inputStyle={{ colorScheme: "dark" }} />
              </div>
            )}
          </div>
        )}
      </Dialog>

      {/* ---- Confirmar recebimento ---- */}
      <Dialog open={!!recDlg} title="Confirmar recebimento" onClose={() => setRecDlg(null)} width={460}
        footer={<><Button onClick={() => setRecDlg(null)}>Cancelar</Button><Button variant="solid" accent="var(--jade)" onClick={confirmRec}>Confirmar recebimento</Button></>}>
        {recDlg && (
          <div style={{ display: "grid", gap: 16 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "12px 14px", background: "var(--ink)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)" }}>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--paper)", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{recDlg.name}{cons ? "  ·  " + recDlg._u : ""}</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--jade)", whiteSpace: "nowrap" }}>{window.BRL(recDlg.value)}</span>
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--muted)", lineHeight: 1.6, margin: 0 }}>Selecione a conta de entrada e confirme o dia do recebimento.</p>
            <Select label="Conta de entrada" value={recDlg.conta} onChange={(v) => setRecDlg({ ...recDlg, conta: v })} options={D.contasOpcoes} accent="var(--jade)" />
            <Input label="Dia do recebimento" type="date" value={recDlg.data} onChange={(v) => setRecDlg({ ...recDlg, data: v })} icon="calendar-check" accent="var(--jade)" inputStyle={{ colorScheme: "dark" }} />
          </div>
        )}
      </Dialog>

      {/* ---- Cadastrar receita (catálogo) ---- */}
      <Dialog open={!!cadDlg} title={cadDlg && cadDlg.id ? "Editar receita do catálogo" : "Cadastrar receita"} onClose={() => setCadDlg(null)} width={520}
        footer={<><Button onClick={() => setCadDlg(null)}>Cancelar</Button><Button variant="solid" onClick={saveCad}>Salvar</Button></>}>
        {cadDlg && (
          <div style={{ display: "grid", gap: 16 }}>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--muted)", lineHeight: 1.6, margin: 0 }}>Escolha a classificação no plano de receitas (busque por código ou nome, ex.: <b style={{ color: "var(--paper)", fontWeight: 500 }}>3.1.3 Receitas cartões de crédito</b>). A receita é nomeada pela classificação.</p>
            <Select label="Classificação (plano de receitas)" placeholder="Buscar conta… ex.: 3.1.3 Receitas cartões de crédito" value={cadDlg.plano}
              onChange={(v) => setCadDlg({ ...cadDlg, plano: v, nome: (!cadDlg.nome || cadDlg.nome === window.planoNome(cadDlg.plano)) ? (window.planoNome(v) || cadDlg.nome) : cadDlg.nome })}
              options={window.receitaSelectGroups} />
            {cadDlg.plano && (
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", background: "var(--fill-positive)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)" }}>
                <i data-lucide="folder-tree" style={{ width: 14, height: 14, strokeWidth: 1.7, color: "var(--jade)", flexShrink: 0 }}></i>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--paper)" }}>{window.planoTrail(cadDlg.plano) || window.planoLabel(cadDlg.plano)}</span>
              </div>
            )}
            <Input label="Nome da receita" value={cadDlg.nome} onChange={(v) => setCadDlg({ ...cadDlg, nome: v })} icon="tag" placeholder="Nomeada pela classificação" />
            <Select label="Conta de entrada padrão" value={cadDlg.conta} onChange={(v) => setCadDlg({ ...cadDlg, conta: v })} options={D.contasOpcoes} />
            {(data.receitasCadastradas || []).length > 0 && (
              <div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted-2)", margin: "4px 0 8px" }}>Já cadastradas ({(data.receitasCadastradas || []).length})</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6, maxHeight: 150, overflow: "auto" }}>
                  {(data.receitasCadastradas || []).map((c) => (
                    <div key={c.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 10px", background: "var(--ink)", border: "1px solid var(--hairline)", borderRadius: 8 }}>
                      <span style={{ flex: 1, minWidth: 0 }}>
                        <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: 13, color: "var(--paper)" }}>{c.nome}</span>
                        <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--jade)", marginTop: 1 }}>{window.planoLabel(c.plano)}</span>
                      </span>
                      <button title="Excluir" onClick={() => store.set(d => { d.receitasCadastradas = d.receitasCadastradas.filter(x => x.id !== c.id); }, "receitasCadastradas")} style={{ width: 24, height: 24, borderRadius: 6, background: "none", border: "1px solid var(--hairline)", display: "grid", placeItems: "center", cursor: "pointer", color: "var(--muted-2)" }}><i data-lucide="trash-2" style={{ width: 12, height: 12, strokeWidth: 1.7 }}></i></button>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}
      </Dialog>
    </div>
  );
}

window.Faturamento = Faturamento;