// module-analysis.jsx — Análise de Oportunidade v2
// Loads AFTER modules-core.jsx so this Definition wins.
// Focus: 1-second-obvious verdict + mobile-first + waterfall + ROI gauge + scenarios + cost presets.
window.NA = window.NA || {};
window.NA.M = window.NA.M || {};
const _ana = window.NA;
const { useState: useStateAn, useEffect: useEffectAn, useMemo: useMemoAn, useRef: useRefAn } = React;

// ============================================================
// COST PRESETS BY VEHICLE TYPE
// ============================================================
const COST_PRESETS = {
  car: { ipva: 1200, multas: 0, cartorio: 330, mecanica: 400, funilaria: 0, eletrica: 0,
    comissao: 300, gasolina: 200, pedagio: 0, alimentacao: 0 },
  moto: { ipva: 280, multas: 0, cartorio: 280, mecanica: 250, funilaria: 0, eletrica: 0,
    comissao: 150, gasolina: 80, pedagio: 0, alimentacao: 0 },
  truck: { ipva: 3600, multas: 0, cartorio: 460, mecanica: 1500, funilaria: 0, eletrica: 0,
    comissao: 800, gasolina: 600, pedagio: 250, alimentacao: 180 },
  jet: { ipva: 0, multas: 0, cartorio: 380, mecanica: 800, funilaria: 0, eletrica: 0,
    comissao: 250, gasolina: 150, pedagio: 0, alimentacao: 0 },
  plane: { ipva: 0, multas: 0, cartorio: 1200, mecanica: 5000, funilaria: 0, eletrica: 0,
    comissao: 5000, gasolina: 2500, pedagio: 0, alimentacao: 0 },
};

const MANUAL_FIPE_ONLY = new Set(["jet", "plane"]);
const isManualFipeOnly = (type) => MANUAL_FIPE_ONLY.has(type);

