// modules-finance.jsx — Financing, Management, Lender, Finance flow, Cashbook
window.NA = window.NA || {};
window.NA.M = window.NA.M || {};
const _na3 = window.NA;
const { useState: useStateF, useMemo: useMemoF, useEffect: useEffectF, useCallback: useCallbackF } = React;

const FINANCE_BANKS_KEY = "nau_finance_banks";
const DEFAULT_FINANCE_BANKS = [
  { id: "bv", name: "BV", rate: 1.69, max: 60 },
  { id: "santander", name: "Santander", rate: 1.79, max: 60 },
  { id: "bradesco", name: "Bradesco", rate: 1.85, max: 48 },
  { id: "itau", name: "Itaú", rate: 1.74, max: 60 },
  { id: "digimais", name: "Digimais", rate: 1.99, max: 48 },
  { id: "pam", name: "PAM", rate: 2.15, max: 36 },
  { id: "aymore", name: "Aymoré", rate: 1.72, max: 60 },
];

function fmtFinDate(d) {
  const dt = d instanceof Date ? d : new Date(d);
  const dd = String(dt.getDate()).padStart(2, "0");
  const mm = String(dt.getMonth() + 1).padStart(2, "0");
  return `${dd}/${mm}`;
}

function loadFinanceBanks() {
  try {
    const saved = JSON.parse(localStorage.getItem(FINANCE_BANKS_KEY) || "null");
    if (Array.isArray(saved) && saved.length) return saved;
  } catch (e) {}
  const today = fmtFinDate(new Date());
  return DEFAULT_FINANCE_BANKS.map(b => ({ ...b, updatedAt: today }));
}

function saveFinanceBanks(banks) {
  try { localStorage.setItem(FINANCE_BANKS_KEY, JSON.stringify(banks)); } catch (e) {}
}

