// modules-ops.jsx — Contracts, Lawyer, Trackers, Reviews
window.NA = window.NA || {};
window.NA.M = window.NA.M || {};
const _na2 = window.NA;
const { useState: useStateO, useEffect: useEffectO, useRef: useRefO, useMemo: useMemoO, useCallback: useCallbackO } = React;

// ============================================================
// CONTRACTS — Gerador de .docx
// ============================================================
function ModuleContracts({ t, lang, setT, tweaks }) {
  const [tab, setTab] = useStateO(tweaks?.contractsTab || "legal");
  const [legalQ, setLegalQ] = useStateO("");
  const [legalFilter, setLegalFilter] = useStateO("pending_sign");
  const [selectedAcq, setSelectedAcq] = useStateO(null);
  const [legalDocs, setLegalDocs] = useStateO([]);
  const [legalLoading, setLegalLoading] = useStateO(false);
  const [allDocsMap, setAllDocsMap] = useStateO({});
  const AD = _na2.AcquisitionDocs;
  const canEditDocs = ["admin", "lawyer"].includes(_na2.currentUser?.key || "admin");

  const reloadAllDocsMap = useCallbackO(async () => {
    if (!_na2.db?.isConfigured()) { setAllDocsMap({}); return; }
    try {
      const rows = await _na2.db.listAllAcquisitionDocuments();
      const map = {};
      rows.forEach(d => {
        if (!map[d.acquisition_id]) map[d.acquisition_id] = [];
        map[d.acquisition_id].push(d);
      });
      setAllDocsMap(map);
    } catch (e) {
      console.warn(e);
    }
  }, []);

  useEffectO(() => {
    reloadAllDocsMap();
    const onRefresh = () => reloadAllDocsMap();
    window.addEventListener("na:acquisitions-changed", onRefresh);
    return () => window.removeEventListener("na:acquisitions-changed", onRefresh);
  }, [reloadAllDocsMap]);

  useEffectO(() => {
    if (tweaks?.contractsTab) setTab(tweaks.contractsTab);
    if (tweaks?.acquisitionId) {
      const v = (_na2.vehicles || []).find(x => x.id === tweaks.acquisitionId);
      if (v) { setSelectedAcq(v); setTab("legal"); }
    }
  }, [tweaks?.contractsTab, tweaks?.acquisitionId]);

  const reloadLegalDocs = useCallbackO(async (acqId, vehType) => {
    if (!acqId || !_na2.db?.isConfigured()) { setLegalDocs([]); return; }
    setLegalLoading(true);
    try {
      await _na2.db.ensureAcquisitionDocumentPlaceholders(acqId, vehType || "car");
      const docs = await _na2.db.listAcquisitionDocuments(acqId);
      setLegalDocs(docs);
      setAllDocsMap(prev => ({ ...prev, [acqId]: docs }));
    } catch (e) {
      console.warn(e);
    } finally {
      setLegalLoading(false);
    }
  }, []);

  useEffectO(() => {
    if (selectedAcq?.id) reloadLegalDocs(selectedAcq.id, selectedAcq.vehType);
  }, [selectedAcq?.id, selectedAcq?.vehType, reloadLegalDocs]);

  const acquisitions = _na2.vehicles || [];
  const legalRows = useMemoO(() => acquisitions.map(v => {
    const docs = allDocsMap[v.id] || [];
    const compliance = AD?.computeDocCompliance(v.vehType || "car", docs) || { signed: 0, total: 0, pending: 0 };
    return { vehicle: v, compliance, docs };
  }), [acquisitions, allDocsMap, AD]);

  const filteredLegal = useMemoO(() => {
    let rows = legalRows;
    if (legalQ) {
      const q = legalQ.toLowerCase();
      rows = rows.filter(({ vehicle: v }) =>
        [v.plate, v.brand, v.model, v.sellerName, v.bank].filter(Boolean).join(" ").toLowerCase().includes(q));
    }
    if (legalFilter === "pending_sign") {
      rows = rows.filter(({ vehicle: v }) => !["sold", "settled"].includes(v.status));
    } else if (legalFilter === "incomplete") {
      rows = rows.filter(({ compliance }) => compliance.signed < compliance.total);
    }
    return rows;
  }, [legalRows, legalQ, legalFilter]);

  const [models, setModels] = useStateO([
    { id: "m1", name: "Modelo de procuração", file: "PROCURACAO-COMPRA-VIA-TRASLADO-(5).pdf", desc: lang === "pt" ? "Modelo padrão de procuração para compra" : "Standard purchase proxy" },
    { id: "m2", name: "Contrato de venda", file: "MODELO contrato Subestabelecimento.docx", desc: "" },
    { id: "m3", name: "Contrato de compra", file: "MODELO CONTRATO - NÃO ALTERAR.docx", desc: "" },
  ]);
  const [generated, setGenerated] = useStateO([
    { id: "g1", model: "Modelo de procuração", vehicle: "AEY7D33 — Audi A5 Sportback", client: "Patrick Peres Batista", date: "12/05/2026" },
    { id: "g2", model: "Contrato de compra", vehicle: "QUF4CA2 — Ford Ka SE", client: "Ana Costa", date: "10/05/2026" },
    { id: "g3", model: "Contrato de venda", vehicle: "FFK5C25 — Ford Ka SE Plus", client: "Lucas Andrade", date: "08/05/2026" },
  ]);

  return (
    <div data-screen-label="Contracts">
      <_na2.PageHead icon="file-text" title={lang === "pt" ? "Contratos" : "Contracts"}
        subtitle={lang === "pt"
          ? <>Suba os modelos de contrato em <code className="no-code">.docx</code> com placeholders <code className="no-code">{"{{nome_cliente}}"}</code>, gere contratos preenchidos e baixe em <code className="no-code">.docx</code> ou PDF.</>
          : <>Upload <code className="no-code">.docx</code> templates with placeholders, generate filled contracts and download.</>} />

      <_na2.Tabs tabs={[
        { key: "legal", label: lang === "pt" ? "Aquisições (jurídico)" : "Acquisitions (legal)" },
        { key: "models", label: lang === "pt" ? "Modelos" : "Templates" },
        { key: "gen", label: lang === "pt" ? "Contratos gerados" : "Generated" },
        { key: "docs", label: lang === "pt" ? "Documentos para fazer o contrato" : "Source docs" },
        { key: "howto", label: lang === "pt" ? "Como usar" : "How to use" },
      ]} active={tab} onChange={setTab} />

      {tab === "legal" && (
        <div style={{ display: "grid", gridTemplateColumns: selectedAcq ? "360px 1fr" : "1fr", gap: 16 }}>
          <_na2.Card>
            <_na2.CardHead title={lang === "pt" ? "Aquisições — visão jurídica" : "Acquisitions — legal view"} icon="scale"
              right={<span className="text-faint fs-12">{acquisitions.length} {lang === "pt" ? "veículos" : "vehicles"}</span>} />
            <_na2.CardBody>
              <div className="hint mb-12">{lang === "pt"
                ? "Mesma entidade de Aquisições — aqui o foco é assinatura e arquivamento de documentos."
                : "Same acquisitions entity — focus on signing and archiving documents."}</div>
              <_na2.SearchBox value={legalQ} onChange={setLegalQ} style={{ marginBottom: 12 }}
                placeholder={lang === "pt" ? "Placa, cliente, banco…" : "Plate, client, bank…"} />
              <div className="row gap-4 mb-12" style={{ flexWrap: "wrap" }}>
                {[
                  { key: "pending_sign", label: lang === "pt" ? "Aguardando assinatura" : "Awaiting signature" },
                  { key: "incomplete", label: lang === "pt" ? "Docs incompletos" : "Incomplete docs" },
                  { key: "all", label: t("common_all") },
                ].map(f => (
                  <button key={f.key} type="button" className={"btn sm " + (legalFilter === f.key ? "primary" : "default")}
                    onClick={() => setLegalFilter(f.key)}>{f.label}</button>
                ))}
              </div>
              <div className="col gap-8" style={{ maxHeight: 520, overflow: "auto" }}>
                {filteredLegal.map(({ vehicle: v, compliance }) => (
                  <div key={v.id} onClick={() => setSelectedAcq(v)} role="button" tabIndex={0}
                    style={{
                      padding: 12, borderRadius: 6, cursor: "pointer",
                      border: "1px solid " + (selectedAcq?.id === v.id ? "var(--color-primary)" : "var(--color-border-secondary)"),
                      background: selectedAcq?.id === v.id ? "var(--color-primary-bg)" : "var(--color-bg-container)",
                    }}>
                    <div className="row jcsb gap-8">
                      <span className="chip mono fw-600">{v.plate}</span>
                      <_na2.StatusTag status={v.status} lang={lang} />
                    </div>
                    <div className="fs-13 fw-500 mt-8">{v.brand} {v.model}</div>
                    <div className="text-faint fs-11">{v.sellerName || v.owner}</div>
                    <div className="fs-11 mt-8 mono">{compliance.signed}/{compliance.total} {lang === "pt" ? "assinados" : "signed"}</div>
                    {setT && (
                      <button type="button" className="btn ghost sm mt-8" onClick={(e) => {
                        e.stopPropagation();
                        setT({ module: "acquisitions", acquisitionId: v.id });
                      }}>
                        {lang === "pt" ? "Abrir operacional →" : "Open ops view →"}
                      </button>
                    )}
                  </div>
                ))}
                {filteredLegal.length === 0 && <div className="hint">{lang === "pt" ? "Nenhuma aquisição." : "No acquisitions."}</div>}
              </div>
            </_na2.CardBody>
          </_na2.Card>

          {selectedAcq && (
            <_na2.Card>
              <_na2.CardHead title={`${selectedAcq.plate} — ${selectedAcq.brand}`} icon="file-signature"
                right={<button type="button" className="icon-btn" onClick={() => setSelectedAcq(null)}><_na2.Icon name="x" size={14} /></button>} />
              <_na2.CardBody>
                {legalLoading ? <div className="hint">{lang === "pt" ? "Carregando documentos…" : "Loading documents…"}</div> : (
                  _na2.AcquisitionDocChecklist ? (
                    <_na2.AcquisitionDocChecklist
                      acquisitionId={selectedAcq.id}
                      vehType={selectedAcq.vehType || "car"}
                      docs={legalDocs}
                      lang={lang}
                      mode="legal"
                      onUpload={(docType, file) => _na2.db.uploadAcquisitionDocument(selectedAcq.id, docType, file)}
                      onStatusChange={(docId, status) => _na2.db.updateAcquisitionDocumentStatus(docId, status)}
                      onRefresh={() => { reloadLegalDocs(selectedAcq.id, selectedAcq.vehType); window.dispatchEvent(new Event("na:acquisitions-changed")); }}
                      canUpload={canEditDocs}
                      canChangeStatus={canEditDocs}
                    />
                  ) : <div className="hint">acquisition-docs.jsx</div>
                )}
              </_na2.CardBody>
            </_na2.Card>
          )}
        </div>
      )}

      {tab === "models" && (
        <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 16 }}>
          <_na2.Card>
            <_na2.CardHead title={lang === "pt" ? "Novo modelo" : "New template"} icon="upload" />
            <_na2.CardBody>
              <_na2.Field label={lang === "pt" ? "Nome do modelo" : "Template name"} required>
                <_na2.Input placeholder={lang === "pt" ? "Ex: Contrato de compra e venda" : "e.g. Purchase contract"} />
              </_na2.Field>
              <_na2.Field label={lang === "pt" ? "Descrição (opcional)" : "Description"} style={{ marginTop: 12 }}>
                <_na2.Textarea placeholder={lang === "pt" ? "Para que serve esse modelo?" : "What is this template for?"} />
              </_na2.Field>
              <_na2.Field label={lang === "pt" ? "Arquivo .docx ou .pdf" : ".docx or .pdf"} style={{ marginTop: 12 }}>
                <div style={{ border: "2px dashed var(--color-border)", borderRadius: 6, padding: 20, textAlign: "center", color: "var(--fg3)", cursor: "pointer" }}>
                  <_na2.Icon name="upload-cloud" size={28} />
                  <div className="fs-12 mt-8">{lang === "pt" ? "Buscar contrato no computador" : "Browse contract on computer"}</div>
                </div>
              </_na2.Field>
              <div className="hint mt-8">
                {lang === "pt" ? <>Aceita .docx (Word) e .pdf. Use <code className="no-code">{"{{nome_cliente}}"}</code>, etc. dentro do arquivo. Veja "Como usar" para a lista completa.</>
                  : <>Accepts .docx and .pdf. Use <code className="no-code">{"{{client_name}}"}</code> etc. inside the file.</>}
              </div>
              <_na2.Button kind="primary" icon="plus" style={{ width: "100%", marginTop: 16, justifyContent: "center" }}>{lang === "pt" ? "Adicionar modelo" : "Add template"}</_na2.Button>
            </_na2.CardBody>
          </_na2.Card>

          <_na2.Card>
            <_na2.CardHead title={lang === "pt" ? `Modelos cadastrados (${models.length})` : `Saved templates (${models.length})`} icon="folder-open" />
            <_na2.CardBody>
              <div className="col gap-12">
                {models.map(m => (
                  <div key={m.id} className="row" style={{ padding: 14, border: "1px solid var(--color-border-secondary)", borderRadius: 6, background: "var(--color-fill-quaternary)" }}>
                    <_na2.Icon name="file-text" size={20} style={{ color: "var(--color-primary)" }} />
                    <div className="flex-1" style={{ marginLeft: 12 }}>
                      <div className="fw-600">{m.name}</div>
                      <div className="text-faint fs-12 mono">{m.file}</div>
                      {m.desc && <div className="text-muted fs-12 mt-8">{m.desc}</div>}
                    </div>
                    <_na2.Button kind="success" size="sm" icon="play">{lang === "pt" ? "Usar" : "Use"}</_na2.Button>
                    <button className="icon-btn-sq" style={{ color: "var(--color-error)", borderColor: "var(--color-error-border)" }}><_na2.Icon name="trash-2" size={14} /></button>
                  </div>
                ))}
              </div>
            </_na2.CardBody>
          </_na2.Card>
        </div>
      )}

      {tab === "gen" && (
        <_na2.Card>
          <_na2.CardHead title={lang === "pt" ? "Contratos gerados" : "Generated contracts"} icon="files"
            right={<_na2.SearchBox placeholder={lang === "pt" ? "Buscar contrato…" : "Search…"} />} />
          <_na2.CardBody>
            <table className="tbl">
              <thead><tr>
                <th>{lang === "pt" ? "Modelo" : "Template"}</th>
                <th>{lang === "pt" ? "Veículo" : "Vehicle"}</th>
                <th>{t("common_client")}</th>
                <th>{t("common_date")}</th>
                <th>{t("common_actions")}</th>
              </tr></thead>
              <tbody>{generated.map(g => (
                <tr key={g.id}>
                  <td><div className="row gap-8"><_na2.Icon name="file-text" size={14} style={{ color: "var(--color-primary)" }} />{g.model}</div></td>
                  <td className="mono fs-12">{g.vehicle}</td>
                  <td>{g.client}</td>
                  <td className="mono fs-12">{g.date}</td>
                  <td><div className="row gap-4">
                    <_na2.Button kind="ghost" size="sm" icon="eye">{t("common_view")}</_na2.Button>
                    <_na2.Button kind="success" size="sm" icon="download">.docx</_na2.Button>
                    <_na2.Button kind="default" size="sm" icon="file">.pdf</_na2.Button>
                  </div></td>
                </tr>
              ))}</tbody>
            </table>
          </_na2.CardBody>
        </_na2.Card>
      )}

      {tab === "docs" && (
        <_na2.Card padded>
          <h3 className="mb-16">{lang === "pt" ? "Documentos necessários" : "Required documents"}</h3>
          <ul style={{ lineHeight: 1.8, color: "var(--fg2)", paddingLeft: 20 }}>
            <li>{lang === "pt" ? "CRLV do veículo (digital ou impresso)" : "Vehicle registration"}</li>
            <li>{lang === "pt" ? "RG e CPF do cliente (frente e verso)" : "Client ID document"}</li>
            <li>{lang === "pt" ? "Comprovante de residência atualizado (até 60 dias)" : "Proof of address (≤60 days)"}</li>
            <li>{lang === "pt" ? "Última fatura do banco financiador, se aplicável" : "Last bank statement, if financing exists"}</li>
            <li>{lang === "pt" ? "Reconhecimento de firma do antigo proprietário" : "Notary signature of previous owner"}</li>
          </ul>
        </_na2.Card>
      )}

      {tab === "howto" && (
        <_na2.Card padded>
          <h3 className="mb-16">{lang === "pt" ? "Placeholders disponíveis" : "Available placeholders"}</h3>
          <table className="tbl">
            <thead><tr><th>Placeholder</th><th>{lang === "pt" ? "Substitui por" : "Replaced with"}</th></tr></thead>
            <tbody>
              {[
                ["{{nome_cliente}}", lang === "pt" ? "Nome completo do cliente" : "Client full name"],
                ["{{cpf_cliente}}", "CPF"],
                ["{{rg_cliente}}", "RG"],
                ["{{endereco_cliente}}", lang === "pt" ? "Endereço completo" : "Full address"],
                ["{{placa}}", lang === "pt" ? "Placa do veículo" : "Plate"],
                ["{{marca_modelo}}", lang === "pt" ? "Marca e modelo" : "Brand & model"],
                ["{{ano}}", lang === "pt" ? "Ano" : "Year"],
                ["{{valor_compra}}", lang === "pt" ? "Valor de compra" : "Purchase price"],
                ["{{data_atual}}", lang === "pt" ? "Data de geração" : "Generation date"],
              ].map(([p, d]) => <tr key={p}><td className="mono fs-12">{p}</td><td>{d}</td></tr>)}
            </tbody>
          </table>
        </_na2.Card>
      )}
    </div>
  );
}
window.NA.M.contracts = ModuleContracts;

