// module-crm-kanban.jsx — CRM Kanban pipeline
window.NA = window.NA || {};
window.NA.M = window.NA.M || {};
const _na = window.NA;
const { useState: useStateK, useMemo: useMemoK, useCallback: useCallbackK, useEffect: useEffectK } = React;

function ModuleCrmKanban({ t, lang, user, setT }) {
  const [stages, setStages] = useStateK(() => _na.getCrmStages());
  const [deals, setDeals] = useStateK(() => _na.getCrmDeals());
  const [analyses, setAnalyses] = useStateK([]);
  const [loadingAnalyses, setLoadingAnalyses] = useStateK(true);
  const [search, setSearch] = useStateK("");
  const [ownerFilter, setOwnerFilter] = useStateK("all");
  const [dragId, setDragId] = useStateK(null);
  const [overStage, setOverStage] = useStateK(null);
  const [selected, setSelected] = useStateK(null);
  const [showNew, setShowNew] = useStateK(false);
  const [showConfig, setShowConfig] = useStateK(false);
  const [configDraft, setConfigDraft] = useStateK([]);
  const [acceptRow, setAcceptRow] = useStateK(null);
  const [pendingStageKey, setPendingStageKey] = useStateK(null);
  const [sellerForm, setSellerForm] = useStateK({ name: "", cpf: "", phone: "", email: "" });
  const [statusSaving, setStatusSaving] = useStateK(false);
  const [acqByAnalysis, setAcqByAnalysis] = useStateK({});
  const [analysisModal, setAnalysisModal] = useStateK(null);
  const [creatingAcquisitionId, setCreatingAcquisitionId] = useStateK(null);
  const [newForm, setNewForm] = useStateK({ client: "", phone: "", vehicle: "", value: "", owner: user.key, priority: "medium", notes: "" });

  const mentees = _na.mentees;
  const stageLabel = (stage) => _na.getCrmStageLabel(stage, lang);
  const finalStageKey = stages.find(s => s.isFinal)?.key || stages[stages.length - 1]?.key;
  const firstManualStageKey = stages.find(s => !s.source || s.source === "manual")?.key || stages[0]?.key;

  const loadAnalyses = useCallbackK(async () => {
    if (!_na.db?.isConfigured()) { setAnalyses([]); setLoadingAnalyses(false); return; }
    setLoadingAnalyses(true);
    try {
      await _na.db.ensureSession();
      setAnalyses(await _na.db.listAnalyses());
    } catch (e) {
      setAnalyses([]);
    } finally {
      setLoadingAnalyses(false);
    }
  }, []);

  useEffectK(() => {
    loadAnalyses();
    const onRefresh = () => loadAnalyses();
    window.addEventListener("na:analyses-changed", onRefresh);
    return () => window.removeEventListener("na:analyses-changed", onRefresh);
  }, [loadAnalyses]);

  const loadAcquisitionsMap = useCallbackK(async () => {
    if (!_na.db?.isConfigured()) { setAcqByAnalysis({}); return; }
    try {
      await _na.db.ensureSession();
      const rows = await _na.db.listAcquisitions();
      const map = {};
      rows.forEach(r => { if (r.analysis_id) map[r.analysis_id] = r.id; });
      setAcqByAnalysis(map);
    } catch (e) {
      setAcqByAnalysis({});
    }
  }, []);

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

  const persist = useCallbackK((next) => {
    setDeals(next);
    _na.saveCrmDeals(next);
  }, []);

  useEffectK(() => {
    const validKeys = new Set(stages.map(s => s.key));
    if (!firstManualStageKey || !deals.some(d => d.kind !== "analysis" && !validKeys.has(d.stage))) return;
    persist(deals.map(d => d.kind === "analysis" || validKeys.has(d.stage) ? d : { ...d, stage: firstManualStageKey }));
  }, [stages]);

  const matchSearch = (card, q) => {
    if (!q) return true;
    return [card.client, card.vehicle, card.plate, card.phone, card.notes, card.sellerName]
      .some(f => (f || "").toLowerCase().includes(q));
  };

  const cardsForStage = useCallbackK((stage) => {
    const q = search.trim().toLowerCase();
    if (_na.isAnalysisStage(stage)) {
      const status = _na.crmStageSourceStatus(stage.source);
      return analyses
        .filter(r => r.status === status)
        .map(r => _na.db.analysisRowToCrmCard(r, stage.key))
        .filter(c => matchSearch(c, q));
    }
    return deals
      .filter(d => d.kind !== "analysis" && d.stage === stage.key)
      .filter(d => {
        if (ownerFilter !== "all" && d.owner !== ownerFilter) return false;
        return matchSearch(d, q);
      });
  }, [analyses, deals, search, ownerFilter]);

  const allBoardCards = useMemoK(() => {
    const map = {};
    stages.forEach(s => { map[s.key] = cardsForStage(s); });
    return map;
  }, [stages, cardsForStage]);

  const allCardsFlat = useMemoK(() => Object.values(allBoardCards).flat(), [allBoardCards]);

  const openConfig = () => {
    setConfigDraft(stages.map(s => ({ ...s })));
    setShowConfig(true);
  };

  const saveConfig = () => {
    const cleaned = configDraft
      .map((s, i) => ({
        key: s.key,
        label: (s.label || "").trim() || (lang === "pt" ? "Nova etapa" : "New stage"),
        color: s.color || _na.crmStageColors[i % _na.crmStageColors.length],
        isFinal: !!s.isFinal,
        source: s.source || "manual",
      }))
      .filter(s => s.label);
    if (!cleaned.length) return;
    if (!cleaned.some(s => s.isFinal)) cleaned[cleaned.length - 1].isFinal = true;
    if (cleaned.filter(s => s.isFinal).length > 1) {
      cleaned.forEach((s, i) => { s.isFinal = i === cleaned.length - 1; });
    }
    const validKeys = new Set(cleaned.map(s => s.key));
    const fallback = cleaned.find(s => s.source === "manual")?.key || cleaned[0].key;
    const nextDeals = deals
      .filter(d => d.kind !== "analysis")
      .map(d => validKeys.has(d.stage) ? d : { ...d, stage: fallback });
    _na.saveCrmStages(cleaned);
    setStages(cleaned);
    persist(nextDeals);
    setShowConfig(false);
  };

  const restoreIntegratedFunnel = () => {
    setConfigDraft([
      { key: "lead_ext", label: "Lead externo", color: "var(--blue-4)", isFinal: false, source: "manual" },
      { key: "sys_analysis", label: "Análises realizadas", color: "var(--blue-6)", isFinal: false, source: "analysis_draft" },
      { key: "sys_pending", label: "Oportunidades", color: "var(--preset-orange)", isFinal: false, source: "analysis_pending" },
      { key: "sys_accepted", label: "Oportunidade aceita", color: "var(--color-success)", isFinal: false, source: "analysis_approved" },
      { key: "sys_rejected", label: "Recusado", color: "var(--color-error)", isFinal: false, source: "analysis_rejected" },
      { key: "sys_converted", label: "Convertido", color: "var(--blue-7)", isFinal: true, source: "analysis_converted" },
    ]);
  };

  const addConfigStage = () => {
    const i = configDraft.length;
    setConfigDraft(d => [...d, {
      key: _na.slugifyStageKey(lang === "pt" ? "Nova etapa" : "New stage"),
      label: lang === "pt" ? "Nova etapa" : "New stage",
      color: _na.crmStageColors[i % _na.crmStageColors.length],
      isFinal: false,
      source: "manual",
    }]);
  };

  const removeConfigStage = (key) => {
    if (configDraft.length <= 1) return;
    setConfigDraft(d => {
      const next = d.filter(s => s.key !== key);
      if (!next.some(s => s.isFinal)) next[next.length - 1].isFinal = true;
      return next;
    });
  };

  const moveConfigStage = (key, dir) => {
    setConfigDraft(d => {
      const idx = d.findIndex(s => s.key === key);
      if (idx < 0) return d;
      const target = idx + dir;
      if (target < 0 || target >= d.length) return d;
      const next = [...d];
      const tmp = next[idx];
      next[idx] = next[target];
      next[target] = tmp;
      return next;
    });
  };

  const setFinalStage = (key) => {
    setConfigDraft(d => d.map(s => ({ ...s, isFinal: s.key === key })));
  };

  const activeDeals = allCardsFlat.filter(c => c.stage !== finalStageKey);
  const pipelineValue = activeDeals.reduce((s, d) => s + (Number(d.value) || 0), 0);

  const findCard = (id) => allCardsFlat.find(c => c.id === id);

  const applyAnalysisStatus = async (analysisId, status, seller) => {
    if (!_na.db?.isConfigured()) return;
    await _na.db.updateAnalysisStatus(analysisId, status, seller);
    window.dispatchEvent(new Event("na:analyses-changed"));
    await loadAnalyses();
  };

  const confirmAccept = async () => {
    if (!acceptRow?.analysisId) return;
    if (!(sellerForm.name || "").trim()) {
      alert(lang === "pt" ? "Informe o nome do vendedor." : "Enter the seller name.");
      return;
    }
    setStatusSaving(true);
    try {
      await applyAnalysisStatus(acceptRow.analysisId, "approved", sellerForm);
      setAcceptRow(null);
      setPendingStageKey(null);
    } catch (err) {
      alert(err.message);
    } finally {
      setStatusSaving(false);
    }
  };

  const moveDeal = async (id, targetStageKey) => {
    const card = findCard(id);
    const targetStage = stages.find(s => s.key === targetStageKey);
    if (!card || !targetStage) return;

    if (card.kind === "analysis") {
      const newStatus = _na.crmStageSourceStatus(targetStage.source);
      if (!newStatus || newStatus === card.analysisStatus) return;
      if (newStatus === "approved") {
        setAcceptRow(card);
        setPendingStageKey(targetStageKey);
        setSellerForm({
          name: card.sellerName || "",
          cpf: "",
          phone: card.sellerPhone || card.phone || "",
          email: "",
        });
        return;
      }
      try {
        await applyAnalysisStatus(card.analysisId, newStatus);
      } catch (err) {
        alert(err.message);
      }
      return;
    }

    const next = deals.map(d => d.id === id
      ? { ...d, stage: targetStageKey, updatedAt: new Date().toLocaleDateString("pt-BR") }
      : d);
    persist(next);
    if (selected && selected.id === id) setSelected(prev => prev ? { ...prev, stage: targetStageKey } : prev);
  };

  const openCard = (card) => {
    if (card.kind === "analysis" && card.analysisId) {
      if (card.analysisStatus === "converted" || card.analysisStatus === "approved") {
        setAnalysisModal(card);
        return;
      }
      if (setT) {
        setT({ module: "analysis", analysisId: card.analysisId });
        return;
      }
    }
    setSelected(card);
  };

  const createAcquisitionFromCard = async (card, e) => {
    e?.stopPropagation();
    if (!card?.analysisId || !_na.db?.isConfigured()) return;
    setCreatingAcquisitionId(card.analysisId);
    try {
      const existingId = acqByAnalysis[card.analysisId];
      if (existingId) {
        setAnalysisModal(null);
        if (setT) setT({ module: "acquisitions" });
        return;
      }
      await _na.db.createAcquisitionFromAnalysis(card.analysisId, { crmDealId: card.id });
      await loadAnalyses();
      await loadAcquisitionsMap();
      setAnalysisModal(null);
      if (setT) setT({ module: "acquisitions" });
    } catch (err) {
      alert(err.message || String(err));
    } finally {
      setCreatingAcquisitionId(null);
    }
  };

  const saveNewDeal = () => {
    if (!newForm.client.trim()) return;
    const deal = {
      id: "d" + Date.now(),
      kind: "manual",
      stage: firstManualStageKey,
      client: newForm.client.trim(),
      phone: newForm.phone.trim(),
      vehicle: newForm.vehicle.trim() || "—",
      plate: "—",
      value: Number(newForm.value) || 0,
      owner: newForm.owner || user.key,
      priority: newForm.priority,
      updatedAt: new Date().toLocaleDateString("pt-BR"),
      notes: newForm.notes.trim(),
    };
    persist([deal, ...deals]);
    setShowNew(false);
    setNewForm({ client: "", phone: "", vehicle: "", value: "", owner: user.key, priority: "medium", notes: "" });
  };

  const ownerName = (key) => (mentees.find(m => m.key === key) || { name: key }).name;
  const priorityLabel = (p) => t("crm_priority_" + p);

  return (
    <div data-screen-label="CRM Kanban">
      <_na.PageHead
        icon="columns-3"
        title={t("nav_crm_kanban")}
        subtitle={lang === "pt" ? "Funil integrado — análises, oportunidades e leads externos" : "Integrated funnel — analyses, opportunities and external leads"}
        right={<div className="row gap-8">
          <_na.Button kind="default" icon="settings" onClick={openConfig}>
            {lang === "pt" ? "Configurar funil" : "Configure funnel"}
          </_na.Button>
          <_na.Button kind="primary" icon="plus" onClick={() => setShowNew(true)}>{t("crm_new_deal")}</_na.Button>
        </div>}
      />

      <div className="stat-strip" style={{ gridTemplateColumns: "repeat(3, 1fr)", marginBottom: 16 }}>
        <_na.Stat label={lang === "pt" ? "Negócios no funil" : "Deals in pipeline"} icon="git-branch"
          value={activeDeals.length} hint={t("crm_deals_total")} />
        <_na.Stat label={t("crm_pipeline_value")} icon="trending-up"
          value={pipelineValue} isMoney lang={lang} accent="primary" />
        <_na.Stat label={lang === "pt" ? "Fechados (período)" : "Closed (period)"} icon="check-circle"
          value={(allBoardCards[finalStageKey] || []).length} accent="success"
          hint={stageLabel(stages.find(s => s.key === finalStageKey) || stages[stages.length - 1])} />
      </div>

      {_na.db?.isConfigured() && (
        <div className="alert info" style={{ marginBottom: 16 }}>
          <_na.Icon name="link" />
          <div className="body fs-13">
            {lang === "pt"
              ? "Colunas do sistema sincronizam automaticamente com Análise de Oportunidade. Arraste cards para avançar o status."
              : "System columns sync automatically with Opportunity Analysis. Drag cards to advance status."}
            {loadingAnalyses ? ` ${lang === "pt" ? "Atualizando…" : "Updating…"}` : ` · ${analyses.length} ${lang === "pt" ? "análise(s)" : "analysis(es)"}`}
          </div>
        </div>
      )}

      <div className="row gap-8 mb-16" style={{ flexWrap: "wrap" }}>
        <_na.SearchBox
          placeholder={t("common_search") + "…"}
          value={search}
          onChange={setSearch}
          style={{ flex: "1 1 220px", maxWidth: 320 }}
        />
        <_na.Select
          value={ownerFilter}
          onChange={setOwnerFilter}
          style={{ width: 200 }}
          options={[
            { value: "all", label: t("common_all") + " — " + t("crm_owner") },
            ...mentees.map(m => ({ value: m.key, label: m.name })),
          ]}
        />
      </div>

      <div className="kanban-board">
        {stages.map(stage => {
          const colDeals = allBoardCards[stage.key] || [];
          const colValue = colDeals.reduce((s, d) => s + (Number(d.value) || 0), 0);
          const sourceHint = _na.isAnalysisStage(stage)
            ? (lang === "pt" ? " · Sistema" : " · System")
            : "";
          return (
            <KanbanColumn
              key={stage.key}
              stage={stage}
              label={stageLabel(stage) + sourceHint}
              deals={colDeals}
              colValue={colValue}
              lang={lang}
              dragId={dragId}
              overStage={overStage}
              ownerName={ownerName}
              priorityLabel={priorityLabel}
              acqByAnalysis={acqByAnalysis}
              creatingAcquisitionId={creatingAcquisitionId}
              onCreateAcquisition={createAcquisitionFromCard}
              onDragStart={setDragId}
              onDragEnd={() => { setDragId(null); setOverStage(null); }}
              onDragOver={() => setOverStage(stage.key)}
              onDragLeave={() => setOverStage(s => s === stage.key ? null : s)}
              onDrop={(id) => { moveDeal(id, stage.key); setDragId(null); setOverStage(null); }}
              onSelect={openCard}
            />
          );
        })}
      </div>

      <_na.Modal open={!!acceptRow} onClose={() => !statusSaving && setAcceptRow(null)}
        title={lang === "pt" ? "Aceitar oportunidade — dados do vendedor" : "Accept opportunity — seller details"}
        footer={<>
          <_na.Button kind="ghost" disabled={statusSaving} onClick={() => { setAcceptRow(null); setPendingStageKey(null); }}>{t("common_cancel")}</_na.Button>
          <_na.Button kind="primary" icon="check" disabled={statusSaving} onClick={confirmAccept}>
            {statusSaving ? (lang === "pt" ? "Salvando…" : "Saving…") : (lang === "pt" ? "Confirmar aceite" : "Confirm accept")}
          </_na.Button>
        </>}>
        {acceptRow && (
          <div className="col gap-12">
            <div className="hint">{acceptRow.plate} — {acceptRow.vehicle}</div>
            <_na.Field label={lang === "pt" ? "Nome do vendedor" : "Seller name"} required>
              <_na.Input value={sellerForm.name} onChange={v => setSellerForm(f => ({ ...f, name: v }))} />
            </_na.Field>
            <div className="field-row">
              <_na.Field label="CPF"><_na.Input mono value={sellerForm.cpf} onChange={v => setSellerForm(f => ({ ...f, cpf: v }))} /></_na.Field>
              <_na.Field label={lang === "pt" ? "Telefone" : "Phone"}><_na.Input mono value={sellerForm.phone} onChange={v => setSellerForm(f => ({ ...f, phone: v }))} /></_na.Field>
            </div>
            <_na.Field label="E-mail"><_na.Input value={sellerForm.email} onChange={v => setSellerForm(f => ({ ...f, email: v }))} /></_na.Field>
          </div>
        )}
      </_na.Modal>

      <_na.Modal open={!!selected && selected.kind !== "analysis"} onClose={() => setSelected(null)}
        title={selected ? selected.client : ""}
        width={480}
        footer={
          selected ? <>
            <_na.Button kind="ghost" onClick={() => setSelected(null)}>{t("common_cancel")}</_na.Button>
            {stages.filter(s => s.key !== selected.stage && (s.source === "manual" || !s.source)).map(s => (
              <_na.Button key={s.key} size="sm" kind="default"
                onClick={() => { moveDeal(selected.id, s.key); setSelected(null); }}>
                {stageLabel(s)}
              </_na.Button>
            ))}
          </> : null
        }>
        {selected && (
          <div className="col gap-12">
            <div className="row gap-8">
              <span className="chip" style={{ background: stages.find(s => s.key === selected.stage)?.color, color: "#fff" }}>
                {stageLabel(stages.find(s => s.key === selected.stage) || { key: selected.stage })}
              </span>
              <span className="chip">{priorityLabel(selected.priority)}</span>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div><div className="text-faint fs-11">{t("common_client")}</div><div className="fw-500">{selected.client}</div></div>
              <div><div className="text-faint fs-11">{lang === "pt" ? "Telefone" : "Phone"}</div><div className="mono">{selected.phone || "—"}</div></div>
              <div><div className="text-faint fs-11">{lang === "pt" ? "Veículo" : "Vehicle"}</div><div>{selected.vehicle}</div></div>
              <div><div className="text-faint fs-11">{t("common_plate")}</div><div className="mono">{selected.plate || "—"}</div></div>
              <div><div className="text-faint fs-11">{t("common_value")}</div><_na.Money value={selected.value} lang={lang} className="fw-600" /></div>
              <div><div className="text-faint fs-11">{t("crm_owner")}</div><div className="row gap-8"><_na.Avatar name={ownerName(selected.owner)} size="sm" />{ownerName(selected.owner)}</div></div>
            </div>
            {selected.notes && (
              <div>
                <div className="text-faint fs-11 mb-4">{t("crm_notes")}</div>
                <div className="fs-13" style={{ lineHeight: 1.5 }}>{selected.notes}</div>
              </div>
            )}
            <div className="text-faint fs-11">{t("common_date")}: {selected.updatedAt}</div>
          </div>
        )}
      </_na.Modal>

      <_na.Modal open={!!analysisModal} onClose={() => !creatingAcquisitionId && setAnalysisModal(null)}
        title={analysisModal ? analysisModal.client : ""}
        width={480}
        footer={analysisModal ? <>
          <_na.Button kind="ghost" disabled={!!creatingAcquisitionId} onClick={() => setAnalysisModal(null)}>{t("common_cancel")}</_na.Button>
          <_na.Button kind="default" icon="calculator" onClick={() => {
            setAnalysisModal(null);
            setT && setT({ module: "analysis", analysisId: analysisModal.analysisId });
          }}>{lang === "pt" ? "Abrir análise" : "Open analysis"}</_na.Button>
          {(analysisModal.analysisStatus === "converted" || analysisModal.analysisStatus === "approved") && (
            <_na.Button kind="primary" icon="archive" disabled={!!creatingAcquisitionId}
              onClick={(e) => createAcquisitionFromCard(analysisModal, e)}>
              {creatingAcquisitionId === analysisModal.analysisId
                ? (lang === "pt" ? "Criando…" : "Creating…")
                : acqByAnalysis[analysisModal.analysisId]
                  ? (lang === "pt" ? "Abrir aquisição" : "Open acquisition")
                  : (lang === "pt" ? "Criar aquisição" : "Create acquisition")}
            </_na.Button>
          )}
        </> : null}>
        {analysisModal && (
          <div className="col gap-12">
            <div className="row gap-8">
              <span className="chip">{analysisModal.plate || "—"}</span>
              <_na.Tag kind={analysisModal.analysisStatus === "converted" ? "info" : "success"}>
                {_na.t("status_" + analysisModal.analysisStatus, lang) || analysisModal.analysisStatus}
              </_na.Tag>
            </div>
            <div>{analysisModal.vehicle}</div>
            {analysisModal.sellerName && (
              <div className="fs-13">
                <span className="text-faint">{lang === "pt" ? "Vendedor:" : "Seller:"} </span>
                {analysisModal.sellerName}
                {analysisModal.sellerPhone ? ` · ${analysisModal.sellerPhone}` : ""}
              </div>
            )}
            <div className="row jcsb fs-13">
              <span className="text-faint">ROI</span>
              <span className="mono fw-600">{Number(analysisModal.roi || 0).toFixed(1)}%</span>
            </div>
            <div className="row jcsb fs-13">
              <span className="text-faint">{lang === "pt" ? "Lucro est." : "Est. profit"}</span>
              <_na.Money value={analysisModal.expectedProfit || analysisModal.value} lang={lang} className="fw-600" />
            </div>
            {analysisModal.analysisStatus === "converted" && !acqByAnalysis[analysisModal.analysisId] && (
              <div className="hint">
                {lang === "pt"
                  ? "Convertido no funil — clique em Criar aquisição para registrar o veículo no arquivo permanente."
                  : "Converted in funnel — click Create acquisition to register the vehicle."}
              </div>
            )}
          </div>
        )}
      </_na.Modal>

      <_na.Modal open={showNew} onClose={() => setShowNew(false)} title={t("crm_new_deal")}
        footer={<>
          <_na.Button kind="ghost" onClick={() => setShowNew(false)}>{t("common_cancel")}</_na.Button>
          <_na.Button kind="primary" onClick={saveNewDeal}>{t("common_save")}</_na.Button>
        </>}>
        <div className="col gap-12">
          <_na.Field label={t("common_client")} required>
            <_na.Input value={newForm.client} onChange={v => setNewForm(f => ({ ...f, client: v }))} />
          </_na.Field>
          <_na.Field label={lang === "pt" ? "Telefone" : "Phone"}>
            <_na.Input value={newForm.phone} onChange={v => setNewForm(f => ({ ...f, phone: v }))} />
          </_na.Field>
          <_na.Field label={lang === "pt" ? "Veículo de interesse" : "Vehicle of interest"}>
            <_na.Input value={newForm.vehicle} onChange={v => setNewForm(f => ({ ...f, vehicle: v }))} />
          </_na.Field>
          <_na.Field label={t("common_value")}>
            <_na.Input mono type="number" value={newForm.value} onChange={v => setNewForm(f => ({ ...f, value: v }))} />
          </_na.Field>
          <_na.Field label={t("crm_owner")}>
            <_na.Select value={newForm.owner} onChange={v => setNewForm(f => ({ ...f, owner: v }))}
              options={mentees.map(m => ({ value: m.key, label: m.name }))} />
          </_na.Field>
          <_na.Field label={lang === "pt" ? "Prioridade" : "Priority"}>
            <_na.Select value={newForm.priority} onChange={v => setNewForm(f => ({ ...f, priority: v }))}
              options={[
                { value: "high", label: t("crm_priority_high") },
                { value: "medium", label: t("crm_priority_medium") },
                { value: "low", label: t("crm_priority_low") },
              ]} />
          </_na.Field>
          <_na.Field label={t("crm_notes")}>
            <_na.Textarea value={newForm.notes} onChange={v => setNewForm(f => ({ ...f, notes: v }))} rows={3} />
          </_na.Field>
        </div>
      </_na.Modal>

      <_na.Modal open={showConfig} onClose={() => setShowConfig(false)}
        title={lang === "pt" ? "Configurar funil do CRM" : "Configure CRM funnel"}
        width={560}
        footer={<>
          <_na.Button kind="ghost" onClick={() => setShowConfig(false)}>{t("common_cancel")}</_na.Button>
          <_na.Button kind="primary" icon="check" onClick={saveConfig}>{t("common_save")}</_na.Button>
        </>}>
        <div className="hint mb-12">
          {lang === "pt"
            ? "Defina colunas, origem dos dados (sistema ou manual) e qual etapa é a final."
            : "Define columns, data source (system or manual), and the final stage."}
        </div>
        <div className="col gap-8">
          {configDraft.map((stage, i) => (
            <div key={stage.key} style={{ padding: "8px 0", borderBottom: "1px solid var(--color-border-secondary)" }}>
              <div className="row gap-8" style={{ alignItems: "center" }}>
                <div className="col gap-4">
                  <button type="button" className="icon-btn-sq" style={{ width: 24, height: 20 }} disabled={i === 0}
                    onClick={() => moveConfigStage(stage.key, -1)} title={lang === "pt" ? "Subir" : "Move up"}>
                    <_na.Icon name="chevron-up" size={12} />
                  </button>
                  <button type="button" className="icon-btn-sq" style={{ width: 24, height: 20 }} disabled={i === configDraft.length - 1}
                    onClick={() => moveConfigStage(stage.key, 1)} title={lang === "pt" ? "Descer" : "Move down"}>
                    <_na.Icon name="chevron-down" size={12} />
                  </button>
                </div>
                <_na.Input value={stage.label} onChange={v => setConfigDraft(d => d.map(s => s.key === stage.key ? { ...s, label: v } : s))}
                  style={{ flex: 1 }} placeholder={lang === "pt" ? "Nome da coluna" : "Column name"} />
                <div className="row gap-4" style={{ flexWrap: "wrap", maxWidth: 120 }}>
                  {_na.crmStageColors.map(c => (
                    <button key={c} type="button" title={c}
                      onClick={() => setConfigDraft(d => d.map(s => s.key === stage.key ? { ...s, color: c } : s))}
                      style={{
                        width: 18, height: 18, borderRadius: 4, background: c, border: stage.color === c
                          ? "2px solid var(--fg1)" : "1px solid var(--color-border-secondary)", cursor: "pointer", padding: 0,
                      }} />
                  ))}
                </div>
                <label className="row gap-4 fs-12" style={{ whiteSpace: "nowrap", cursor: "pointer" }}>
                  <input type="radio" name="crm-final-stage" checked={!!stage.isFinal} onChange={() => setFinalStage(stage.key)} />
                  {lang === "pt" ? "Final" : "Final"}
                </label>
                <button type="button" className="icon-btn-sq" style={{ color: "var(--color-error)" }}
                  disabled={configDraft.length <= 1} onClick={() => removeConfigStage(stage.key)}>
                  <_na.Icon name="trash-2" size={12} />
                </button>
              </div>
              <div style={{ marginTop: 8, paddingLeft: 32 }}>
                <_na.Select value={stage.source || "manual"} style={{ width: "100%" }}
                  onChange={v => setConfigDraft(d => d.map(s => s.key === stage.key ? { ...s, source: v } : s))}
                  options={_na.crmSourceOptions.map(o => ({
                    value: o.value,
                    label: lang === "pt" ? o.labelPt : o.labelEn,
                  }))} />
              </div>
            </div>
          ))}
        </div>
        <div className="row gap-8 mt-12">
          <_na.Button kind="default" icon="plus" onClick={addConfigStage}>
            {lang === "pt" ? "Adicionar coluna" : "Add column"}
          </_na.Button>
          <_na.Button kind="ghost" icon="rotate-ccw" onClick={restoreIntegratedFunnel}>
            {lang === "pt" ? "Restaurar funil integrado" : "Restore integrated funnel"}
          </_na.Button>
        </div>
      </_na.Modal>
    </div>
  );
}

