/* ANISAN — Despesas variáveis. Livro de compras/pagamentos do dia (data.compras),
   movido do Painel. Cadastrar despesa no catálogo + lançar despesa, lista
   editável, classificada pelo plano de contas. */

function DespesasVariaveis({ 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);
  const [cadDlg, setCadDlg] = React.useState(null);
  const [payDlg, setPayDlg] = React.useState(null);

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

  const comprasAll = cons ? window.allCompras(data) : (data.compras[unit] || []).map(r => ({ ...r, _u: unit }));
  const compras = comprasAll.filter(r => window.dateInRange(r.venc, period));
  const unpaid = compras.filter(r => !r.paid);
  const paid = compras.filter(r => r.paid);
  const sum = (a) => a.reduce((s, r) => s + (Number(r.value) || 0), 0);

  // ---- CRUD ----
  const setLanc = (tu, id, patch) => store.set(d => { const r = d.compras[tu].find(x => x.id === id); if (r) Object.assign(r, patch); }, "compras");
  const delLanc = (tu, id) => store.set(d => { d.compras[tu] = d.compras[tu].filter(x => x.id !== id); }, "compras");
  const saveLanc = () => {
    const f = lancDlg;
    const tu = f._u || (cons ? D.units[0] : unit);
    const rec = {
      name: f.descricao || "Despesa", value: window.parseBRL(f.valor), plano: f.plano || "", venc: f.venc || "",
      paid: !!f.pago,
      conta: f.pago ? (f.conta || "Cash") : "",
      pagamento: f.pago ? (f.pagamento || window.todayISO()) : "",
    };
    store.set(d => {
      if (f.id) { const r = d.compras[f._u].find(x => x.id === f.id); if (r) Object.assign(r, rec); }
      else d.compras[tu].push({ id: window.uid(), ...rec });
    }, "compras");
    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 || "", venc: window.ddmmToISO(r.venc) || "", pago: !!r.paid, pagamento: r.pagamento || "" });

  const requestToggle = (r) => {
    if (r.paid) { setLanc(r._u, r.id, { paid: false, conta: "", pagamento: "" }); return; }
    setPayDlg({ _u: r._u, id: r.id, name: r.name, value: r.value, conta: r.conta || "Cash", data: window.todayISO() });
  };
  const confirmPay = () => { const f = payDlg; setLanc(f._u, f.id, { paid: true, conta: f.conta || "Cash", pagamento: f.data || window.todayISO() }); setPayDlg(null); };

  const saveCad = () => {
    const f = cadDlg;
    store.set(d => {
      if (!d.despesasCadastradas) d.despesasCadastradas = [];
      if (f.id) { const c = d.despesasCadastradas.find(x => x.id === f.id); if (c) Object.assign(c, { nome: f.nome || "Despesa", plano: f.plano || "", conta: f.conta || "Cash" }); }
      else d.despesasCadastradas.push({ id: window.uid(), nome: f.nome || "Despesa", plano: f.plano || "", conta: f.conta || "Cash" });
    }, "despesasCadastradas");
    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}>Compras / pagamentos do dia</SectionTitle>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          <Button size="sm" onClick={() => setCadDlg({ nome: "", plano: "", conta: "Cash" })}>+ Cadastrar despesa</Button>
          <Button size="sm" variant="primary" onClick={() => setLancDlg({ descricao: "", valor: "", conta: "Cash", plano: "", venc: "", pago: false, _u: cons ? D.units[0] : unit })}>Lançar despesa</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
        <StatCard label="A pagar" count={unpaid.length} value={window.BRL(sum(unpaid))} accent="var(--clay)" />
        <StatCard label="Pago hoje" count={paid.length} value={window.BRL(sum(paid))} 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)" }}>
        {compras.map((r) => (
          <LedgerRow key={r._u + r.id} name={cons ? r.name + "  ·  " + r._u : r.name} value={r.value} paid={r.paid} dueDate={r.venc ? window.dateLabel(r.venc) : null} paidDate={r.pagamento ? window.dateLabel(r.pagamento) : null} category={window.planoNome(r.plano) ? window.planoLabel(r.plano) : null}
            onToggle={() => requestToggle(r)} onEdit={() => editLanc(r)} onDelete={() => delLanc(r._u, r.id)} />
        ))}
        {compras.length === 0 && <li style={{ padding: "20px 16px", fontFamily: "var(--font-body)", fontSize: 13, color: "var(--muted-2)", textAlign: "center" }}>Nenhum lançamento. Use “Lançar despesa”.</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 despesa do dia já classificada pelo plano de contas. Aperte “Pago” para baixar a conta — escolha a conta de saída e o dia. O que ficar sem marcar entra como pendente.
      </p>

      {/* ---- Lançamento dialog ---- */}
      <Dialog open={!!lancDlg} title={lancDlg && lancDlg.id ? "Editar lançamento" : "Lançar despesa"} 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.despesasCadastradas || []).length > 0 && (
              <Select label="Despesa cadastrada" placeholder="Escolher do catálogo…"
                value={lancDlg.cadId || ""}
                onChange={(cid) => { const cad = (data.despesasCadastradas || []).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.despesasCadastradas || []).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="Fornecedor / despesa" />
            <Select label="Classificação (plano de contas)" placeholder="Buscar conta… ex.: 4.2.3 Bebidas" 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.planoSelectGroups} />
            {lancDlg.plano && (
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 11px", background: "var(--fill-accent)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)" }}>
                <i data-lucide="folder-tree" style={{ width: 13, height: 13, strokeWidth: 1.7, color: "var(--brass)", flexShrink: 0 }}></i>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--paper)" }}>{window.planoTrail(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="Vencimento" type="date" value={lancDlg.venc} onChange={(v) => setLancDlg({ ...lancDlg, venc: v })} icon="calendar" inputStyle={{ colorScheme: "dark" }} />
            </div>
            <label style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }}>
              <input type="checkbox" checked={lancDlg.pago} onChange={(e) => setLancDlg({ ...lancDlg, pago: e.target.checked, pagamento: e.target.checked ? (lancDlg.pagamento || window.todayISO()) : "" })} style={{ accentColor: "var(--jade)", width: 16, height: 16 }} />
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--paper)" }}>Já está pago</span>
            </label>
            {lancDlg.pago && (
              <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 saída" value={lancDlg.conta} onChange={(v) => setLancDlg({ ...lancDlg, conta: v })} options={D.contasOpcoes} accent="var(--jade)" />
                <Input label="Dia do pagamento" type="date" value={lancDlg.pagamento} onChange={(v) => setLancDlg({ ...lancDlg, pagamento: v })} icon="calendar-check" accent="var(--jade)" inputStyle={{ colorScheme: "dark" }} />
              </div>
            )}
          </div>
        )}
      </Dialog>

      {/* ---- Confirmar pagamento ---- */}
      <Dialog open={!!payDlg} title="Confirmar pagamento" onClose={() => setPayDlg(null)} width={460}
        footer={<><Button onClick={() => setPayDlg(null)}>Cancelar</Button><Button variant="solid" accent="var(--jade)" onClick={confirmPay}>Confirmar pagamento</Button></>}>
        {payDlg && (
          <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" }}>{payDlg.name}{cons ? "  ·  " + payDlg._u : ""}</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--clay)", whiteSpace: "nowrap" }}>{window.BRL(payDlg.value)}</span>
            </div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--muted)", lineHeight: 1.6, margin: 0 }}>Selecione a conta de saída e confirme o dia do pagamento.</p>
            <Select label="Conta de saída" value={payDlg.conta} onChange={(v) => setPayDlg({ ...payDlg, conta: v })} options={D.contasOpcoes} accent="var(--jade)" />
            <Input label="Dia do pagamento" type="date" value={payDlg.data} onChange={(v) => setPayDlg({ ...payDlg, data: v })} icon="calendar-check" accent="var(--jade)" inputStyle={{ colorScheme: "dark" }} />
          </div>
        )}
      </Dialog>

      {/* ---- Cadastrar despesa (catálogo) ---- */}
      <Dialog open={!!cadDlg} title={cadDlg && cadDlg.id ? "Editar despesa do catálogo" : "Cadastrar despesa"} 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 contas (busque por código ou nome, ex.: <b style={{ color: "var(--paper)", fontWeight: 500 }}>4.2.3 Bebidas</b>). A despesa é nomeada pela última classificação e herda o grupo.</p>
            <Select label="Classificação (plano de contas)" placeholder="Buscar conta… ex.: 4.2.3 Bebidas" 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.planoSelectGroups} />
            {cadDlg.plano && (
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", background: "var(--fill-accent)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)" }}>
                <i data-lucide="folder-tree" style={{ width: 14, height: 14, strokeWidth: 1.7, color: "var(--brass)", flexShrink: 0 }}></i>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--paper)" }}>{window.planoTrail(cadDlg.plano)}</span>
              </div>
            )}
            <Input label="Nome da despesa" value={cadDlg.nome} onChange={(v) => setCadDlg({ ...cadDlg, nome: v })} icon="tag" placeholder="Nomeada pela classificação" />
            <Select label="Conta de saída padrão" value={cadDlg.conta} onChange={(v) => setCadDlg({ ...cadDlg, conta: v })} options={D.contasOpcoes} />
            {(data.despesasCadastradas || []).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.despesasCadastradas || []).length})</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 6, maxHeight: 150, overflow: "auto" }}>
                  {(data.despesasCadastradas || []).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(--sand)", marginTop: 1 }}>{window.planoLabel(c.plano)}</span>
                      </span>
                      <button title="Excluir" onClick={() => store.set(d => { d.despesasCadastradas = d.despesasCadastradas.filter(x => x.id !== c.id); }, "despesasCadastradas")} 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.DespesasVariaveis = DespesasVariaveis;