// ============================================================
// FINANCING — Simulador
// ============================================================
function ModuleFinancing({ t, lang }) {
  const [tab, setTab] = useStateF("sim");
  const [client, setClient] = useStateF("");
  const [cpf, setCpf] = useStateF("");
  const [phone, setPhone] = useStateF("");
  const [vehicle, setVehicle] = useStateF("");
  const [vehValue, setVehValue] = useStateF(0);
  const [entry, setEntry] = useStateF(0);
  const [term, setTerm] = useStateF(48);
  const [system, setSystem] = useStateF("price");
  const [bank, setBank] = useStateF("");
  const [notes, setNotes] = useStateF("");
  const [banks, setBanks] = useStateF(loadFinanceBanks);
  const [addingBank, setAddingBank] = useStateF(false);
  const [newBank, setNewBank] = useStateF({ name: "", rate: 1.79, max: 60 });

  useEffectF(() => { saveFinanceBanks(banks); }, [banks]);

  const touchBank = (id, patch) => {
    setBanks(bs => bs.map(b => {
      if (b.id !== id) return b;
      const changed = Object.keys(patch).some(k => b[k] !== patch[k]);
      return changed
        ? { ...b, ...patch, updatedAt: fmtFinDate(new Date()) }
        : b;
    }));
  };

  const removeBank = (id) => {
    const removed = banks.find(b => b.id === id);
    setBanks(bs => bs.filter(b => b.id !== id));
    if (removed && bank === removed.name) setBank("");
  };

  const addBank = () => {
    const name = (newBank.name || "").trim();
    if (!name) return;
    if (banks.some(b => b.name.toLowerCase() === name.toLowerCase())) return;
    const today = fmtFinDate(new Date());
    setBanks(bs => [...bs, {
      id: "b_" + Date.now(),
      name,
      rate: Number(newBank.rate) || 1.79,
      max: Number(newBank.max) || 60,
      updatedAt: today,
    }]);
    setNewBank({ name: "", rate: 1.79, max: 60 });
    setAddingBank(false);
  };
  const financed = Math.max(0, Number(vehValue) - Number(entry));
  const monthly = (rate) => {
    const i = rate / 100;
    const n = Number(term);
    if (!financed || !n) return 0;
    return (financed * i) / (1 - Math.pow(1 + i, -n));
  };
  const bankRate = banks.find(b => b.name === bank)?.rate || 1.79;
  const installment = monthly(bankRate);
  const total = installment * term;

  const history = [
    { id: "s1", client: "Lucas Andrade", veh: "Ford Ka 2019", bank: "BV", value: 45000, parc: 60, date: "18/05/2026" },
    { id: "s2", client: "Maria Souza", veh: "ONIX HATCH 2019", bank: "Itaú", value: 32000, parc: 48, date: "14/05/2026" },
    { id: "s3", client: "Carlos Pereira", veh: "Audi A5 2014", bank: "Santander", value: 65000, parc: 60, date: "10/05/2026" },
  ];

  return (
    <div data-screen-label="Financing">
      <_na3.PageHead icon="credit-card" title={lang === "pt" ? "Simulador de financiamento" : "Financing simulator"} />
      <_na3.Tabs tabs={[
        { key: "sim", label: lang === "pt" ? "Simular" : "Simulate", icon: "calculator" },
        { key: "cmp", label: lang === "pt" ? "Comparar bancos" : "Compare banks", icon: "git-compare" },
        { key: "banks", label: lang === "pt" ? "Bancos" : "Banks", icon: "landmark" },
        { key: "hist", label: lang === "pt" ? "Histórico" : "History", icon: "history" },
      ]} active={tab} onChange={setTab} />

      {tab === "sim" && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 360px", gap: 16 }}>
          <_na3.Card padded>
            <div className="field-row cols-3">
              <_na3.Field label={lang === "pt" ? "Nome do cliente" : "Client name"} required><_na3.Input value={client} onChange={setClient} placeholder={lang === "pt" ? "Nome completo" : "Full name"} /></_na3.Field>
              <_na3.Field label="CPF"><_na3.Input mono value={cpf} onChange={setCpf} placeholder="000.000.000-00" /></_na3.Field>
              <_na3.Field label={lang === "pt" ? "Telefone" : "Phone"}><_na3.Input mono value={phone} onChange={setPhone} placeholder="(00) 00000-0000" /></_na3.Field>
            </div>
            <div className="field-row mt-16">
              <_na3.Field label={lang === "pt" ? "Veículo" : "Vehicle"}><_na3.Input value={vehicle} onChange={setVehicle} placeholder={lang === "pt" ? "Marca / Modelo / Ano" : "Brand / Model / Year"} /></_na3.Field>
              <_na3.Field label={lang === "pt" ? "Valor do veículo (R$)" : "Vehicle value"} required><_na3.Input mono type="number" value={vehValue} onChange={v => setVehValue(Number(v) || 0)} /></_na3.Field>
            </div>
            <div className="field-row cols-4 mt-16">
              <_na3.Field label={lang === "pt" ? "Entrada (R$)" : "Down payment"}><_na3.Input mono type="number" value={entry} onChange={v => setEntry(Number(v) || 0)} /></_na3.Field>
              <_na3.Field label={lang === "pt" ? "Prazo (meses)" : "Term (months)"}><_na3.Input mono type="number" value={term} onChange={v => setTerm(Number(v) || 0)} /></_na3.Field>
              <_na3.Field label={lang === "pt" ? "Sistema" : "System"}>
                <_na3.Select value={system} onChange={setSystem} options={[
                  { value: "price", label: "Price (parcela fixa)" },
                  { value: "sac", label: "SAC (amortização constante)" }
                ]} />
              </_na3.Field>
              <_na3.Field label={t("common_bank")} required>
                <_na3.Select value={bank} onChange={setBank} options={[{ value: "", label: lang === "pt" ? "Selecione" : "Select" }, ...banks.map(b => ({ value: b.name, label: b.name }))]} />
              </_na3.Field>
            </div>
            <_na3.Field label={lang === "pt" ? "Observações" : "Notes"} style={{ marginTop: 16 }}>
              <_na3.Textarea value={notes} onChange={setNotes} placeholder={lang === "pt" ? "Notas adicionais sobre a proposta" : "Additional notes"} />
            </_na3.Field>
            <div className="row gap-8 mt-16">
              <_na3.Button kind="primary" icon="save">{lang === "pt" ? "Salvar simulação" : "Save simulation"}</_na3.Button>
              <_na3.Button kind="default" icon="printer">{lang === "pt" ? "Imprimir proposta" : "Print proposal"}</_na3.Button>
            </div>
          </_na3.Card>

          <_na3.Card padded style={{ background: "var(--color-primary-bg)", borderColor: "var(--color-primary-border)" }}>
            <div className="fs-11 fw-600 mb-8" style={{ color: "var(--color-primary-active)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{lang === "pt" ? "Resultado da simulação" : "Simulation result"}</div>
            <_na3.Money value={installment} lang={lang} style={{ fontSize: 28, fontWeight: 600, color: "var(--color-primary)" }} />
            <div className="text-muted fs-13">/ {lang === "pt" ? "mês" : "month"}</div>
            <div className="divider mt-16" style={{ marginBottom: 12 }}></div>
            <div className="col gap-8 fs-13">
              <div className="row jcsb"><span className="text-muted">{lang === "pt" ? "Valor financiado" : "Financed amount"}</span><_na3.Money value={financed} lang={lang} /></div>
              <div className="row jcsb"><span className="text-muted">{lang === "pt" ? "Taxa estimada" : "Est. rate"}</span><span className="mono fw-500">{bankRate.toFixed(2)}% a.m.</span></div>
              <div className="row jcsb"><span className="text-muted">{lang === "pt" ? "Prazo" : "Term"}</span><span className="mono fw-500">{term} {lang === "pt" ? "meses" : "months"}</span></div>
              <div className="row jcsb"><span className="text-muted">{lang === "pt" ? "Total a pagar" : "Total payable"}</span><_na3.Money value={total} lang={lang} className="fw-600" /></div>
              <div className="row jcsb"><span className="text-muted">{lang === "pt" ? "Custo do crédito" : "Cost of credit"}</span><_na3.Money value={total - financed} lang={lang} style={{ color: "var(--color-warning-active)" }} /></div>
            </div>
          </_na3.Card>
        </div>
      )}

      {tab === "cmp" && (
        <_na3.Card>
          <_na3.CardBody>
            <div className="hint mb-16">{lang === "pt" ? "Compara a parcela mensal de cada banco com base no valor financiado e prazo informados na aba Simular." : "Compares each bank using the financed amount and term from the Simulate tab."}</div>
            <table className="tbl">
              <thead><tr>
                <th>{t("common_bank")}</th>
                <th>{lang === "pt" ? "Taxa a.m." : "Monthly rate"}</th>
                <th>{lang === "pt" ? "Parcela" : "Installment"}</th>
                <th>{lang === "pt" ? "Total a pagar" : "Total"}</th>
                <th>{lang === "pt" ? "Custo do crédito" : "Credit cost"}</th>
                <th>{lang === "pt" ? "Prazo máx." : "Max term"}</th>
                <th></th>
              </tr></thead>
              <tbody>{banks.map(b => {
                const m = monthly(b.rate);
                const cheapest = banks.length ? Math.min(...banks.map(x => monthly(x.rate))) : 0;
                const best = banks.length > 1 && m === cheapest;
                return (
                  <tr key={b.id} className={best ? "sel" : ""}>
                    <td className="fw-600">{b.name} {best && <_na3.Tag kind="success">{lang === "pt" ? "Melhor" : "Best"}</_na3.Tag>}</td>
                    <td className="mono">{b.rate.toFixed(2)}%</td>
                    <td className="mono"><_na3.Money value={m} lang={lang} /></td>
                    <td className="mono"><_na3.Money value={m * term} lang={lang} /></td>
                    <td className="mono text-warning"><_na3.Money value={m * term - financed} lang={lang} /></td>
                    <td className="mono">{b.max}m</td>
                    <td><_na3.Button kind="primary" size="sm" icon="check" onClick={() => { setBank(b.name); setTab("sim"); }}>{lang === "pt" ? "Usar" : "Use"}</_na3.Button></td>
                  </tr>
                );
              })}</tbody>
            </table>
          </_na3.CardBody>
        </_na3.Card>
      )}

      {tab === "banks" && (
        <>
          <div className="row jcsb mb-16">
            <div className="hint">{lang === "pt" ? "Edite as taxas e prazos. A data de atualização muda automaticamente ao salvar." : "Edit rates and terms. Update date changes automatically on save."}</div>
            <_na3.Button kind="primary" icon="plus" onClick={() => setAddingBank(true)}>
              {lang === "pt" ? "Adicionar banco" : "Add bank"}
            </_na3.Button>
          </div>
          {addingBank && (
            <_na3.Card padded style={{ marginBottom: 16 }}>
              <div className="field-row cols-3">
                <_na3.Field label={lang === "pt" ? "Nome do banco" : "Bank name"} required>
                  <_na3.Input value={newBank.name} onChange={v => setNewBank(f => ({ ...f, name: v }))} placeholder={lang === "pt" ? "Ex.: Safra" : "e.g. Safra"} />
                </_na3.Field>
                <_na3.Field label={lang === "pt" ? "Taxa a.m. (%)" : "Monthly rate (%)"} required>
                  <_na3.Input mono type="number" step="0.01" value={newBank.rate} onChange={v => setNewBank(f => ({ ...f, rate: Number(v) || 0 }))} />
                </_na3.Field>
                <_na3.Field label={lang === "pt" ? "Prazo máx. (meses)" : "Max term (months)"} required>
                  <_na3.Input mono type="number" value={newBank.max} onChange={v => setNewBank(f => ({ ...f, max: Number(v) || 0 }))} />
                </_na3.Field>
              </div>
              <div className="row gap-8 mt-16">
                <_na3.Button kind="primary" icon="check" onClick={addBank}>{lang === "pt" ? "Salvar banco" : "Save bank"}</_na3.Button>
                <_na3.Button kind="ghost" onClick={() => { setAddingBank(false); setNewBank({ name: "", rate: 1.79, max: 60 }); }}>{t("common_cancel")}</_na3.Button>
              </div>
            </_na3.Card>
          )}
          <div className="cards-grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
            {banks.length === 0 ? (
              <_na3.Card padded>
                <_na3.Empty icon="landmark" title={lang === "pt" ? "Nenhum banco cadastrado" : "No banks registered"}
                  message={lang === "pt" ? "Clique em Adicionar banco para começar." : "Click Add bank to get started."} />
              </_na3.Card>
            ) : banks.map(b => (
              <_na3.Card key={b.id} padded>
                <div className="row jcsb mb-8">
                  <span className="fw-600 fs-15">{b.name}</span>
                  <div className="row gap-4">
                    <_na3.Input mono type="number" value={b.max} onChange={v => touchBank(b.id, { max: Number(v) || 12 })}
                      style={{ width: 52, height: 26, fontSize: 12, textAlign: "center" }} />
                    <span className="text-faint fs-11" style={{ alignSelf: "center" }}>m</span>
                    <button type="button" className="icon-btn-sq" style={{ width: 26, height: 26, color: "var(--color-error)" }}
                      title={lang === "pt" ? "Remover banco" : "Remove bank"}
                      onClick={() => removeBank(b.id)}>
                      <_na3.Icon name="trash-2" size={12} />
                    </button>
                  </div>
                </div>
                <div className="text-faint fs-11">{lang === "pt" ? "Taxa média" : "Avg rate"}</div>
                <div className="row gap-4" style={{ alignItems: "baseline" }}>
                  <_na3.Input mono type="number" step="0.01" value={b.rate}
                    onChange={v => touchBank(b.id, { rate: Number(v) || 0 })}
                    style={{ width: 88, fontSize: 20, fontWeight: 500, height: 36 }} />
                  <span className="mono fs-12 text-faint">% a.m.</span>
                </div>
                <div className="text-faint fs-11 mt-16">
                  {lang === "pt"
                    ? `Tabela vigente — atualizada em ${b.updatedAt || fmtFinDate(new Date())}`
                    : `Effective table — updated ${b.updatedAt || fmtFinDate(new Date())}`}
                </div>
              </_na3.Card>
            ))}
          </div>
        </>
      )}

      {tab === "hist" && (
        <_na3.Card>
          <_na3.CardBody>
            <table className="tbl">
              <thead><tr>
                <th>{t("common_client")}</th><th>{lang === "pt" ? "Veículo" : "Vehicle"}</th><th>{t("common_bank")}</th>
                <th>{lang === "pt" ? "Valor financ." : "Financed"}</th><th>{lang === "pt" ? "Parcelas" : "Installments"}</th>
                <th>{t("common_date")}</th><th></th>
              </tr></thead>
              <tbody>{history.map(h => (
                <tr key={h.id}>
                  <td>{h.client}</td><td>{h.veh}</td><td>{h.bank}</td>
                  <td className="mono"><_na3.Money value={h.value} lang={lang} /></td>
                  <td className="mono">{h.parc}x</td>
                  <td className="mono fs-12">{h.date}</td>
                  <td><_na3.Button kind="ghost" size="sm" icon="external-link">{t("common_open")}</_na3.Button></td>
                </tr>
              ))}</tbody>
            </table>
          </_na3.CardBody>
        </_na3.Card>
      )}
    </div>
  );
}
window.NA.M.financing = ModuleFinancing;

// ============================================================
// MANAGEMENT — Gestão Operacional
// ============================================================
function ModuleManagement({ t, lang, setT }) {
  const [tab, setTab] = useStateF("dash");
  const [drawerV, setDrawerV] = useStateF(null);
  const v = _na3.vehicles;
  const AF = _na3.AcquisitionFinance;
  const views = _na3.AcquisitionViews;
  const overdueList = v.filter(x => x.status === "overdue" || (x.parcels?.overdue || 0) > 0);
  const dueSoon = AF?.getSettlementsDueWithinDays(v, 7) || [];
  const stockIssues = (views?.filterRows(v, "stock", "", window.NA?.maintenanceItemsByAcq) || []).filter(x => {
    const items = window.NA?.maintenanceItemsByAcq?.[x.id] || [];
    const AM = window.NA?.AcquisitionMaintenance;
    const maintPending = AM?.hasMaintenancePending?.(x, items) ?? (x.maintenance || []).length > 0;
    return maintPending || (x.parcels?.overdue || 0) > 0;
  });
  const counts = {
    inProcess: v.filter(x => ["in_process", "in_settlement", "overdue"].includes(x.status)).length,
    sold: v.filter(x => x.status === "sold").length,
    settling: v.filter(x => x.status === "in_settlement").length,
    critical: overdueList.length + dueSoon.length,
  };
  const inSettlement = v.filter(x => ["in_settlement", "overdue"].includes(x.status));
  const tabVehicles = tab === "dash" ? [] : (views?.filterRows(v, tab, "") || []);

  return (
    <div data-screen-label="Management">
      <_na3.PageHead icon="crown" title={lang === "pt" ? "Gestão operacional" : "Operations management"} />
      {_na3.AcquisitionSourceBanner && <_na3.AcquisitionSourceBanner lang={lang} />}
      <_na3.Tabs tabs={[
        { key: "dash", label: t("nav_dashboard"), icon: "layout-dashboard" },
        { key: "stock", label: lang === "pt" ? "Estoque" : "Stock" },
        { key: "overdue", label: lang === "pt" ? "Atrasadas" : "Overdue" },
        { key: "sold", label: lang === "pt" ? "Vendidos" : "Sold" },
        { key: "settled", label: lang === "pt" ? "Quitações" : "Settled" },
        { key: "post", label: lang === "pt" ? "Pós-Quitação" : "Post-settlement" },
      ]} active={tab} onChange={setTab} />

      {tab === "dash" && (
        <>
          <div className="row jcsb mb-16">
            <span className="text-muted fs-12">{lang === "pt" ? "Atualizado às 01:12:03 — tempo real ativo" : "Updated 01:12:03 — live"}</span>
            <_na3.Button kind="ghost" size="sm" icon="refresh-cw">{t("common_refresh")}</_na3.Button>
          </div>
          <div className="stat-strip" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
            <_na3.Stat label={lang === "pt" ? "Em processo" : "In process"} value={counts.inProcess} icon="loader" accent="success" />
            <_na3.Stat label={lang === "pt" ? "Vendidos" : "Sold"} value={counts.sold} icon="shopping-cart" />
            <_na3.Stat label={lang === "pt" ? "Em quitação" : "Settling"} value={counts.settling} icon="credit-card" accent="warning" />
            <_na3.Stat label={lang === "pt" ? "Pendências críticas" : "Critical issues"} value={counts.critical} icon="alert-triangle" accent="error" />
          </div>

          <_na3.Card className="mt-16">
            <_na3.CardHead title={lang === "pt" ? `Aquisições em processo de quitação (${inSettlement.length})` : `Acquisitions in settlement (${inSettlement.length})`} icon="archive" />
            <_na3.CardBody>
              <_na3.VehicleTable
                vehicles={inSettlement}
                columns={_na3.vehicleTableColumnsSettlement(t, lang)}
                lang={lang}
                t={t}
                onRowClick={setDrawerV}
                selectedId={drawerV && drawerV.id}
              />
            </_na3.CardBody>
          </_na3.Card>

          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 12, marginTop: 16 }}>
            <_na3.Card>
              <_na3.CardHead title={lang === "pt" ? "Estoque com pendências" : "Stock with issues"} icon="alert-circle" />
              <_na3.CardBody>
                {stockIssues.length === 0 ? (
                  <div className="empty" style={{ padding: 20 }}>
                    <_na3.Icon name="check-circle-2" size={28} style={{ color: "var(--color-success)" }} />
                    <p className="fs-13" style={{ color: "var(--fg2)" }}>{lang === "pt" ? "Estoque sem pendências críticas." : "Stock without critical issues."}</p>
                  </div>
                ) : (
                  <div className="col gap-8">
                    {stockIssues.slice(0, 5).map(x => {
                      const items = window.NA?.maintenanceItemsByAcq?.[x.id] || [];
                      const AM = window.NA?.AcquisitionMaintenance;
                      const prog = AM?.computeMaintenanceProgress?.(items, AM?.vehicleMaintenanceFlags?.(x));
                      const maintCount = prog ? (prog.total - prog.done) : (x.maintenance || []).length;
                      const p = maintCount + Number(x.parcels?.overdue || 0);
                      return (
                        <div key={x.id} className="row jcsb" style={{ padding: "8px 12px", border: "1px solid var(--color-border-secondary)", borderRadius: 4 }}>
                          <span className="fs-13" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "70%" }}>{x.plate} — {x.brand} {x.model}</span>
                          <span className="text-error fs-12 fw-500">{p} pendência(s)</span>
                        </div>
                      );
                    })}
                  </div>
                )}
              </_na3.CardBody>
            </_na3.Card>
            <_na3.Card>
              <_na3.CardHead title={lang === "pt" ? "Vendidos com pendências" : "Sold with issues"} icon="shopping-bag" />
              <_na3.CardBody>
                <div className="empty" style={{ padding: 20 }}>
                  <_na3.Icon name="check-circle-2" size={28} style={{ color: "var(--color-success)" }} />
                  <p className="fs-13" style={{ color: "var(--fg2)" }}>{lang === "pt" ? "Vendas em dia." : "Sales up to date."}</p>
                </div>
              </_na3.CardBody>
            </_na3.Card>
            <_na3.Card>
              <_na3.CardHead title={lang === "pt" ? "Quitações atrasadas" : "Overdue settlements"} icon="clock"
                right={overdueList.length > 0 && setT && (
                  <_na3.Button kind="ghost" size="sm" onClick={() => setT({ module: "acquisitions", acqFilter: "overdue" })}>
                    {lang === "pt" ? "Ver aquisições" : "View acquisitions"}
                  </_na3.Button>
                )} />
              <_na3.CardBody>
                {overdueList.length === 0 ? (
                  <div className="empty" style={{ padding: 20 }}>
                    <_na3.Icon name="check-circle-2" size={28} style={{ color: "var(--color-success)" }} />
                    <p className="fs-13" style={{ color: "var(--fg2)" }}>{lang === "pt" ? "Sem atrasos." : "No overdue."}</p>
                  </div>
                ) : (
                  <div className="col gap-8">
                    {overdueList.slice(0, 5).map(x => (
                      <div key={x.id} className="row jcsb" style={{ padding: "8px 12px", border: "1px solid var(--color-error-border)", borderRadius: 4 }}>
                        <span className="fs-13"><span className="mono fw-600">{x.plate}</span> — {x.brand}</span>
                        <span className="text-error fs-12 fw-500">{x.parcels?.overdue || 0} {lang === "pt" ? "atraso" : "overdue"}</span>
                      </div>
                    ))}
                  </div>
                )}
              </_na3.CardBody>
            </_na3.Card>
          </div>
        </>
      )}

      {tab !== "dash" && (
        <_na3.Card>
          <_na3.CardBody>
            <_na3.VehicleTable
              vehicles={tabVehicles}
              columns={views?.columns(t, lang, tab === "overdue" || tab === "settled" ? "settlement" : undefined)}
              lang={lang}
              t={t}
              onRowClick={setDrawerV}
              selectedId={drawerV?.id}
              empty={<_na3.Empty icon="filter" title={lang === "pt" ? `Filtro: ${tab}` : `Filter: ${tab}`} />}
            />
          </_na3.CardBody>
        </_na3.Card>
      )}
      {_na3.AcquisitionDrawer
        ? <_na3.AcquisitionDrawer open={!!drawerV} vehicle={drawerV} onClose={() => setDrawerV(null)} lang={lang} setT={setT} t={t} />
        : <_na3.VehicleDrawer open={!!drawerV} vehicle={drawerV} onClose={() => setDrawerV(null)} lang={lang} setT={setT} t={t} />}
    </div>
  );
}
window.NA.M.management = ModuleManagement;

