// module-maintenance.jsx — Manutenção operacional (view filtrada de Aquisições)
window.NA = window.NA || {};
window.NA.M = window.NA.M || {};
const _mt = window.NA;
const AM = () => _mt.AcquisitionMaintenance;
const { useState: useStateM, useMemo: useMemoM, useEffect: useEffectM, useCallback: useCallbackM } = React;

function MaintenanceVehicleCard({ v, items, lang, canEdit, onOpen, onToggle, onDelete, onAdd, onFlags, savingId, flagSaving }) {
  const prog = AM()?.computeMaintenanceProgress(items, AM()?.vehicleMaintenanceFlags(v)) || { pct: 0, done: 0, total: 0 };
  const flags = AM()?.vehicleMaintenanceFlags(v) || {};
  return (
    <_mt.Card>
      <_mt.CardBody>
        <div className="row" style={{ gap: 10, marginBottom: 12 }}>
          <_mt.Icon name="car" size={18} style={{ color: "var(--fg3)" }} />
          <span className="chip fw-600">{v.plate}</span>
          <span className="fw-600">{v.brand} {v.model} {v.year}</span>
          <_mt.StatusTag status={v.status} lang={lang} />
          <span className="spacer" />
          <button type="button" className="fs-12 text-primary btn ghost sm" onClick={onOpen}>
            {lang === "pt" ? "Detalhes" : "Details"} <_mt.Icon name="external-link" size={11} />
          </button>
        </div>
        <div className="text-faint fs-12 mb-8">{lang === "pt" ? "Proprietário:" : "Owner:"} <span className="text-muted">{v.sellerName || v.owner}</span></div>
        <div className="row jcsb mb-8 fs-12">
          <span className="text-muted">{prog.done}/{prog.total || 0} {lang === "pt" ? "concluídos" : "done"}</span>
          <span className="mono">{prog.pct}%</span>
        </div>
        <_mt.Progress value={prog.pct} style={{ marginBottom: 12 }} />
        <div className="row gap-4 mb-12" style={{ flexWrap: "wrap" }}>
          {flags.maintenanceReady && <span className="chip fs-10 text-success">{lang === "pt" ? "Pronto p/ venda" : "Ready"}</span>}
          {flags.trackerOursInstalled && <span className="chip fs-10">{lang === "pt" ? "Rastreador nosso" : "Our tracker"}</span>}
          {prog.pendingLabels.slice(0, 3).map(l => <span key={l} className="chip fs-10">{l}</span>)}
        </div>
        <_mt.MaintenanceFlags
          vehicle={v}
          lang={lang}
          canEdit={canEdit}
          saving={flagSaving}
          onChange={onFlags}
        />
        <div style={{ border: "1px solid var(--color-border-secondary)", borderRadius: 6, padding: 12, marginTop: 8 }}>
          <_mt.MaintenanceChecklist
            acquisitionId={v.id}
            items={items}
            lang={lang}
            canEdit={canEdit}
            savingId={savingId}
            onToggle={onToggle}
            onDelete={onDelete}
            onAdd={onAdd}
          />
        </div>
      </_mt.CardBody>
    </_mt.Card>
  );
}

function maintTableColumns(t, lang, itemsByAcq) {
  const cols = _mt.AcquisitionViews?.columns(t, lang, "maintenance") || [];
  const progressCol = {
    key: "progress",
    label: lang === "pt" ? "Progresso" : "Progress",
    render: v => {
      const items = itemsByAcq[v.id] || [];
      const prog = AM()?.computeMaintenanceProgress(items, AM()?.vehicleMaintenanceFlags(v)) || { pct: 0 };
      return <span className="mono">{prog.pct}%</span>;
    },
  };
  const readyCol = {
    key: "ready",
    label: lang === "pt" ? "Pronto" : "Ready",
    render: v => v.maintenanceReady
      ? <_mt.Tag kind="success">{lang === "pt" ? "Sim" : "Yes"}</_mt.Tag>
      : <span className="text-faint">—</span>,
  };
  return [...cols.slice(0, 4), progressCol, readyCol, ...cols.slice(4)];
}

