/* global React, window */
// =====================================================================
// Views part 2: Products, Market, Alerts
// =====================================================================

const { useState: useS2, useMemo: useM2 } = React;

// ============== PRODUCTS =================
function ProductsView({ lang }) {
  const t = window.i18n[lang];
  const c = t.common;
  const products = window.products;
  const totalRev = products.reduce((a,b)=>a+b.revenue,0);
  const totalCm = products.reduce((a,b)=>a+b.cm,0);
  const totalSpend = products.reduce((a,b)=>a+b.spend,0);

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Dónde se genera <span className="wm-weight-black">la utilidad real</span></>
              : <>Where the <span className="wm-weight-black">real profit</span> happens</>}
          </h2>
          <p className="section-sub">{t.headers.products.sub}</p>
        </div>
      </div>

      {/* Top: 4 product cards */}
      <div className="grid grid-4" style={{ gap: 14 }}>
        {products.map(p => (
          <div key={p.id} className="card" style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div>
                <div className="card-sub">{p.name.toUpperCase()}</div>
                <div style={{ fontSize: 22, fontWeight: 900, color: "var(--wm-blue)", fontVariantNumeric: "tabular-nums", lineHeight: 1.05, marginTop: 2 }}>
                  <AnimatedNumber value={p.cm} format="moneyk" />
                </div>
                <div className="muted" style={{ fontSize: 11 }}>CM · {lang==="es"?"margen %":"margin %"} <b style={{ color: "var(--wm-orange-600)" }}>{p.margin}%</b></div>
              </div>
              <div style={{ width: 56, height: 56, background: "var(--wm-bg-muted)", borderRadius: 10, display: "grid", placeItems: "center", overflow: "hidden", flexShrink: 0 }}>
                <img src={p.thumb} alt="" style={{ maxWidth: "82%", maxHeight: "82%" }} />
              </div>
            </div>
            <div className="divider" style={{ margin: "2px 0" }} />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, fontSize: 11 }}>
              <div><span className="muted">{c.revenue}</span><br/><b className="tnum" style={{ fontSize: 13 }}>{fmt.money(p.revenue, { compact: true })}</b></div>
              <div><span className="muted">{c.spend}</span><br/><b className="tnum" style={{ fontSize: 13 }}>{fmt.money(p.spend, { compact: true })}</b></div>
              <div><span className="muted">CAC</span><br/><b className="tnum" style={{ fontSize: 13 }}>{fmt.money(p.cac)}</b></div>
              <div><span className="muted">{c.leads}</span><br/><b className="tnum" style={{ fontSize: 13 }}>{p.leads}</b></div>
            </div>
            <div className="kpi-bar"><span style={{ width: p.share + "%", background: p.share>40?"var(--wm-orange)":"var(--wm-blue)" }} /></div>
            <div className="muted" style={{ fontSize: 10 }}>{p.share}% {lang==="es"?"del CM total":"of total CM"}</div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-23" style={{ gap: 16 }}>
        {/* Stacked bar / waterfall */}
        <div className="card">
          <div className="card-head">
            <h3 className="card-title"><Icon name="bar-chart-3" size={14} />{lang==="es"?"Spend vs Ingresos vs CM":"Spend vs Revenue vs CM"}</h3>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 8 }}>
            {products.map(p => {
              const maxRev = Math.max(...products.map(x=>x.revenue));
              return (
                <div key={p.id}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                    <b style={{ fontSize: 13, color: "var(--wm-blue)" }}>{p.name}</b>
                    <span className="muted tnum" style={{ fontSize: 11 }}>
                      {fmt.money(p.spend, { compact: true })} → {fmt.money(p.revenue, { compact: true })} · CM <b style={{ color: "var(--op-green)" }}>{fmt.money(p.cm, { compact: true })}</b>
                    </span>
                  </div>
                  <div style={{ position: "relative", height: 24, background: "var(--wm-bg-muted)", borderRadius: 6, overflow: "hidden" }}>
                    <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: (p.spend/maxRev)*100 + "%", background: "var(--wm-blue-200)" }} />
                    <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: (p.revenue/maxRev)*100 + "%", background: "linear-gradient(90deg, var(--wm-blue) 0%, var(--wm-blue-vibrant) 100%)", opacity: 0.4 }} />
                    <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: (p.cm/maxRev)*100 + "%", background: "var(--wm-orange)" }} />
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{ marginTop: 14, display: "flex", gap: 14, fontSize: 11, color: "var(--wm-fg-muted)" }}>
            <span><span style={{ display: "inline-block", width: 12, height: 8, background: "var(--wm-blue-200)", borderRadius: 2, marginRight: 4 }} />{c.spend}</span>
            <span><span style={{ display: "inline-block", width: 12, height: 8, background: "var(--wm-blue)", opacity: 0.4, borderRadius: 2, marginRight: 4 }} />{c.revenue}</span>
            <span><span style={{ display: "inline-block", width: 12, height: 8, background: "var(--wm-orange)", borderRadius: 2, marginRight: 4 }} />{lang==="es"?"Margen contrib.":"Contribution"}</span>
          </div>
        </div>

        {/* Totals */}
        <div className="card" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <h3 className="card-title"><Icon name="dollar-sign" size={14} />{lang==="es"?"Portfolio total":"Portfolio total"}</h3>
          <div style={{ padding: 14, background: "var(--wm-blue-900)", borderRadius: 12, color: "var(--wm-white)" }}>
            <div className="profit-label" style={{ color: "rgba(255,255,255,0.55)" }}>{lang==="es"?"INGRESOS":"REVENUE"}</div>
            <div style={{ fontSize: 30, fontWeight: 900, fontVariantNumeric: "tabular-nums", lineHeight: 1 }}>{fmt.money(totalRev, { compact: true })}</div>
            <div style={{ marginTop: 6, fontSize: 12, opacity: 0.75 }}>CM <b style={{ color: "var(--wm-orange)" }}>{fmt.money(totalCm, { compact: true })}</b> ({((totalCm/totalRev)*100).toFixed(1)}%)</div>
          </div>
          <Donut value={(totalCm/totalRev)*100} max={20} size={110} stroke={12} color="var(--wm-orange)" label={((totalCm/totalRev)*100).toFixed(1)+"%"} sub={lang==="es"?"margen efectivo":"effective margin"} />
          <div className="divider" />
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, fontSize: 11 }}>
            <div><span className="muted">ROAS</span><br/><b className="tnum" style={{ fontSize: 16, color: "var(--wm-blue)" }}>{(totalRev/totalSpend).toFixed(2)}x</b></div>
            <div><span className="muted">CAC {lang==="es"?"medio":"avg"}</span><br/><b className="tnum" style={{ fontSize: 16, color: "var(--wm-blue)" }}>{(() => { const s = products.reduce((a,b)=>a+(Number(b.sales)||Number(b.wins)||0),0); return s>0 ? fmt.money(totalSpend / s) : "—"; })()}</b></div>
          </div>
        </div>
      </div>

      {/* CM by campaign / message — drilldown table */}
      <div className="card card--flush">
        <div style={{ padding: "14px 16px 0" }} className="card-head">
          <h3 className="card-title"><Icon name="table" size={14} />{lang==="es"?"Profit por campaña — top 10":"Profit by campaign — top 10"}</h3>
          <span className="muted" style={{ fontSize: 11 }}>{lang==="es"?"Ordenado por CM":"Sorted by CM"}</span>
        </div>
        <div className="table-scroll">
          <table className="table">
            <thead>
              <tr>
                <th>{c.campaign}</th>
                <th>{lang==="es"?"Producto":"Product"}</th>
                <th>{lang==="es"?"Mercado":"Market"}</th>
                <th className="num">{c.spend}</th>
                <th className="num">{c.leads}</th>
                <th className="num">{lang==="es"?"Ventas":"Sales"}</th>
                <th className="num">CAC</th>
                <th className="num">CM</th>
                <th className="num">CM %</th>
                <th>{c.status}</th>
              </tr>
            </thead>
            <tbody>
              {[...window.campaigns].sort((a,b)=>b.cm-a.cm).slice(0,12).map(camp => {
                const cac = camp.spend / Math.max(camp.sales, 1);
                const cmPct = ((camp.cm / camp.spend) * 100).toFixed(0);
                return (
                  <tr key={camp.id} className={"tr-signal " + camp.status}>
                    <td><a>{camp.name}</a><br/><span className="muted" style={{ fontSize: 10 }}>{camp.id} · {camp.channel}</span></td>
                    <td><span className="pill pill-watch">{camp.product}</span></td>
                    <td><b>{camp.market}</b></td>
                    <td className="num tnum">{fmt.money(camp.spend, { compact: true })}</td>
                    <td className="num tnum">{camp.leads}</td>
                    <td className="num tnum">{camp.sales}</td>
                    <td className="num tnum">{fmt.money(cac)}</td>
                    <td className="num tnum" style={{ color: camp.cm<0?"var(--op-red)":"var(--op-green)", fontWeight: 800 }}>{fmt.money(camp.cm, { sign: true, compact: true })}</td>
                    <td className="num"><CellBar value={Math.max(-50, Math.min(150, parseInt(cmPct)))} max={150} color={camp.cm>0?"green":"red"} suffix="%" /></td>
                    <td><StatusPill status={camp.status} lang={lang} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ============== MARKET =================
function MarketView({ lang }) {
  const t = window.i18n[lang];
  const [filter, setFilter] = useS2("all");

  const filtered = useM2(() => {
    if (filter === "all") return window.competitors;
    return window.competitors.filter(c => c.category === filter);
  }, [filter]);

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Lo que <span className="wm-weight-black">la competencia</span> está empujando</>
              : <>What <span className="wm-weight-black">the competition</span> is pushing</>}
          </h2>
          <p className="section-sub">{t.headers.market.sub}</p>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, fontWeight: 800, color: "#b56a00", background: "var(--op-amber-50,#FCF1DE)", padding: "4px 10px", borderRadius: 9 }}>
            <Icon name="alert-triangle" size={12} /> {lang==="es"?"DEMO · sin fuente live de inteligencia competitiva":"DEMO · no live competitive-intel source"}
          </span>
        </div>
      </div>
      <div style={{ padding: "10px 14px", background: "var(--op-amber-50,#FCF1DE)", border: "1px solid var(--wm-orange,#F89B24)", borderRadius: 10, fontSize: 12, lineHeight: 1.5, color: "#7a4a00" }}>
        <b>{lang==="es"?"Nota:":"Note:"}</b> {lang==="es"
          ? "Las cifras de esta vista (mix de mensaje, spend de competidores, tendencias) son ilustrativas — aún no hay un pipeline live de inteligencia competitiva conectado a windmar-marketing. No usar para decisiones hasta integrar la fuente."
          : "Figures on this view (message mix, competitor spend, trends) are illustrative — no live competitive-intel pipeline is wired to windmar-marketing yet. Do not use for decisions until a source is integrated."}
      </div>

      {/* Message mix */}
      <div className="grid grid-cols-32" style={{ gap: 16 }}>
        <div className="card">
          <div className="card-head">
            <h3 className="card-title"><Icon name="message-square" size={14} />{lang==="es"?"Mensaje dominante en el mercado":"Dominant messaging across market"}</h3>
            <span className="muted" style={{ fontSize: 11 }}>PR + FL · <span style={{ color: "#b56a00", fontWeight: 700 }}>{lang==="es"?"demo":"demo"}</span></span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginTop: 6 }}>
            {window.messageMix.map(m => (
              <div key={m.cat} style={{ padding: 14, background: "var(--wm-bg-muted)", borderRadius: 12 }}>
                <div className="card-sub">{(lang==="es"?m.es:m.cat).toUpperCase()}</div>
                <div style={{ fontSize: 28, fontWeight: 900, color: "var(--wm-blue)", lineHeight: 1, marginTop: 4 }}>{m.pct}%</div>
                <div style={{ marginTop: 4 }}><Trend value={m.change} /></div>
                <div className="kpi-bar" style={{ marginTop: 8 }}>
                  <span style={{ width: (m.pct/40)*100 + "%", background: m.cat==="Fear" ? "var(--op-red)" : m.cat==="Savings" ? "var(--op-green)" : "var(--wm-blue)" }} />
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14, padding: "10px 14px", background: "rgba(248,155,36,0.10)", borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}>
            <b style={{ color: "var(--wm-orange-600)" }}>{lang==="es"?"Tendencia clave:":"Key trend:"}</b>{" "}
            {lang==="es"
              ? <>El mensaje de <b>miedo (apagones, huracanes)</b> sube +12% en 30 días — Generac PR y Máximo Solar lo están aumentando agresivamente.</>
              : <>"<b>Fear</b> messaging (outages, hurricanes) is up +12% in 30 days — Generac PR and Máximo Solar are leaning in aggressively.</>}
          </div>
        </div>

        <div className="card">
          <h3 className="card-title"><Icon name="trending-up" size={14} />{lang==="es"?"Spend competidores · 30d":"Competitor spend · 30d"}</h3>
          <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 8 }}>
            {[...window.competitors].sort((a,b)=>b.spend-a.spend).slice(0,8).map(c => (
              <div key={c.id} style={{ display: "grid", gridTemplateColumns: "120px 1fr 64px 48px", gap: 8, alignItems: "center" }}>
                <span style={{ fontSize: 11, fontWeight: 700, color: "var(--wm-fg)" }}>{c.brand}</span>
                <div className="cell-bar-track" style={{ height: 6 }}>
                  <div className="cell-bar-fill" style={{ width: (c.spend/220000)*100 + "%", background: c.brand.includes("Tesla")?"var(--wm-blue-900)":"var(--wm-blue)" }} />
                </div>
                <span className="tnum muted" style={{ fontSize: 11, textAlign: "right" }}>{fmt.money(c.spend, { compact: true })}</span>
                <Trend value={c.change} size={10} />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Filter */}
      <div className="card card--tight" style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        <span className="card-sub">{lang==="es"?"Categoría:":"Category:"}</span>
        {[["all",lang==="es"?"Todos":"All"],["Savings",lang==="es"?"Ahorro":"Savings"],["Fear",lang==="es"?"Miedo":"Fear"],["Independence",lang==="es"?"Independencia":"Independence"],["Financing",lang==="es"?"Financiamiento":"Financing"]].map(([k,l]) => (
          <button key={k} className={"chip " + (filter===k?"is-active":"")} onClick={()=>setFilter(k)}>{l}</button>
        ))}
        <div style={{ flex: 1 }} />
        <span className="muted" style={{ fontSize: 11 }}>{filtered.length} {lang==="es"?"anuncios":"ads"}</span>
      </div>

      {/* Competitor ads grid */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {filtered.map(co => (
          <div key={co.id} className="comp-ad">
            <div className="comp-ad-poster" style={{ background: co.bg }}>
              <div className="comp-ad-brand">{co.emoji ? co.emoji + " " : ""}{co.brand}</div>
              <div className="comp-ad-headline">{co.headline}</div>
              {co.meta_ads_library_url ? (
                <a
                  className="comp-ad-cta"
                  href={co.meta_ads_library_url}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ textDecoration: "none", cursor: "pointer" }}
                  title={lang==="es"?"Abrir Meta Ads Library en pestaña nueva":"Open Meta Ads Library in new tab"}
                >
                  {lang==="es"?"Ver ads en Meta ↗":"View ads on Meta ↗"}
                </a>
              ) : (
                <div className="comp-ad-cta">{co.cta}</div>
              )}
            </div>
            <div className="comp-ad-foot">
              <div className="comp-ad-tags">
                <span className="pill pill-watch" style={{ fontSize: 10 }}>{co.category}</span>
                {co.ads_meta > 0 && (
                  <span className="pill pill-neutral" style={{ fontSize: 10 }}>{co.ads_meta} {lang==="es"?"ads activos":"active ads"}</span>
                )}
              </div>
              <div className="comp-ad-meta">
                {co.spend > 0 ? (
                  <span><b>{fmt.money(co.spend, { compact: true })}</b> {lang==="es"?"Google/mes":"Google/mo"}</span>
                ) : (
                  <span style={{ color: "var(--wm-fg-muted)" }}>—</span>
                )}
                {co.change !== 0 && <Trend value={co.change} size={10} />}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============== ALERTS =================
function AlertsView({ lang }) {
  const t = window.i18n[lang];
  const c = t.common;
  const [resolved, setResolved] = useS2(new Set());
  const [filter, setFilter] = useS2("all");

  const filtered = useM2(() => {
    if (filter === "all") return window.alerts;
    return window.alerts.filter(a => a.sev === filter);
  }, [filter]);

  const counts = useM2(() => ({
    critical: window.alerts.filter(a => a.sev === "critical").length,
    high:     window.alerts.filter(a => a.sev === "high").length,
    info:     window.alerts.filter(a => a.sev === "info").length,
    good:     window.alerts.filter(a => a.sev === "good").length,
  }), []);

  const handleResolve = (id) => {
    setResolved(prev => new Set([...prev, id]));
  };

  const handleAction = async (alert) => {
    if (!window.runAction || !alert.action_kind) {
      // Fall back to just marking resolved locally
      handleResolve(alert.id);
      return;
    }
    const result = await window.runAction(alert.action_kind, {
      ad_id: alert.ad_id || null,
      campaign_id: alert.campaign_id || null,
      alert_id: alert.id,
    });
    if (result && (result.status === "executed" || result.status === "pending" || result.status === "logged")) {
      handleResolve(alert.id);
    }
  };

  const handleDismiss = async (alert) => {
    if (window.runAction) {
      await window.runAction("note", {
        alert_id: alert.id,
        ad_id: alert.ad_id || null,
        campaign_id: alert.campaign_id || null,
        message: "Dismissed from dashboard",
      });
    }
    handleResolve(alert.id);
  };

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Lo que <span className="wm-weight-black">tienes que hacer</span> ahora</>
              : <>What you should <span className="wm-weight-black">do right now</span></>}
          </h2>
          <p className="section-sub">{t.headers.alerts.sub}</p>
        </div>
      </div>

      {/* Severity tally */}
      <div className="grid grid-4" style={{ gap: 12 }}>
        <button className={"card kpi " + (filter==="critical"?"is-selected-ring":"")} style={{ cursor: "pointer", borderLeft: "3px solid var(--op-red)", padding: 14 }} onClick={()=>setFilter(filter==="critical"?"all":"critical")}>
          <div className="kpi-label" style={{ color: "var(--op-red)" }}>{lang==="es"?"CRÍTICAS":"CRITICAL"}</div>
          <div className="kpi-value" style={{ color: "var(--op-red)" }}>{counts.critical}</div>
          <div className="kpi-meta">{lang==="es"?"Acción inmediata":"Act now"}</div>
        </button>
        <button className={"card kpi " + (filter==="high"?"is-selected-ring":"")} style={{ cursor: "pointer", borderLeft: "3px solid var(--op-amber)", padding: 14 }} onClick={()=>setFilter(filter==="high"?"all":"high")}>
          <div className="kpi-label" style={{ color: "var(--op-amber)" }}>{lang==="es"?"ALTAS":"HIGH"}</div>
          <div className="kpi-value" style={{ color: "var(--op-amber)" }}>{counts.high}</div>
          <div className="kpi-meta">{lang==="es"?"Hoy":"Today"}</div>
        </button>
        <button className={"card kpi " + (filter==="info"?"is-selected-ring":"")} style={{ cursor: "pointer", borderLeft: "3px solid var(--wm-blue)", padding: 14 }} onClick={()=>setFilter(filter==="info"?"all":"info")}>
          <div className="kpi-label" style={{ color: "var(--wm-blue)" }}>{lang==="es"?"INSIGHTS":"INSIGHTS"}</div>
          <div className="kpi-value" style={{ color: "var(--wm-blue)" }}>{counts.info}</div>
          <div className="kpi-meta">{lang==="es"?"Para revisar":"Review"}</div>
        </button>
        <button className={"card kpi " + (filter==="good"?"is-selected-ring":"")} style={{ cursor: "pointer", borderLeft: "3px solid var(--op-green)", padding: 14 }} onClick={()=>setFilter(filter==="good"?"all":"good")}>
          <div className="kpi-label" style={{ color: "var(--op-green)" }}>{lang==="es"?"BUENAS NOTICIAS":"GOOD NEWS"}</div>
          <div className="kpi-value" style={{ color: "var(--op-green)" }}>{counts.good}</div>
          <div className="kpi-meta">{lang==="es"?"Logros":"Wins"}</div>
        </button>
      </div>

      {/* Alerts list */}
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {filtered.map(a => {
          const isResolved = resolved.has(a.id);
          return (
            <div key={a.id} className={"alert sev-" + a.sev + (isResolved?" is-resolved":"")}>
              <div className="alert-icon"><Icon name={a.icon} size={20} /></div>
              <div className="alert-body">
                <div className="alert-title">
                  {lang==="es"?a.title_es:a.title_en}
                  <span className="alert-time">· {a.time}</span>
                </div>
                <div className="alert-msg" dangerouslySetInnerHTML={{
                  __html: (lang==="es"?a.msg_es:a.msg_en).replace(/\*\*(.+?)\*\*/g,"<b>$1</b>")
                }} />
                <div className="alert-msg" style={{ fontSize: 11, marginTop: 2, color: "var(--wm-fg-muted)" }}>
                  <b style={{ color: a.sev==="critical"?"var(--op-red)":a.sev==="high"?"var(--op-amber)":a.sev==="good"?"var(--op-green)":"var(--wm-blue)" }}>
                    → {lang==="es"?a.impact_es:a.impact_en}
                  </b>
                </div>
              </div>
              <div className="alert-actions">
                {!isResolved ? (
                  <>
                    <button
                      className={"btn btn-sm " + (a.sev==="critical"?"btn-kill":a.sev==="high"?"btn-fix":a.sev==="good"?"btn-scale":"btn-primary")}
                      onClick={()=>handleAction(a)}
                      disabled={!a.action_kind}
                      title={!a.action_kind ? (lang==="es"?"Sin acción asociada":"No action wired") : ""}
                    >
                      {lang==="es" ? (a.action_es || "Sin acción") : (a.action_en || "No action")}
                    </button>
                    <button className="btn btn-ghost btn-sm" onClick={()=>handleDismiss(a)}>{lang==="es"?"Ignorar":"Dismiss"}</button>
                  </>
                ) : (
                  <span style={{ fontSize: 12, fontWeight: 800, color: "var(--op-green)", display: "flex", alignItems: "center", gap: 4 }}>
                    <Icon name="check-circle-2" size={14} /> {lang==="es"?"Resuelto":"Resolved"}
                  </span>
                )}
              </div>
            </div>
          );
        })}
        {filtered.length === 0 && <div className="empty">{lang==="es"?"Sin alertas en esta categoría":"No alerts in this category"}</div>}
      </div>
    </div>
  );
}

// ============== TRACKING (Leads sin UTMs) =================
function TrackingView({ lang }) {
  const rows = window.leadsNoUtms || [];
  const totals = useM2(() => {
    return rows.reduce((acc, r) => {
      acc.total++;
      if (r.missing.utm_source) acc.no_source++;
      if (r.missing.utm_medium) acc.no_medium++;
      if (r.missing.utm_campaign) acc.no_campaign++;
      if (r.missing.utm_content) acc.no_content++;
      if (r.missing.utm_term) acc.no_term++;
      if (r.invalid.utm_source) acc.bad_source++;
      if (r.invalid.utm_medium) acc.bad_medium++;
      return acc;
    }, { total: 0, no_source: 0, no_medium: 0, no_campaign: 0, no_content: 0, no_term: 0, bad_source: 0, bad_medium: 0 });
  }, [rows]);

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Leads sin <span className="wm-weight-black">trackeo</span></>
              : <>Leads <span className="wm-weight-black">without tracking</span></>}
          </h2>
          <p className="section-sub">
            {lang==="es"
              ? "Lead_Source digital pero UTMs faltantes o inválidos. Estos no entran en las métricas estrictas."
              : "Digital Lead_Source but missing or invalid UTMs. These don't count in strict metrics."}
          </p>
        </div>
      </div>

      {/* Tally per UTM gap */}
      <div className="grid grid-4" style={{ gap: 12 }}>
        <div
          className="kpi"
          onClick={() => window.openDrilldown && window.openDrilldown("leads_no_utms", lang==="es"?"Leads sin UTMs":"Leads without UTMs", totals.total)}
          style={{ cursor: window.openDrilldown ? "pointer" : "default" }}
          title={lang==="es"?"Click → ver lista":"Click → see list"}
        >
          <div className="kpi-label">{lang==="es"?"TOTAL SIN TRACKEO":"TOTAL UNTRACKED"} ↗</div>
          <div className="kpi-value">{totals.total}</div>
          <div className="kpi-meta">{lang==="es"?"En el rango seleccionado":"In selected range"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">UTM_Source</div>
          <div className="kpi-value">{totals.no_source + totals.bad_source}</div>
          <div className="kpi-meta">{totals.no_source} {lang==="es"?"faltan":"missing"} · {totals.bad_source} {lang==="es"?"inválidos":"invalid"}</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">UTM_Medium</div>
          <div className="kpi-value">{totals.no_medium + totals.bad_medium}</div>
          <div className="kpi-meta">{totals.no_medium} {lang==="es"?"faltan":"missing"} · {totals.bad_medium} ≠ paid_social</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">{lang==="es"?"UTM_Campaign/Content/Term":"UTM_C/C/T"}</div>
          <div className="kpi-value">{totals.no_campaign + totals.no_content + totals.no_term}</div>
          <div className="kpi-meta">{lang==="es"?"faltantes acumulados":"missing total"}</div>
        </div>
      </div>

      {/* List of leads */}
      <div className="card">
        <div className="card-head">
          <h3 className="card-title">{lang==="es"?"Lista detallada":"Detailed list"}</h3>
          <div className="card-sub">{rows.length} {lang==="es"?"leads":"leads"}</div>
        </div>
        <div className="table-scroll" style={{ maxHeight: 520 }}>
          <table className="table">
            <thead><tr>
              <th>{lang==="es"?"Lead":"Lead"}</th>
              <th>{lang==="es"?"Fuente":"Source"}</th>
              <th>{lang==="es"?"Status":"Status"}</th>
              <th>{lang==="es"?"Gap":"Gap"}</th>
              <th className="num">{lang==="es"?"Creado":"Created"}</th>
              <th></th>
            </tr></thead>
            <tbody>
              {rows.slice(0, 100).map((l, i) => {
                const gaps = [];
                if (l.missing.utm_source) gaps.push("UTM_Source");
                if (l.missing.utm_medium) gaps.push("UTM_Medium");
                if (l.missing.utm_campaign) gaps.push("UTM_Campaign");
                if (l.missing.utm_content) gaps.push("UTM_Content");
                if (l.missing.utm_term) gaps.push("UTM_Term");
                if (l.invalid.utm_source) gaps.push("Source≠FB/Google");
                if (l.invalid.utm_medium) gaps.push("Medium≠paid_social");
                return (
                  <tr key={i}>
                    <td><b>{(l.first_name || "") + " " + (l.last_name || "")}</b><br/><span className="muted" style={{ fontSize: 11 }}>{l.email || l.phone || "—"}</span></td>
                    <td><span className="pill pill-watch" style={{ fontSize: 10 }}>{l.source}</span></td>
                    <td><span className="pill pill-neutral" style={{ fontSize: 10 }}>{l.status}</span></td>
                    <td>{gaps.map((g, j) => (
                      <span key={j} className="pill pill-kill" style={{ fontSize: 9, marginRight: 3 }}>{g}</span>
                    ))}</td>
                    <td className="num">{(l.created_at_zoho || "").slice(0, 10)}</td>
                    <td>
                      {l.zoho_id && (
                        <a
                          href={`https://crm.zoho.com/crm/EntityInfo.do?module=Leads&id=${l.zoho_id}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="btn btn-ghost btn-sm"
                          style={{ textDecoration: "none", fontSize: 10 }}
                          title="Abrir en Zoho CRM"
                        >
                          CRM ↗
                        </a>
                      )}
                    </td>
                  </tr>
                );
              })}
              {rows.length === 0 && (
                <tr><td colSpan="6" className="empty">{lang==="es"?"Sin leads sin trackeo en este rango ✓":"No untracked leads in this range ✓"}</td></tr>
              )}
            </tbody>
          </table>
        </div>
        {rows.length > 100 && (
          <div className="muted" style={{ fontSize: 11, marginTop: 8, textAlign: "center" }}>
            {lang==="es"?`Mostrando 100 de ${rows.length}. Exportar todo: action history → Supabase`:`Showing 100 of ${rows.length}.`}
          </div>
        )}
      </div>
    </div>
  );
}

// ============== CAMPAIGNS (Leads por campaña) =================
function CampaignsView({ lang }) {
  const c = window.i18n[lang].common;
  const rows = window.leadsByCampaign || [];
  const [sort, setSort] = useS2("total");

  const sorted = useM2(() => {
    return [...rows].sort((a, b) => {
      if (sort === "won") return b.won - a.won;
      if (sort === "appt") return b.appt_held - a.appt_held;
      if (sort === "dq") return b.disqualified - a.disqualified;
      return b.total - a.total;
    });
  }, [rows, sort]);

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Leads <span className="wm-weight-black">por campaña</span></>
              : <>Leads <span className="wm-weight-black">by campaign</span></>}
          </h2>
          <p className="section-sub">
            {lang==="es"
              ? "Match UTM_Campaign ↔ Meta campaign external_id. Solo digital estricto (Lead_Source + UTMs)."
              : "UTM_Campaign ↔ Meta campaign external_id match. Strict digital only (Lead_Source + UTMs)."}
          </p>
        </div>
        <div className="chip-group">
          {[["total", lang==="es"?"Volumen":"Volume"], ["won","Ventas"], ["appt", lang==="es"?"Citas":"Appts"], ["dq", "DQ"]].map(([k, l]) => (
            <button key={k} className={"chip " + (sort===k?"is-active":"")} onClick={()=>setSort(k)}>{l}</button>
          ))}
        </div>
      </div>

      <div className="card card--flush">
        <div className="table-scroll" style={{ maxHeight: 640 }}>
          <table className="table">
            <thead><tr>
              <th>{lang==="es"?"Campaña":"Campaign"}</th>
              <th className="num">{lang==="es"?"Total":"Total"}</th>
              <th className="num">{lang==="es"?"Nuevos":"New"}</th>
              <th className="num">{lang==="es"?"Contactados":"Contacted"}</th>
              <th className="num">{lang==="es"?"Cita Coord.":"Appt Set"}</th>
              <th className="num">{lang==="es"?"Cita Ejec.":"Appt Held"}</th>
              <th className="num">{lang==="es"?"Ventas":"Won"}</th>
              <th className="num">DQ</th>
              <th className="num">{lang==="es"?"Conv":"Conv"}</th>
            </tr></thead>
            <tbody>
              {sorted.map((r, i) => {
                const isUnknown = !r.campaign_id;
                const conv = r.total > 0 ? ((r.won / r.total) * 100).toFixed(1) : "0";
                return (
                  <tr key={i} className={"tr-signal " + (r.won > 0 ? "scale" : r.disqualified / r.total > 0.5 ? "kill" : "")}>
                    <td>
                      <b style={{ fontSize: 12 }}>{(r.campaign_name || r.utm_campaign || "?").slice(0, 60)}</b>
                      {isUnknown && (
                        <span className="pill pill-orange" style={{ fontSize: 9, marginLeft: 6 }}>
                          {lang==="es"?"sin match Meta":"no Meta match"}
                        </span>
                      )}
                      <br/><span className="muted" style={{ fontSize: 10, fontFamily: "var(--op-mono)" }}>{r.utm_campaign}</span>
                    </td>
                    <td className="num"><b>{r.total}</b></td>
                    <td className="num">{r.new}</td>
                    <td className="num">{r.contacted + r.qualified + r.working}</td>
                    <td className="num">{r.appt_set}</td>
                    <td className="num">{r.appt_held}</td>
                    <td className="num"><b style={{ color: r.won > 0 ? "var(--op-green)" : "var(--wm-fg-muted)" }}>{r.won}</b></td>
                    <td className="num"><span style={{ color: "var(--op-red)" }}>{r.disqualified}</span></td>
                    <td className="num">{conv}%</td>
                  </tr>
                );
              })}
              {sorted.length === 0 && (
                <tr><td colSpan="9" className="empty">{lang==="es"?"Sin data en este rango":"No data in this range"}</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// ============== UNKNOWNS (sales sin Lead_Source) =================
function UnknownsView({ lang }) {
  const rows = window.unknownSales || [];
  const matched = rows.filter(r => r.matched_via);
  const orphans = rows.filter(r => !r.matched_via);

  return (
    <div className="grid" style={{ gap: 18 }}>
      <div className="section-head">
        <div>
          <span className="head-accent" />
          <h2 className="section-title">
            {lang==="es"
              ? <>Ventas <span className="wm-weight-black">sin Lead_Source</span></>
              : <>Sales <span className="wm-weight-black">without Lead_Source</span></>}
          </h2>
          <p className="section-sub">
            {lang==="es"
              ? "Sales que entraron al CRM sin Lead_Source. Trato de matchear phone/email a leads digitales existentes."
              : "Sales that entered CRM without Lead_Source. Cross-matching phone/email to existing digital leads."}
          </p>
        </div>
      </div>

      {/* Tally */}
      <div className="grid grid-3" style={{ gap: 12 }}>
        <div
          className="kpi"
          onClick={() => window.openDrilldown && window.openDrilldown("unknown_matched", lang==="es"?"Atribuibles":"Attributable", matched.length)}
          style={{ cursor: window.openDrilldown ? "pointer" : "default" }}
          title={lang==="es"?"Click → ver lista":"Click → see list"}
        >
          <div className="kpi-label">{lang==="es"?"TOTAL UNKNOWNS":"TOTAL UNKNOWNS"} ↗</div>
          <div className="kpi-value">{rows.length}</div>
          <div className="kpi-meta">{lang==="es"?"En el rango seleccionado":"In selected range"}</div>
        </div>
        <div
          className="kpi"
          style={{ borderLeft: "3px solid var(--op-green)", cursor: window.openDrilldown ? "pointer" : "default" }}
          onClick={() => window.openDrilldown && window.openDrilldown("unknown_matched", lang==="es"?"Unknowns atribuibles":"Attributable unknowns", matched.length)}
          title={lang==="es"?"Click → ver lista":"Click → see list"}
        >
          <div className="kpi-label" style={{ color: "var(--op-green)" }}>{lang==="es"?"ATRIBUIBLES":"ATTRIBUTABLE"} ↗</div>
          <div className="kpi-value" style={{ color: "var(--op-green)" }}>{matched.length}</div>
          <div className="kpi-meta">{lang==="es"?"Phone/email matchea digital":"Phone/email matches digital"}</div>
        </div>
        <div
          className="kpi"
          style={{ borderLeft: "3px solid var(--op-amber)", cursor: window.openDrilldown ? "pointer" : "default" }}
          onClick={() => window.openDrilldown && window.openDrilldown("unknown_orphans", lang==="es"?"Unknowns huérfanos":"Orphans", orphans.length)}
          title={lang==="es"?"Click → ver lista":"Click → see list"}
        >
          <div className="kpi-label" style={{ color: "var(--op-amber)" }}>{lang==="es"?"HUÉRFANOS":"ORPHANS"} ↗</div>
          <div className="kpi-value" style={{ color: "var(--op-amber)" }}>{orphans.length}</div>
          <div className="kpi-meta">{lang==="es"?"Sin match · investigar":"No match · investigate"}</div>
        </div>
      </div>

      {/* Attributable matches */}
      {matched.length > 0 && (
        <div className="card">
          <div className="card-head">
            <h3 className="card-title">
              <Icon name="link" size={14} />
              {lang==="es"?"Atribuibles a digital · investigar y reasignar manualmente en Zoho":"Attributable to digital"}
            </h3>
            <div className="card-sub">{matched.length}</div>
          </div>
          <table className="table">
            <thead><tr>
              <th>{lang==="es"?"Persona":"Person"}</th>
              <th>{lang==="es"?"Email/Phone":"Email/Phone"}</th>
              <th>{lang==="es"?"Match por":"Match by"}</th>
              <th>{lang==="es"?"Origen real":"Real source"}</th>
              <th>{lang==="es"?"Campaña":"Campaign"}</th>
              <th className="num">{lang==="es"?"Fecha venta":"Sale date"}</th>
              <th></th>
            </tr></thead>
            <tbody>
              {matched.map((u, i) => (
                <tr key={i}>
                  <td><b>{(u.first_name || "") + " " + (u.last_name || "")}</b></td>
                  <td><span style={{ fontSize: 11 }}>{u.email || "—"}<br/><span className="muted">{u.phone || "—"}</span></span></td>
                  <td><span className="pill pill-watch" style={{ fontSize: 10 }}>{u.matched_via}</span></td>
                  <td><span className="pill pill-scale" style={{ fontSize: 10 }}>{u.matched_source}</span></td>
                  <td>
                    {u.matched_campaign_name ? <b>{u.matched_campaign_name}</b> : <span className="muted">{u.matched_utm_campaign || "—"}</span>}
                    {u.matched_ad_name && <><br/><span className="muted" style={{ fontSize: 11 }}>Ad: {u.matched_ad_name}</span></>}
                  </td>
                  <td className="num">{(u.modified_at_zoho || "").slice(0, 10)}</td>
                  <td>
                    {u.zoho_id && (
                      <a
                        href={`https://crm.zoho.com/crm/EntityInfo.do?module=Leads&id=${u.zoho_id}`}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="btn btn-ghost btn-sm"
                        style={{ textDecoration: "none", fontSize: 10 }}
                        title="Abrir en Zoho CRM"
                      >
                        CRM ↗
                      </a>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <div style={{ fontSize: 11, color: "var(--wm-fg-muted)", marginTop: 8, padding: "0 4px" }}>
            {lang==="es"
              ? "💡 Estos leads tienen el mismo phone/email que un lead digital existente — likely duplicados creados manualmente o por otro flujo. Edita el Lead_Source en Zoho para que cuenten correctamente."
              : "💡 These leads share phone/email with existing digital leads — likely duplicates. Edit Lead_Source in Zoho."}
          </div>
        </div>
      )}

      {/* Orphans */}
      {orphans.length > 0 && (
        <div className="card">
          <div className="card-head">
            <h3 className="card-title">
              <Icon name="help-circle" size={14} />
              {lang==="es"?"Huérfanos · sin match digital":"Orphans · no digital match"}
            </h3>
            <div className="card-sub">{orphans.length}</div>
          </div>
          <div className="table-scroll" style={{ maxHeight: 480 }}>
            <table className="table">
              <thead><tr>
                <th>{lang==="es"?"Persona":"Person"}</th>
                <th>{lang==="es"?"Email":"Email"}</th>
                <th>{lang==="es"?"Phone":"Phone"}</th>
                <th className="num">{lang==="es"?"Fecha creación":"Created"}</th>
                <th className="num">{lang==="es"?"Fecha venta":"Sale date"}</th>
                <th></th>
              </tr></thead>
              <tbody>
                {orphans.map((u, i) => (
                  <tr key={i}>
                    <td><b>{(u.first_name || "") + " " + (u.last_name || "")}</b></td>
                    <td><span style={{ fontSize: 11 }}>{u.email || "—"}</span></td>
                    <td><span style={{ fontSize: 11 }}>{u.phone || "—"}</span></td>
                    <td className="num">{(u.created_at_zoho || "").slice(0, 10)}</td>
                    <td className="num">{(u.modified_at_zoho || "").slice(0, 10)}</td>
                    <td>
                      {u.zoho_id && (
                        <a
                          href={`https://crm.zoho.com/crm/EntityInfo.do?module=Leads&id=${u.zoho_id}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="btn btn-ghost btn-sm"
                          style={{ textDecoration: "none", fontSize: 10 }}
                          title="Abrir en Zoho CRM"
                        >
                          CRM ↗
                        </a>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div style={{ fontSize: 11, color: "var(--wm-fg-muted)", marginTop: 8, padding: "0 4px" }}>
            {lang==="es"
              ? "Estos no tienen rastro digital. Pueden ser: ventas referidas/orgánicas mal taggeadas, leads de canales no-digital (Booth/Canvassing), o errores de Lead_Source en Zoho."
              : "No digital trace. Could be: referrals/organic mistagged, non-digital channel leads, or Lead_Source errors."}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ProductsView, MarketView, AlertsView, TrackingView, CampaignsView, UnknownsView });