/* global React, Icon, Badge, Delta, AutonomyPill, StatusDot, Sparkline, CountUp, ViewHeader, DATA */

/* ============================ CREATIVE INTELLIGENCE ============================ */
function CreativeView() {
  const { headlines, retention, retentionDrop } = DATA;
  const [tab, setTab] = React.useState("rsa");
  return (
    <div className="view">
      <ViewHeader
        title="Creative Intelligence"
        sub="Bidvern décompose chaque asset — headline, description, vidéo — et le relie aux conversions réelles."
        action={
          <div className="seg">
            <button className={tab === "rsa" ? "on" : ""} onClick={() => setTab("rsa")}>RSA & assets</button>
            <button className={tab === "video" ? "on" : ""} onClick={() => setTab("video")}>Vidéo YouTube</button>
          </div>
        }
      />

      {tab === "rsa" && (
        <div className="ci-grid">
          <div className="card">
            <div className="card-head">
              <div className="card-title">Décomposition des headlines</div>
              <Badge tone="accent">Ad Strength : Excellente</Badge>
            </div>
            <div className="card-sub" style={{ marginBottom: 18 }}>
              Performance par asset sur « Search — Anti-âge ». Le CTR est attribué à chaque headline isolément.
            </div>
            <div className="hl-list">
              {headlines.map((h, i) => (
                <div className="hl-row" key={i}>
                  <span className={"hl-mark hl-" + h.strength} />
                  <div className="hl-text">
                    <div className="hl-headline">« {h.text} »</div>
                    <div className="hl-role">{h.role}</div>
                  </div>
                  <div className="hl-bar-wrap">
                    <div className="hl-bar" style={{ width: `${(h.ctr / 4.2) * 100}%`,
                      background: h.strength === "best" ? "var(--accent)" : h.strength === "good" ? "color-mix(in oklch, var(--accent) 55%, var(--text-faint))" : "var(--text-faint)" }} />
                  </div>
                  <div className="hl-ctr num">{h.ctr.toFixed(1)}<span className="hl-pct">% CTR</span></div>
                </div>
              ))}
            </div>
            <div className="ci-insight">
              <Icon name="sparks" size={16} fill style={{ color: "var(--accent)" }} />
              <span><b>Recommandation Creative Lab :</b> épingler « -40 % ce week-end » en position 1 et retirer la headline générique « Cliquez pour découvrir » — CTR projeté <b className="num" style={{ color: "var(--accent)" }}>+0,9 pt</b>.</span>
            </div>
          </div>

          <div className="card ci-side">
            <div className="card-title">Patterns gagnants</div>
            <div className="pattern">
              <div className="pattern-v num">3,1×</div>
              <div className="pattern-l">Les visuels « coulisses » vs plans produit</div>
            </div>
            <div className="pattern">
              <div className="pattern-v num">+0,9 pt</div>
              <div className="pattern-l">Ancrage prix en headline vs générique</div>
            </div>
            <div className="pattern">
              <div className="pattern-v num">25-34</div>
              <div className="pattern-l">Tranche d'âge la plus réactive au format vlog</div>
            </div>
            <div className="divider" />
            <div className="card-title" style={{ fontSize: 13 }}>Composition optimale détectée</div>
            <ul className="recipe">
              <li><Icon name="check" size={14} stroke={2.4} style={{ color: "var(--accent)" }} /> 1 headline bénéfice</li>
              <li><Icon name="check" size={14} stroke={2.4} style={{ color: "var(--accent)" }} /> 1 headline promo/prix</li>
              <li><Icon name="check" size={14} stroke={2.4} style={{ color: "var(--accent)" }} /> 1 réassurance (livraison, retours)</li>
              <li><Icon name="check" size={14} stroke={2.4} style={{ color: "var(--accent)" }} /> 1 made-in / confiance</li>
            </ul>
          </div>
        </div>
      )}

      {tab === "video" && (
        <div className="ci-grid-video">
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Courbe de rétention — « Hook produit v2 »</div>
                <div className="card-sub">% d'audience retenue, seconde par seconde</div>
              </div>
              <Badge tone="bad">Décrochage détecté à 0:0{retentionDrop}</Badge>
            </div>
            <RetentionChart data={retention} drop={retentionDrop} />
            <div className="ci-insight">
              <Icon name="play" size={16} fill style={{ color: "var(--negative)" }} />
              <span><b>Retention Scout :</b> 39 % de l'audience décroche avant l'accroche produit (0:03). Déplacer le logo et la promesse de valeur dans la <b>première seconde</b> — rétention projetée <b className="num" style={{ color: "var(--accent)" }}>+22 %</b>.</span>
            </div>
          </div>
          <div className="card ci-side">
            <div className="card-title">Frames clés</div>
            <div className="frames">
              {["0:00 — Logo", "0:03 — Plan produit (drop)", "0:07 — Bénéfice", "0:15 — CTA"].map((f, i) => (
                <div className="frame" key={i}>
                  <div className="frame-thumb" style={{ borderColor: i === 1 ? "var(--negative)" : "var(--border)" }}>
                    <div className="frame-stripes" />
                    {i === 1 && <span className="frame-flag">drop</span>}
                  </div>
                  <span className="frame-label">{f}</span>
                </div>
              ))}
            </div>
            <div className="divider" />
            <div className="kv"><span>Vue moyenne</span><b className="num">7,2 s</b></div>
            <div className="kv"><span>Taux de complétion</span><b className="num">26 %</b></div>
            <div className="kv"><span>CPV</span><b className="num">0,04 €</b></div>
            <div className="kv"><span>Conv. assistées</span><b className="num">1 060</b></div>
          </div>
        </div>
      )}
    </div>
  );
}