function ModuleMaintenance({ t, lang, setT, tweaks }) {
  const [q, setQ] = useStateM("");
  const [filter, setFilter] = useStateM("all");
  const [view, setView] = useStateM("cards");
  const [drawerV, setDrawerV] = useStateM(null);
  const [itemsByAcq, setItemsByAcq] = useStateM({});
  const [savingId, setSavingId] = useStateM(null);
  const [flagSaving, setFlagSaving] = useStateM(null);
  const [saveMsg, setSaveMsg] = useStateM("");
  const canEdit = ["admin", "ops"].includes(_mt.currentUser?.key || "admin");
  const veh = _mt.vehicles || [];
  const labels = AM()?.MAINT_FILTER_LABELS?.[lang] || AM()?.MAINT_FILTER_LABELS?.pt || {};

  const reloadItems = useCallbackM(async () => {
    if (_mt.db?.refreshMaintenanceItemsMap) {
      const map = await _mt.db.refreshMaintenanceItemsMap();
      setItemsByAcq(map);
      return;
    }
    if (_mt.db?.listAllMaintenanceItems) {
      const items = await _mt.db.listAllMaintenanceItems();
      const map = {};
      items.forEach(it => {
        if (!map[it.acquisitionId]) map[it.acquisitionId] = [];
        map[it.acquisitionId].push(it);
      });
      setItemsByAcq(map);
    }
  }, []);

  useEffectM(() => {
    reloadItems();
    const onRefresh = () => reloadItems();
    window.addEventListener("na:acquisitions-changed", onRefresh);
    return () => window.removeEventListener("na:acquisitions-changed", onRefresh);
  }, [reloadItems, veh.length]);

  useEffectM(() => {
    if (!_mt.db?.isConfigured?.()) {
      const map = AM()?.loadLocalMaintenanceMap?.() || {};
      const migrated = {};
      veh.forEach(v => {
        if (map[v.id]?.length) {
          migrated[v.id] = (map[v.id] || []).map(r => AM()?.normalizeMaintenanceItem({ ...r, acquisition_id: v.id }));
          return;
        }
        const legacy = (v.maintenance || []).map((label, i) => AM()?.normalizeMaintenanceItem({
          id: "legacy_" + v.id + "_" + i,
          acquisition_id: v.id,
          label: typeof label === "string" ? label : label?.label,
          done: false,
          source: "legacy",
        })).filter(Boolean);
        if (legacy.length) migrated[v.id] = legacy;
      });
      setItemsByAcq(migrated);
    }
  }, [veh]);

  useEffectM(() => {
    if (tweaks?.maintFilter) {
      setFilter(tweaks.maintFilter);
      setT && setT({ maintFilter: null });
    }
  }, [tweaks?.maintFilter]);

  useEffectM(() => {
    const id = tweaks?.acquisitionId;
    if (!id || !veh.length) return;
    const v = veh.find(x => x.id === id);
    if (v) {
      setDrawerV(v);
      setT && setT({ acquisitionId: null });
    }
  }, [tweaks?.acquisitionId, veh]);

  const kpis = useMemoM(() => AM()?.computeMaintenanceKpis(veh, itemsByAcq) || {}, [veh, itemsByAcq]);

  const tabCounts = useMemoM(() => {
    const counts = {};
    (AM()?.MAINT_FILTER_TABS || []).forEach(tab => {
      counts[tab.key] = (_mt.AcquisitionViews?.filterRows(veh, tab.view, "", itemsByAcq) || []).length;
    });
    return counts;
  }, [veh, itemsByAcq]);

  const filtered = useMemoM(() => {
    const tab = (AM()?.MAINT_FILTER_TABS || []).find(x => x.key === filter) || { view: "maintenance" };
    return _mt.AcquisitionViews?.filterRows(veh, tab.view, q, itemsByAcq) || [];
  }, [veh, filter, q, itemsByAcq]);

  const persistToggle = async (v, item) => {
    setSavingId(item.id);
    setSaveMsg(lang === "pt" ? "Salvando…" : "Saving…");
    try {
      if (_mt.db?.toggleMaintenanceItem) await _mt.db.toggleMaintenanceItem(item.id, !item.done);
      await reloadItems();
      window.dispatchEvent(new Event("na:acquisitions-changed"));
      const items = (itemsByAcq[v.id] || []).map(i => i.id === item.id ? { ...i, done: !i.done } : i);
      const prog = AM()?.computeMaintenanceProgress(items, AM()?.vehicleMaintenanceFlags(v));
      if (prog?.allItemsDone && prog?.isReadyCandidate && v.status !== "in_stock" && canEdit) {
        const go = confirm(lang === "pt" ? "Checklist completo. Mover para Em estoque?" : "Checklist complete. Move to In stock?");
        if (go && _mt.db?.updateAcquisitionStatus) {
          await _mt.db.updateAcquisitionStatus(v.id, "in_stock", { lang });
          window.dispatchEvent(new Event("na:acquisitions-changed"));
        }
      }
      setSaveMsg(lang === "pt" ? "Salvo" : "Saved");
    } catch (err) {
      setSaveMsg(err.message || String(err));
    } finally {
      setSavingId(null);
      setTimeout(() => setSaveMsg(""), 2000);
    }
  };

  const persistDelete = async (item) => {
    setSavingId(item.id);
    try {
      if (_mt.db?.deleteMaintenanceItem) await _mt.db.deleteMaintenanceItem(item.id);
      await reloadItems();
      window.dispatchEvent(new Event("na:acquisitions-changed"));
    } catch (err) {
      alert(err.message);
    } finally {
      setSavingId(null);
    }
  };

  const persistAdd = async (v, label) => {
    setSavingId("add");
    try {
      if (_mt.db?.upsertMaintenanceItem) {
        await _mt.db.upsertMaintenanceItem({ acquisitionId: v.id, label, category: "outros", source: "manual" });
      }
      await reloadItems();
      window.dispatchEvent(new Event("na:acquisitions-changed"));
    } catch (err) {
      alert(err.message);
    } finally {
      setSavingId(null);
    }
  };

  const persistFlags = async (v, patch) => {
    const key = Object.keys(patch)[0];
    setFlagSaving(key);
    try {
      if (_mt.db?.updateMaintenanceFlags) await _mt.db.updateMaintenanceFlags(v.id, patch);
      window.dispatchEvent(new Event("na:acquisitions-changed"));
      if (patch.maintenanceReady && _mt.db?.updateAcquisitionStatus && v.status !== "in_stock") {
        const go = confirm(lang === "pt" ? "Marcar aquisição como Em estoque?" : "Set acquisition to In stock?");
        if (go) await _mt.db.updateAcquisitionStatus(v.id, "in_stock", { lang });
      }
      await reloadItems();
    } catch (err) {
      alert(err.message);
    } finally {
      setFlagSaving(null);
    }
  };

  const exportCsv = () => {
    const header = ["placa", "veiculo", "status", "progresso", "pronto", "pendentes"];
    const lines = filtered.map(v => {
      const items = itemsByAcq[v.id] || [];
      const prog = AM()?.computeMaintenanceProgress(items, AM()?.vehicleMaintenanceFlags(v)) || {};
      return [
        v.plate, `${v.brand} ${v.model}`, v.status, prog.pct + "%",
        v.maintenanceReady ? "sim" : "nao",
        (prog.pendingLabels || []).join("; "),
      ].map(x => `"${String(x ?? "").replace(/"/g, '""')}"`).join(",");
    });
    const blob = new Blob([[header.join(","), ...lines].join("\n")], { type: "text/csv;charset=utf-8" });
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = "manutencao-northauto.csv";
    a.click();
  };

  return (
    <div data-screen-label="Maintenance">
      <_mt.PageHead icon="wrench" title={lang === "pt" ? "Manutenção" : "Maintenance"}
        subtitle={lang === "pt" ? "View filtrada da aquisição: checklist operacional por veículo" : "Filtered acquisition view: operational checklist per vehicle"}
        right={<div className="row gap-8">
          <span className="chip"><_mt.Icon name="shield-check" size={12} />{canEdit
            ? (lang === "pt" ? "Edição operacional" : "Operations edit")
            : (lang === "pt" ? "Somente leitura" : "Read-only")}</span>
          <_mt.Button kind="default" icon="download" onClick={exportCsv}>{lang === "pt" ? "Exportar CSV" : "Export CSV"}</_mt.Button>
        </div>} />
      {_mt.AcquisitionSourceBanner && <_mt.AcquisitionSourceBanner lang={lang} />}
      {saveMsg && <div className="hint mb-12">{saveMsg}</div>}

      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(4, 1fr)", marginBottom: 16 }}>
        <_mt.Stat label={lang === "pt" ? "Em manutenção" : "In maintenance"} value={kpis.inMaintenance || 0} icon="wrench" accent="warning" />
        <_mt.Stat label={lang === "pt" ? "Prontos p/ venda" : "Ready to sell"} value={kpis.ready || 0} icon="check-circle" accent="success" />
        <_mt.Stat label={lang === "pt" ? "Rastreador pendente" : "Tracker pending"} value={kpis.trackerPending || 0} icon="radio" />
        <_mt.Stat label={lang === "pt" ? "Concluídos (7d)" : "Done (7d)"} value={kpis.completed7d || 0} icon="history" />
      </div>

      <_mt.Card>
        <_mt.CardBody>
          <_mt.SearchBox value={q} onChange={setQ} placeholder={lang === "pt" ? "Buscar placa, marca, modelo, proprietário…" : "Search plate, brand, model, owner…"} />
          <div className="row gap-8 mt-12" style={{ flexWrap: "wrap", alignItems: "center" }}>
            <div className="row gap-4" style={{ flexWrap: "wrap" }}>
              {(AM()?.MAINT_FILTER_TABS || []).map(tab => (
                <button key={tab.key} type="button" className={"btn sm " + (filter === tab.key ? "primary" : "default")}
                  onClick={() => setFilter(tab.key)}>
                  {labels[tab.key] || tab.key} ({tabCounts[tab.key] || 0})
                </button>
              ))}
            </div>
            <span className="spacer" />
            <_mt.Segmented value={view} onChange={setView} options={[
              { value: "cards", label: "Cards" },
              { value: "list", label: lang === "pt" ? "Lista" : "List" },
            ]} />
          </div>
          <div className="text-muted fs-12 mt-12">{filtered.length} {lang === "pt" ? "veículo(s)" : "vehicle(s)"}</div>
        </_mt.CardBody>
      </_mt.Card>

      {view === "cards" ? (
        <div className="col gap-12 mt-16">
          {filtered.map(v => (
            <MaintenanceVehicleCard
              key={v.id}
              v={v}
              items={itemsByAcq[v.id] || []}
              lang={lang}
              canEdit={canEdit}
              savingId={savingId}
              flagSaving={flagSaving}
              onOpen={() => setDrawerV(v)}
              onToggle={(item) => persistToggle(v, item)}
              onDelete={persistDelete}
              onAdd={(label) => persistAdd(v, label)}
              onFlags={(patch) => persistFlags(v, patch)}
            />
          ))}
          {filtered.length === 0 && <div className="hint" style={{ padding: 24 }}>{lang === "pt" ? "Nenhum veículo encontrado." : "No vehicles found."}</div>}
        </div>
      ) : (
        <_mt.Card className="mt-16">
          <_mt.CardBody>
            <_mt.VehicleTable
              vehicles={filtered}
              columns={maintTableColumns(t, lang, itemsByAcq)}
              lang={lang}
              t={t}
              onRowClick={setDrawerV}
              selectedId={drawerV?.id}
              empty={<_mt.Empty icon="wrench" title={lang === "pt" ? "Nenhum veículo" : "No vehicles"} />}
            />
          </_mt.CardBody>
        </_mt.Card>
      )}

      {AM()?.MaintenanceDrawer && (
        <_mt.MaintenanceDrawer
          open={!!drawerV}
          vehicle={drawerV}
          items={drawerV ? (itemsByAcq[drawerV.id] || []) : []}
          lang={lang}
          setT={setT}
          t={t}
          canEdit={canEdit}
          onClose={() => setDrawerV(null)}
          onRefresh={reloadItems}
        />
      )}
    </div>
  );
}

window.NA.M.maintenance = ModuleMaintenance;