// ============================================================
// LAWYER — Painel Jurídico (cards de veículos)
// ============================================================
function ModuleLawyer({ t, lang, setT }) {
  const [q, setQ] = useStateO("");
  const [tab, setTab] = useStateO("legal_pending");
  const [drawerV, setDrawerV] = useStateO(null);
  const views = _na2.AcquisitionViews;
  const v = _na2.vehicles || [];
  const restricted = views?.filterRows(v, "legal_restricted", "") || [];
  const docsPending = v.filter(x => !["sold", "settled"].includes(x.status));
  const counters = {
    total: v.length,
    restrictions: restricted.length,
    renajud: v.filter(x => x.renajud).length,
    apreensoes: v.filter(x => x.seizure).length,
  };
  const filtered = views?.filterRows(v, tab, q) || v;

  return (
    <div data-screen-label="Lawyer">
      <_na2.PageHead icon="scale" title={lang === "pt" ? "Jurídico" : "Legal"}
        subtitle={lang === "pt" ? "View jurídica da mesma base de Aquisições — restrições, Renajud e documentos pendentes" : "Legal view of the same Acquisitions base — restrictions, Renajud and pending docs"} />
      {_na2.AcquisitionSourceBanner && <_na2.AcquisitionSourceBanner lang={lang} />}

      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <_na2.Stat label={lang === "pt" ? "Total veículos" : "Total vehicles"} value={counters.total} icon="car" />
        <_na2.Stat label="Restrições" value={counters.restrictions} icon="alert-triangle" accent={counters.restrictions > 0 ? "warning" : ""} />
        <_na2.Stat label="Renajud" value={counters.renajud} icon="gavel" />
        <_na2.Stat label={lang === "pt" ? "B. Apreensão" : "Seizure"} value={counters.apreensoes} icon="ban" />
      </div>

      <_na2.Card className="mt-16">
        <_na2.CardBody>
          <div className="row gap-8">
            <_na2.SearchBox value={q} onChange={setQ} style={{ flex: 1 }}
              placeholder={lang === "pt" ? "Pesquisar por placa, modelo, cliente, banco, status…" : "Search plate, model, client, bank…"} />
            <div className="row gap-4">
              {["all", "legal_pending", "legal_restricted", "post"].map(k => (
                <button key={k} className={"btn sm " + (tab === k ? "primary" : "default")} onClick={() => setTab(k)}>
                  {k === "all" ? t("common_all") :
                   k === "legal_pending" ? (lang === "pt" ? `Docs pendentes (${docsPending.length})` : `Pending docs (${docsPending.length})`) :
                   k === "post" ? (lang === "pt" ? "Finalizados" : "Finished") :
                   "Restrições"}
                </button>
              ))}
            </div>
          </div>
        </_na2.CardBody>
      </_na2.Card>

      <_na2.Card className="mt-16">
        <_na2.CardBody>
          <_na2.VehicleTable
            vehicles={filtered}
            columns={views?.columns(t, lang, "legal")}
            lang={lang}
            t={t}
            onRowClick={setDrawerV}
            selectedId={drawerV?.id}
            empty={<_na2.Empty icon="scale" title={lang === "pt" ? "Nenhuma aquisição nesta view" : "No acquisitions in this view"} />}
          />
        </_na2.CardBody>
      </_na2.Card>
      {_na2.AcquisitionDrawer
        ? <_na2.AcquisitionDrawer open={!!drawerV} vehicle={drawerV} onClose={() => setDrawerV(null)} lang={lang} setT={setT} t={t} />
        : <_na2.VehicleDrawer open={!!drawerV} vehicle={drawerV} onClose={() => setDrawerV(null)} lang={lang} setT={setT} t={t} />}
    </div>
  );
}
window.NA.M.lawyer = ModuleLawyer;