function RetentionChart({ data, drop }) {
  const W = 660, H = 240, padB = 26, padT = 14, padL = 4;
  const pts = data.map((v, i) => {
    const x = padL + (i / (data.length - 1)) * (W - padL);
    const y = padT + (1 - v / 100) * (H - padB - padT);
    return [x, y];
  });
  const line = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const dropX = pts[drop][0];
  return (
    <div className="chart-wrap">
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ width: "100%", height: 250 }}>
        {[0, 25, 50, 75, 100].map((g) => {
          const y = padT + (1 - g / 100) * (H - padB - padT);
          return <line key={g} x1={padL} x2={W} y1={y} y2={y} stroke="var(--border-soft)" strokeWidth="1" strokeDasharray="2 4" />;
        })}
        <rect x={padL} y={padT} width={dropX - padL} height={H - padB - padT} fill="color-mix(in oklch, var(--negative) 8%, transparent)" />
        <line x1={dropX} x2={dropX} y1={padT} y2={H - padB} stroke="var(--negative)" strokeWidth="1.5" strokeDasharray="4 3" />
        <defs>
          <linearGradient id="retArea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.2" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={line + ` L${pts[pts.length-1][0]} ${H-padB} L${padL} ${H-padB} Z`} fill="url(#retArea)" />
        <path d={line} fill="none" stroke="var(--accent)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx={dropX} cy={pts[drop][1]} r="4.5" fill="var(--negative)" stroke="var(--bg)" strokeWidth="2" />
      </svg>
    </div>
  );
}