// ============================================================
// LENDER — Prestamista / Contratos de veículos
// ============================================================
function ModuleLender({ t, lang, setT }) {
  const [q, setQ] = useStateF("");
  const [drawerV, setDrawerV] = useStateF(null);
  const v = _na3.vehicles.slice(0, 16);
  const filtered = v.filter(x => !q || x.plate.toLowerCase().includes(q.toLowerCase()) || x.brand.toLowerCase().includes(q.toLowerCase()));
  const totals = {
    vehicles: 16, contracts: 5, lender: 0,
    cost: 3818677.10
  };

  return (
    <div data-screen-label="Lender">
      <_na3.PageHead icon="hand-coins" title={lang === "pt" ? "Contratos de veículos" : "Vehicle contracts"} />

      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <_na3.Stat label={lang === "pt" ? "Veículos" : "Vehicles"} value={totals.vehicles} icon="car" />
        <_na3.Stat label={lang === "pt" ? "Contratos" : "Contracts"} value={totals.contracts} icon="file-text" />
        <_na3.Stat label={lang === "pt" ? "Total prestamista" : "Lender total"} value={totals.lender} isMoney lang={lang} icon="hand-coins" />
        <_na3.Stat label={lang === "pt" ? "Custo total geral" : "Total cost"} value={totals.cost} isMoney lang={lang} icon="receipt" accent="warning" />
      </div>

      <_na3.Card className="mt-16">
        <_na3.CardBody>
          <div className="row gap-12">
            <_na3.SearchBox value={q} onChange={setQ} placeholder={lang === "pt" ? "Ex.: ABC1234, Pan, João…" : "e.g. ABC1234, Pan, John…"} style={{ flex: 1 }} />
            <_na3.Select options={[
              { value: "", label: lang === "pt" ? "Prestamista" : "Lender" },
              { value: "all", label: t("common_all") }
            ]} />
            <_na3.Field label=""><_na3.Input type="date" /></_na3.Field>
            <_na3.Field label=""><_na3.Input type="date" /></_na3.Field>
          </div>
        </_na3.CardBody>
      </_na3.Card>

      <div className="cards-grid mt-16" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))" }}>
        {filtered.map(x => (
          <_na3.Card key={x.id} onClick={() => setDrawerV(x)} style={{ cursor: "pointer" }} role="button" tabIndex={0}
            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setDrawerV(x); } }}>
            <_na3.CardBody>
              <div className="row jcsb mb-8">
                <span className="chip mono fw-600">{x.plate}</span>
                <span className="row gap-4 text-muted fs-11"><_na3.Icon name="archive" size={11} />{Math.floor(Math.random() * 5)} arquivos</span>
              </div>
              <div className="fw-600 fs-14" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{x.plate} — {x.brand} {x.model.slice(0, 16)}…</div>
              <div className="text-faint fs-11 mt-8">{x.model.slice(0, 36)}…</div>
              <div className="text-faint fs-11">{x.owner.slice(0, 24)} • {x.year}</div>

              <div className="col gap-4 mt-16 fs-12 text-muted">
                <div className="row jcsb"><span>Prestamista:</span><span className="text-primary fw-500">{x.bank}</span></div>
                <div className="row jcsb"><span>Valor prestamista:</span><_na3.Money value={0} lang={lang} className="fs-12" /></div>
                <div className="row jcsb"><span>Compra + quitação:</span><_na3.Money value={x.purchasePrice + x.settlementValue} lang={lang} className="fs-12" /></div>
                <div className="row jcsb"><span>Mecânica:</span><_na3.Money value={0} lang={lang} className="fs-12" /></div>
                <div className="row jcsb" style={{ borderTop: "1px dashed var(--color-border-secondary)", paddingTop: 6, marginTop: 4, color: "var(--fg1)", fontWeight: 600 }}>
                  <span>Custo total:</span><_na3.Money value={x.purchasePrice + x.settlementValue} lang={lang} className="fs-13" style={{ color: "var(--color-success)" }} />
                </div>
              </div>
              <_na3.Button kind="default" icon="folder-open" style={{ width: "100%", marginTop: 12, justifyContent: "center" }}>
                {lang === "pt" ? "Gerenciar contratos" : "Manage contracts"}
              </_na3.Button>
            </_na3.CardBody>
          </_na3.Card>
        ))}
      </div>
      <_na3.VehicleDrawer open={!!drawerV} vehicle={drawerV} onClose={() => setDrawerV(null)} lang={lang} setT={setT} t={t} />
    </div>
  );
}
window.NA.M.lender = ModuleLender;

