/* global React, window */
// =====================================================================
// Views part 1: Overview, Funnel, Creatives, Decisions
// =====================================================================

const { useState: useS1, useMemo: useM1, useEffect: useE1 } = React;

// ============== OVERVIEW =================
function OverviewView({ lang, onTab }) {
  const t = window.i18n[lang];
  const c = t.common;
  const topCreatives = useM1(() => [...window.creatives].sort((a,b)=>b.score-a.score).slice(0,4), []);
  const dyingCreatives = useM1(() => [...window.creatives].filter(x=>x.status==="kill").slice(0,3), []);
  const top3Alerts = useM1(() => window.alerts.slice(0,3), []);
  const totals = window.profitTotals;

  // Rentabilidad REAL por atribución de lead asociado (windmar-marketing, 90d) — fuente correcta de CM.
  const [hl, setHl] = useS1(null);
  const [hlCh, setHlCh] = useS1("all");
  useE1(() => { if (window.wm && window.wm.croHeadline) window.wm.croHeadline(hlCh).then(setHl); }, [hlCh]);
  const _M = (n) => (n == null ? "—" : (n < 0 ? "-$" : "$") + Math.abs(Math.round(n)).toLocaleString("en-US"));

  // Quick-access mini panels (Google / Market / Decisions)
  const g = window.googleRaw || { daily: [], recs: [] };
  const gSpend = useM1(() => (g.daily || []).reduce((a, d) => a + Number(d.cost || 0), 0), []);
  const gConv  = useM1(() => (g.daily || []).reduce((a, d) => a + Number(d.conversions || 0), 0), []);
  const gRecs  = (g.recs || []).length;
  const decCounts = useM1(() => {
    const d = window.campaigns || [];
    return {
      scale:    d.filter(x => x.status === "scale").length,
      optimize: d.filter(x => x.status === "optimize").length,
      kill:     d.filter(x => x.status === "kill").length,
    };
  }, []);
  const compCount = (window.competitors || []).length;

  return (
    <div className="grid" style={{ gap: 18 }}>
      {hl && hl.spend != null && (
        <div style={{ border: "1px solid var(--op-line,#e7ebf3)", borderRadius: 14, padding: "14px 16px", background: "linear-gradient(180deg,#fff,#f8fafc)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 12 }}>
            <window.Icon name="trending-up" size={16} />
            <b style={{ fontSize: 13 }}>{lang === "es" ? "Rentabilidad real · atribución por lead asociado" : "Real profitability · associated-lead attribution"}</b>
            <span style={{ fontSize: 10, fontWeight: 800, color: "var(--op-green,#1f9d57)", background: "var(--op-green-50,#E8F4EE)", padding: "2px 8px", borderRadius: 9 }}>● windmar-marketing · 90d</span>
            <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
              {[["all", lang === "es" ? "Todos" : "All"], ["meta", "Meta"], ["google", "Google"]].map(([k, lbl]) => (
                <button key={k} onClick={() => setHlCh(k)} style={{ padding: "3px 11px", borderRadius: 16, fontSize: 11, fontWeight: 800, cursor: "pointer", border: "1px solid " + (hlCh === k ? "var(--wm-blue,#1D429B)" : "var(--op-line,#ddd)"), background: hlCh === k ? "var(--wm-blue,#1D429B)" : "transparent", color: hlCh === k ? "#fff" : "var(--wm-fg-muted)" }}>{lbl}</button>
              ))}
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 12 }}>
            {[
              { l: lang === "es" ? "Inversión" : "Spend", v: _M(hl.spend), c: "var(--wm-fg,#13203f)" },
              { l: lang === "es" ? "Contribución (est.)" : "Contribution", v: _M(hl.contribution), c: "var(--wm-fg,#13203f)" },
              { l: lang === "es" ? "Margen neto (est.)" : "Net margin", v: _M(hl.margin), c: (hl.margin >= 0 ? "var(--op-green,#1f9d57)" : "var(--op-red,#d23b3b)") },
              { l: "CM-ROAS", v: (hl.cm_roas == null ? "—" : hl.cm_roas + "×"), c: "var(--wm-blue,#1D429B)" },
              { l: "CAC · " + (hl.wins || 0) + (lang === "es" ? " ventas" : " wins"), v: _M(hl.cac), c: "var(--wm-fg,#13203f)" },
            ].map((k, i) => (
              <div key={i}>
                <div style={{ fontSize: 10, fontWeight: 700, color: "var(--wm-fg-muted)", textTransform: "uppercase", letterSpacing: ".4px" }}>{k.l}</div>
                <div style={{ fontSize: 22, fontWeight: 900, marginTop: 2, color: k.c }}>{k.v}</div>
              </div>
            ))}
          </div>
          <div style={{ fontSize: 10, color: "var(--wm-fg-muted)", marginTop: 8 }}>
            {lang === "es" ? "Ventas = leads 'won' del CRM por canal (lead asociado). CM = ventas × ~$2,000. La banda superior negra usa atribución por período (vista distinta)." : "Wins = CRM 'won' leads by channel. CM = wins × ~$2,000."}
          </div>
        </div>
      )}
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Lo que <span className="wm-weight-black">está generando dinero</span> hoy</>
              : <>What is <span className="wm-weight-black">making money</span> today</>}
          </h2>
          <p className="section-sub">{t.headers.overview.sub}</p>
        </div>
      </div>

      {/* Top alerts strip */}
      <div className="grid grid-3" style={{ gap: 14 }}>
        {top3Alerts.map(a => (
          <div key={a.id} className={"alert sev-" + a.sev} style={{ gridTemplateColumns: "auto 1fr" }}>
            <div className="alert-icon"><Icon name={a.icon} size={18} /></div>
            <div className="alert-body">
              <div className="alert-title" style={{ fontSize: 12 }}>{lang==="es"?a.title_es:a.title_en}</div>
              <div className="alert-msg" style={{ fontSize: 11 }} dangerouslySetInnerHTML={{
                __html: (lang==="es"?a.msg_es:a.msg_en).replace(/\*\*(.+?)\*\*/g,"<b>$1</b>")
              }} />
            </div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-32" style={{ gap: 16 }}>
        {/* Profit trend */}
        <div className="card">
          <div className="card-head">
            <h3 className="card-title">
              <Icon name="line-chart" size={14} />
              {lang==="es"?"Margen de contribución · 14 días":"Contribution margin · 14d"}
            </h3>
            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
              <span className="pill pill-orange"><span className="dot" />CM ${(totals.cm.val/1000).toFixed(1)}k</span>
              <Trend value={totals.cm.delta} />
            </div>
          </div>
          <ProfitTrendChart lang={lang} />
        </div>

        {/* Right column: top KPIs — todo derivado de data live (sin números fabricados) */}
        {(() => {
          const ps = window.profitSeries || {};
          const cmArr = (ps.cm || []).filter(n => n != null && !isNaN(n));
          const avgCm = cmArr.length ? cmArr.reduce((a, b) => a + b, 0) / cmArr.length : null;
          const projCm = avgCm != null ? Math.round(avgCm * 30) : null; // proyección mes por run-rate diario real
          const cac = totals.cac ? totals.cac.val : null;
          return (
        <div style={{ display: "grid", gap: 12 }}>
          <div className="card" style={{ padding: 14 }}>
            <div className="card-sub" style={{ marginBottom: 4 }}>{lang==="es"?"CM PROYECTADO (MES · run-rate)":"PROJECTED CM (MONTH · run-rate)"}</div>
            <div className="kpi-value" style={{ fontSize: 28 }}>
              {projCm != null ? <AnimatedNumber value={projCm} format="moneyk" /> : <span style={{ color: "var(--wm-fg-muted)" }}>—</span>}
            </div>
            <div className="kpi-meta" style={{ marginTop: 4 }}>
              {lang==="es"?"CM del período":"Period CM"}: <b><AnimatedNumber value={totals.cm.val} format="moneyk" /></b> <Trend value={totals.cm.delta} />
            </div>
            <div className="kpi-meta" style={{ fontSize: 10, color: "var(--wm-fg-subtle)" }}>{lang==="es"?"= CM diario promedio × 30 (data live)":"= avg daily CM × 30 (live)"}</div>
          </div>
          <div className="card" style={{ padding: 14 }}>
            <div className="card-sub" style={{ marginBottom: 4 }}>{lang==="es"?"CAC (período)":"CAC (period)"}</div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <div className="kpi-value" style={{ fontSize: 28 }}>
                {cac != null ? <AnimatedNumber value={cac} format="money" /> : <span style={{ color: "var(--wm-fg-muted)" }}>—</span>}
              </div>
              {totals.cac && totals.cac.delta != null && <Trend value={totals.cac.delta} inverse />}
            </div>
            <div className="kpi-meta" style={{ marginTop: 4 }}>{lang==="es"?"Costo por venta · live vs período anterior":"Cost per sale · live vs prev period"}</div>
          </div>
        </div>
          );
        })()}
      </div>

      {/* Top creatives + dying */}
      <div className="grid grid-cols-23" style={{ gap: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3 className="card-title"><Icon name="trophy" size={14} />{lang==="es"?"Top creativos por margen":"Top creatives by margin"}</h3>
            <a className="btn btn-ghost btn-sm" onClick={()=>onTab("creatives")} style={{ cursor: "pointer" }}>
              {lang==="es"?"Ver todos":"View all"} <Icon name="arrow-right" size={12} />
            </a>
          </div>
          <div className="grid grid-4" style={{ gap: 10 }}>
            {topCreatives.map(cr => (
              <MiniCreativeCard key={cr.id} cr={cr} lang={lang} />
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3 className="card-title" style={{ color: "var(--op-red)" }}>
              <Icon name="x-octagon" size={14} />{lang==="es"?"Para apagar":"To kill"}
            </h3>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {dyingCreatives.map(cr => (
              <div key={cr.id} style={{ display: "grid", gridTemplateColumns: "44px 1fr auto", gap: 10, alignItems: "center", padding: 10, background: "var(--op-red-50)", borderRadius: 10 }}>
                <div style={{ width: 44, height: 44, borderRadius: 8, background: "var(--wm-white)", display: "grid", placeItems: "center", overflow: "hidden" }}>
                  <img src={cr.thumb} alt="" style={{ maxWidth: "80%", maxHeight: "80%" }} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: "var(--wm-fg)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                    "{lang==="es"?cr.hook_es:cr.hook_en}"
                  </div>
                  <div className="muted" style={{ fontSize: 11 }}>{cr.product} · {window.creativeTypes.find(t=>t.key===cr.type)?.[lang==="es"?"label_es":"label_en"] || cr.type} · CM {fmt.money(cr.cm, { sign: true })}</div>
                </div>
                <button
                  className="btn btn-kill btn-sm"
                  onClick={() => window.runAction && window.runAction("pause", { ad_id: cr.id })}
                  title={lang==="es"?"Pausar este ad en Meta":"Pause this ad in Meta"}
                >
                  {c.kill}
                </button>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Quick-access mini panels: Google Ads · Market · Decisions */}
      <div className="grid grid-3" style={{ gap: 16 }}>
        {/* Google Ads */}
        <div className="card" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div className="card-head">
            <h3 className="card-title"><Icon name="search" size={14} />Google Ads</h3>
            <a className="btn btn-ghost btn-sm" onClick={()=>onTab("google")} style={{ cursor: "pointer" }}>
              {lang==="es"?"Abrir":"Open"} <Icon name="arrow-right" size={12} />
            </a>
          </div>
          <div style={{ display: "flex", gap: 18, alignItems: "flex-end" }}>
            <div>
              <div className="card-sub">{lang==="es"?"GASTO 30D":"SPEND 30D"}</div>
              <div className="kpi-value" style={{ fontSize: 24 }}>{fmt.money(gSpend, { compact: true })}</div>
            </div>
            <div>
              <div className="card-sub">{lang==="es"?"CONV.":"CONV."}</div>
              <div className="kpi-value" style={{ fontSize: 24 }}>{Math.round(gConv)}</div>
            </div>
          </div>
          <div style={{ marginTop: "auto" }}>
            {gRecs > 0
              ? <span className="pill pill-orange"><span className="dot" />{gRecs} {lang==="es"?"sugerencias":"suggestions"}</span>
              : <span className="muted" style={{ fontSize: 11 }}>{lang==="es"?"Sin sugerencias abiertas":"No open suggestions"}</span>}
          </div>
        </div>

        {/* Market */}
        <div className="card" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div className="card-head">
            <h3 className="card-title"><Icon name="radar" size={14} />{lang==="es"?"Mercado":"Market"}</h3>
            <a className="btn btn-ghost btn-sm" onClick={()=>onTab("market")} style={{ cursor: "pointer" }}>
              {lang==="es"?"Abrir":"Open"} <Icon name="arrow-right" size={12} />
            </a>
          </div>
          <div>
            <div className="card-sub">{lang==="es"?"COMPETIDORES MONITOREADOS":"COMPETITORS TRACKED"}</div>
            <div className="kpi-value" style={{ fontSize: 24 }}>{compCount}</div>
          </div>
          <div className="muted" style={{ fontSize: 11, marginTop: "auto" }}>
            {lang==="es"?"Posicionamiento y anuncios de la competencia":"Competitor positioning and ads"}
          </div>
        </div>

        {/* Decisions */}
        <div className="card" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div className="card-head">
            <h3 className="card-title"><Icon name="shield-check" size={14} />{lang==="es"?"Decisiones":"Decisions"}</h3>
            <a className="btn btn-ghost btn-sm" onClick={()=>onTab("decisions")} style={{ cursor: "pointer" }}>
              {lang==="es"?"Abrir":"Open"} <Icon name="arrow-right" size={12} />
            </a>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 2 }}>
            <span className="pill" style={{ background: "rgba(27,138,90,0.12)", color: "var(--op-green)" }}>
              {decCounts.scale} {lang==="es"?"Escalar":"Scale"}
            </span>
            <span className="pill" style={{ background: "rgba(201,122,14,0.12)", color: "var(--op-amber)" }}>
              {decCounts.optimize} {lang==="es"?"Optimizar":"Optimize"}
            </span>
            <span className="pill" style={{ background: "rgba(181,48,31,0.12)", color: "var(--op-red)" }}>
              {decCounts.kill} {lang==="es"?"Apagar":"Kill"}
            </span>
          </div>
          <div className="muted" style={{ fontSize: 11, marginTop: "auto" }}>
            {lang==="es"?"Campañas auto-clasificadas":"Auto-classified campaigns"}
          </div>
        </div>
      </div>
    </div>
  );
}

function ProfitTrendChart({ lang }) {
  const data = window.profitSeries;
  const w = 700, h = 200, pad = { l: 36, r: 12, t: 16, b: 24 };
  const max = Math.max(...data.cm) * 1.1;
  const xs = data.cm.map((_,i) => pad.l + (i / (data.cm.length-1)) * (w - pad.l - pad.r));
  const ys = data.cm.map(v => h - pad.b - (v / max) * (h - pad.t - pad.b));
  const path = "M" + xs.map((x,i) => `${x},${ys[i]}`).join(" L");
  const area = path + ` L${xs[xs.length-1]},${h - pad.b} L${xs[0]},${h - pad.b} Z`;
  const days = data.cm.length;
  const labels = [days-13, days-9, days-5, days-1].map(i => `D-${days-1-i}`);

  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: 220 }}>
      <defs>
        <linearGradient id="cmgrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="var(--wm-orange)" stopOpacity="0.30" />
          <stop offset="100%" stopColor="var(--wm-orange)" stopOpacity="0.0" />
        </linearGradient>
      </defs>
      {/* Y gridlines */}
      {[0.25, 0.5, 0.75, 1].map((k,i) => (
        <line key={i}
              x1={pad.l} x2={w - pad.r}
              y1={h - pad.b - k*(h - pad.t - pad.b)}
              y2={h - pad.b - k*(h - pad.t - pad.b)}
              stroke="var(--op-line)" strokeDasharray="2 4" />
      ))}
      {/* axes labels */}
      {[0, 0.5, 1].map((k,i) => (
        <text key={i} x={pad.l - 6} y={h - pad.b - k*(h - pad.t - pad.b) + 4}
              textAnchor="end" fontSize="9" fontWeight="700" fill="var(--wm-fg-muted)" fontFamily="var(--wm-font-sans)">
          ${(k*max/1000).toFixed(0)}k
        </text>
      ))}
      <path d={area} fill="url(#cmgrad)" />
      <path d={path} fill="none" stroke="var(--wm-orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      {/* Spend bars (lighter) */}
      {data.spend.map((v,i) => {
        const bx = xs[i] - 6;
        const bh = (v / max) * (h - pad.t - pad.b);
        return <rect key={i} x={bx} y={h - pad.b - bh} width="12" height={bh} fill="var(--wm-blue-100)" />;
      })}
      {/* Refresh CM line on top of bars */}
      <path d={path} fill="none" stroke="var(--wm-orange)" strokeWidth="2" />
      {ys.map((y,i) => <circle key={i} cx={xs[i]} cy={y} r="2.4" fill="var(--wm-orange)" />)}
      {/* Last point bigger */}
      <circle cx={xs[xs.length-1]} cy={ys[ys.length-1]} r="5" fill="var(--wm-orange)" stroke="white" strokeWidth="2" />
    </svg>
  );
}

function MiniCreativeCard({ cr, lang }) {
  return (
    <div style={{ background: "var(--wm-bg-muted)", borderRadius: 10, padding: 8, display: "flex", flexDirection: "column", gap: 6 }}>
      <div style={{ position: "relative", aspectRatio: "1/1", background: "var(--wm-white)", borderRadius: 8, display: "grid", placeItems: "center", overflow: "hidden" }}>
        <img src={cr.thumb} alt="" style={{ maxWidth: "75%", maxHeight: "75%", filter: "drop-shadow(0 6px 12px rgba(33,39,78,0.25))" }} />
        <span style={{ position: "absolute", top: 6, right: 6, background: cr.score>=90?"var(--wm-orange)":"var(--wm-blue)", color: "white", fontSize: 10, fontWeight: 900, padding: "2px 6px", borderRadius: 999 }}>
          {cr.score}
        </span>
      </div>
      <div style={{ fontSize: 11, fontWeight: 700, lineHeight: 1.25, minHeight: 28 }}>
        "{(lang==="es"?cr.hook_es:cr.hook_en).slice(0,40)}{(lang==="es"?cr.hook_es:cr.hook_en).length>40?"…":""}"
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--wm-fg-muted)", fontVariantNumeric: "tabular-nums" }}>
        <span>{window.creativeTypes.find(t=>t.key===cr.type)?.[lang==="es"?"label_es":"label_en"] || cr.type}</span>
        <span style={{ color: "var(--op-green)", fontWeight: 800 }}>{fmt.money(cr.cm, { compact: true, sign: true })}</span>
      </div>
    </div>
  );
}

function ProductMini({ p, lang }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 12, alignItems: "center", padding: 12, background: "var(--wm-bg-muted)", borderRadius: 10 }}>
      <div style={{ width: 60, height: 60, background: "var(--wm-white)", borderRadius: 8, display: "grid", placeItems: "center", overflow: "hidden" }}>
        <img src={p.thumb} alt="" style={{ maxWidth: "80%", maxHeight: "80%" }} />
      </div>
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <b style={{ fontSize: 13, color: "var(--wm-blue)" }}>{p.name}</b>
          <span className="pill pill-watch" style={{ fontSize: 10 }}>{p.margin}%</span>
        </div>
        <div style={{ fontSize: 18, fontWeight: 900, color: "var(--wm-blue)", fontVariantNumeric: "tabular-nums", marginTop: 2 }}>
          {fmt.money(p.cm, { compact: true })}
        </div>
        <div className="kpi-bar"><span style={{ width: p.share + "%", background: "var(--wm-orange)" }} /></div>
        <div style={{ fontSize: 10, color: "var(--wm-fg-muted)", marginTop: 3 }}>
          {p.sales} {lang==="es"?"ventas":"sales"} · CAC {fmt.money(p.cac)}
        </div>
      </div>

      {/* Cohort tracking — paid media has lag, so show mes-X spend vs mes-X sales materialized */}
      {window.cohortData && window.cohortData.length > 0 && (
        <div className="card" style={{ gridColumn: "1 / -1" }}>
          <div className="card-head">
            <h3 className="card-title"><Icon name="layers" size={14} />
              {lang==="es"?"Cohorts mensuales · maduración":"Monthly cohorts · maturation"}</h3>
            <div className="card-sub">{lang==="es"?"Solar tarda semanas/meses en cerrar. Cohort viejo = más confiable.":"Solar takes months to close. Older cohort = more reliable."}</div>
          </div>
          <table className="table">
            <thead><tr>
              <th>{lang==="es"?"Mes":"Month"}</th>
              <th className="num">{lang==="es"?"Días":"Days"}</th>
              <th className="num">{lang==="es"?"Leads":"Leads"}</th>
              <th className="num">{lang==="es"?"Spend":"Spend"}</th>
              <th className="num">CPL</th>
              <th className="num">{lang==="es"?"Ventas":"Sales"}</th>
              <th className="num">{lang==="es"?"Conv":"Conv"}</th>
              <th className="num">{lang==="es"?"Costo/venta":"Cost/sale"}</th>
            </tr></thead>
            <tbody>
              {window.cohortData.filter(c => c.leads > 0 || c.spend > 0).map((c, i) => (
                <tr key={i}>
                  <td><b>{c.cohort_month}</b></td>
                  <td className="num"><span style={{ color: c.days_since < 30 ? "var(--op-amber)" : "var(--wm-fg-muted)" }}>{c.days_since}d</span></td>
                  <td className="num">{c.leads}</td>
                  <td className="num">{fmt.money(c.spend)}</td>
                  <td className="num">{c.cpl != null ? "$" + c.cpl.toFixed(0) : "—"}</td>
                  <td className="num"><b>{c.sales}</b></td>
                  <td className="num">{c.conv_pct}%</td>
                  <td className="num">{c.cost_per_sale != null ? fmt.money(c.cost_per_sale) : "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ fontSize: 11, color: "var(--wm-fg-muted)", marginTop: 8, padding: "0 4px" }}>
            {lang==="es"
              ? "⚠ Cohorts recientes (<30d) están subestimadas — ventas todavía no han cerrado. Mira cohorts de hace 60-90 días para CAC real."
              : "⚠ Recent cohorts (<30d) are underreported — sales haven't closed yet. Look at 60-90d cohorts for true CAC."}
          </div>
        </div>
      )}

      {/* Digital Pipeline — deals attributed to digital leads via email/phone match */}
      {window.pipelineData && window.pipelineData.summary && (
        <div className="card" style={{ gridColumn: "1 / -1" }}>
          <div className="card-head">
            <h3 className="card-title"><Icon name="trending-up" size={14} />
              {lang==="es"?"Pipeline digital · deals atribuidos":"Digital pipeline · attributed deals"}</h3>
            <div className="card-sub">{lang==="es"?"Match email/teléfono entre digital leads y deals":"Email/phone match between digital leads and deals"}</div>
          </div>
          <div className="grid grid-3" style={{ gap: 12, marginBottom: 12 }}>
            <div className="kpi">
              <div className="kpi-label">{lang==="es"?"DEALS ABIERTOS":"OPEN DEALS"}</div>
              <div className="kpi-value">{window.pipelineData.summary.open_deals}</div>
              <div className="kpi-meta">{fmt.money(Number(window.pipelineData.summary.open_amount || 0))} {lang==="es"?"en pipeline":"in pipeline"}</div>
            </div>
            <div className="kpi">
              <div className="kpi-label">{lang==="es"?"GANADAS (TOTAL)":"WON (TOTAL)"}</div>
              <div className="kpi-value">{window.pipelineData.summary.closed_won_count}</div>
              <div className="kpi-meta">{fmt.money(Number(window.pipelineData.summary.closed_won_amount || 0))}</div>
            </div>
            <div className="kpi">
              <div className="kpi-label">{lang==="es"?"GANADAS 30D":"WON 30D"}</div>
              <div className="kpi-value">{window.pipelineData.summary.in_30d_won}</div>
              <div className="kpi-meta">{fmt.money(Number(window.pipelineData.summary.in_30d_won_amount || 0))}</div>
            </div>
          </div>
          {window.pipelineData.deals && window.pipelineData.deals.length > 0 && (
            <table className="table">
              <thead><tr>
                <th>{lang==="es"?"Deal":"Deal"}</th>
                <th>{lang==="es"?"Stage":"Stage"}</th>
                <th className="num">{lang==="es"?"Monto":"Amount"}</th>
                <th className="num">{lang==="es"?"Fecha cierre":"Close date"}</th>
              </tr></thead>
              <tbody>
                {window.pipelineData.deals.slice(0, 10).map((d, i) => (
                  <tr key={i}>
                    <td><b>{(d.name || "").slice(0, 50)}</b></td>
                    <td><span className="pill pill-watch" style={{ fontSize: 10 }}>{d.stage}</span></td>
                    <td className="num">{fmt.money(d.amount)}</td>
                    <td className="num">{d.closing_date}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
          <div style={{ fontSize: 11, color: "var(--wm-fg-muted)", marginTop: 8, padding: "0 4px" }}>
            {lang==="es"
              ? "Atribución real basada en match de email/teléfono entre lead digital → contact → deal."
              : "Real attribution based on email/phone match: digital lead → contact → deal."}
          </div>
        </div>
      )}
    </div>
  );
}

// ============== FUNNEL =================
function FunnelView({ lang }) {
  const t = window.i18n[lang];
  const f = window.funnelData;
  const max = f.steps[0].count;

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>¿Calidad de <span className="wm-weight-black">lead</span>, o ejecución?</>
              : <>Lead <span className="wm-weight-black">quality</span>, or execution?</>}
          </h2>
          <p className="section-sub">{t.headers.funnel.sub}</p>
        </div>
      </div>

      {/* Funnel + key rates */}
      <div className="grid grid-cols-32" style={{ gap: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3 className="card-title"><Icon name="filter" size={14} />{lang==="es"?"Funnel · 30 días":"Funnel · 30d"}</h3>
            <div className="muted" style={{ fontSize: 11 }}>1,247 → 96 ({lang==="es"?"7.7% global":"7.7% overall"})</div>
          </div>
          <div className="funnel">
            {f.steps.map((s, i) => {
              const pct = (s.count / max) * 100;
              const dropPrev = i > 0 ? (s.count / f.steps[i-1].count) * 100 : 100;
              const trend = ((s.count - s.prev) / s.prev) * 100;
              const metricKey = s.metricKey || s.key;
              const clickable = !!window.openDrilldown && s.count > 0;
              return (
                <div
                  key={s.key}
                  className={"funnel-step " + (clickable ? "funnel-step--clickable" : "")}
                  onClick={clickable ? () => window.openDrilldown(metricKey, (lang==="es"?s.label_es:s.label_en), s.count) : undefined}
                  style={clickable ? { cursor: "pointer" } : undefined}
                  title={clickable ? (lang==="es"?"Click → ver lista exacta de personas":"Click → see exact list of people") : undefined}
                >
                  <div className="funnel-name">
                    <b>{lang==="es"?s.label_es:s.label_en}{clickable && <span style={{ marginLeft: 4, opacity: 0.45, fontSize: 10 }}>↗</span>}</b>
                    <span>{i===0 ? (lang==="es"?"entrada":"input") : (lang==="es"?`paso a paso ${dropPrev.toFixed(1)}%`:`step ${dropPrev.toFixed(1)}%`)}</span>
                  </div>
                  <div className="funnel-bar-wrap">
                    <div className="funnel-bar" style={{ width: pct + "%" }}>
                      {pct.toFixed(1)}%
                    </div>
                  </div>
                  <div className="funnel-meta">
                    <b><AnimatedNumber value={s.count} format="num" /></b>
                    <span>vs {fmt.num(s.prev)} · </span>
                    <Trend value={trend} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div style={{ display: "grid", gap: 12 }}>
          {[
            { t: lang==="es"?"INTENT SCORE PROMEDIO":"AVG INTENT SCORE" },
            { t: lang==="es"?"SPEED-TO-CONTACT MEDIANA":"MEDIAN SPEED-TO-CONTACT" },
            { t: lang==="es"?"LEAD QUALITY SCORE":"LEAD QUALITY SCORE" },
          ].map((c, i) => (
            <div key={i} className="card" style={{ padding: 14 }}>
              <div className="card-sub">{c.t}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 6 }}>
                <span style={{ fontSize: 28, fontWeight: 900, color: "var(--wm-fg-muted)" }}>—</span>
              </div>
              <div className="muted" style={{ fontSize: 11, marginTop: 4, display: "flex", alignItems: "center", gap: 5 }}>
                <Icon name="clock" size={11} /> {lang==="es"?"Pendiente ingest CRM (Zoho lead_events)":"Pending CRM ingest (Zoho lead_events)"}
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-2" style={{ gap: 16 }}>
        {/* Speed to contact x conversion */}
        <div className="card">
          <div className="card-head">
            <h3 className="card-title"><Icon name="zap" size={14} />{lang==="es"?"Velocidad de contacto vs conversión":"Speed-to-contact vs conversion"}</h3>
          </div>
          <div style={{ marginTop: 4 }}>
            {f.speedToContact.map((s,i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "100px 1fr 80px 56px", gap: 10, alignItems: "center", padding: "8px 0", borderBottom: i<f.speedToContact.length-1?"1px solid var(--op-line)":"none" }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: "var(--wm-blue)" }}>{s.bucket}</span>
                <div className="cell-bar-track" style={{ height: 8 }}>
                  <div className="cell-bar-fill" style={{ width: (s.pct/40)*100 + "%", background: i<2 ? "var(--op-green)" : i<4 ? "var(--op-amber)" : "var(--op-red)" }} />
                </div>
                <span className="muted tnum" style={{ fontSize: 11 }}>{s.pct}% {lang==="es"?"vol.":"vol."}</span>
                <b className="tnum" style={{ fontSize: 13, color: i<2?"var(--op-green)":"var(--wm-blue)", textAlign: "right" }}>{s.conv}%</b>
              </div>
            ))}
          </div>
        </div>

        {/* Quality histogram */}
        <div className="card">
          <div className="card-head">
            <h3 className="card-title"><Icon name="bar-chart-3" size={14} />{lang==="es"?"Distribución calidad de leads":"Lead quality distribution"}</h3>
          </div>
          <BarChart data={f.qualityHist.map(q=>({ label: q.bucket, value: q.count }))} height={170} format={(v)=>v} />
          <div style={{ marginTop: 8, fontSize: 11, color: "var(--wm-fg-muted)" }}>
            {lang==="es"?"Conversión ":"Conversion "}
            {f.qualityHist.map((q,i)=>(
              <span key={i}>{q.bucket}: <b style={{ color: i<2?"var(--op-red)":"var(--wm-blue)" }}>{q.conv}%</b>{i<f.qualityHist.length-1?" · ":""}</span>
            ))}
          </div>
        </div>
      </div>

      {/* By source */}
      <div className="card card--flush">
        <div style={{ padding: "14px 16px 0" }} className="card-head">
          <h3 className="card-title"><Icon name="layout-grid" size={14} />{lang==="es"?"Por fuente · funnel breakdown":"By source · funnel breakdown"}</h3>
        </div>
        <div className="table-scroll">
          <table className="table">
            <thead>
              <tr>
                <th>{lang==="es"?"Fuente":"Source"}</th>
                <th className="num">{t.common.leads}</th>
                <th className="num">{lang==="es"?"Calif.":"Qual."}</th>
                <th className="num">{t.common.qrate}</th>
                <th className="num">{t.common.crate}</th>
                <th>{lang==="es"?"Calidad":"Quality"}</th>
                <th>{lang==="es"?"Diagnóstico":"Diagnosis"}</th>
              </tr>
            </thead>
            <tbody>
              {f.bySource.map((r,i) => {
                const issue = r.qrate < 45 ? "lead" : r.crate < 6 ? "exec" : "ok";
                return (
                  <tr key={i}>
                    <td><b>{r.src}</b></td>
                    <td className="num tnum">{r.leads}</td>
                    <td className="num tnum">{r.qual}</td>
                    <td className="num"><CellBar value={r.qrate} max={100} color={r.qrate>60?"green":r.qrate>45?"amber":"red"} suffix="%" /></td>
                    <td className="num"><CellBar value={r.crate} max={15} color={r.crate>8?"green":r.crate>5?"amber":"red"} suffix="%" /></td>
                    <td><span className={"pill " + (r.qrate>60?"pill-scale":r.qrate>45?"pill-optimize":"pill-kill")}><span className="dot"/>{r.qrate>60?"A":r.qrate>45?"B":"C"}</span></td>
                    <td>
                      {issue === "lead" && <span style={{ fontSize: 11, color: "var(--op-red)" }}><b>{lang==="es"?"Calidad":"Lead"}</b> · {lang==="es"?"audiencia equivocada":"wrong audience"}</span>}
                      {issue === "exec" && <span style={{ fontSize: 11, color: "var(--op-amber)" }}><b>{lang==="es"?"Ejecución":"Execution"}</b> · {lang==="es"?"sales no cierra":"sales doesn't close"}</span>}
                      {issue === "ok" && <span style={{ fontSize: 11, color: "var(--op-green)" }}><b>{lang==="es"?"Saludable":"Healthy"}</b></span>}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      {/* Status Distribution — mirror of Zoho Analytics' lead status pie */}
      {f.statusDistribution && f.statusDistribution.length > 0 && (
        <div className="card">
          <div className="card-head">
            <h3 className="card-title"><Icon name="pie-chart" size={14} />
              {lang==="es"?"Distribución de status (digital)":"Status distribution (digital)"}</h3>
            <div className="card-sub">{lang==="es"?"En el rango seleccionado":"In selected range"}</div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,2fr)", gap: 24, alignItems: "center" }}>
            {/* Pie chart (SVG) */}
            <div style={{ display: "grid", placeItems: "center" }}>
              {(() => {
                const data = f.statusDistribution.slice(0, 10);
                const total = data.reduce((s, r) => s + r.count, 0) || 1;
                const palette = ["#1D429B","#F89B24","#1B8A5A","#B5301F","#0079C0","#C97A0E","#7F9CDF","#21274E","#8A8A8F","#A6C3E6"];
                let cumulative = 0;
                const R = 75, CX = 90, CY = 90;
                return (
                  <svg width="180" height="180" viewBox="0 0 180 180">
                    {data.map((s, i) => {
                      const frac = s.count / total;
                      const startAngle = cumulative * 2 * Math.PI - Math.PI / 2;
                      cumulative += frac;
                      const endAngle = cumulative * 2 * Math.PI - Math.PI / 2;
                      const x1 = CX + R * Math.cos(startAngle);
                      const y1 = CY + R * Math.sin(startAngle);
                      const x2 = CX + R * Math.cos(endAngle);
                      const y2 = CY + R * Math.sin(endAngle);
                      const large = frac > 0.5 ? 1 : 0;
                      const d = `M ${CX},${CY} L ${x1},${y1} A ${R},${R} 0 ${large},1 ${x2},${y2} Z`;
                      return <path key={i} d={d} fill={palette[i % palette.length]} stroke="#fff" strokeWidth="1.5" />;
                    })}
                    <circle cx={CX} cy={CY} r={32} fill="#fff" />
                    <text x={CX} y={CY-4} textAnchor="middle" fontSize="11" fontWeight="800" fill="var(--wm-blue)">{total}</text>
                    <text x={CX} y={CY+9} textAnchor="middle" fontSize="9" fill="var(--wm-fg-muted)">leads</text>
                  </svg>
                );
              })()}
            </div>
            {/* Legend */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4 }}>
              {f.statusDistribution.slice(0, 10).map((s, i) => {
                const palette = ["#1D429B","#F89B24","#1B8A5A","#B5301F","#0079C0","#C97A0E","#7F9CDF","#21274E","#8A8A8F","#A6C3E6"];
                return (
                  <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, padding: "2px 0", fontSize: 11 }}>
                    <span style={{ width: 10, height: 10, background: palette[i % palette.length], borderRadius: 2, flexShrink: 0 }} />
                    <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                      {s.status_raw}
                    </span>
                    <span style={{ fontWeight: 700, color: "var(--wm-fg)", fontVariantNumeric: "tabular-nums" }}>{s.count}</span>
                    <span style={{ color: "var(--wm-fg-muted)", fontSize: 10 }}>{s.pct}%</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ============== CREATIVES (Table / power-user style — Option B) =================
function CreativesView({ lang }) {
  const [tier, setTier] = useS1("all");
  const [product, setProduct] = useS1("all");
  const [account, setAccount] = useS1("all");
  const [decision, setDecision] = useS1("all");
  const [search, setSearch] = useS1("");
  const [sortKey, setSortKey] = useS1("cm");
  const [sortDir, setSortDir] = useS1("desc");
  const [selected, setSelected] = useS1(null);
  const [showInsights, setShowInsights] = useS1(false);
  const [expanded, setExpanded] = useS1(() => new Set());
  const [printing, setPrinting] = useS1(false);

  const toggleExpand = (id) => {
    setExpanded(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const handlePrint = () => {
    // Force every accordion body to render, wait one tick, then open browser print dialog
    setPrinting(true);
    setTimeout(() => {
      const handler = () => { setPrinting(false); window.removeEventListener("afterprint", handler); };
      window.addEventListener("afterprint", handler);
      window.print();
    }, 150);
  };

  // Distinct accounts present in the current creatives slice (alphabetical)
  const accountOptions = useM1(() => {
    const set = new Set();
    for (const cr of window.creatives) if (cr.account_name) set.add(cr.account_name);
    return [...set].sort();
  }, [window.creatives.length]);

  const filtered = useM1(() => {
    let arr = [...window.creatives];
    if (tier !== "all") {
      arr = arr.filter(cr => {
        const ct = window.creativeTypes.find(t => t.key === cr.type);
        return ct?.tier === tier;
      });
    }
    if (product !== "all") arr = arr.filter(cr => (cr.product || "").toLowerCase() === product);
    if (account !== "all") arr = arr.filter(cr => cr.account_name === account);
    if (decision !== "all") arr = arr.filter(cr => (cr.status || cr.decision || "watch") === decision);
    if (search.trim()) {
      const q = search.toLowerCase();
      arr = arr.filter(cr => (cr.name || "").toLowerCase().includes(q) || (cr.hook_es || "").toLowerCase().includes(q));
    }
    const dir = sortDir === "asc" ? 1 : -1;
    arr.sort((a, b) => {
      let av, bv;
      switch (sortKey) {
        case "name":     av = (a.name || "").toLowerCase(); bv = (b.name || "").toLowerCase(); return av < bv ? -dir : av > bv ? dir : 0;
        case "tier":     av = window.creativeTypes.find(t => t.key === a.type)?.tier || "Z"; bv = window.creativeTypes.find(t => t.key === b.type)?.tier || "Z"; return av < bv ? -dir : av > bv ? dir : 0;
        case "account":  av = (a.account_name || "").toLowerCase(); bv = (b.account_name || "").toLowerCase(); return av < bv ? -dir : av > bv ? dir : 0;
        case "product":  av = (a.product || ""); bv = (b.product || ""); return av < bv ? -dir : av > bv ? dir : 0;
        case "spend":    av = a.spend || 0; bv = b.spend || 0; break;
        case "leads":    av = a.leads || 0; bv = b.leads || 0; break;
        case "sales":    av = a.sales || 0; bv = b.sales || 0; break;
        case "cac":      av = a.cac || Infinity; bv = b.cac || Infinity; break;
        case "decision": av = (a.status || a.decision || ""); bv = (b.status || b.decision || ""); return av < bv ? -dir : av > bv ? dir : 0;
        case "cm":
        default:         av = a.cm || 0; bv = b.cm || 0; break;
      }
      return (av - bv) * dir;
    });
    return arr;
  }, [tier, product, account, decision, search, sortKey, sortDir]);

  // Status counts for the slim summary
  const counts = useM1(() => {
    const c = { scale: 0, optimize: 0, watch: 0, kill: 0 };
    for (const cr of window.creatives) {
      const st = cr.status || cr.decision || "watch";
      if (c[st] != null) c[st]++;
    }
    return c;
  }, [window.creatives.length]);

  const products = ["solar","roofing","storage","water","other"];
  const tiers = ["A+","A","B","C","D"];

  const toggleSort = (k) => {
    if (sortKey === k) setSortDir(d => d === "desc" ? "asc" : "desc");
    else { setSortKey(k); setSortDir("desc"); }
  };
  const sortArrow = (k) => sortKey !== k ? "" : (sortDir === "desc" ? " ↓" : " ↑");

  const decisionMeta = {
    scale:    { label: lang==="es"?"Escalar":"Scale",      color: "var(--op-green)",   bg: "rgba(27,138,90,0.10)" },
    optimize: { label: lang==="es"?"Optimizar":"Optimize",  color: "var(--op-amber)",   bg: "rgba(201,122,14,0.10)" },
    watch:    { label: "Watch",                             color: "var(--wm-fg-muted)",bg: "rgba(138,138,143,0.10)" },
    kill:     { label: lang==="es"?"Apagar":"Kill",         color: "var(--op-red)",     bg: "rgba(181,48,31,0.10)" },
  };

  return (
    <div className="grid" style={{ gap: 14 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Lista de <span className="wm-weight-black">creativos</span></>
              : <>Creative <span className="wm-weight-black">list</span></>}
          </h2>
          <p className="section-sub">
            {lang==="es"
              ? "Ordená y filtrá por la métrica que importa. Click en una fila para ver detalle y acciones."
              : "Sort and filter by what matters. Click a row for details and actions."}
          </p>
        </div>
      </div>

      {/* Performance summary strip — single line */}
      <div style={{
        display: "flex", alignItems: "center", gap: 18,
        padding: "10px 16px", background: "var(--wm-bg-muted)", borderRadius: 10,
        fontSize: 12, fontWeight: 700,
      }}>
        <span><b style={{ fontSize: 14, color: "var(--wm-blue)" }}>{window.creatives.length}</b> <span className="muted" style={{ fontWeight: 500 }}>{lang==="es"?"creativos":"creatives"}</span></span>
        <span style={{ width: 1, height: 18, background: "var(--op-line)" }} />
        <span style={{ color: "var(--op-green)" }}>● {counts.scale} <span className="muted" style={{ fontWeight: 500 }}>{lang==="es"?"escalando":"scaling"}</span></span>
        <span style={{ color: "var(--op-amber)" }}>● {counts.optimize} <span className="muted" style={{ fontWeight: 500 }}>{lang==="es"?"optimizar":"optimize"}</span></span>
        <span style={{ color: "var(--wm-fg-muted)" }}>● {counts.watch} <span className="muted" style={{ fontWeight: 500 }}>watch</span></span>
        <span style={{ color: "var(--op-red)" }}>● {counts.kill} <span className="muted" style={{ fontWeight: 500 }}>{lang==="es"?"para apagar":"to kill"}</span></span>
        <div style={{ flex: 1 }} />
        <button
          className="btn btn-ghost btn-sm"
          onClick={() => setShowInsights(s => !s)}
          style={{ display: "inline-flex", alignItems: "center", gap: 5 }}
        >
          <Icon name={showInsights ? "chevron-up" : "lightbulb"} size={12} />
          {lang==="es"?"Insights":"Insights"}
        </button>
      </div>

      {/* Insights accordion (collapsed by default) */}
      {showInsights && <InsightsAccordion lang={lang} />}

      {/* Filter row: search + dropdowns */}
      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8 }}>
        <input
          type="text"
          placeholder={lang==="es"?"Buscar por nombre o hook…":"Search by name or hook…"}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          style={{ flex: "1 1 220px", maxWidth: 320, padding: "6px 10px", border: "1px solid var(--op-line-strong)", borderRadius: 6, fontSize: 12, fontFamily: "var(--wm-font-sans)" }}
        />
        <select value={tier} onChange={(e)=>setTier(e.target.value)} style={selectStyle}>
          <option value="all">{lang==="es"?"Tier: Todos":"Tier: All"}</option>
          {tiers.map(ti => <option key={ti} value={ti}>Tier {ti}</option>)}
        </select>
        <select value={product} onChange={(e)=>setProduct(e.target.value)} style={selectStyle}>
          <option value="all">{lang==="es"?"Producto: Todos":"Product: All"}</option>
          {products.map(p => <option key={p} value={p} style={{ textTransform: "capitalize" }}>{p.charAt(0).toUpperCase()+p.slice(1)}</option>)}
        </select>
        <select value={account} onChange={(e)=>setAccount(e.target.value)} style={selectStyle}>
          <option value="all">{lang==="es"?"Cuenta: Todas":"Account: All"}</option>
          {accountOptions.map(a => <option key={a} value={a}>{a}</option>)}
        </select>
        <select value={decision} onChange={(e)=>setDecision(e.target.value)} style={selectStyle}>
          <option value="all">{lang==="es"?"Decisión: Todas":"Decision: All"}</option>
          <option value="scale">{lang==="es"?"Escalar":"Scale"}</option>
          <option value="optimize">{lang==="es"?"Optimizar":"Optimize"}</option>
          <option value="watch">Watch</option>
          <option value="kill">{lang==="es"?"Apagar":"Kill"}</option>
        </select>
        <div style={{ flex: 1 }} />
        <span className="muted" style={{ fontSize: 11 }}>{filtered.length} {lang==="es"?"resultados":"results"}</span>
      </div>

      {/* Grouped by campaign — collapsible accordions */}
      <div style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 11, color: "var(--wm-fg-muted)", marginBottom: -4 }}>
        <span>
          {(() => {
            const ng = new Set(filtered.map(cr => cr.campaign_id || cr.campaign_name)).size;
            return lang==="es" ? `${ng} campaña(s)` : `${ng} campaign(s)`;
          })()}
        </span>
        <div style={{ flex: 1 }} />
        <button
          className="btn btn-ghost btn-sm no-print"
          onClick={handlePrint}
          style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11 }}
          title={lang==="es"?"Abre el diálogo de impresión — desde ahí podés guardar como PDF":"Opens the print dialog — you can save as PDF from there"}
        >
          <Icon name="printer" size={12} />
          {lang==="es"?"Imprimir / Exportar PDF":"Print / Export PDF"}
        </button>
      </div>

      <CampaignGroups
        items={filtered}
        expanded={expanded}
        onToggle={toggleExpand}
        onSelect={setSelected}
        decisionMeta={decisionMeta}
        lang={lang}
        printing={printing}
      />

      {selected && <CreativeSheet cr={selected} lang={lang} onClose={() => setSelected(null)} />}
    </div>
  );
}

// ----- Renders campaigns as collapsible accordions; inside each, the creative table -----
function CampaignGroups({ items, expanded, onToggle, onSelect, decisionMeta, lang, printing }) {
  // Group creatives by campaign_id (fallback to campaign_name for legacy rows)
  const groups = window.React.useMemo(() => {
    const map = new Map();
    for (const cr of items) {
      const key = cr.campaign_id || cr.campaign_name || "(sin campaña)";
      if (!map.has(key)) {
        map.set(key, {
          key,
          campaign_name: cr.campaign_name || "(sin campaña)",
          account_name: cr.account_name,
          product: cr.product,
          items: [],
          totals: { spend: 0, leads: 0, sales: 0, cm: 0 },
        });
      }
      const g = map.get(key);
      g.items.push(cr);
      g.totals.spend += cr.spend || 0;
      g.totals.leads += cr.leads || 0;
      g.totals.sales += cr.sales || 0;
      g.totals.cm    += cr.cm || 0;
    }
    // Sort campaigns by total spend desc (most material first)
    return [...map.values()].sort((a, b) => b.totals.spend - a.totals.spend);
  }, [items]);

  if (groups.length === 0) {
    return (
      <div className="card" style={{ padding: 40, textAlign: "center", color: "var(--wm-fg-muted)" }}>
        {lang==="es"?"Sin creativos para estos filtros":"No creatives for these filters"}
      </div>
    );
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {groups.map(g => {
        const isOpen = printing || expanded.has(g.key);
        const cac = g.totals.sales > 0 ? Math.round(g.totals.spend / g.totals.sales) : null;
        return (
          <div key={g.key} className="card" style={{ padding: 0, overflow: "hidden" }}>
            {/* Accordion header — clickable to toggle */}
            <div
              onClick={() => onToggle(g.key)}
              style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "10px 14px",
                cursor: "pointer",
                background: isOpen ? "var(--wm-bg-muted)" : "transparent",
                borderBottom: isOpen ? "1px solid var(--op-line)" : "none",
                transition: "background 120ms",
              }}
            >
              <Icon name={isOpen ? "chevron-down" : "chevron-right"} size={16} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--wm-blue)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                  {g.campaign_name}
                </div>
                <div style={{ fontSize: 10, color: "var(--wm-fg-muted)", marginTop: 1 }}>
                  {g.account_name || "—"} · <span style={{ textTransform: "capitalize" }}>{g.product || "—"}</span>
                </div>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 18, fontSize: 11, color: "var(--wm-fg)" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 9px", borderRadius: 999, background: "var(--wm-blue-50)", color: "var(--wm-blue)", fontWeight: 700 }}>
                  <Icon name="image" size={11} /> {g.items.length}
                </span>
                <span><span className="muted" style={{ fontSize: 10 }}>{lang==="es"?"Gasto":"Spend"}</span> <b style={{ fontVariantNumeric: "tabular-nums" }}>{fmt.money(g.totals.spend, { compact: true })}</b></span>
                <span><span className="muted" style={{ fontSize: 10 }}>{lang==="es"?"Leads":"Leads"}</span> <b style={{ fontVariantNumeric: "tabular-nums" }}>{g.totals.leads}</b></span>
                <span><span className="muted" style={{ fontSize: 10 }}>{lang==="es"?"Ventas":"Sales"}</span> <b style={{ fontVariantNumeric: "tabular-nums", color: g.totals.sales > 0 ? "var(--op-green)" : "var(--wm-fg-muted)" }}>{g.totals.sales}</b></span>
                <span><span className="muted" style={{ fontSize: 10 }}>CAC</span> <b style={{ fontVariantNumeric: "tabular-nums" }}>{cac ? "$"+cac : "—"}</b></span>
              </div>
            </div>

            {/* Accordion body — creatives table */}
            {isOpen && (
              <div style={{ overflowX: "auto" }}>
                <table className="table" style={{ width: "100%", minWidth: 760 }}>
                  <thead>
                    <tr>
                      <th style={{ width: 56 }}></th>
                      <th>{lang==="es"?"Anuncio":"Ad"}</th>
                      <th style={{ width: 56 }}>Tier</th>
                      <th className="num" style={{ width: 80 }}>{lang==="es"?"Gasto":"Spend"}</th>
                      <th className="num" style={{ width: 70 }}>{lang==="es"?"Leads":"Leads"}</th>
                      <th className="num" style={{ width: 70 }}>{lang==="es"?"Ventas":"Sales"}</th>
                      <th className="num" style={{ width: 80 }}>CM</th>
                      <th className="num" style={{ width: 80 }}>CAC</th>
                      <th style={{ width: 100 }}>{lang==="es"?"Decisión":"Decision"}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {g.items.map(cr => {
                      const ct = window.creativeTypes.find(t => t.key === cr.type);
                      const tierColor = ct?.tier==="A+"?"var(--op-green)":ct?.tier==="A"?"var(--wm-blue)":ct?.tier==="B"?"var(--op-amber)":ct?.tier==="C"?"var(--wm-fg-muted)":"var(--op-red)";
                      const dec = cr.status || cr.decision || "watch";
                      const dm = decisionMeta[dec] || decisionMeta.watch;
                      const cmNeg = (cr.cm || 0) < 0;
                      return (
                        <tr key={cr.id} onClick={() => onSelect(cr)} style={{ cursor: "pointer" }} className="creatives-row">
                          <td style={{ padding: "6px 8px" }}>
                            <div style={{ width: 44, height: 44, borderRadius: 6, background: "var(--wm-bg-muted)", overflow: "hidden", display: "grid", placeItems: "center" }}>
                              <img src={cr.thumb} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                            </div>
                          </td>
                          <td>
                            <div style={{ fontSize: 12, fontWeight: 700, color: "var(--wm-fg)", maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                              {cr.name || cr.id}
                            </div>
                            {(cr.hook_es || cr.hook_en) && (
                              <div className="muted" style={{ fontSize: 10, maxWidth: 280, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                                "{lang==="es"?cr.hook_es:cr.hook_en}"
                              </div>
                            )}
                          </td>
                          <td>
                            <span style={{ fontSize: 9, fontWeight: 900, padding: "2px 6px", borderRadius: 3, background: tierColor, color: "white", letterSpacing: "0.04em" }}>{ct?.tier || "—"}</span>
                          </td>
                          <td className="num tnum" style={{ fontSize: 12, fontWeight: 700 }}>{fmt.money(cr.spend || 0, { compact: true })}</td>
                          <td className="num tnum" style={{ fontSize: 12 }}>{cr.leads || 0}</td>
                          <td className="num tnum" style={{ fontSize: 12, fontWeight: 700, color: (cr.sales || 0) > 0 ? "var(--op-green)" : "var(--wm-fg-muted)" }}>{cr.sales || 0}</td>
                          <td className="num tnum" style={{ fontSize: 12, fontWeight: 700, color: cmNeg ? "var(--op-red)" : (cr.cm || 0) > 0 ? "var(--wm-blue)" : "var(--wm-fg-muted)" }}>
                            {fmt.money(cr.cm || 0, { compact: true, sign: true })}
                          </td>
                          <td className="num tnum" style={{ fontSize: 12 }}>{cr.cac ? "$"+Math.round(cr.cac) : "—"}</td>
                          <td>
                            <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 10, fontWeight: 700, padding: "3px 8px", borderRadius: 999, background: dm.bg, color: dm.color }}>
                              <span style={{ width: 5, height: 5, borderRadius: "50%", background: dm.color }} />
                              {dm.label}
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

// Style helper for the filter selects
const selectStyle = {
  padding: "6px 10px", borderRadius: 6, border: "1px solid var(--op-line-strong)",
  fontSize: 11, fontWeight: 700, background: "white", fontFamily: "var(--wm-font-sans)",
  cursor: "pointer",
};

// ----- Big gallery card: image is the protagonist -----
function CreativeGalleryCard({ cr, lang, onClick }) {
  const [hover, setHover] = useS1(false);
  const ct = window.creativeTypes.find(t => t.key === cr.type);
  const tierColor = ct?.tier==="A+"?"var(--op-green)":ct?.tier==="A"?"var(--wm-blue)":ct?.tier==="B"?"var(--op-amber)":ct?.tier==="C"?"var(--wm-fg-muted)":"var(--op-red)";
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative", cursor: "pointer",
        borderRadius: 12, overflow: "hidden",
        background: "var(--wm-bg-muted)",
        transition: "transform 160ms ease, box-shadow 160ms ease",
        transform: hover ? "translateY(-2px)" : "none",
        boxShadow: hover ? "0 8px 24px rgba(33,39,78,0.12)" : "none",
      }}
    >
      {/* Big square thumbnail — fills the card */}
      <div style={{ position: "relative", aspectRatio: "1/1", background: "var(--wm-white)", display: "grid", placeItems: "center", overflow: "hidden" }}>
        <img src={cr.thumb} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />

        {/* Hover overlay: full metrics on dark gradient */}
        {hover && (
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.86) 100%)",
            display: "flex", flexDirection: "column", justifyContent: "flex-end",
            padding: 14, color: "white",
            pointerEvents: "none",
          }}>
            {(cr.hook_es || cr.hook_en) && (
              <div style={{ fontSize: 11, fontWeight: 600, opacity: 0.85, marginBottom: 8, lineHeight: 1.3, display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>
                "{lang==="es"?cr.hook_es:cr.hook_en}"
              </div>
            )}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, fontSize: 11 }}>
              <div>
                <div style={{ opacity: 0.6, fontSize: 9, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>{lang==="es"?"Gasto":"Spend"}</div>
                <b style={{ fontSize: 13, fontVariantNumeric: "tabular-nums" }}>{fmt.money(cr.spend || 0, { compact: true })}</b>
              </div>
              <div>
                <div style={{ opacity: 0.6, fontSize: 9, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>CPL</div>
                <b style={{ fontSize: 13, fontVariantNumeric: "tabular-nums" }}>{cr.cpl ? "$"+cr.cpl : "—"}</b>
              </div>
              <div>
                <div style={{ opacity: 0.6, fontSize: 9, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>{lang==="es"?"Ventas":"Sales"}</div>
                <b style={{ fontSize: 13, fontVariantNumeric: "tabular-nums" }}>{cr.sales || 0}</b>
              </div>
              <div>
                <div style={{ opacity: 0.6, fontSize: 9, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase" }}>CAC</div>
                <b style={{ fontSize: 13, fontVariantNumeric: "tabular-nums" }}>{cr.cac ? "$"+Math.round(cr.cac) : "—"}</b>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Minimal footer — name + tier·product + CM */}
      <div style={{ padding: "10px 14px" }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: "var(--wm-fg)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {cr.name || cr.hook_es || cr.id}
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 5 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 10, color: "var(--wm-fg-muted)" }}>
            <span style={{ fontSize: 8, fontWeight: 900, padding: "1px 5px", borderRadius: 3, background: tierColor, color: "white", letterSpacing: "0.04em" }}>{ct?.tier || "—"}</span>
            <span style={{ textTransform: "capitalize", fontWeight: 600 }}>{cr.product || "—"}</span>
          </span>
          <b style={{ fontSize: 12, color: (cr.cm || 0) < 0 ? "var(--op-red)" : "var(--wm-blue)", fontVariantNumeric: "tabular-nums" }}>
            {fmt.money(cr.cm || 0, { compact: true, sign: true })}
          </b>
        </div>
      </div>
    </div>
  );
}

// ----- Collapsible Insights (Playbook + Heatmap) -----
function InsightsAccordion({ lang }) {
  return (
    <div className="card" style={{ padding: 16 }}>
      <div className="card-sub" style={{ marginBottom: 10 }}>{lang==="es"?"PLAYBOOK · RANKING POR TIER":"PLAYBOOK · TIER RANKING"}</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6, marginBottom: 18 }}>
        {window.creativeTypes.map(ct => {
          const tierColor = ct.tier==="A+"?"var(--op-green)":ct.tier==="A"?"var(--wm-blue)":ct.tier==="B"?"var(--op-amber)":ct.tier==="C"?"var(--wm-fg-muted)":"var(--op-red)";
          return (
            <div key={ct.key} style={{ padding: 8, background: "var(--wm-bg-muted)", borderRadius: 8, borderLeft: `3px solid ${tierColor}` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 5, marginBottom: 3 }}>
                <span style={{ fontSize: 8, fontWeight: 900, padding: "1px 5px", borderRadius: 3, background: tierColor, color: "white" }}>{ct.tier}</span>
                <b style={{ fontSize: 11, color: "var(--wm-blue)" }}>{lang==="es"?ct.label_es:ct.label_en}</b>
              </div>
              <div className="muted" style={{ fontSize: 9, lineHeight: 1.4 }}>{lang==="es"?ct.note_es:ct.note_en}</div>
            </div>
          );
        })}
      </div>

      <div className="card-sub" style={{ marginBottom: 10 }}>{lang==="es"?"INVERSIÓN POR TIPO × ÁNGULO":"SPEND BY TYPE × ANGLE"}</div>
      <div style={{ display: "grid", gridTemplateColumns: "140px repeat(4, 1fr)", gap: 4 }}>
        <div />
        {window.heatmapAngles.map(a => (
          <div key={a} style={{ fontSize: 9, fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--wm-fg-muted)", textAlign: "center", paddingBottom: 4 }}>{a}</div>
        ))}
        {window.heatmapTypes.map(typ => {
          const ct = window.creativeTypes.find(t => t.key === typ);
          const tierColor = ct?.tier==="A+"?"var(--op-green)":ct?.tier==="A"?"var(--wm-blue)":ct?.tier==="B"?"var(--op-amber)":ct?.tier==="C"?"var(--wm-fg-muted)":"var(--op-red)";
          return (
            <React.Fragment key={typ}>
              <div style={{ fontSize: 10, fontWeight: 700, color: "var(--wm-blue)", display: "flex", alignItems: "center", gap: 5 }}>
                <span style={{ fontSize: 7, fontWeight: 900, padding: "1px 4px", borderRadius: 2, background: tierColor, color: "white" }}>{ct?.tier}</span>
                <span>{lang==="es"?ct?.label_es:ct?.label_en}</span>
              </div>
              {window.heatmapAngles.map(ang => {
                const v = window.heatmapData[typ][ang];
                return (
                  <div key={ang} className={"heat-cell " + (v == null ? "empty" : "")}
                       style={{ background: heatColor(v, -2100, 14800), fontSize: 10, padding: "6px 4px", textAlign: "center" }}>
                    {v == null ? "—" : fmt.money(v, { compact: true })}
                  </div>
                );
              })}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
}

function CreativeCard({ cr, lang, onClick, selected }) {
  const c = window.i18n[lang].common;
  return (
    <div className={"creative " + (selected?"is-selected":"")} onClick={onClick}>
      <div className="creative-thumb">
        <img src={cr.thumb} alt="" />
        <div className="creative-thumb-overlay" />
        <div className="creative-badges">
          <span className="pill pill-orange" style={{ fontSize: 9 }}><span className="dot" />{window.creativeTypes.find(t=>t.key===cr.type)?.tier || ""} · {window.creativeTypes.find(t=>t.key===cr.type)?.[lang==="es"?"label_es":"label_en"] || cr.type}</span>
        </div>
        <div className={"creative-score-badge " + (cr.score>=90?"is-top":"")}>
          <Icon name={cr.score>=90?"flame":"star"} size={11} /> {cr.score}
        </div>
        <div className="creative-headline">
          "{lang==="es"?cr.hook_es:cr.hook_en}"
        </div>
      </div>
      <div className="creative-body">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span style={{ fontSize: 10, fontWeight: 800, color: "var(--wm-fg-muted)", letterSpacing: "0.06em", textTransform: "uppercase" }}>{cr.product} · {cr.angle}</span>
          <Trend value={cr.trend} size={10} />
        </div>
        <div className="creative-stats">
          <div className="creative-stat"><span>{c.spend}</span><b>{fmt.money(cr.spend, { compact: true })}</b></div>
          <div className="creative-stat"><span>{c.cpl}</span><b>${cr.cpl}</b></div>
          <div className={"creative-stat is-cm " + (cr.cm<0?"neg":"")}><span>CM</span><b>{fmt.money(cr.cm, { compact: true, sign: true })}</b></div>
        </div>
      </div>
    </div>
  );
}

function CreativeSheet({ cr, lang, onClose }) {
  const c = window.i18n[lang].common;
  return (
    <div className="sheet-overlay" onClick={onClose}>
      <div className="sheet" onClick={e=>e.stopPropagation()}>
        <div className="sheet-head">
          <div>
            <div className="card-sub">{cr.id} · {cr.product} · {window.creativeTypes.find(t=>t.key===cr.type)?.[lang==="es"?"label_es":"label_en"] || cr.type} · {cr.angle}</div>
            <h3 style={{ fontSize: 18, color: "var(--wm-blue)", margin: "4px 0 0", fontWeight: 800, lineHeight: 1.2 }}>
              "{lang==="es"?cr.hook_es:cr.hook_en}"
            </h3>
          </div>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>
        <div className="sheet-body" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div style={{ position: "relative", aspectRatio: "1/1", maxHeight: 480, background: "#0b0f17", borderRadius: 12, overflow: "hidden" }}>
            <img
              src={cr.thumb}
              alt=""
              style={{ width: "100%", height: "100%", objectFit: "contain", display: "block" }}
            />
            <div style={{ position: "absolute", top: 14, right: 14 }}>
              <StatusPill status={cr.status} lang={lang} size="lg" />
            </div>
          </div>

          <div className="grid grid-3">
            <div className="kpi"><span className="kpi-label">{c.spend}</span><b className="kpi-value">{fmt.money(cr.spend)}</b><span className="kpi-meta">{c.leads}: {cr.leads}</span></div>
            <div className="kpi"><span className="kpi-label">{c.cpl}</span><b className="kpi-value">${cr.cpl}</b><span className="kpi-meta">Bench $62</span></div>
            <div className="kpi"><span className="kpi-label">CM</span><b className="kpi-value" style={{ color: cr.cm<0?"var(--op-red)":"var(--op-green)" }}>{fmt.money(cr.cm, { sign: true })}</b><span className="kpi-meta">Score {cr.score}/100</span></div>
          </div>

          <div className="card" style={{ padding: 12, background: "var(--wm-bg-muted)", border: "none" }}>
            <div className="card-sub" style={{ marginBottom: 8 }}>{lang==="es"?"DESGLOSE":"BREAKDOWN"}</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, fontSize: 12 }}>
              <div><span className="muted">{c.qrate}</span><br/><b className="tnum" style={{ fontSize: 16 }}>{cr.qrate}%</b></div>
              <div><span className="muted">{c.crate}</span><br/><b className="tnum" style={{ fontSize: 16 }}>{cr.crate}%</b></div>
              <div><span className="muted">{c.revenue}</span><br/><b className="tnum" style={{ fontSize: 16 }}>{fmt.money(cr.revenue)}</b></div>
              <div><span className="muted">CM/lead</span><br/><b className="tnum" style={{ fontSize: 16 }}>${(cr.cm/cr.leads).toFixed(0)}</b></div>
            </div>
          </div>

          <div>
            <div className="card-sub" style={{ marginBottom: 6 }}>{lang==="es"?"PATRÓN DETECTADO":"DETECTED PATTERN"}</div>
            <p style={{ fontSize: 13, lineHeight: 1.5, color: "var(--wm-fg)" }}>
              {lang==="es"
                ? <>Este creativo encaja en el patrón <b>{cr.type} × {cr.angle}</b>, que históricamente genera margen <b>{cr.cm > 5000 ? "alto" : cr.cm > 0 ? "medio" : "negativo"}</b> en este sub-mercado.</>
                : <>This creative fits the <b>{cr.type} × {cr.angle}</b> pattern, which historically delivers <b>{cr.cm > 5000 ? "high" : cr.cm > 0 ? "moderate" : "negative"}</b> margin in this sub-market.</>}
            </p>
          </div>
        </div>
        <div className="sheet-foot">
          <button
            className="btn btn-ghost btn-sm"
            onClick={() => window.runAction && window.runAction("duplicate", { ad_id: cr.id })}
            title={lang==="es"?"Duplicar ad (queda PAUSED)":"Duplicate ad (stays PAUSED)"}
          >
            <Icon name="copy" size={11} /> {c.duplicate}
          </button>
          <button
            className="btn btn-ghost btn-sm"
            onClick={() => window.runAction && window.runAction("pause", { ad_id: cr.id })}
            title={lang==="es"?"Pausar en Meta":"Pause in Meta"}
          >
            <Icon name="pause" size={11} /> {c.pause}
          </button>
          {cr.status === "kill"
            ? <button
                className="btn btn-kill btn-sm"
                onClick={() => window.runAction && window.runAction("pause", { ad_id: cr.id })}
              >
                <Icon name="x" size={11} /> {c.kill}
              </button>
            : <button
                className="btn btn-scale btn-sm"
                onClick={() => window.runAction && window.runAction("budget_increase", { ad_id: cr.id, percent: 50 })}
                title={lang==="es"?"Subir budget +50%":"Raise budget +50%"}
              >
                <Icon name="trending-up" size={11} /> {c.scale}
              </button>}
        </div>
      </div>
    </div>
  );
}

// ============== DECISIONS =================
function DecisionsView({ lang }) {
  const t = window.i18n[lang];
  const c = t.common;
  const [actions, setActions] = useS1({}); // id -> "scaled" | "killed" | "fixed"
  const [filter, setFilter] = useS1("all");

  const camps = useM1(() => {
    if (filter === "all") return window.campaigns;
    return window.campaigns.filter(c => c.market === filter || c.product === filter || c.channel === filter);
  }, [filter]);

  const groups = useM1(() => ({
    scale:    camps.filter(c => c.status === "scale"),
    optimize: camps.filter(c => c.status === "optimize"),
    kill:     camps.filter(c => c.status === "kill"),
  }), [camps]);

  const handleAction = async (id, action) => {
    const kindMap = {
      scaled: "budget_increase",
      killed: "pause",
      paused: "pause",
      fixed: "note",
      skipped: "note",
      duplicate: "duplicate",
    };
    const kind = kindMap[action] || "note";
    if (window.runAction) {
      const result = await window.runAction(kind, {
        campaign_id: kind === "duplicate" ? undefined : id,
        ad_id: kind === "duplicate" ? id : undefined,  // duplicate works at ad level; campaign-level dup is via Meta MCP
        message: action,
        percent: action === "scaled" ? 50 : undefined,
      });
      if (result?.cancelled) return;
    }
    setActions(prev => ({ ...prev, [id]: action }));
  };

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Decisiones <span className="wm-weight-black">automatizadas</span></>
              : <><span className="wm-weight-black">Auto-classified</span> decisions</>}
          </h2>
          <p className="section-sub">{t.headers.decisions.sub}</p>
        </div>
        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          <span className="card-sub">{lang==="es"?"Filtro:":"Filter:"}</span>
          <div className="chip-group">
            {[["all",lang==="es"?"Todo":"All"],["PR","PR"],["FL","FL"],["Solar","Solar"],["Storage","Storage"],["Roofing","Roofing"],["Water","Water"]].map(([k,l])=>(
              <button key={k} className={"chip " + (filter===k?"is-active":"")} onClick={()=>setFilter(k)}>{l}</button>
            ))}
          </div>
        </div>
      </div>

      {/* Rules summary */}
      <div className="grid grid-3" style={{ gap: 12 }}>
        <div className="card" style={{ padding: 12, borderLeft: "3px solid var(--op-green)" }}>
          <div className="card-sub" style={{ color: "var(--op-green)", fontWeight: 800 }}><Icon name="trending-up" size={11} /> {lang==="es"?"REGLA SCALE":"SCALE RULE"}</div>
          <p style={{ fontSize: 12, marginTop: 4 }}>{lang==="es"?"CM positivo · CPL bajando · ":"Positive CM · falling CPL · "}<b>CM/spend &gt; 0.4</b></p>
        </div>
        <div className="card" style={{ padding: 12, borderLeft: "3px solid var(--op-amber)" }}>
          <div className="card-sub" style={{ color: "var(--op-amber)", fontWeight: 800 }}><Icon name="settings" size={11} /> {lang==="es"?"REGLA OPTIMIZE":"OPTIMIZE RULE"}</div>
          <p style={{ fontSize: 12, marginTop: 4 }}>{lang==="es"?"Volumen ok pero ":"Volume ok but "}<b>{lang==="es"?"close rate < bench":"close rate < bench"}</b>{lang==="es"?" o CPL +20% target":" or CPL +20% target"}</p>
        </div>
        <div className="card" style={{ padding: 12, borderLeft: "3px solid var(--op-red)" }}>
          <div className="card-sub" style={{ color: "var(--op-red)", fontWeight: 800 }}><Icon name="x-octagon" size={11} /> {lang==="es"?"REGLA KILL":"KILL RULE"}</div>
          <p style={{ fontSize: 12, marginTop: 4 }}>{lang==="es"?"7+ días con ":"7+ days with "}<b>CM &lt; 0</b>{lang==="es"?" o sin leads tras $X gastados":" or no leads after $X spent"}</p>
        </div>
      </div>

      {/* Kanban */}
      <div className="kanban">
        {[["scale",c.scale,"trending-up"],["optimize",c.optimize,"settings"],["kill",c.kill,"x-octagon"]].map(([key,label,icon]) => {
          const items = groups[key] || [];
          const totalSpend = items.reduce((a,b)=>a+b.spend,0);
          const totalCm = items.reduce((a,b)=>a+b.cm,0);
          return (
            <div key={key} className={"kanban-col " + key}>
              <div className="kanban-head">
                <div className="kanban-title">
                  <Icon name={icon} size={13} />
                  {label.toUpperCase()} · {items.length}
                </div>
                <div className="kanban-spend">{fmt.money(totalSpend, { compact: true })} · CM {fmt.money(totalCm, { compact: true, sign: true })}</div>
              </div>
              {items.map(camp => (
                <DecisionCard key={camp.id} camp={camp} lang={lang} action={actions[camp.id]} onAction={handleAction} />
              ))}
              {items.length === 0 && <div className="empty">{lang==="es"?"Nada en esta categoría":"Nothing here"}</div>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DecisionCard({ camp, lang, action, onAction }) {
  const c = window.i18n[lang].common;
  const cmPerSpend = ((camp.cm / camp.spend) * 100).toFixed(0);
  return (
    <div className="k-card" style={{ opacity: action ? 0.5 : 1 }}>
      <div className="k-card-head">
        <div>
          <div className="k-card-name">{camp.name}</div>
          <div className="k-card-meta">{camp.id} · {camp.channel} · {camp.market} · {camp.runtime}d</div>
        </div>
        <StatusPill status={camp.status} lang={lang} />
      </div>
      <div className="k-card-stats">
        <div className="creative-stat"><span>{c.spend}</span><b>{fmt.money(camp.spend, { compact: true })}</b></div>
        <div className="creative-stat"><span>{c.leads}</span><b>{camp.leads}</b></div>
        <div className={"creative-stat is-cm " + (camp.cm<0?"neg":"")}><span>CM%</span><b>{cmPerSpend}%</b></div>
      </div>
      <div className="k-card-reason">
        <b>{c.reason}:</b> {lang==="es"?camp.reason_es:camp.reason_en}<br/>
        <b style={{ color: camp.status==="scale"?"var(--op-green)":camp.status==="kill"?"var(--op-red)":"var(--op-amber)" }}>→ {lang==="es"?camp.action_es:camp.action_en}</b>
      </div>
      {!action ? (
        <div className="k-card-actions">
          {camp.status === "scale" && (
            <>
              <button className="btn btn-scale btn-sm" onClick={()=>onAction(camp.id, "scaled")} title={lang==="es"?"Subir budget +50% en Meta":"Raise budget +50% in Meta"}>
                <Icon name="trending-up" size={11} /> {lang==="es"?"Escalar":"Scale"}
              </button>
              <button className="btn btn-primary btn-sm" onClick={()=>onAction(camp.id, "duplicate")} title={lang==="es"?"Duplicar campaña":"Duplicate campaign"}>
                <Icon name="copy" size={11} /> {lang==="es"?"Duplicar":"Duplicate"}
              </button>
              <button className="btn btn-ghost btn-sm" onClick={()=>onAction(camp.id, "paused")} title={lang==="es"?"Pausar en Meta":"Pause in Meta"}>
                <Icon name="pause" size={11} /> {lang==="es"?"Pausar":"Pause"}
              </button>
            </>
          )}
          {camp.status === "optimize" && (
            <>
              <button className="btn btn-fix btn-sm" onClick={()=>onAction(camp.id, "fixed")}>
                <Icon name="settings" size={11} /> {c.optimize}
              </button>
              <button className="btn btn-primary btn-sm" onClick={()=>onAction(camp.id, "duplicate")} title={lang==="es"?"Duplicar":"Duplicate"}>
                <Icon name="copy" size={11} /> {lang==="es"?"Duplicar":"Duplicate"}
              </button>
              <button className="btn btn-ghost btn-sm" onClick={()=>onAction(camp.id, "paused")}>
                <Icon name="pause" size={11} /> {lang==="es"?"Pausar":"Pause"}
              </button>
            </>
          )}
          {camp.status === "kill" && (
            <>
              <button className="btn btn-kill btn-sm" onClick={()=>onAction(camp.id, "killed")}>
                <Icon name="x" size={11} /> {lang==="es"?"Pausar":"Pause"}
              </button>
              <button className="btn btn-ghost btn-sm" onClick={()=>onAction(camp.id, "skipped")}>
                {lang==="es"?"Revisar":"Review"}
              </button>
            </>
          )}
          {(camp.status === "watch" || !["scale","optimize","kill"].includes(camp.status)) && (
            <>
              <button className="btn btn-scale btn-sm" onClick={()=>onAction(camp.id, "scaled")}>
                <Icon name="trending-up" size={11} /> {lang==="es"?"Escalar":"Scale"}
              </button>
              <button className="btn btn-primary btn-sm" onClick={()=>onAction(camp.id, "duplicate")}>
                <Icon name="copy" size={11} /> {lang==="es"?"Duplicar":"Duplicate"}
              </button>
              <button className="btn btn-ghost btn-sm" onClick={()=>onAction(camp.id, "paused")}>
                <Icon name="pause" size={11} /> {lang==="es"?"Pausar":"Pause"}
              </button>
            </>
          )}
        </div>
      ) : (
        <div style={{ fontSize: 11, fontWeight: 800, color: "var(--wm-fg-muted)", padding: "4px 0 0" }}>
          <Icon name="check" size={11} /> {action.toUpperCase()} · {c.now}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { OverviewView, FunnelView, CreativesView, DecisionsView });