/* ============================ CAMPAIGNS ============================ */
function CampaignsView() {
  const { campaigns } = DATA;
  const [filter, setFilter] = React.useState("Tous");
  const [open, setOpen] = React.useState(null);
  const types = ["Tous", "Search", "Performance Max", "Shopping", "Video", "Demand Gen"];
  const rows = campaigns.filter((c) => filter === "Tous" || c.type === filter);

  if (open) {
    const c = campaigns.find((x) => x.id === open);
    return <CampaignDetail c={c} onBack={() => setOpen(null)} />;
  }

  return (
    <div className="view">
      <ViewHeader
        title="Campagnes"
        sub="Toutes vos campagnes Google Ads, pilotées en continu par les agents."
        action={<button className="btn btn-accent"><Icon name="bolt" size={16} fill /> Optimiser la sélection</button>}
      />
      <div className="seg seg-wide">
        {types.map((t) => (
          <button key={t} className={filter === t ? "on" : ""} onClick={() => setFilter(t)}>{t}</button>
        ))}
      </div>
      <div className="card table-card">
        <div className="ctable">
          <div className="ct-row ct-head">
            <span>Campagne</span><span>Statut</span><span>Dépense</span><span>ROAS</span>
            <span>CPA</span><span>Conv.</span><span>QS</span><span>Tendance 7j</span><span>Agent</span>
          </div>
          {rows.map((c) => (
            <div className={"ct-row ct-click" + (c.boost ? " ct-boost" : "")} key={c.id} onClick={() => setOpen(c.id)}>
              <span className="ct-name">
                <span className={"ct-type ct-" + c.type.replace(/\s/g, "")}>{c.type[0]}</span>
                <span>{c.name}<span className="ct-typetag">{c.type}</span></span>
              </span>
              <span><Badge tone={c.status === "active" ? "good" : "neutral"}>{c.status === "active" ? "Actif" : "Pause"}</Badge></span>
              <span className="num">{c.spend}</span>
              <span className="num ct-roas" style={{ color: c.roas >= 4 ? "var(--positive)" : c.roas < 2.5 ? "var(--negative)" : "var(--text)" }}>{c.roas.toFixed(1)}×</span>
              <span className="num ct-dim">{c.cpa}</span>
              <span className="num ct-dim">{c.conv.toLocaleString("fr-FR")}</span>
              <span className="num">{c.qs ? <span className={"qs qs-" + (c.qs >= 7 ? "good" : c.qs >= 5 ? "mid" : "bad")}>{c.qs}/10</span> : <span className="ct-dim">—</span>}</span>
              <span className="ct-spark">
                <Sparkline data={c.trend} w={70} h={24} fill={false} strokeW={1.7} color={c.bad ? "var(--negative)" : "var(--accent)"} />
                <span className="num" style={{ color: c.bad ? "var(--negative)" : "var(--positive)", fontSize: 11 }}>{c.change}</span>
              </span>
              <span className="ct-agent">{c.agent} <Icon name="chevron" size={14} style={{ color: "var(--text-faint)", verticalAlign: "-2px" }} /></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ===== Campaign drill-down ===== */
function CampaignDetail({ c, onBack }) {
  const { campaignDetail: d } = DATA;
  const metrics = [
    { l: "Dépense (30j)", v: c.spend },
    { l: "ROAS", v: c.roas.toFixed(1) + "×", tone: c.roas >= 4 ? "pos" : c.roas < 2.5 ? "neg" : "" },
    { l: "CPA", v: c.cpa },
    { l: "Conversions", v: c.conv.toLocaleString("fr-FR") },
    { l: "Valeur conv.", v: (Math.round(c.conv * c.roas * 0.18)).toLocaleString("fr-FR") + " €" },
    { l: "Quality Score", v: c.qs ? c.qs + "/10" : "—" },
  ];
  return (
    <div className="view">
      <button className="back-link" onClick={onBack}><Icon name="chevron" size={16} style={{ transform: "rotate(180deg)" }} /> Toutes les campagnes</button>
      <div className="view-header">
        <div>
          <div className="cd-titlerow">
            <span className={"ct-type lg ct-" + c.type.replace(/\s/g, "")}>{c.type[0]}</span>
            <div>
              <h1 className="view-title">{c.name}</h1>
              <div className="cd-meta">
                <Badge tone={c.status === "active" ? "good" : "neutral"}>{c.status === "active" ? "Actif" : "Pause"}</Badge>
                <span className="ct-dim">{c.type}</span>
                <span className="cd-pilot"><StatusDot status="active" /> Piloté par {c.agent}</span>
              </div>
            </div>
          </div>
        </div>
        <div className="view-action" style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-ghost"><Icon name="pause" size={15} /> Suspendre</button>
          <button className="btn btn-accent"><Icon name="bolt" size={16} fill /> Optimiser</button>
        </div>
      </div>

      <div className="cd-metrics">
        {metrics.map((m, i) => (
          <div className="cd-metric" key={i}>
            <div className="cd-metric-l">{m.l}</div>
            <div className="cd-metric-v num" style={{ color: m.tone === "pos" ? "var(--positive)" : m.tone === "neg" ? "var(--negative)" : "var(--text)" }}>{m.v}</div>
          </div>
        ))}
      </div>

      <div className="cd-grid">
        <div className="cd-main">
          <div className="card">
            <div className="card-head">
              <div><div className="card-title">Dépense & ROAS</div><div className="card-sub">14 derniers jours</div></div>
              <div className="legend"><span><i style={{ background: "var(--accent)" }} /> ROAS</span><span><i style={{ background: "var(--text-faint)" }} /> Dépense (k€)</span></div>
            </div>
            <DualChart spend={d.spendSeries} roas={d.roasSeries} />
          </div>

          <div className="card">
            <div className="card-head">
              <div className="card-title">Mots-clés & search terms</div>
              <Badge tone="warn">1 signalé par Query Miner</Badge>
            </div>
            <div className="kw-table">
              <div className="kw-row kw-head"><span>Mot-clé</span><span>Type</span><span>Clics</span><span>CPC</span><span>Conv.</span><span>ROAS</span><span>QS</span></div>
              {d.keywords.map((k, i) => (
                <div className={"kw-row" + (k.flagged ? " kw-flag" : "")} key={i}>
                  <span className="kw-name">{k.flagged && <span className="kw-warn">!</span>}{k.kw}</span>
                  <span><span className="match-tag">{k.match}</span></span>
                  <span className="num ct-dim">{k.clicks.toLocaleString("fr-FR")}</span>
                  <span className="num ct-dim">{k.cpc}</span>
                  <span className="num">{k.conv}</span>
                  <span className="num" style={{ color: k.roas >= 4 ? "var(--positive)" : k.roas < 2 ? "var(--negative)" : "var(--text)" }}>{k.roas.toFixed(1)}×</span>
                  <span className="num"><span className={"qs qs-" + (k.qs >= 7 ? "good" : k.qs >= 5 ? "mid" : "bad")}>{k.qs}</span></span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="cd-side">
          <div className="card">
            <div className="card-title" style={{ marginBottom: 14 }}>Répartition appareils</div>
            {d.devices.map((dv, i) => (
              <div className="dev-row" key={i}>
                <div className="dev-top"><span>{dv.l}</span><span className="num">{dv.v}% · {dv.roas}×</span></div>
                <div className="dev-bar"><div style={{ width: dv.v + "%", background: "var(--accent)" }} /></div>
              </div>
            ))}
          </div>
          <div className="card">
            <div className="card-title" style={{ marginBottom: 6 }}>Journal des agents</div>
            <div className="card-sub" style={{ marginBottom: 14 }}>Actions sur cette campagne</div>
            <div className="cd-log">
              {d.log.map((l, i) => (
                <div className="cd-log-item" key={i}>
                  <div className={"feed-icon tone-" + l.tone}><Icon name={l.icon} size={14} /></div>
                  <div className="feed-body">
                    <div className="feed-top"><span className="feed-agent">{l.agent}</span><span className="feed-time">{l.time}</span></div>
                    <div className="feed-text" style={{ fontSize: 12.5 }}>{l.text}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DualChart({ spend, roas }) {
  const W = 640, H = 220, padB = 24, padT = 14;
  const maxS = Math.max(...spend);
  const minR = Math.min(...roas) - 0.5, maxR = Math.max(...roas) + 0.3;
  const bw = (W / spend.length) * 0.5;
  const rpts = roas.map((v, i) => {
    const x = (i + 0.5) * (W / spend.length);
    const y = padT + (1 - (v - minR) / (maxR - minR)) * (H - padB - padT);
    return [x, y];
  });
  const line = rpts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  return (
    <div className="chart-wrap">
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ width: "100%", height: 230 }}>
        {[0.25, 0.5, 0.75, 1].map((g, i) => (
          <line key={i} x1="0" x2={W} y1={padT + g * (H - padB - padT)} y2={padT + g * (H - padB - padT)} stroke="var(--border-soft)" strokeWidth="1" strokeDasharray="2 4" />
        ))}
        {spend.map((v, i) => {
          const h = (v / maxS) * (H - padB - padT);
          const x = (i + 0.5) * (W / spend.length) - bw / 2;
          return <rect key={i} x={x} y={H - padB - h} width={bw} height={h} rx="2" fill="color-mix(in oklch, var(--text-faint) 38%, transparent)" />;
        })}
        <defs><linearGradient id="cdArea" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="var(--accent)" stopOpacity="0.22" /><stop offset="100%" stopColor="var(--accent)" stopOpacity="0" /></linearGradient></defs>
        <path d={line + ` L${W} ${H - padB} L0 ${H - padB} Z`} fill="url(#cdArea)" />
        <path d={line} fill="none" stroke="var(--accent)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
        {rpts.map((p, i) => i === rpts.length - 1 && <circle key={i} cx={p[0]} cy={p[1]} r="4" fill="var(--accent)" stroke="var(--bg)" strokeWidth="2" />)}
      </svg>
    </div>
  );
}

/* ============================ BRIEFS ============================ */
function BriefsView() {
  const { briefs } = DATA;
  return (
    <div className="view">
      <ViewHeader
        title="Briefs créatifs"
        sub="Bidvern transforme la data de performance en briefs actionnables — fini le hasard créatif."
        action={<button className="btn btn-ghost"><Icon name="doc" size={16} /> Exporter en PDF</button>}
      />
      <div className="briefs-grid">
        {briefs.map((b) => (
          <div className="brief-card" key={b.id}>
            <div className="brief-head">
              <Badge tone="neutral">{b.channel}</Badge>
              <div className="conf">
                <div className="conf-ring" style={{ background: `conic-gradient(var(--accent) ${b.confidence * 3.6}deg, var(--surface-2) 0)` }}>
                  <span className="num">{b.confidence}</span>
                </div>
                <span className="conf-l">confiance</span>
              </div>
            </div>
            <h3 className="brief-title">{b.title}</h3>
            <div className="brief-block">
              <div className="brief-k">Insight data</div>
              <p>{b.insight}</p>
            </div>
            <div className="brief-block">
              <div className="brief-k">Action recommandée</div>
              <p>{b.action}</p>
            </div>
            <div className="brief-foot">
              <span className="brief-impact num"><Icon name="arrowUp" size={14} stroke={2.4} />{b.impact}</span>
              <button className="btn btn-mini btn-accent">Créer le brief <Icon name="chevron" size={14} /></button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { CreativeView, CampaignsView, BriefsView, AlertsView });

/* ============================ ALERTES / SENTINEL ============================ */
function AlertsView() {
  const { alerts } = DATA;
  const [filter, setFilter] = React.useState("Toutes");
  const sevMap = { critical: ["Critique", "bad"], warning: ["Attention", "warn"], info: ["Info", "neutral"] };
  const statusMap = { auto: ["Résolu par Sentinel", "good"], review: ["À valider", "warn"], resolved: ["Clos", "neutral"] };
  const tabs = ["Toutes", "Critique", "Attention", "Info"];
  const rows = alerts.filter((a) => filter === "Toutes" || sevMap[a.sev][0] === filter);
  const counts = {
    critical: alerts.filter((a) => a.sev === "critical").length,
    warning: alerts.filter((a) => a.sev === "warning").length,
    auto: alerts.filter((a) => a.status === "auto" || a.status === "resolved").length,
  };
  return (
    <div className="view">
      <ViewHeader
        title="Alertes & Sentinel"
        sub="Sentinel surveille vos 4 comptes en temps réel et neutralise les incidents avant qu'ils ne coûtent."
        action={<button className="btn btn-ghost"><Icon name="settings" size={16} /> Règles de surveillance</button>}
      />

      <div className="alert-summary">
        <div className="as-card">
          <div className="as-ic tone-bad"><Icon name="bell" size={18} /></div>
          <div><div className="as-v num">{counts.critical}</div><div className="as-l">Alerte critique</div></div>
        </div>
        <div className="as-card">
          <div className="as-ic tone-warn"><Icon name="shield" size={18} /></div>
          <div><div className="as-v num">{counts.warning}</div><div className="as-l">Avertissements</div></div>
        </div>
        <div className="as-card">
          <div className="as-ic tone-good"><Icon name="check" size={18} stroke={2.4} /></div>
          <div><div className="as-v num">{counts.auto}</div><div className="as-l">Traités par Sentinel</div></div>
        </div>
        <div className="as-card as-status">
          <StatusDot status="active" />
          <div><div className="as-v" style={{ fontSize: 15 }}>Sentinel actif</div><div className="as-l">4 comptes · scan toutes les 60s</div></div>
        </div>
      </div>

      <div className="seg seg-wide">
        {tabs.map((t) => (<button key={t} className={filter === t ? "on" : ""} onClick={() => setFilter(t)}>{t}</button>))}
      </div>

      <div className="alert-list">
        {rows.map((a) => {
          const [sevL, sevT] = sevMap[a.sev];
          const [stL, stT] = statusMap[a.status];
          return (
            <div className={"alert-row sev-" + a.sev} key={a.id}>
              <div className={"alert-bar tone-" + sevT} />
              <div className="alert-main">
                <div className="alert-top">
                  <Badge tone={sevT}>{sevL}</Badge>
                  <span className="alert-acc">{a.account}</span>
                  <span className="alert-time num">{a.time}</span>
                </div>
                <div className="alert-title">{a.title}</div>
                <div className="alert-desc">{a.desc}</div>
                <div className="alert-action">
                  <Icon name={a.status === "review" ? "bell" : "shield"} size={14} style={{ color: a.status === "review" ? "var(--warn)" : "var(--accent)" }} />
                  <span>{a.action}</span>
                </div>
              </div>
              <div className="alert-side">
                <div className={"alert-metric num tone-" + sevT}>{a.metric}</div>
                <Badge tone={stT}>{stL}</Badge>
                {a.status === "review" && (
                  <div className="alert-btns">
                    <button className="btn btn-mini btn-accent">Valider</button>
                    <button className="btn btn-mini btn-ghost">Ignorer</button>
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}