// ============================================================
// FINANCE — Fluxo de setores
// ============================================================
function ModuleFinance({ t, lang }) {
  const [tab, setTab] = useStateF("setores");
  const sectors = [
    { num: 1, key: "captacao", name: lang === "pt" ? "Captação" : "Acquisition", area: lang === "pt" ? "Comercial" : "Commercial", icon: "search" },
    { num: 2, key: "contrato", name: lang === "pt" ? "Contrato" : "Contract", area: lang === "pt" ? "Jurídico" : "Legal", icon: "file-text" },
    { num: 3, key: "manutencao", name: lang === "pt" ? "Manutenção" : "Maintenance", area: lang === "pt" ? "Oficina" : "Shop", icon: "wrench" },
    { num: 4, key: "venda", name: lang === "pt" ? "Venda" : "Sale", area: lang === "pt" ? "Comercial" : "Commercial", icon: "shopping-cart" },
    { num: 5, key: "subst", name: lang === "pt" ? "Substabelecimento" : "Sub-power", area: lang === "pt" ? "Jurídico" : "Legal", icon: "file-signature" },
    { num: 6, key: "quit", name: lang === "pt" ? "Quitação banco" : "Bank payoff", area: lang === "pt" ? "Financeiro" : "Finance", icon: "landmark" },
    { num: 7, key: "advog", name: lang === "pt" ? "Advogado" : "Legal", area: lang === "pt" ? "Jurídico" : "Legal", icon: "scale" },
  ];
  const v = _na3.vehicles.slice(0, 2);

  return (
    <div data-screen-label="Finance">
      <_na3.PageHead icon="wallet" title={lang === "pt" ? "Financeiro" : "Finance"} />
      <_na3.Tabs tabs={[
        { key: "setores", label: lang === "pt" ? "Setores" : "Sectors" },
        { key: "errors", label: lang === "pt" ? "Erro de operação" : "Operation errors" },
        { key: "resolved", label: lang === "pt" ? "Resolvidos" : "Resolved" },
        { key: "hist", label: lang === "pt" ? "Histórico" : "History" },
      ]} active={tab} onChange={setTab} />

      {tab === "setores" && (
        <>
          <_na3.Card>
            <_na3.CardHead title={lang === "pt" ? "Setores do fluxo" : "Flow sectors"} icon="git-branch"
              right={<_na3.Button kind="primary" icon="plus">{lang === "pt" ? "Adicionar veículo ao fluxo" : "Add vehicle to flow"}</_na3.Button>} />
            <_na3.CardBody>
              <div className="hint mb-16">{lang === "pt" ? "7 etapas que cada veículo percorre — da captação até a regularização final." : "7 stages from acquisition to final clearance."}</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 8 }}>
                {sectors.map(s => (
                  <div key={s.key} style={{ border: "1px solid var(--color-border-secondary)", borderRadius: 6, padding: 12, textAlign: "left" }}>
                    <div className="row gap-4 mb-8">
                      <span className="chip mono fw-600">{s.num}</span>
                      <_na3.Icon name={s.icon} size={14} style={{ color: "var(--fg3)" }} />
                    </div>
                    <div className="fw-500 fs-13">{s.name}</div>
                    <div className="text-faint fs-11">{s.area}</div>
                  </div>
                ))}
              </div>
            </_na3.CardBody>
          </_na3.Card>

          <div className="stat-strip mt-16" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
            <_na3.Stat label={lang === "pt" ? "Veículos no fluxo" : "Vehicles in flow"} value={17} icon="clock" />
            <_na3.Stat label={lang === "pt" ? "Em andamento" : "In progress"} value={1} icon="loader" accent="warning" />
            <_na3.Stat label={lang === "pt" ? "Concluídos" : "Completed"} value={0} icon="check-circle" accent="success" />
            <_na3.Stat label={lang === "pt" ? "Progresso geral" : "Overall progress"} value="3%" icon="trending-up" />
          </div>

          <div className="col gap-16 mt-16">
            {v.map(x => <FlowRow key={x.id} vehicle={x} sectors={sectors} lang={lang} />)}
          </div>
        </>
      )}
      {tab !== "setores" && <_na3.Card><_na3.CardBody><_na3.Empty icon="inbox" title={lang === "pt" ? "Sem dados" : "No data"} /></_na3.CardBody></_na3.Card>}
    </div>
  );
}
function FlowRow({ vehicle, sectors, lang }) {
  return (
    <_na3.Card>
      <_na3.CardBody>
        <div className="row jcsb mb-16">
          <div>
            <div className="fw-600 fs-15">{vehicle.brand} {vehicle.model.slice(0, 28)}… {vehicle.year} {vehicle.plate}</div>
            <div className="text-faint fs-12">0 {lang === "pt" ? "de" : "of"} 7 {lang === "pt" ? "setores concluídos" : "sectors completed"}</div>
          </div>
          <div className="row gap-12">
            <div className="row gap-1">
              {Array.from({ length: 7 }).map((_, i) => (
                <div key={i} style={{ width: 24, height: 4, background: "var(--color-error)", borderRadius: 2 }}></div>
              ))}
            </div>
            <span className="mono fs-12 fw-500" style={{ color: "var(--color-error)" }}>0%</span>
          </div>
        </div>

        <table className="tbl">
          <thead><tr>
            <th>#</th><th>{lang === "pt" ? "Setor" : "Sector"}</th><th>{t_("common_status", lang)}</th>
            <th>{lang === "pt" ? "Responsável" : "Owner"}</th><th>{lang === "pt" ? "Início" : "Start"}</th>
            <th>{lang === "pt" ? "Conclusão" : "End"}</th><th>{lang === "pt" ? "Observações" : "Notes"}</th>
          </tr></thead>
          <tbody>{sectors.map(s => (
            <tr key={s.key}>
              <td className="mono">{s.num}</td>
              <td><div className="row gap-8"><_na3.Icon name={s.icon} size={12} style={{ color: "var(--fg3)" }} /><div>
                <div className="fw-500">{s.name}</div>
                <div className="text-faint fs-11">{s.area}</div>
              </div></div></td>
              <td><_na3.Tag kind="error" dot>{lang === "pt" ? "Pendente" : "Pending"}</_na3.Tag></td>
              <td><input className="input" placeholder={lang === "pt" ? "Nome" : "Name"} style={{ height: 26, fontSize: 12 }} /></td>
              <td><input className="input mono" type="date" style={{ height: 26, fontSize: 12 }} /></td>
              <td><input className="input mono" type="date" style={{ height: 26, fontSize: 12 }} /></td>
              <td className="text-faint">—</td>
            </tr>
          ))}</tbody>
        </table>
        <div className="row mt-8" style={{ justifyContent: "flex-end" }}>
          <button className="btn sm ghost text-error"><_na3.Icon name="trash-2" size={11} />{lang === "pt" ? "Remover do fluxo" : "Remove from flow"}</button>
        </div>
      </_na3.CardBody>
    </_na3.Card>
  );
}
function t_(k, l) { return _na3.t(k, l); }
window.NA.M.finance = ModuleFinance;

