/* ============================================================
   VISTAS — Resumen · Campañas · Conjuntos · Tendencias
   + Dropdown filtro global + EmptyState + KPIs
   ============================================================ */
const { useState: useStateV, useRef: useRefV, useEffect: useEffectV } = React;

/* ---------- DROPDOWN: filtro global de campaña ---------- */
function ScopeDropdown({ scope, onChange }) {
  const [open, setOpen] = useStateV(false);
  const ref = useRefV(null);
  useEffectV(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  const current = scope === "all" ? null : CAMPAIGNS.find((c) => c.id === scope);
  return (
    <div className="dd" ref={ref}>
      <button className="dd-btn" onClick={() => setOpen((o) => !o)} aria-haspopup="listbox" aria-expanded={open}>
        <span className="lead">
          {current ? <span className="dot" style={{ background: current.accent }} /> : <span className="dot" style={{ background: "var(--ink)" }} />}
          <span className="nm">{current ? current.nombre : "Todas las campañas"}</span>
        </span>
        <Ico d={ICONS.chevron} size={15} sw={2} />
      </button>
      {open && (
        <div className="dd-menu" role="listbox">
          <button className={`dd-item ${scope === "all" ? "on" : ""}`} onClick={() => { onChange("all"); setOpen(false); }}>
            <span className="dot" style={{ background: scope === "all" ? "var(--white)" : "var(--ink)" }} />
            <span className="nm">Todas las campañas</span>
            <span className="meta">{CAMPAIGNS.length} camp.</span>
          </button>
          <div className="dd-sep" />
          {CAMPAIGNS.map((c) => (
            <button key={c.id} className={`dd-item ${scope === c.id ? "on" : ""}`} onClick={() => { onChange(c.id); setOpen(false); }}>
              <span className="dot" style={{ background: c.accent }} />
              <span className="nm">{c.nombre}</span>
              <span className="meta">{fmt.mxn(c.cpl)} CPL</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---------- EMPTY STATE ---------- */
function EmptyState({ icon = ICONS.inbox, title, children, action }) {
  return (
    <div className="empty">
      <span className="ic"><Ico d={icon} size={28} sw={1.5} /></span>
      <h3>{title}</h3>
      <p>{children}</p>
      {action && <div className="actions">{action}</div>}
    </div>
  );
}

/* ---------- KPI CARD ---------- */
function KpiCard({ icon, label, value, unit, footer, primary, healthColor }) {
  return (
    <div className={`kpi ${primary ? "primary" : ""}`}>
      {healthColor && <span className="health-strip" style={{ background: healthColor }} />}
      <div className="kpi-top">
        <span className="eyebrow">{label}</span>
        <Ico d={icon} size={17} sw={1.75} />
      </div>
      <div className="kpi-val">{value}{unit && <span className="unit">{unit}</span>}</div>
      <div className="kpi-foot">{footer}</div>
    </div>
  );
}

/* ============================================================
   VISTA 1 — RESUMEN EJECUTIVO
   ============================================================ */
function ResumenView({ scope }) {
  const ids = scope === "all" ? CAMPAIGNS.map((c) => c.id) : [scope];
  const t = totalesDe(ids);
  const series = scope === "all" ? SERIES_TODAS : SERIES[scope];
  const cplHealth = salud(t.cpl);

  // Panel salud: campañas (scope=all) o conjuntos (scope=single)
  const filas = scope === "all"
    ? CAMPAIGNS.map((c) => ({ id: c.id, nombre: c.nombre, accent: c.accent, cpl: c.cpl, leads: c.leads, gasto: c.gasto }))
    : ADSETS.filter((a) => a.campaña === scope).map((a) => ({ id: a.id, nombre: a.nombre, accent: CAMPAIGNS.find((c) => c.id === scope).accent, cpl: a.cpl, leads: a.leads, gasto: a.gasto }));
  filas.sort((a, b) => (a.cpl || 1e9) - (b.cpl || 1e9));

  return (
    <div>
      <div className="kpis">
        <KpiCard icon={ICONS.wallet} label="Gasto total" value={fmt.mxn(t.gasto)} unit="MXN"
          footer={<><Delta factor={DELTA_FACTORS.gasto} neutral /><span className="note">vs. periodo previo</span></>} />
        <KpiCard icon={ICONS.target} label="Leads generados" value={fmt.int(t.leads)} primary
          footer={<><Delta factor={DELTA_FACTORS.leads} /><span className="note">vs. periodo previo</span></>} />
        <KpiCard icon={ICONS.tag} label="Costo por lead" value={fmt.mxn(t.cpl)} unit="MXN" primary healthColor={cplHealth.color}
          footer={<><Delta factor={DELTA_FACTORS.cpl} invert /><Sem cpl={t.cpl} withText={false} /><span className="note" style={{ color: cplHealth.color }}>{cplHealth.label}</span></>} />
        <KpiCard icon={ICONS.eye} label="Alcance total" value={fmt.compact(t.alcance)} unit="pers."
          footer={<><Delta factor={DELTA_FACTORS.alcance} /><span className="note">{fmt.freq(t.frecuencia)} frecuencia</span></>} />
      </div>

      <div className="grid-2 mt-lg" style={{ gridTemplateColumns: "1.55fr 1fr", alignItems: "stretch" }}>
        <div className="chart-card">
          <div className="ch-head">
            <span className="ch-title">Leads generados · últimos 30 días</span>
            <span className="ch-now">{fmt.int(series[series.length - 1].leads)}<span className="d mono" style={{ color: "var(--fg-3)" }}>último día</span></span>
          </div>
          <LineChart data={series} valueKey="leads" height={188} format={(v) => fmt.int(v) + " leads"} />
        </div>

        <div className="panel">
          <div className="panel-head">
            <h3>{scope === "all" ? "Salud por campaña" : "Salud por conjunto"}</h3>
            <span className="hint">Ordenado por costo por lead</span>
          </div>
          <div>
            {filas.map((f) => {
              const s = salud(f.cpl);
              return (
                <div key={f.id} style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 20px", borderBottom: "1px solid var(--border)" }}>
                  <span className="dot" style={{ background: f.accent, width: 8, height: 8, borderRadius: 999 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{f.nombre}</div>
                    <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "var(--font-mono)", marginTop: 2 }}>{fmt.int(f.leads)} leads · {fmt.mxn(f.gasto)}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 14, color: s.color, fontWeight: 500 }}>{fmt.mxn(f.cpl)}</span>
                  <span className="bead" style={{ background: s.color, width: 9, height: 9, borderRadius: 999, flex: "none" }} />
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   VISTA 2 — RENDIMIENTO POR CAMPAÑA (tabla densa + semáforo)
   Drill-down: scope=single muestra los conjuntos de esa campaña.
   ============================================================ */
function CampanasView({ scope, onPick }) {
  const drill = scope !== "all";
  const camp = drill ? CAMPAIGNS.find((c) => c.id === scope) : null;
  const rows = drill ? ADSETS.filter((a) => a.campaña === scope) : CAMPAIGNS;
  const totals = drill
    ? (() => { const t = totalesDe([scope]); return t; })()
    : totalesDe(CAMPAIGNS.map((c) => c.id));

  const maxGasto = Math.max(...rows.map((r) => r.gasto));

  return (
    <div className="panel">
      <div className="panel-head">
        <h3>{drill ? `Conjuntos · ${camp.nombre}` : "Campañas activas"}</h3>
        <SaludLegend />
      </div>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th className="l">{drill ? "Conjunto de anuncios" : "Campaña"}</th>
              <th>Estado</th>
              <th>Presupuesto</th>
              <th>Gasto</th>
              <th>Impres.</th>
              <th>Alcance</th>
              <th>Frec.</th>
              <th>CTR</th>
              <th>CPC</th>
              <th>Leads</th>
              <th>Costo / lead</th>
              <th>Salud</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => {
              const s = salud(r.cpl);
              const accent = drill ? camp.accent : r.accent;
              return (
                <tr key={r.id} className={!drill && scope === r.id ? "is-active" : ""}
                  onClick={!drill ? () => onPick(r.id) : undefined}
                  style={{ cursor: !drill ? "pointer" : "default" }}>
                  <td className="l">
                    <div className="name">
                      <span className="accent-bar" style={{ background: accent }} />
                      <span>
                        {r.nombre}
                        {!drill && <div className="sub">{r.tipoLabel} · {r.proyecto} · {r.nConjuntos} conjuntos</div>}
                      </span>
                    </div>
                  </td>
                  <td><EstadoChip estado={r.estado} /></td>
                  <td>
                    <div style={{ display: "flex", flexDirection: "column", gap: 5, alignItems: "flex-end" }}>
                      <span>{fmt.mxn(r.presupuesto)}</span>
                      <span className="bar" style={{ width: 70 }}><span style={{ width: `${Math.min(100, r.ritmo * 100)}%`, background: accent }} /></span>
                    </div>
                  </td>
                  <td>{fmt.mxn(r.gasto)}</td>
                  <td>{fmt.compact(r.impresiones)}</td>
                  <td>{fmt.compact(r.alcance)}</td>
                  <td>{fmt.freq(r.frecuencia)}</td>
                  <td>{fmt.pct(r.ctr)}</td>
                  <td>{fmt.mxn2(r.cpc)}</td>
                  <td>{fmt.int(r.leads)}</td>
                  <td>
                    <span className="cpl-cell" style={{ color: s.color }}>
                      <span className="bead" style={{ background: s.color }} />
                      {fmt.mxn(r.cpl)}
                    </span>
                  </td>
                  <td><Sem cpl={r.cpl} pill /></td>
                </tr>
              );
            })}
          </tbody>
          <tfoot>
            <tr>
              <td className="l">{drill ? "Total campaña" : "Total — todas las campañas"}</td>
              <td></td>
              <td>{fmt.mxn(totals.presupuesto)}</td>
              <td>{fmt.mxn(totals.gasto)}</td>
              <td>{fmt.compact(totals.impresiones)}</td>
              <td>{fmt.compact(totals.alcance)}</td>
              <td>{fmt.freq(totals.frecuencia)}</td>
              <td>{fmt.pct(totals.ctr)}</td>
              <td>{fmt.mxn2(totals.cpc)}</td>
              <td>{fmt.int(totals.leads)}</td>
              <td style={{ color: salud(totals.cpl).color }}>{fmt.mxn(totals.cpl)}</td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </div>
      {!drill && (
        <div style={{ padding: "12px 20px", fontSize: 11, color: "var(--fg-3)", borderTop: "1px solid var(--border)" }}>
          Haz clic en una campaña para analizarla en aislado en todas las vistas →
        </div>
      )}
    </div>
  );
}

/* ============================================================
   VISTA 3 — COMPARATIVA DE CONJUNTOS (de una misma campaña)
   ============================================================ */
function ConjuntosView({ scope, onChange }) {
  if (scope === "all") {
    return (
      <EmptyState icon={ICONS.layers} title="Selecciona una campaña para comparar"
        action={<button className="btn ghost" onClick={() => onChange(CAMPAIGNS[0].id)}>Analizar {CAMPAIGNS[0].proyecto}</button>}>
        La comparativa enfrenta los conjuntos de anuncios <strong>de una misma campaña</strong> para no mezclar proyectos.
        Elige una campaña en el filtro superior para ver cuál conjunto rinde mejor y cuál desperdicia presupuesto.
      </EmptyState>
    );
  }

  const camp = CAMPAIGNS.find((c) => c.id === scope);
  const sets = ADSETS.filter((a) => a.campaña === scope).slice().sort((a, b) => (a.cpl || 1e9) - (b.cpl || 1e9));
  const best = sets[0];
  const worst = sets[sets.length - 1];
  const maxGasto = Math.max(...sets.map((s) => s.gasto));
  const deltaPct = best.cpl ? ((worst.cpl - best.cpl) / best.cpl) * 100 : 0;

  return (
    <div>
      <div className="verdict">
        <div className="vc best">
          <div className="vtag"><span className="tag-win"><Ico d={ICONS.trophy} size={12} sw={2.2} />Mejor rendimiento</span></div>
          <div className="vname">{best.nombre}</div>
          <div className="vsub">Costo por lead más bajo de la campaña. Concentra aquí más presupuesto para escalar resultados.</div>
          <div className="vstat">
            <div className="s"><div className="v" style={{ color: salud(best.cpl).color }}>{fmt.mxn(best.cpl)}</div><div className="k">Costo / lead</div></div>
            <div className="s"><div className="v">{fmt.int(best.leads)}</div><div className="k">Leads</div></div>
            <div className="s"><div className="v">{fmt.pct(best.ctr)}</div><div className="k">CTR</div></div>
          </div>
        </div>
        <div className="vc worst">
          <div className="vtag"><span className="tag-waste"><Ico d={ICONS.alert} size={12} sw={2.2} />Desperdiciando presupuesto</span></div>
          <div className="vname">{worst.nombre}</div>
          <div className="vsub">Paga <strong>{deltaPct.toFixed(0)}% más</strong> por cada lead que el mejor conjunto. Revisa segmentación, creativo o púsalo.</div>
          <div className="vstat">
            <div className="s"><div className="v" style={{ color: salud(worst.cpl).color }}>{fmt.mxn(worst.cpl)}</div><div className="k">Costo / lead</div></div>
            <div className="s"><div className="v">{fmt.int(worst.leads)}</div><div className="k">Leads</div></div>
            <div className="s"><div className="v">{fmt.mxn(worst.gasto)}</div><div className="k">Gasto</div></div>
          </div>
        </div>
      </div>

      <div className="panel mt-lg">
        <div className="panel-head">
          <h3>Conjuntos de {camp.nombre} · ranking por costo por lead</h3>
          <span className="hint">Barra = gasto · {sets.length} conjuntos</span>
        </div>
        <div>
          {sets.map((s, i) => {
            const sl = salud(s.cpl);
            return (
              <div className="cmp-row" key={s.id}>
                <div className="cmp-head">
                  <div className="nm"><span className="rk">{i + 1}</span>{s.nombre}<EstadoChip estado={s.estado} /></div>
                  <Sem cpl={s.cpl} pill />
                </div>
                <div className="cmp-metrics">
                  <div className="cmp-bar-track">
                    <span className="cmp-bar-fill" style={{ width: `${(s.gasto / maxGasto) * 100}%`, background: camp.accent }} />
                  </div>
                  <div className="m" style={{ minWidth: 78 }}><span className="v">{fmt.mxn(s.gasto)}</span><span className="k">Gasto</span></div>
                  <div className="m" style={{ minWidth: 54 }}><span className="v">{fmt.int(s.leads)}</span><span className="k">Leads</span></div>
                  <div className="m" style={{ minWidth: 70 }}><span className="v" style={{ color: sl.color }}>{fmt.mxn(s.cpl)}</span><span className="k">Costo / lead</span></div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   VISTA 4 — TENDENCIAS TEMPORALES
   ============================================================ */
function TendenciasView({ scope }) {
  const series = scope === "all" ? SERIES_TODAS : SERIES[scope];
  const last = series[series.length - 1];
  const first = series[0];

  const charts = [
    { key: "leads", title: "Leads generados", now: fmt.int(last.leads), fmt: (v) => fmt.int(v) + " leads", delta: first.leads ? last.leads / first.leads : 1, invert: false },
    { key: "cpl", title: "Costo por lead", now: fmt.mxn(last.cpl), fmt: (v) => fmt.mxn(v) + " MXN", delta: first.cpl ? last.cpl / first.cpl : 1, invert: true },
    { key: "gasto", title: "Gasto diario", now: fmt.mxn(last.gasto), fmt: (v) => fmt.mxn(v) + " MXN", delta: first.gasto ? last.gasto / first.gasto : 1, invert: false, neutral: true },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {charts.map((c) => (
        <div className="chart-card" key={c.key}>
          <div className="ch-head">
            <span className="ch-title">{c.title} · evolución diaria</span>
            <span className="ch-now">{c.now}<span className="d"><Delta factor={c.delta} invert={c.invert} neutral={c.neutral} /></span></span>
          </div>
          <LineChart data={series} valueKey={c.key} height={150} format={c.fmt} />
        </div>
      ))}
      <div style={{ fontSize: 11, color: "var(--fg-3)" }}>
        Periodo: 1–30 may 2026 · {scope === "all" ? "todas las campañas agregadas" : CAMPAIGNS.find((c) => c.id === scope).nombre}
      </div>
    </div>
  );
}

Object.assign(window, { ScopeDropdown, EmptyState, KpiCard, ResumenView, CampanasView, ConjuntosView, TendenciasView });