// ============================================================
// MAIN MODULE
// ============================================================
function ModuleAnalysis({ t, lang, setT, tweaks }) {
  const [analysisId, setAnalysisId] = useStateAn(tweaks?.analysisId || null);
  const [vehType, setVehType] = useStateAn("car");
  const [plate, setPlate] = useStateAn("");
  const [brand, setBrand] = useStateAn("");
  const [model, setModel] = useStateAn("");
  const [year, setYear] = useStateAn("");
  const [color, setColor] = useStateAn("");
  const [chassi, setChassi] = useStateAn("");
  const [bank, setBank] = useStateAn("");
  const [valParcela, setValParcela] = useStateAn(0);
  const [parcelasTot, setParcelasTot] = useStateAn(0);
  const [parcelasPagas, setParcelasPagas] = useStateAn(0);
  const [parcelasAtraso, setParcelasAtraso] = useStateAn(0);
  const [valCliente, setValCliente] = useStateAn(0);
  const [pagoCliente, setPagoCliente] = useStateAn(0);
  const [extras, setExtras] = useStateAn(COST_PRESETS.car);
  const [extrasConfirmed, setExtrasConfirmed] = useStateAn(false);
  const [fipe, setFipe] = useStateAn(0);
  const [fipeSource, setFipeSource] = useStateAn("manual");
  const [margin, setMargin] = useStateAn(50);
  const [showScenarios, setShowScenarios] = useStateAn(false);
  const [notes, setNotes] = useStateAn("");
  const [presetPrompt, setPresetPrompt] = useStateAn(null);
  const [plateLoading, setPlateLoading] = useStateAn(false);
  const [plateError, setPlateError] = useStateAn("");
  const [saveError, setSaveError] = useStateAn("");
  const [saving, setSaving] = useStateAn(false);
  const [loadingRow, setLoadingRow] = useStateAn(false);
  const [apiPayload, setApiPayload] = useStateAn(null);
  const [fipeOptions, setFipeOptions] = useStateAn([]);
  const [fipeMode, setFipeMode] = useStateAn("plate"); // plate | manual
  const [plateLookupDone, setPlateLookupDone] = useStateAn(false);
  const [analysisStatus, setAnalysisStatus] = useStateAn("draft");
  const [linkedAcquisitionId, setLinkedAcquisitionId] = useStateAn(null);
  const [closingAcquisition, setClosingAcquisition] = useStateAn(false);

  const applyForm = (form) => {
    if (!form) return;
    setAnalysisId(form.id || null);
    setAnalysisStatus(form.status || "draft");
    setVehType(form.vehType || "car");
    setPlate(form.plate || "");
    setBrand(form.brand || "");
    setModel(form.model || "");
    setYear(form.year || "");
    setColor(form.color || "");
    setChassi(form.chassi || "");
    setBank(form.bank || "");
    setValParcela(form.valParcela || 0);
    setParcelasTot(form.parcelasTot || 0);
    setParcelasPagas(form.parcelasPagas || 0);
    setParcelasAtraso(form.parcelasAtraso || 0);
    setValCliente(form.valCliente || 0);
    setPagoCliente(form.pagoCliente || 0);
    setExtras(form.extras && Object.keys(form.extras).length ? form.extras : (COST_PRESETS[form.vehType] || COST_PRESETS.car));
    setFipe(form.fipe || 0);
    const vt = form.vehType || "car";
    const manualOnly = isManualFipeOnly(vt);
    setFipeSource(manualOnly ? "manual" : (form.fipeSource || "manual"));
    setFipeMode(manualOnly || form.fipeSource !== "api" ? "manual" : "plate");
    setPlateLookupDone(!manualOnly && form.fipeSource === "api" && !!(form.brand || form.fipe));
    setMargin(form.margin ?? 50);
    setNotes(form.notes || "");
    setApiPayload(form.apiPayload || null);
    setExtrasConfirmed(true);
  };

  useEffectAn(() => {
    const id = tweaks?.analysisId;
    if (!id || !_ana.db?.isConfigured()) return;
    setLoadingRow(true);
    _ana.db.getAnalysis(id).then(row => {
      if (row) applyForm(_ana.db.rowToForm(row));
    }).catch(err => setSaveError(err.message)).finally(() => setLoadingRow(false));
  }, [tweaks?.analysisId]);

  useEffectAn(() => {
    if (tweaks?.analysisId !== analysisId && !tweaks?.analysisId && analysisId) {
      setAnalysisId(null);
    }
  }, [tweaks?.analysisId]);

  useEffectAn(() => {
    if (!analysisId || !_ana.db?.isConfigured()) {
      setLinkedAcquisitionId(null);
      return;
    }
    if (!["approved", "converted"].includes(analysisStatus)) {
      setLinkedAcquisitionId(null);
      return;
    }
    _ana.db.getAcquisitionByAnalysisId(analysisId)
      .then(row => setLinkedAcquisitionId(row?.id || null))
      .catch(() => setLinkedAcquisitionId(null));
  }, [analysisId, analysisStatus]);

  useEffectAn(() => {
    const onRefresh = () => {
      if (!analysisId || !_ana.db?.isConfigured()) return;
      _ana.db.getAcquisitionByAnalysisId(analysisId)
        .then(row => setLinkedAcquisitionId(row?.id || null))
        .catch(() => {});
    };
    window.addEventListener("na:acquisitions-changed", onRefresh);
    return () => window.removeEventListener("na:acquisitions-changed", onRefresh);
  }, [analysisId]);

  // When vehicle type changes, prompt to apply preset
  useEffectAn(() => {
    if (!extrasConfirmed) {
      setExtras(COST_PRESETS[vehType] || COST_PRESETS.car);
    } else {
      setPresetPrompt(vehType);
    }
  }, [vehType]);

  useEffectAn(() => {
    if (!isManualFipeOnly(vehType)) return;
    setFipeMode("manual");
    setFipeSource("manual");
    setPlateLookupDone(false);
    setPlateError("");
    setFipeOptions([]);
    setApiPayload(null);
  }, [vehType]);

  const updateExtra = (k, v) => { setExtras(e => ({ ...e, [k]: Number(v) || 0 })); setExtrasConfirmed(true); };
  const confirmPreset = () => { setExtras(COST_PRESETS[presetPrompt]); setPresetPrompt(null); setExtrasConfirmed(false); };
  const declinePreset = () => setPresetPrompt(null);

  // ---- CORE MATH ----
  const metrics = _ana.computeAnalysisMetrics({
    extras, parcelasTot, parcelasPagas, valParcela, parcelasAtraso,
    fipe, margin, valCliente, pagoCliente,
  });
  const { sumExtras, totalQuit, atrasoPenalty, venda, investimento: inv, lucro, roi } = metrics;
  const parcelsRem = Math.max(0, Number(parcelasTot) - Number(parcelasPagas));

  // Verdict tier
  const verdict = lucro >= 10000 && roi >= 20 ? "excellent"
                : lucro >= 5000 && roi >= 10  ? "good"
                : lucro >  0                  ? "tight"
                : lucro >= -2000              ? "marginal"
                : "loss";
  const verdictMeta = {
    excellent: { kind: "success", color: "var(--color-success)", icon: "check-circle-2",
      label: lang === "pt" ? "EXCELENTE NEGÓCIO" : "EXCELLENT DEAL",
      sub: lang === "pt" ? "Margem confortável, comprar com segurança." : "Strong margin, safe to buy." },
    good: { kind: "success", color: "var(--color-success)", icon: "thumbs-up",
      label: lang === "pt" ? "BOA OPORTUNIDADE" : "GOOD OPPORTUNITY",
      sub: lang === "pt" ? "Lucro saudável, vale fechar." : "Healthy profit, worth closing." },
    tight: { kind: "warning", color: "var(--color-warning)", icon: "alert-triangle",
      label: lang === "pt" ? "MARGEM APERTADA" : "TIGHT MARGIN",
      sub: lang === "pt" ? "Negocie melhor o preço antes de fechar." : "Negotiate the price down before closing." },
    marginal: { kind: "warning", color: "var(--gold-7)", icon: "circle-slash",
      label: lang === "pt" ? "QUASE NO ZERO" : "BREAKING EVEN",
      sub: lang === "pt" ? "Risco alto de prejuízo. Reavaliar." : "High loss risk. Reconsider." },
    loss: { kind: "error", color: "var(--color-error)", icon: "x-circle",
      label: lang === "pt" ? "NÃO COMPRAR" : "DO NOT BUY",
      sub: lang === "pt" ? "Operação resultaria em prejuízo." : "Deal would result in loss." }
  }[verdict];

  // Gauge: ROI % normalized to 0-100 (cap at 50% for full bar)
  const roiPct = Math.max(0, Math.min(100, (roi / 50) * 100));

  const buildForm = (status) => ({
    id: analysisId || undefined,
    vehType, plate, brand, model, year, color, chassi, bank,
    valParcela, parcelasTot, parcelasPagas, parcelasAtraso,
    valCliente, pagoCliente, extras, fipe, fipeSource, margin, notes, status, apiPayload,
  });

  const persistAnalysis = async (status, redirect) => {
    if (!fipe) return;
    setSaveError("");
    setSaving(true);
    try {
      const saved = await _ana.saveAnalysis(buildForm(status));
      setAnalysisId(saved.id);
      setAnalysisStatus(status);
      window.dispatchEvent(new Event("na:analyses-changed"));
      alert(t("common_analysis_saved"));
      if (redirect && setT) setT({ module: "opportunities", analysisId: null });
    } catch (err) {
      setSaveError(err.message || String(err));
    } finally {
      setSaving(false);
    }
  };

  const lookupByPlate = async () => {
    const normalized = (plate || "").replace(/[^a-zA-Z0-9]/g, "").toUpperCase();
    if (normalized.length < 7) {
      setPlateError(lang === "pt" ? "Informe uma placa válida (7 caracteres)." : "Enter a valid plate (7 chars).");
      return;
    }
    setPlateError("");
    setPlateLoading(true);
    try {
      const data = await _ana.lookupPlate(normalized);
      setPlate(data.plate || normalized);
      if (data.brand) setBrand(data.brand);
      if (data.model) setModel(data.model);
      if (data.year || data.yearModel) setYear(String(data.year || data.yearModel));
      if (data.color) setColor(data.color);
      if (data.chassi) setChassi(data.chassi);
      if (data.fipe) { setFipe(Number(data.fipe)); setFipeSource("api"); }
      setFipeMode("plate");
      setPlateLookupDone(true);
      setFipeOptions(Array.isArray(data.fipeOptions) ? data.fipeOptions : []);
      setApiPayload(data.raw || data);
      const vt = String(data.vehicleType || "").toLowerCase();
      if (vt === "moto" || vt.includes("moto")) setVehType("moto");
      else if (vt === "truck" || vt.includes("camin")) setVehType("truck");
      else if (vt === "car" || vt.includes("car")) setVehType("car");
    } catch (err) {
      setPlateError(err.message || (lang === "pt" ? "Falha na consulta." : "Lookup failed."));
    } finally {
      setPlateLoading(false);
    }
  };

  const shareWhatsApp = () => {
    const msg = [
      lang === "pt" ? "Análise NorthAuto OS" : "NorthAuto OS analysis",
      plate ? `Placa: ${plate}` : "",
      brand || model ? `${brand} ${model}`.trim() : "",
      `${lang === "pt" ? "Lucro" : "Profit"}: ${_ana.fmtMoney(lucro, lang)}`,
      `ROI: ${roi.toFixed(1)}%`,
      `${lang === "pt" ? "Veredicto" : "Verdict"}: ${verdictMeta.label}`,
    ].filter(Boolean).join("\n");
    window.open("https://wa.me/?text=" + encodeURIComponent(msg), "_blank");
  };

  const recalculateExtras = () => {
    setExtras(COST_PRESETS[vehType] || COST_PRESETS.car);
    setExtrasConfirmed(false);
    setPresetPrompt(null);
  };

  const resetPlateLookup = () => {
    setPlateLookupDone(false);
    setBrand("");
    setModel("");
    setYear("");
    setColor("");
    setChassi("");
    setFipe(0);
    setFipeSource("manual");
    setFipeOptions([]);
    setApiPayload(null);
  };

  const selectFipeMode = (mode) => {
    if (mode === "plate" && isManualFipeOnly(vehType)) return;
    setFipeMode(mode);
    setPlateError("");
    if (mode === "plate") {
      resetPlateLookup();
    } else {
      setFipeSource("manual");
      setTimeout(() => document.getElementById("na-fipe-input")?.focus(), 0);
    }
  };

  const focusFipeManual = () => selectFipeMode("manual");

  // Scenarios
  const scenarios = {
    optimistic: { sellFactor: 1 - (margin - 10) / 100, costFactor: 0.85 },
    expected:   { sellFactor: 1 - margin / 100, costFactor: 1 },
    pessimistic:{ sellFactor: 1 - (margin + 10) / 100, costFactor: 1.15 },
  };
  const scenarioResult = (s) => {
    const sell = Number(fipe) * s.sellFactor;
    const cost = Math.max(0,
      Number(valCliente) + sumExtras * s.costFactor + totalQuit + atrasoPenalty - Number(pagoCliente)
    );
    return { sell, cost, profit: sell - cost, roi: cost > 0 ? ((sell - cost) / cost) * 100 : 0 };
  };

  const closeAcquisition = async () => {
    if (!analysisId) return;
    setClosingAcquisition(true);
    setSaveError("");
    try {
      await _ana.db.createAcquisitionFromAnalysis(analysisId);
      setAnalysisStatus("converted");
      const linked = await _ana.db.getAcquisitionByAnalysisId(analysisId);
      setLinkedAcquisitionId(linked?.id || null);
      if (setT) setT({ module: "acquisitions" });
    } catch (err) {
      setSaveError(err.message || String(err));
    } finally {
      setClosingAcquisition(false);
    }
  };

  if (!_ana.db?.isConfigured()) {
    return (
      <div className="empty" style={{ padding: 48 }}>
        <h3>{lang === "pt" ? "Supabase não configurado" : "Supabase not configured"}</h3>
        <p>{lang === "pt" ? "Copie config.example.js para config.js com suas credenciais." : "Copy config.example.js to config.js."}</p>
      </div>
    );
  }

  if (loadingRow) {
    return <div className="empty" style={{ padding: 48 }}><p>{lang === "pt" ? "Carregando análise…" : "Loading analysis…"}</p></div>;
  }

  return (
    <div data-screen-label="Analysis">
      <_ana.PageHead icon="calculator" title={lang === "pt" ? "Análise de oportunidade" : "Opportunity analysis"}
        subtitle={lang === "pt" ? "Calcule lucro, ROI e veredicto em tempo real" : "Compute profit, ROI and verdict in real time"}
        right={<div className="row gap-8">
          <_ana.Segmented value={showScenarios ? "scenarios" : "single"} onChange={(v) => setShowScenarios(v === "scenarios")}
            options={[
              { value: "single", label: lang === "pt" ? "Único" : "Single" },
              { value: "scenarios", label: lang === "pt" ? "+ Cenários" : "+ Scenarios" }
            ]} />
        </div>} />

      {saveError && (
        <div className="alert error" style={{ marginBottom: 16 }}>
          <_ana.Icon name="alert-circle" /><div className="body">{saveError}</div>
        </div>
      )}

      {analysisStatus === "approved" && !linkedAcquisitionId && (
        <div className="alert success" style={{ marginBottom: 16 }}>
          <_ana.Icon name="check-circle" />
          <div className="body">
            <strong>{lang === "pt" ? "Oportunidade aceita" : "Opportunity accepted"}</strong>
            <div className="fs-13" style={{ marginTop: 4 }}>
              {lang === "pt"
                ? "Placa, FIPE, parcelas e dados do vendedor serão herdados na aquisição."
                : "Plate, FIPE, installments and seller data will carry over to the acquisition."}
            </div>
            <_ana.Button kind="primary" icon="archive" style={{ marginTop: 10 }}
              disabled={closingAcquisition} onClick={closeAcquisition}>
              {closingAcquisition
                ? (lang === "pt" ? "Criando aquisição…" : "Creating acquisition…")
                : (lang === "pt" ? "Fechar aquisição" : "Close acquisition")}
            </_ana.Button>
          </div>
        </div>
      )}

      {analysisStatus === "converted" && !linkedAcquisitionId && (
        <div className="alert warning" style={{ marginBottom: 16 }}>
          <_ana.Icon name="archive" />
          <div className="body">
            <strong>{lang === "pt" ? "Convertido — aquisição pendente" : "Converted — acquisition pending"}</strong>
            <div className="fs-13" style={{ marginTop: 4 }}>
              {lang === "pt" ? "Registre a aquisição para concluir o funil." : "Register the acquisition to complete the funnel."}
            </div>
            <_ana.Button kind="primary" icon="archive" style={{ marginTop: 10 }}
              disabled={closingAcquisition} onClick={closeAcquisition}>
              {closingAcquisition
                ? (lang === "pt" ? "Criando aquisição…" : "Creating acquisition…")
                : (lang === "pt" ? "Criar aquisição" : "Create acquisition")}
            </_ana.Button>
          </div>
        </div>
      )}

      {linkedAcquisitionId && (
        <div className="alert info" style={{ marginBottom: 16 }}>
          <_ana.Icon name="link" />
          <div className="body row gap-8" style={{ alignItems: "center", flexWrap: "wrap" }}>
            <span>{lang === "pt" ? "Aquisição vinculada a esta análise." : "Acquisition linked to this analysis."}</span>
            <_ana.Button kind="default" size="sm" icon="external-link"
              onClick={() => setT && setT({ module: "acquisitions" })}>
              {lang === "pt" ? "Abrir aquisições" : "Open acquisitions"}
            </_ana.Button>
          </div>
        </div>
      )}

      {analysisId && analysisStatus !== "approved" && analysisStatus !== "converted" && (
        <div className="alert info" style={{ marginBottom: 16 }}>
          <_ana.Icon name="edit-3" />
          <div className="body">{lang === "pt" ? "Editando análise salva" : "Editing saved analysis"} — <span className="mono">{analysisId.slice(0, 8)}…</span></div>
        </div>
      )}

      <div className="analysis-grid" style={{ display: "grid", gridTemplateColumns: "1fr 420px", gap: 16 }}>
        {/* LEFT: form */}
        <div className="col gap-16">
          <_ana.Card>
            <_ana.CardHead title={lang === "pt" ? "1. Veículo" : "1. Vehicle"} icon="car" />
            <_ana.CardBody>
              <div style={{ display: "flex", gap: 6, marginBottom: 16, flexWrap: "wrap" }}>
                {[
                  { key: "car", icon: "car", label: lang === "pt" ? "Carros" : "Cars" },
                  { key: "moto", icon: "bike", label: lang === "pt" ? "Motos" : "Motos" },
                  { key: "truck", icon: "truck", label: lang === "pt" ? "Caminhões" : "Trucks" },
                  { key: "jet", icon: "anchor", label: "Jet-Ski" },
                  { key: "plane", icon: "plane", label: lang === "pt" ? "Aviões" : "Planes" },
                ].map(o => (
                  <button key={o.key} onClick={() => setVehType(o.key)}
                    className={"btn " + (vehType === o.key ? "primary" : "default")}>
                    <_ana.Icon name={o.icon} size={14} />{o.label}
                  </button>
                ))}
              </div>
              {isManualFipeOnly(vehType) ? (
                <div className="hint" style={{ marginTop: 8 }}>
                  {lang === "pt"
                    ? "Este tipo não possui FIPE oficial — informe o valor de referência manualmente."
                    : "This type has no official FIPE — enter the reference value manually."}
                </div>
              ) : (
                <div className="field-row" style={{ gridTemplateColumns: "1fr 1fr" }}>
                  <button type="button"
                    className={"btn lg " + (fipeMode === "plate" ? "primary" : "default")}
                    style={{ height: 42, justifyContent: "center" }}
                    onClick={() => selectFipeMode("plate")}>
                    <_ana.Icon name="zap" size={14} />
                    {lang === "pt" ? "FIPE Oficial" : "Official FIPE"}
                  </button>
                  <button type="button"
                    className={"btn lg " + (fipeMode === "manual" ? "primary" : "default")}
                    style={{ height: 42, justifyContent: "center" }}
                    onClick={() => selectFipeMode("manual")}>
                    <_ana.Icon name="table-2" size={14} />{lang === "pt" ? "FIPE manual" : "Manual FIPE"}
                  </button>
                </div>
              )}
              {fipeMode === "plate" && !isManualFipeOnly(vehType) && (
                <>
                  <_ana.Field label={t("common_plate")} style={{ marginTop: 12 }}>
                    <_ana.Input mono placeholder="ABC1D23" value={plate}
                      onChange={v => { setPlate(v); setPlateError(""); if (plateLookupDone) resetPlateLookup(); }} />
                  </_ana.Field>
                  <_ana.Field label={lang === "pt" ? "Margem desejada (%)" : "Desired margin (%)"} style={{ marginTop: 12 }}>
                    <div className="row gap-12">
                      <input type="range" min="0" max="70" value={margin} onChange={e => setMargin(Number(e.target.value))}
                        style={{ flex: 1, accentColor: "var(--color-primary)" }} />
                      <_ana.Input mono type="number" value={margin} onChange={v => setMargin(Number(v) || 0)} style={{ width: 80 }} />
                    </div>
                    {plateLookupDone && fipe > 0 && (
                      <div className="hint">{lang === "pt" ? `Venderá por ${fmt(venda)} (FIPE − ${margin}%)` : `Will sell at ${fmt(venda)} (FIPE − ${margin}%)`}</div>
                    )}
                  </_ana.Field>
                  <div style={{ marginTop: 10 }}>
                    <_ana.Button kind="primary" icon={plateLoading ? "loader" : "search"} style={{ width: "100%", justifyContent: "center" }}
                      disabled={plateLoading || !plate} onClick={lookupByPlate}>
                      {plateLoading
                        ? (lang === "pt" ? "Consultando placa…" : "Looking up plate…")
                        : (lang === "pt" ? "Consultar placa" : "Lookup plate")}
                    </_ana.Button>
                  </div>
                  {plateError && <div className="hint text-error" style={{ marginTop: 8 }}>{plateError}</div>}
                  {plateLookupDone && (
                    <>
                      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginTop: 16 }}>
                        <_ana.Field label={lang === "pt" ? "Marca" : "Brand"}>
                          <_ana.Input value={brand} readOnly />
                        </_ana.Field>
                        <_ana.Field label={lang === "pt" ? "Modelo" : "Model"}>
                          <_ana.Input value={model} readOnly />
                        </_ana.Field>
                        <_ana.Field label={lang === "pt" ? "Ano" : "Year"}>
                          <_ana.Input mono value={year} readOnly />
                        </_ana.Field>
                      </div>
                      <_ana.Field label={"FIPE (R$) · API"} required style={{ marginTop: 12 }}>
                        <_ana.Input mono type="number" value={fipe} readOnly placeholder="0,00" />
                      </_ana.Field>
                      {fipeOptions.length > 1 && (
                        <div className="alert info" style={{ marginTop: 8 }}>
                          <_ana.Icon name="info" />
                          <div className="body">
                            <div className="fs-12 fw-600" style={{ marginBottom: 6 }}>{lang === "pt" ? "Variações FIPE encontradas" : "FIPE variants found"}</div>
                            <div className="col gap-4">
                              {fipeOptions.map((opt, i) => (
                                <button key={i} type="button" className="btn default" style={{ justifyContent: "space-between", fontSize: 12 }}
                                  onClick={() => { setBrand(opt.marca); setModel(opt.modelo); setFipe(opt.valor); setFipeSource("api"); }}>
                                  <span>{opt.marca} {opt.modelo}</span>
                                  <span className="mono">{_ana.fmtMoney(opt.valor, lang)}</span>
                                </button>
                              ))}
                            </div>
                          </div>
                        </div>
                      )}
                    </>
                  )}
                </>
              )}
              {(fipeMode === "manual" || isManualFipeOnly(vehType)) && (
                <>
                  {!isManualFipeOnly(vehType) && (
                    <div className="hint" style={{ marginTop: 8 }}>
                      {lang === "pt" ? "Digite os dados do veículo e o valor FIPE manualmente." : "Enter vehicle data and FIPE value manually."}
                    </div>
                  )}
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginTop: 12 }}>
                    <_ana.Field label={lang === "pt" ? "Marca" : "Brand"}>
                      <_ana.Input value={brand} onChange={setBrand} />
                    </_ana.Field>
                    <_ana.Field label={lang === "pt" ? "Modelo" : "Model"}>
                      <_ana.Input value={model} onChange={setModel} />
                    </_ana.Field>
                    <_ana.Field label={lang === "pt" ? "Ano" : "Year"}>
                      <_ana.Input mono value={year} onChange={setYear} />
                    </_ana.Field>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 12 }}>
                    <_ana.Field label={t("common_plate")}>
                      <_ana.Input mono placeholder="ABC1D23" value={plate} onChange={v => { setPlate(v); setPlateError(""); }} />
                    </_ana.Field>
                    <_ana.Field label="FIPE (R$)" required>
                      <_ana.Input id="na-fipe-input" mono type="number" value={fipe}
                        onChange={v => { setFipe(Number(v) || 0); setFipeSource("manual"); }}
                        placeholder="0,00" />
                    </_ana.Field>
                  </div>
                  <_ana.Field label={lang === "pt" ? "Margem desejada (%)" : "Desired margin (%)"} style={{ marginTop: 12 }}>
                    <div className="row gap-12">
                      <input type="range" min="0" max="70" value={margin} onChange={e => setMargin(Number(e.target.value))}
                        style={{ flex: 1, accentColor: "var(--color-primary)" }} />
                      <_ana.Input mono type="number" value={margin} onChange={v => setMargin(Number(v) || 0)} style={{ width: 80 }} />
                    </div>
                    <div className="hint">{lang === "pt" ? `Venderá por ${fmt(venda)} (FIPE − ${margin}%)` : `Will sell at ${fmt(venda)} (FIPE − ${margin}%)`}</div>
                  </_ana.Field>
                </>
              )}
            </_ana.CardBody>
          </_ana.Card>

          <_ana.Card>
            <_ana.CardHead title={lang === "pt" ? "2. Financiamento / quitação" : "2. Financing / payoff"} icon="credit-card" />
            <_ana.CardBody>
              <div className="field-row">
                <_ana.Field label={t("common_bank")} required>
                  <_ana.Select value={bank} onChange={setBank} placeholder={lang === "pt" ? "Selecione" : "Select"}
                    options={["BV", "Santander", "Bradesco", "Itaú", "Digimais", "PAM", "Aymoré"]} />
                </_ana.Field>
                <_ana.Field label={lang === "pt" ? "Valor da parcela (R$)" : "Installment"}>
                  <_ana.Input mono value={valParcela} onChange={v => setValParcela(Number(v) || 0)} type="number" />
                </_ana.Field>
              </div>
              <div className="field-row cols-3" style={{ marginTop: 12 }}>
                <_ana.Field label={lang === "pt" ? "Total parcelas" : "Total"}>
                  <_ana.Input mono value={parcelasTot} onChange={v => setParcelasTot(Number(v) || 0)} type="number" />
                </_ana.Field>
                <_ana.Field label={lang === "pt" ? "Parcelas pagas" : "Paid"}>
                  <_ana.Input mono value={parcelasPagas} onChange={v => setParcelasPagas(Number(v) || 0)} type="number" />
                </_ana.Field>
                <_ana.Field label={lang === "pt" ? "Em atraso" : "Overdue"}>
                  <_ana.Input mono value={parcelasAtraso} onChange={v => setParcelasAtraso(Number(v) || 0)} type="number" />
                </_ana.Field>
              </div>
              <div className="row jcsb mt-16" style={{ padding: "8px 12px", background: "var(--color-fill-quaternary)", borderRadius: 6 }}>
                <span className="text-muted fs-13">{lang === "pt" ? "Quitação restante" : "Remaining payoff"} ({parcelsRem}x)</span>
                <_ana.Money value={totalQuit} lang={lang} className="fw-600" />
              </div>
            </_ana.CardBody>
          </_ana.Card>

          <_ana.Card>
            <_ana.CardHead title={lang === "pt" ? "3. Valor ao cliente" : "3. Client payment"} icon="user" />
            <_ana.CardBody>
              <div className="field-row">
                <_ana.Field label={lang === "pt" ? "Valor combinado (R$)" : "Agreed value"}>
                  <_ana.Input mono type="number" value={valCliente} onChange={v => setValCliente(Number(v) || 0)} />
                </_ana.Field>
                <_ana.Field label={lang === "pt" ? "Valor real pago (R$)" : "Actually paid"}>
                  <_ana.Input mono type="number" value={pagoCliente} onChange={v => setPagoCliente(Number(v) || 0)} />
                </_ana.Field>
              </div>
            </_ana.CardBody>
          </_ana.Card>

          <_ana.Card>
            <_ana.CardHead title={lang === "pt" ? "4. Custos extras" : "4. Extra costs"} icon="receipt-text"
              right={<>
                {extrasConfirmed && <_ana.Tag kind="success" icon="check">{lang === "pt" ? "Confirmado" : "Confirmed"}</_ana.Tag>}
                <span className="text-faint fs-11">{lang === "pt" ? "Total" : "Total"}: <_ana.Money value={sumExtras} lang={lang} className="fw-600" /></span>
              </>} />
            <_ana.CardBody>
              {presetPrompt && (
                <div className="alert info" style={{ marginBottom: 12 }}>
                  <_ana.Icon name="info" />
                  <div className="body" style={{ display: "flex", gap: 12, alignItems: "center" }}>
                    <span style={{ flex: 1 }}>
                      {lang === "pt"
                        ? <>Aplicar custos típicos para <strong>{labelForType(presetPrompt, lang)}</strong>? Você poderá editar depois.</>
                        : <>Apply typical costs for <strong>{labelForType(presetPrompt, lang)}</strong>? You can edit after.</>}
                    </span>
                    <_ana.Button kind="ghost" size="sm" onClick={declinePreset}>{lang === "pt" ? "Manter atual" : "Keep current"}</_ana.Button>
                    <_ana.Button kind="primary" size="sm" icon="check" onClick={confirmPreset}>{lang === "pt" ? "Aplicar preset" : "Apply preset"}</_ana.Button>
                  </div>
                </div>
              )}
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", gap: 8 }}>
                {[
                  ["ipva", "IPVA"], ["multas", lang === "pt" ? "Multas" : "Fines"], ["cartorio", lang === "pt" ? "Cartório" : "Notary"],
                  ["mecanica", lang === "pt" ? "Mecânica" : "Mechanic"], ["funilaria", lang === "pt" ? "Funilaria" : "Bodywork"], ["eletrica", lang === "pt" ? "Elétrica" : "Electrical"],
                  ["comissao", lang === "pt" ? "Comissão" : "Commission"], ["gasolina", lang === "pt" ? "Gasolina" : "Fuel"], ["pedagio", lang === "pt" ? "Pedágio" : "Toll"],
                  ["alimentacao", lang === "pt" ? "Alimentação" : "Meals"],
                ].map(([k, label]) => (
                  <_ana.Field key={k} label={label}>
                    <_ana.Input mono type="number" value={extras[k]} onChange={v => updateExtra(k, v)} />
                  </_ana.Field>
                ))}
              </div>
              <_ana.Field label={lang === "pt" ? "Anotações" : "Notes"} style={{ marginTop: 16 }}>
                <_ana.Textarea value={notes} onChange={setNotes} placeholder={lang === "pt" ? "Observações sobre a negociação…" : "Notes…"} />
              </_ana.Field>
            </_ana.CardBody>
          </_ana.Card>
        </div>

        {/* RIGHT: verdict + waterfall + ROI gauge */}
        <div className="col gap-16 verdict-panel" style={{ position: "sticky", top: 0, alignSelf: "start" }}>
          <VerdictHero verdict={verdict} meta={verdictMeta} lucro={lucro} roi={roi} roiPct={roiPct} lang={lang} />
          <ROIGauge roi={roi} lang={lang} />
          <Waterfall fipe={fipe} margin={margin} venda={venda} valCliente={Number(valCliente)} sumExtras={sumExtras} totalQuit={totalQuit} lucro={lucro} lang={lang} />

          {showScenarios && (
            <_ana.Card>
              <_ana.CardHead title={lang === "pt" ? "Cenários" : "Scenarios"} icon="layers" />
              <_ana.CardBody>
                <div className="col gap-12">
                  <ScenarioRow label={lang === "pt" ? "Otimista" : "Optimistic"} sub={lang === "pt" ? "+10pp margem, −15% custos" : "+10pp margin, −15% costs"} color="var(--color-success)" result={scenarioResult(scenarios.optimistic)} lang={lang} />
                  <ScenarioRow label={lang === "pt" ? "Esperado" : "Expected"} sub={lang === "pt" ? "Cenário base" : "Base case"} color="var(--color-primary)" result={scenarioResult(scenarios.expected)} lang={lang} highlight />
                  <ScenarioRow label={lang === "pt" ? "Pessimista" : "Pessimistic"} sub={lang === "pt" ? "−10pp margem, +15% custos" : "−10pp margin, +15% costs"} color="var(--color-warning)" result={scenarioResult(scenarios.pessimistic)} lang={lang} />
                </div>
              </_ana.CardBody>
            </_ana.Card>
          )}

          <div className="col gap-8">
            <_ana.Button kind="primary" icon="check-circle-2" style={{ height: 42, justifyContent: "center" }} disabled={!fipe || saving}
              onClick={() => persistAnalysis("pending", true)}>
              {saving ? (lang === "pt" ? "Salvando…" : "Saving…") : (lang === "pt" ? "Salvar e fechar" : "Save and close")}
            </_ana.Button>
            <div className="row gap-8">
              <_ana.Button kind="default" icon="bookmark" style={{ flex: 1, justifyContent: "center" }} disabled={!fipe || saving}
                onClick={() => persistAnalysis("pending", false)}>{lang === "pt" ? "Salvar pendente" : "Save pending"}</_ana.Button>
              <_ana.Button kind="default" icon="file-text" style={{ flex: 1, justifyContent: "center" }} disabled={!fipe || saving}
                onClick={() => persistAnalysis("draft", false)}>{lang === "pt" ? "Rascunho" : "Draft"}</_ana.Button>
            </div>
            <div className="row gap-8">
              <_ana.Button kind="default" icon="message-circle" style={{ flex: 1, justifyContent: "center" }} onClick={shareWhatsApp}>{lang === "pt" ? "WhatsApp" : "WhatsApp"}</_ana.Button>
              <_ana.Button kind="ghost" icon="rotate-ccw" style={{ flex: 1, justifyContent: "center" }} onClick={recalculateExtras}>{lang === "pt" ? "Recalcular" : "Recalculate"}</_ana.Button>
            </div>
            {!fipe && <div className="hint text-center" style={{ textAlign: "center" }}>
              {lang === "pt" ? "Preencha FIPE e parcelas para salvar." : "Fill FIPE and installments to save."}
            </div>}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1100px) {
          .analysis-grid { grid-template-columns: 1fr !important; }
          .verdict-panel { position: relative !important; }
        }
      `}</style>
    </div>
  );

  function fmt(v) { return _ana.fmtMoney(v, lang); }
}

function labelForType(k, lang) {
  return ({
    car: lang === "pt" ? "carros" : "cars",
    moto: lang === "pt" ? "motos" : "motos",
    truck: lang === "pt" ? "caminhões" : "trucks",
    jet: "jet-skis",
    plane: lang === "pt" ? "aviões" : "planes",
  })[k] || k;
}

// ============================================================
// VERDICT HERO — option 4 style (progress bar with circle + big label)
// ============================================================
function VerdictHero({ verdict, meta, lucro, roi, roiPct, lang }) {
  // Color tier on the bar: 0-30 red, 30-60 amber, 60-100 green
  const stops = [
    { from: 0, to: 30, color: "var(--color-error)" },
    { from: 30, to: 60, color: "var(--color-warning)" },
    { from: 60, to: 100, color: "var(--color-success)" }
  ];
  return (
    <div className="card" style={{
      padding: 20,
      background: verdict === "excellent" || verdict === "good" ? "linear-gradient(180deg, var(--color-success-bg) 0%, var(--color-bg-container) 60%)"
        : verdict === "loss" ? "linear-gradient(180deg, var(--color-error-bg) 0%, var(--color-bg-container) 60%)"
        : "linear-gradient(180deg, var(--color-warning-bg) 0%, var(--color-bg-container) 60%)",
      borderColor: meta.color
    }}>
      <div className="row gap-12 mb-8">
        <div style={{
          width: 44, height: 44, borderRadius: 10, background: meta.color, color: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0
        }}>
          <_ana.Icon name={meta.icon} size={22} />
        </div>
        <div style={{ flex: 1 }}>
          <div className="fs-15 fw-600" style={{ letterSpacing: "0.04em", color: meta.color }}>{meta.label}</div>
          <div className="text-muted fs-12" style={{ lineHeight: 1.3 }}>{meta.sub}</div>
        </div>
      </div>

      {/* Big number */}
      <div className="row jcsb" style={{ alignItems: "flex-end", marginTop: 12 }}>
        <div>
          <div className="text-faint fs-11" style={{ textTransform: "uppercase", letterSpacing: "0.06em" }}>{lang === "pt" ? "Lucro estimado" : "Estimated profit"}</div>
          <_ana.Money value={lucro} lang={lang} style={{ fontSize: 30, fontWeight: 600, color: lucro >= 0 ? meta.color : "var(--color-error)" }} />
        </div>
        <div style={{ textAlign: "right" }}>
          <div className="text-faint fs-11" style={{ textTransform: "uppercase", letterSpacing: "0.06em" }}>ROI</div>
          <div className="mono fs-20 fw-600" style={{ color: roi >= 0 ? meta.color : "var(--color-error)" }}>
            {roi >= 0 ? "+" : ""}{roi.toFixed(1)}<span className="fs-13 text-faint">%</span>
          </div>
        </div>
      </div>

      {/* Progress bar with circle — verdict style */}
      <div style={{ position: "relative", marginTop: 18, height: 12 }}>
        <div style={{ position: "absolute", inset: 0, display: "flex", borderRadius: 6, overflow: "hidden" }}>
          {stops.map((s, i) => (
            <div key={i} style={{ flex: s.to - s.from, background: s.color, opacity: 0.18 }}></div>
          ))}
        </div>
        <div style={{
          position: "absolute", left: 0, top: 0, height: "100%",
          width: roiPct + "%",
          background: meta.color, borderRadius: 6, transition: "width var(--motion-slow) var(--ease-out)"
        }}></div>
        <div style={{
          position: "absolute", left: roiPct + "%", top: "50%",
          transform: "translate(-50%, -50%)",
          width: 22, height: 22, borderRadius: "50%",
          background: meta.color, border: "3px solid var(--color-bg-container)",
          boxShadow: "0 0 0 1px " + meta.color + ", 0 2px 4px rgba(0,0,0,0.15)",
          transition: "left var(--motion-slow) var(--ease-out)"
        }}></div>
      </div>
      <div className="row jcsb mt-8 mono fs-11 text-faint">
        <span>{lang === "pt" ? "Prejuízo" : "Loss"}</span>
        <span>{lang === "pt" ? "Apertado" : "Tight"}</span>
        <span>{lang === "pt" ? "Confortável" : "Comfortable"}</span>
      </div>
    </div>
  );
}

// ============================================================
// ROI GAUGE — big semicircle
// ============================================================
function ROIGauge({ roi, lang }) {
  // Map ROI to 0-180deg. Anchor: -20% = 0deg, +50% = 180deg
  const min = -20, max = 50;
  const clamped = Math.max(min, Math.min(max, roi));
  const angle = ((clamped - min) / (max - min)) * 180; // 0..180
  const color = roi >= 20 ? "var(--color-success)" : roi >= 10 ? "var(--color-success)" : roi > 0 ? "var(--color-warning)" : "var(--color-error)";

  // Build arc path
  const r = 80, cx = 100, cy = 100;
  const arc = (start, end, color, width) => {
    const s = (start * Math.PI) / 180;
    const e = (end * Math.PI) / 180;
    const x1 = cx + r * Math.cos(Math.PI - s), y1 = cy - r * Math.sin(s);
    const x2 = cx + r * Math.cos(Math.PI - e), y2 = cy - r * Math.sin(e);
    const large = end - start > 180 ? 1 : 0;
    return <path d={`M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`} stroke={color} strokeWidth={width} fill="none" strokeLinecap="round" />;
  };

  // Needle position
  const nAngle = (angle * Math.PI) / 180;
  const nx = cx + r * Math.cos(Math.PI - nAngle);
  const ny = cy - r * Math.sin(nAngle);

  return (
    <_ana.Card>
      <_ana.CardHead title={lang === "pt" ? "ROI da operação" : "Operation ROI"} icon="gauge"
        right={<span className="text-faint fs-11">{lang === "pt" ? "retorno sobre investimento" : "return on investment"}</span>} />
      <_ana.CardBody style={{ paddingTop: 0 }}>
        <div style={{ position: "relative", width: "100%", maxWidth: 240, margin: "0 auto" }}>
          <svg viewBox="0 0 200 130" style={{ width: "100%", display: "block" }}>
            {/* Track */}
            {arc(0, 60, "var(--color-error)", 14)}
            {arc(60, 90, "var(--color-warning)", 14)}
            {arc(90, 180, "var(--color-success)", 14)}
            {/* Needle */}
            <line x1={cx} y1={cy} x2={nx} y2={ny} stroke="var(--fg1)" strokeWidth="2.5" strokeLinecap="round" />
            <circle cx={cx} cy={cy} r="6" fill="var(--color-bg-container)" stroke="var(--fg1)" strokeWidth="2" />
            {/* Labels */}
            <text x="20" y="118" fontFamily="var(--font-mono)" fontSize="9" fill="var(--fg3)" textAnchor="middle">-20%</text>
            <text x="100" y="22" fontFamily="var(--font-mono)" fontSize="9" fill="var(--fg3)" textAnchor="middle">+15%</text>
            <text x="180" y="118" fontFamily="var(--font-mono)" fontSize="9" fill="var(--fg3)" textAnchor="middle">+50%</text>
          </svg>
          <div style={{ textAlign: "center", marginTop: -16 }}>
            <div className="mono" style={{ fontSize: 28, fontWeight: 600, color }}>
              {roi >= 0 ? "+" : ""}{roi.toFixed(1)}<span className="fs-13 text-faint">%</span>
            </div>
            <div className="text-faint fs-11">{lang === "pt" ? "lucro / investimento" : "profit / investment"}</div>
          </div>
        </div>
      </_ana.CardBody>
    </_ana.Card>
  );
}

// ============================================================
// WATERFALL — FIPE → ... → Lucro (proper floating bars)
// ============================================================
function Waterfall({ fipe, margin, venda, valCliente, sumExtras, totalQuit, lucro, lang }) {
  // Build steps with running-total positions.
  // type: "total" = pillar from 0 to value (FIPE, Venda, Lucro)
  // type: "down" = floating red bar going down by abs(value)
  const built = [];
  built.push({ key: "fipe", label: "FIPE", type: "total",
    color: "var(--blue-5)", value: fipe, from: 0, to: fipe });

  let running = fipe;
  const marginCut = fipe - venda;
  if (marginCut > 0 || fipe > 0) {
    built.push({ key: "margin", label: lang === "pt" ? "Margem da venda" : "Sale margin", type: "down",
      color: "var(--color-warning)", value: -marginCut, from: venda, to: fipe });
    running = venda;
  }
  built.push({ key: "sell", label: lang === "pt" ? "Preço de venda" : "Sale price", type: "total",
    color: "var(--color-success)", value: venda, from: 0, to: venda });

  // After "Venda" pillar we start subtracting costs from venda toward lucro
  running = venda;
  const subs = [
    { key: "client", label: lang === "pt" ? "Pago ao cliente" : "Paid to client", v: valCliente },
    { key: "extras", label: lang === "pt" ? "Custos extras" : "Extra costs", v: sumExtras },
    { key: "payoff", label: lang === "pt" ? "Quitação banco" : "Bank payoff", v: totalQuit },
  ];
  subs.forEach(s => {
    const next = running - s.v;
    built.push({ key: s.key, label: s.label, type: "down",
      color: "var(--color-error)", value: -s.v, from: next, to: running });
    running = next;
  });

  built.push({ key: "profit", label: lang === "pt" ? "Lucro líquido" : "Net profit", type: "total",
    color: lucro >= 0 ? "var(--color-success)" : "var(--color-error)", value: lucro,
    from: lucro >= 0 ? 0 : lucro, to: lucro >= 0 ? lucro : 0 });

  // Compute global scale across all from/to (including negatives for loss)
  const allValues = built.flatMap(b => [b.from, b.to, 0]);
  const minV = Math.min(...allValues);
  const maxV = Math.max(...allValues, 1);
  const range = maxV - minV || 1;
  const zeroPct = ((0 - minV) / range) * 100;
  const map = (v) => ((v - minV) / range) * 100;

  return (
    <_ana.Card>
      <_ana.CardHead title={lang === "pt" ? "Composição do lucro" : "Profit breakdown"} icon="bar-chart-3"
        right={<span className="text-faint fs-11">{lang === "pt" ? "do FIPE ao lucro" : "FIPE to profit"}</span>} />
      <_ana.CardBody>
        <div className="col gap-6">
          {built.map((b, i) => {
            const isTotal = b.type === "total";
            const left = map(b.from);
            const width = Math.max(0.6, map(b.to) - map(b.from));
            const negative = b.value < 0;
            const sign = isTotal ? (i === 0 ? "" : "= ") : "− ";
            const valColor = negative ? "var(--color-error)"
              : isTotal && b.value < 0 ? "var(--color-error)"
              : isTotal && b.key === "profit" ? "var(--color-success)"
              : "var(--fg1)";
            return (
              <div key={b.key} style={{
                display: "grid", gridTemplateColumns: "140px 1fr 110px", gap: 10, alignItems: "center",
                paddingTop: isTotal && i > 0 ? 4 : 0,
                borderTop: isTotal && i > 0 ? "1px dashed var(--color-border-secondary)" : "none"
              }}>
                <span className="fs-12" style={{
                  color: isTotal ? "var(--fg1)" : "var(--fg2)",
                  fontWeight: isTotal ? 600 : 500
                }}>{b.label}</span>
                <div style={{ position: "relative", height: isTotal ? 22 : 16, background: "var(--color-fill-quaternary)", borderRadius: 4, overflow: "hidden" }}>
                  {/* zero axis */}
                  {minV < 0 && (
                    <div style={{ position: "absolute", left: zeroPct + "%", top: 0, bottom: 0, width: 1, background: "var(--color-border)" }}></div>
                  )}
                  {/* bar */}
                  <div style={{
                    position: "absolute", top: 2, bottom: 2,
                    left: left + "%", width: width + "%",
                    background: b.color, borderRadius: 3, minWidth: 2,
                    boxShadow: isTotal ? "0 1px 2px rgba(0,0,0,0.12)" : "none",
                    transition: "left var(--motion-mid) var(--ease-out), width var(--motion-mid) var(--ease-out)"
                  }}></div>
                </div>
                <span className="mono fs-12 fw-500" style={{ textAlign: "right", color: valColor }}>
                  {sign}<_ana.Money value={Math.abs(b.value)} lang={lang} />
                </span>
              </div>
            );
          })}
        </div>
        {/* axis labels */}
        <div style={{ display: "grid", gridTemplateColumns: "140px 1fr 110px", gap: 10, marginTop: 8 }}>
          <span></span>
          <div className="row jcsb mono fs-10 text-faint" style={{ paddingTop: 2 }}>
            <span><_ana.Money value={minV} lang={lang} /></span>
            {minV < 0 && <span style={{ position: "relative", left: (zeroPct - 50) + "%" }}>0</span>}
            <span><_ana.Money value={maxV} lang={lang} /></span>
          </div>
          <span></span>
        </div>
      </_ana.CardBody>
    </_ana.Card>
  );
}

// ============================================================
// SCENARIO ROW
// ============================================================
function ScenarioRow({ label, sub, color, result, lang, highlight }) {
  return (
    <div style={{
      padding: 12, border: "1px solid " + (highlight ? color : "var(--color-border-secondary)"),
      borderRadius: 6, background: highlight ? "var(--color-fill-quaternary)" : "transparent"
    }}>
      <div className="row jcsb mb-8">
        <div>
          <div className="row gap-8">
            <span style={{ width: 8, height: 8, background: color, borderRadius: "50%" }}></span>
            <span className="fw-600 fs-13">{label}</span>
            {highlight && <_ana.Tag kind="info">{lang === "pt" ? "Atual" : "Current"}</_ana.Tag>}
          </div>
          <div className="text-faint fs-11">{sub}</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <_ana.Money value={result.profit} lang={lang}
            className="fw-600 fs-15" style={{ color: result.profit >= 0 ? "var(--color-success)" : "var(--color-error)" }} />
          <div className="mono fs-11" style={{ color: result.roi >= 0 ? "var(--color-success)" : "var(--color-error)" }}>
            {result.roi >= 0 ? "+" : ""}{result.roi.toFixed(1)}% ROI
          </div>
        </div>
      </div>
      <div className="text-faint fs-11 mono row jcsb">
        <span>{lang === "pt" ? "Venda" : "Sell"}: {_ana.fmtMoney(result.sell, lang)}</span>
        <span>{lang === "pt" ? "Custo" : "Cost"}: {_ana.fmtMoney(result.cost, lang)}</span>
      </div>
    </div>
  );
}

window.NA.M.analysis = ModuleAnalysis;