function KanbanColumn({ stage, label, deals, colValue, lang, dragId, overStage, ownerName, priorityLabel,
  acqByAnalysis, creatingAcquisitionId, onCreateAcquisition,
  onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, onSelect }) {
  const isOver = overStage === stage.key;
  const isConvertedCol = stage.source === "analysis_converted";

  return (
    <div className="kanban-col">
      <div className="kanban-col-head">
        <span className="kanban-col-dot" style={{ background: stage.color }}></span>
        <span className="kanban-col-title">{label}</span>
        <span className="kanban-col-count">{deals.length}</span>
      </div>
      <div className="kanban-col-meta">
        <_na.Money value={colValue} lang={lang} className="mono fs-11 text-faint" />
      </div>
      <div
        className={"kanban-col-body" + (isOver ? " over" : "")}
        onDragOver={(e) => { e.preventDefault(); onDragOver(); }}
        onDragLeave={onDragLeave}
        onDrop={(e) => {
          e.preventDefault();
          const id = e.dataTransfer.getData("text/plain");
          if (id) onDrop(id);
        }}
      >
        {deals.map(deal => (
          <DealCard
            key={deal.id}
            deal={deal}
            lang={lang}
            dragging={dragId === deal.id}
            ownerName={ownerName(deal.owner)}
            priorityLabel={priorityLabel(deal.priority)}
            showCreateAcquisition={isConvertedCol && deal.kind === "analysis"}
            hasAcquisition={!!acqByAnalysis[deal.analysisId]}
            creating={creatingAcquisitionId === deal.analysisId}
            onCreateAcquisition={onCreateAcquisition}
            onDragStart={() => onDragStart(deal.id)}
            onDragEnd={onDragEnd}
            onClick={() => onSelect(deal)}
          />
        ))}
        {deals.length === 0 && (
          <div className="kanban-empty">{lang === "pt" ? "Arraste cards para cá" : "Drop cards here"}</div>
        )}
      </div>
    </div>
  );
}