// ============================================================
// TRACKERS — Mapa
// ============================================================
function ModuleTrackers({ t, lang }) {
  const trackers = [
    { id: "tr1", plate: "GFGD2J55", model: "Hyundai Santa Fe", driver: "mateus", status: "active", pos: { x: 0.55, y: 0.4 }, address: "Av. Brigadeiro Faria Lima, 1755" },
    { id: "tr2", plate: "AEY7D33", model: "Audi A5 Sportback", driver: "Patrick", status: "active", pos: { x: 0.6, y: 0.55 }, address: "R. Augusta, 2840" },
    { id: "tr3", plate: "QUF4CA2", model: "Ford Ka Sedan", driver: "Lucas", status: "active", pos: { x: 0.48, y: 0.62 }, address: "Marginal Pinheiros, km 18" },
  ];
  const [selected, setSelected] = useStateO(trackers[0].id);

  return (
    <div data-screen-label="Trackers">
      <_na2.PageHead icon="radio" title={lang === "pt" ? "Rastreadores" : "Trackers"}
        subtitle={lang === "pt" ? "Acompanhe seus carros em tempo real" : "Track your vehicles in real time"}
        right={<div className="row gap-8">
          <_na2.Button kind="default" icon="refresh-cw">{t("common_refresh")}</_na2.Button>
          <_na2.Button kind="primary" icon="plus">{lang === "pt" ? "Novo rastreador" : "New tracker"}</_na2.Button>
        </div>} />

      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        <_na2.Stat label={t("common_total")} value={trackers.length} icon="radio" />
        <_na2.Stat label={lang === "pt" ? "Ativos" : "Active"} value={trackers.filter(t => t.status === "active").length} accent="success" icon="circle-check" />
        <_na2.Stat label={lang === "pt" ? "No mapa" : "On map"} value={trackers.filter(t => t.pos).length} icon="map-pin" />
        <_na2.Stat label={lang === "pt" ? "Sem posição" : "No position"} value={0} icon="map-pin-off" />
      </div>

      <_na2.Card className="mt-16">
        <_na2.CardBody style={{ padding: 0 }}>
          <_na2.SearchBox style={{ margin: 16, marginBottom: 0, border: "none", background: "var(--color-fill-tertiary)" }}
            placeholder={lang === "pt" ? "Buscar por placa, modelo, motorista ou ID do dispositivo…" : "Search plate, model, driver…"} />
          <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 12, padding: 16 }}>
            <div className="col gap-8" style={{ maxHeight: 480, overflow: "auto" }}>
              {trackers.map(tr => (
                <div key={tr.id} onClick={() => setSelected(tr.id)}
                  style={{
                    padding: 12, border: "1px solid " + (selected === tr.id ? "var(--color-primary)" : "var(--color-border-secondary)"),
                    borderRadius: 6, cursor: "pointer",
                    background: selected === tr.id ? "var(--color-primary-bg)" : "var(--color-bg-container)"
                  }}>
                  <div className="row jcsb">
                    <span className="chip mono fw-600">{tr.plate}</span>
                    <_na2.Tag kind="success" dot>{tr.status === "active" ? (lang === "pt" ? "ativo" : "active") : "—"}</_na2.Tag>
                  </div>
                  <div className="fs-13 mt-8">{tr.model}</div>
                  <div className="text-faint fs-11">Motorista: <span className="text-muted">{tr.driver}</span></div>
                  <div className="text-faint fs-11 mt-8 mono">{tr.address || (lang === "pt" ? "Sem posição registrada" : "No position")}</div>
                  <div className="row gap-4 mt-8">
                    <button className="btn sm ghost"><_na2.Icon name="map-pin" size={11} />{lang === "pt" ? "Posição" : "Locate"}</button>
                    <button className="icon-btn-sq" style={{ width: 24, height: 24 }}><_na2.Icon name="edit-2" size={11} /></button>
                    <button className="icon-btn-sq" style={{ width: 24, height: 24, color: "var(--color-error)" }}><_na2.Icon name="trash-2" size={11} /></button>
                  </div>
                </div>
              ))}
            </div>
            <FakeMap trackers={trackers} selected={selected} />
          </div>
        </_na2.CardBody>
      </_na2.Card>

      <_na2.Card className="mt-16">
        <_na2.CardHead title={lang === "pt" ? "Endpoint para receber posições do GPS" : "GPS position endpoint"} icon="terminal" />
        <_na2.CardBody>
          <div className="text-muted fs-13 mb-8">{lang === "pt" ? "Configure seu rastreador / app para enviar" : "Configure your tracker / app to POST"} <code className="no-code">POST</code> {lang === "pt" ? "em" : "to"}:</div>
          <div className="mono fs-13" style={{ background: "var(--color-fill-tertiary)", padding: "8px 12px", borderRadius: 6, marginBottom: 12 }}>
            <span className="text-primary">https://northauto-os.app/api/rastreador/posicao</span>
          </div>
          <div className="fs-12 fw-500 mb-8">Body JSON:</div>
          <pre style={{ background: "var(--color-fill-tertiary)", padding: 12, borderRadius: 6, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--fg2)", overflow: "auto" }}>
{`{ "device_id": "ABC123", "lat": -23.5, "lng": -46.6, "velocidade": 60, "endereco": "Av..." }`}
          </pre>
        </_na2.CardBody>
      </_na2.Card>
    </div>
  );
}
function FakeMap({ trackers, selected }) {
  return (
    <div style={{
      position: "relative", height: 480, borderRadius: 6,
      background: "linear-gradient(135deg, #eef2f8 0%, #e6ebf2 100%)",
      border: "1px solid var(--color-border-secondary)", overflow: "hidden"
    }}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {/* fake roads */}
        <path d="M10,30 Q30,40 50,35 T90,40" stroke="#cfd6e0" strokeWidth="0.6" fill="none" />
        <path d="M5,55 Q25,50 55,60 T95,55" stroke="#cfd6e0" strokeWidth="0.6" fill="none" />
        <path d="M50,5 Q55,30 50,55 T48,95" stroke="#cfd6e0" strokeWidth="0.6" fill="none" />
        <path d="M20,5 Q22,40 28,75" stroke="#cfd6e0" strokeWidth="0.4" fill="none" />
        <path d="M75,10 Q72,40 78,80" stroke="#cfd6e0" strokeWidth="0.4" fill="none" />
        {/* land patches */}
        <path d="M10,70 Q20,65 30,70 L30,90 L10,90 Z" fill="rgba(82,196,26,0.06)" />
        <path d="M65,15 Q75,18 80,25 L80,40 L65,40 Z" fill="rgba(82,196,26,0.06)" />
      </svg>
      {/* zoom controls */}
      <div style={{ position: "absolute", top: 8, left: 8, display: "flex", flexDirection: "column", gap: 1 }}>
        <button className="icon-btn-sq" style={{ width: 26, height: 26, borderRadius: "4px 4px 0 0" }}>+</button>
        <button className="icon-btn-sq" style={{ width: 26, height: 26, borderRadius: "0 0 4px 4px" }}>−</button>
      </div>
      <div style={{
        position: "absolute", top: 8, right: 8, padding: "4px 10px", background: "rgba(255,255,255,0.92)",
        borderRadius: 4, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg2)"
      }}>São Paulo, SP — z14</div>
      {/* pins */}
      {trackers.map(tr => {
        const left = (tr.pos.x * 100) + "%";
        const top = (tr.pos.y * 100) + "%";
        return (
          <div key={tr.id} style={{ position: "absolute", left, top, transform: "translate(-50%, -50%)" }}>
            <div style={{
              width: 28, height: 28, borderRadius: "50%",
              background: selected === tr.id ? "var(--color-primary)" : "#fff",
              border: "2px solid var(--color-primary)",
              color: selected === tr.id ? "#fff" : "var(--color-primary)",
              display: "flex", alignItems: "center", justifyContent: "center",
              boxShadow: "0 2px 6px rgba(0,0,0,0.15)"
            }}>
              <_na2.Icon name="car" size={14} />
            </div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 10,
              background: "rgba(255,255,255,0.92)", padding: "1px 5px", borderRadius: 3,
              marginTop: 2, textAlign: "center", border: "1px solid var(--color-border-secondary)"
            }}>{tr.plate}</div>
          </div>
        );
      })}
      <div style={{
        position: "absolute", bottom: 8, right: 8, padding: "4px 10px",
        background: "rgba(255,255,255,0.92)", borderRadius: 4, fontSize: 11, color: "var(--fg3)"
      }}>Leaflet | © OpenStreetMap</div>
    </div>
  );
}
window.NA.M.trackers = ModuleTrackers;