// ============================================================
// CASHBOOK — Controle de Caixa
// ============================================================
function ModuleCashbook({ t, lang }) {
  const [tab, setTab] = useStateF("all");
  const [showEntry, setShowEntry] = useStateF(false);
  const [entries, setEntries] = useStateF([]);
  const [entryForm, setEntryForm] = useStateF({ type: "in", cat: "", desc: "", value: "", date: "" });

  const reload = useCallbackF(async () => {
    const rows = await (_na3.Cashbook?.listEntries() || Promise.resolve([]));
    setEntries(rows);
  }, []);

  useEffectF(() => {
    reload();
    const onRefresh = () => reload();
    window.addEventListener("na:cashbook-changed", onRefresh);
    return () => window.removeEventListener("na:cashbook-changed", onRefresh);
  }, [reload]);

  const filtered = entries.filter(e => {
    if (tab === "in") return e.value > 0;
    if (tab === "out") return e.value < 0;
    if (tab === "auto") return e.origin === "auto";
    return true;
  });
  const totals = _na3.Cashbook?.totals(entries) || { totalIn: 0, totalOut: 0, net: 0, autoCount: 0 };
  const totalIn = totals.totalIn;
  const totalOut = totals.totalOut;
  const net = totals.net;

  return (
    <div data-screen-label="Cashbook">
      <_na3.PageHead icon="landmark" title={lang === "pt" ? "Controle de caixa" : "Cash control"}
        right={<_na3.Button kind="default" icon="refresh-cw" onClick={reload}>{t("common_refresh")}</_na3.Button>} />

      <div className="alert success" style={{ marginBottom: 16 }}>
        <_na3.Icon name="zap" />
        <div className="body">
          <strong>{lang === "pt" ? "Sincronização automática" : "Automatic sync"}</strong>
          {lang === "pt"
            ? <>As vendas entram como <span className="text-success">receita</span> (valor cobrado do cliente) e os <span className="text-error">custos das aquisições</span> (mecânica, IPVA, multas, cartório, comissão…) entram como despesas, em tempo real. Os lançamentos manuais somam-se a estes.</>
            : "Sales come in as revenue, acquisition costs as expenses, in real-time. Manual entries add to these."}
        </div>
      </div>

      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
        <_na3.Stat label={lang === "pt" ? "Faturamento bruto" : "Gross revenue"} value={totalIn} isMoney lang={lang} accent="success" icon="arrow-up-circle"
          hint={`${totals.autoCount || 0} ${lang === "pt" ? "automáticos" : "automatic"}`} />
        <_na3.Stat label={lang === "pt" ? "Despesas totais" : "Total expenses"} value={Math.abs(totalOut)} isMoney lang={lang} accent="error" icon="arrow-down-circle"
          hint={`${entries.filter(e => e.origin === "auto" && e.value < 0).length} ${lang === "pt" ? "desp. auto" : "auto exp."}`} />
        <_na3.Stat label={lang === "pt" ? "Lucro real (sobrou)" : "Net profit"} value={net} isMoney lang={lang} accent="success" icon="check-circle" />
      </div>

      <_na3.Card className="mt-16">
        <_na3.CardHead title={lang === "pt" ? "Novo lançamento manual" : "New manual entry"} icon="plus-circle" />
        <_na3.CardBody>
          <div className="field-row cols-4">
            <_na3.Field label={t("common_type")}>
              <_na3.Select options={[
                { value: "in", label: lang === "pt" ? "Receita" : "Revenue" },
                { value: "out", label: lang === "pt" ? "Despesa" : "Expense" }
              ]} />
            </_na3.Field>
            <_na3.Field label={t("common_category")}>
              <_na3.Select placeholder={lang === "pt" ? "Selecione" : "Select"} options={[
                lang === "pt" ? "Comissão" : "Commission",
                lang === "pt" ? "Aluguel" : "Rent",
                lang === "pt" ? "Outros" : "Other"
              ]} />
            </_na3.Field>
            <_na3.Field label={t("common_description")}>
              <_na3.Input placeholder={lang === "pt" ? "Ex: Aluguel março" : "e.g. Rent March"} />
            </_na3.Field>
            <_na3.Field label={lang === "pt" ? "Valor (R$)" : "Value"}>
              <_na3.Input mono type="number" placeholder="0,00" />
            </_na3.Field>
          </div>
          <div className="row mt-16" style={{ justifyContent: "flex-end" }}>
            <_na3.Field label={t("common_date")} style={{ marginRight: 12 }}>
              <_na3.Input type="date" />
            </_na3.Field>
            <_na3.Button kind="primary" icon="plus" style={{ alignSelf: "end" }} onClick={() => setShowEntry(true)}>{lang === "pt" ? "Registrar" : "Register"}</_na3.Button>
          </div>
        </_na3.CardBody>
      </_na3.Card>

      <_na3.Card className="mt-16">
        <_na3.CardBody>
          <_na3.Tabs tabs={[
            { key: "all", label: `${lang === "pt" ? "Todos" : "All"} (${entries.length})` },
            { key: "in", label: `${lang === "pt" ? "Receitas" : "Revenue"} (${entries.filter(e => e.value > 0).length})` },
            { key: "out", label: `${lang === "pt" ? "Despesas" : "Expenses"} (${entries.filter(e => e.value < 0).length})` },
            { key: "auto", label: `${lang === "pt" ? "Automáticos" : "Automatic"} (${entries.filter(e => e.origin === "auto").length})` },
          ]} active={tab} onChange={setTab} />
          <table className="tbl">
            <thead><tr>
              <th>{t("common_date")}</th><th>{t("common_type")}</th><th>{t("common_category")}</th>
              <th>{t("common_description")}</th><th>{lang === "pt" ? "Origem" : "Origin"}</th>
              <th style={{ textAlign: "right" }}>{t("common_value")}</th><th></th>
            </tr></thead>
            <tbody>{filtered.map(e => (
              <tr key={e.id}>
                <td className="mono fs-12">{e.date}</td>
                <td><_na3.Tag kind={e.value > 0 ? "success" : "error"}>{e.value > 0 ? (lang === "pt" ? "RECEITA" : "REVENUE") : (lang === "pt" ? "DESPESA" : "EXPENSE")}</_na3.Tag></td>
                <td>{e.cat}</td>
                <td className="fs-12">{e.desc}</td>
                <td><_na3.Tag kind="warning">{e.origin === "auto" ? <><_na3.Icon name="zap" size={11} /> auto</> : "manual"}</_na3.Tag></td>
                <td className="mono" style={{ textAlign: "right", color: e.value > 0 ? "var(--color-success)" : "var(--color-error)", fontWeight: 500 }}>
                  {e.value > 0 ? "+ " : "− "}<_na3.Money value={Math.abs(e.value)} lang={lang} />
                </td>
                <td>{e.origin === "manual" && <button className="icon-btn-sq" style={{ width: 24, height: 24, color: "var(--color-error)" }}><_na3.Icon name="trash-2" size={11} /></button>}</td>
              </tr>
            ))}</tbody>
          </table>
        </_na3.CardBody>
      </_na3.Card>
      <_na3.Modal open={showEntry} onClose={() => setShowEntry(false)} title={lang === "pt" ? "Novo lançamento manual" : "New manual entry"}
        footer={<>
          <_na3.Button kind="ghost" onClick={() => setShowEntry(false)}>{t("common_cancel")}</_na3.Button>
          <_na3.Button kind="primary" onClick={async () => {
            if (!entryForm.desc || !entryForm.value) return;
            await _na3.Cashbook.addEntry({
              type: entryForm.type,
              category: entryForm.cat || (lang === "pt" ? "Outros" : "Other"),
              description: entryForm.desc,
              amount: Number(entryForm.value),
              entryDate: entryForm.date || new Date().toISOString().slice(0, 10),
              origin: "manual",
            });
            setShowEntry(false);
            setEntryForm({ type: "in", cat: "", desc: "", value: "", date: "" });
            reload();
          }}>{t("common_save")}</_na3.Button>
        </>}>
        <div className="col gap-12">
          <_na3.Field label={t("common_type")}><_na3.Select value={entryForm.type} onChange={v => setEntryForm(f => ({ ...f, type: v }))} options={[
            { value: "in", label: lang === "pt" ? "Receita" : "Revenue" },
            { value: "out", label: lang === "pt" ? "Despesa" : "Expense" },
          ]} /></_na3.Field>
          <_na3.Field label={t("common_description")}><_na3.Input value={entryForm.desc} onChange={v => setEntryForm(f => ({ ...f, desc: v }))} /></_na3.Field>
          <_na3.Field label={t("common_value")}><_na3.Input mono type="number" value={entryForm.value} onChange={v => setEntryForm(f => ({ ...f, value: v }))} /></_na3.Field>
          <_na3.Field label={t("common_date")}><_na3.Input type="date" value={entryForm.date} onChange={v => setEntryForm(f => ({ ...f, date: v }))} /></_na3.Field>
        </div>
      </_na3.Modal>
    </div>
  );
}
window.NA.M.cashbook = ModuleCashbook;