function DealCard({ deal, lang, dragging, ownerName, priorityLabel, showCreateAcquisition, hasAcquisition, creating,
  onCreateAcquisition, onDragStart, onDragEnd, onClick }) {
  const isAnalysis = deal.kind === "analysis";
  return (
    <div
      className={"kanban-card" + (dragging ? " dragging" : "")}
      draggable
      onDragStart={(e) => { e.dataTransfer.setData("text/plain", deal.id); e.dataTransfer.effectAllowed = "move"; onDragStart(); }}
      onDragEnd={onDragEnd}
      onClick={onClick}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } }}
    >
      <div className="kanban-card-top">
        <span className="fw-600 fs-13">{deal.client}</span>
        <span className="row gap-4">
          {isAnalysis && <span className="chip fs-10" style={{ padding: "2px 6px", background: "var(--color-primary-bg)", color: "var(--color-primary)" }}>
            {lang === "pt" ? "Análise" : "Analysis"}
          </span>}
          {hasAcquisition && <span className="chip fs-10" style={{ padding: "2px 6px", background: "var(--color-success-bg, rgba(0,128,0,.1))", color: "var(--color-success)" }}>
            {lang === "pt" ? "Aquisição" : "Acquired"}
          </span>}
          <span className={"kanban-priority " + deal.priority} title={priorityLabel}></span>
        </span>
      </div>
      <div className="kanban-card-vehicle text-faint fs-12">{deal.vehicle}</div>
      {deal.plate && deal.plate !== "—" && <div className="mono fs-11 text-faint">{deal.plate}</div>}
      <div className="kanban-card-foot">
        <span className="row gap-4 fs-11 text-faint">
          <_na.Avatar name={ownerName} size="sm" />
          {ownerName.split(" ")[0]}
        </span>
        <_na.Money value={deal.value} lang={lang} className="mono fs-12 fw-600" />
      </div>
      {showCreateAcquisition && onCreateAcquisition && (
        <div style={{ padding: "0 10px 10px" }} onClick={e => e.stopPropagation()}>
          <button type="button" className={"btn sm " + (hasAcquisition ? "default" : "primary")} style={{ width: "100%" }}
            disabled={creating} onClick={(e) => onCreateAcquisition(deal, e)}>
            {creating
              ? (lang === "pt" ? "Criando…" : "Creating…")
              : hasAcquisition
                ? (lang === "pt" ? "Abrir aquisição" : "Open acquisition")
                : (lang === "pt" ? "Criar aquisição" : "Create acquisition")}
          </button>
        </div>
      )}
    </div>
  );
}

window.NA.M.crm_kanban = ModuleCrmKanban;