// ============================================================
// REVIEWS — Avaliações
// ============================================================
function ModuleReviews({ t, lang }) {
  const reviews = [
    { id: "r1", client: "PARA MEU NEGÓCIO", email: "parameunegocio1511@gmail.com", rating: 5, comment: "top", date: "28/04/2026, 19:31:38" },
    { id: "r2", client: "dione alves", email: "dionealves", rating: 5, comment: lang === "pt" ? "Sistema top de mais parabéns a toda equipe" : "Awesome system, congrats team", date: "23/04/2026, 12:15:11" },
  ];
  const ratings = { 5: 2, 4: 0, 3: 0, 2: 0, 1: 0 };
  const max = 4;

  return (
    <div data-screen-label="Reviews">
      <_na2.PageHead icon="message-square" title={lang === "pt" ? "Avaliações" : "Reviews"}
        subtitle={lang === "pt" ? "Notas e comentários enviados pelos clientes" : "Ratings and comments from clients"} />

      <_na2.Card>
        <_na2.CardHead title={lang === "pt" ? "Avaliações de todos" : "All reviews"} icon="messages-square"
          right={<>
            <span className="text-muted fs-12">{reviews.length} {lang === "pt" ? "respostas — média" : "responses — avg"} <b>5.0</b></span>
            <_na2.Button kind="default" icon="refresh-cw" size="sm">{t("common_refresh")}</_na2.Button>
          </>} />
        <_na2.CardBody>
          <div className="row gap-12 mb-16">
            <_na2.Field label={lang === "pt" ? "Data inicial" : "From"}><_na2.Input type="date" /></_na2.Field>
            <_na2.Field label={lang === "pt" ? "Data final" : "To"}><_na2.Input type="date" /></_na2.Field>
            <_na2.Button kind="primary" icon="filter" style={{ alignSelf: "end" }}>{t("common_filter")}</_na2.Button>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 24 }}>
            <_na2.Card>
              <_na2.CardHead title={lang === "pt" ? "Análise das notas" : "Score breakdown"} icon="bar-chart-3" />
              <_na2.CardBody>
                <div style={{ display: "flex", alignItems: "flex-end", gap: 16, height: 180, paddingLeft: 32, position: "relative" }}>
                  {[5, 4, 3, 2, 1].map(r => {
                    const h = (ratings[r] / max) * 160;
                    return (
                      <div key={r} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
                        <div className="mono fs-11 text-muted">{ratings[r]}</div>
                        <div style={{ width: "100%", height: h || 4, background: ratings[r] ? "var(--color-primary)" : "var(--color-fill-tertiary)", borderRadius: 2 }}></div>
                        <div className="fs-11 text-muted">{r}★</div>
                      </div>
                    );
                  })}
                  <div style={{ position: "absolute", left: 0, bottom: 20, top: 0, display: "flex", flexDirection: "column", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg3)" }}>
                    <span>4</span><span>3</span><span>2</span><span>1</span><span>0</span>
                  </div>
                </div>
              </_na2.CardBody>
            </_na2.Card>
            <_na2.Card>
              <_na2.CardHead title={lang === "pt" ? "Onde melhorar" : "Where to improve"} icon="alert-circle" />
              <_na2.CardBody>
                <div className="fs-13 text-muted mb-16">{lang === "pt"
                  ? "Manter a experiência atual e acompanhar comentários com notas menores."
                  : "Keep current quality and watch low-rating feedback."}</div>
                <div className="alert info">
                  <_na2.Icon name="info" />
                  <div className="body">{lang === "pt" ? "0 avaliação(ões) com nota 3 ou menor precisam de atenção." : "0 reviews with rating ≤3 need attention."}</div>
                </div>
              </_na2.CardBody>
            </_na2.Card>
          </div>

          <table className="tbl">
            <thead><tr>
              <th>{t("common_client")}</th>
              <th>{lang === "pt" ? "Nota" : "Rating"}</th>
              <th>{lang === "pt" ? "Comentário" : "Comment"}</th>
              <th>{t("common_date")}</th>
            </tr></thead>
            <tbody>{reviews.map(r => (
              <tr key={r.id}>
                <td><div className="fw-500">{r.client}</div><div className="text-faint fs-11">{r.email}</div></td>
                <td><span className="row gap-4" style={{ color: "var(--color-warning)" }}>
                  {"★".repeat(r.rating)}<span className="text-muted">{r.rating}</span></span></td>
                <td className="fs-13">{r.comment}</td>
                <td className="mono fs-12">{r.date}</td>
              </tr>
            ))}</tbody>
          </table>
        </_na2.CardBody>
      </_na2.Card>
    </div>
  );
}
window.NA.M.reviews = ModuleReviews;