/* global React, Icon, Badge, Delta, AutonomyPill, StatusDot, Sparkline, CountUp, DATA */
const { useState: useStateV, useEffect: useEffectV, useRef: useRefV } = React;

/* ============================ COMMAND CENTER ============================ */
function CommandCenter() {
  const { kpis, campaigns } = DATA;
  const [feed, setFeed] = useStateV(DATA.activity);
  const incoming = [
    { agent: "Bidder", icon: "gauge", text: "Budget +12 % sur « Shopping — Best-sellers »", detail: "ROAS marginal 7,8× > cible", tone: "good", amount: "+800 €/j" },
    { agent: "Query Miner", icon: "search", text: "Requête négative ajoutée : « gratuit »", detail: "0 conv / 86 clics ce mois", tone: "neutral" },
    { agent: "Retention Scout", icon: "play", text: "Variante de hook créée", detail: "Logo déplacé en 0:01", tone: "good" },
    { agent: "Sentinel", icon: "shield", text: "Surveillance OK", detail: "4 comptes — aucun écart", tone: "warn" },
  ];
  useEffectV(() => {
    let i = 0;
    const t = setInterval(() => {
      const base = incoming[i % incoming.length];
      i++;
      setFeed((f) => [{ ...base, id: "live" + Date.now(), time: "à l'instant", live: true }, ...f].slice(0, 12));
    }, 5200);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="view">
      <ViewHeader
        title="Command Center"
        sub="Vos agents ont exécuté 1 247 décisions aujourd'hui — sans intervention."
        action={<button className="btn btn-accent"><Icon name="bolt" size={16} fill /> Lancer un cycle d'optimisation</button>}
      />

      {/* KPI strip */}
      <div className="kpi-strip">
        {kpis.map((k) => (
          <div className="kpi" key={k.id}>
            <div className="kpi-label">{k.label}</div>
            <div className="kpi-value">
              <span className="num"><CountUp value={k.value} /></span>
              <span className="kpi-unit">{k.unit}</span>
            </div>
            <div className="kpi-foot">
              <Delta value={k.delta} invert={k.id === "cpa"} />
              <Sparkline data={k.trend} w={84} h={28} strokeW={1.8}
                color={k.id === "cpa" ? "var(--positive)" : "var(--accent)"} />
            </div>
          </div>
        ))}
      </div>

      <div className="cc-grid">
        {/* LEFT */}
        <div className="cc-left">
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Performance pilotée</div>
                <div className="card-sub">Dépense vs ROAS — 30 derniers jours</div>
              </div>
              <div className="legend">
                <span><i style={{ background: "var(--accent)" }} /> ROAS</span>
                <span><i style={{ background: "var(--text-faint)" }} /> Dépense</span>
              </div>
            </div>
            <PerfChart />
          </div>

          <div className="card">
            <div className="card-head">
              <div className="card-title">Campagnes sous pilotage agent</div>
              <Badge tone="accent">{campaigns.filter(c => c.status === "active").length} actives</Badge>
            </div>
            <div className="mini-table">
              <div className="mini-row mini-head">
                <span>Campagne</span><span>Type</span><span>ROAS</span><span>CPA</span><span>Agent</span><span>7j</span>
              </div>
              {campaigns.slice(0, 6).map((c) => (
                <div className="mini-row" key={c.id}>
                  <span className="mt-name">
                    <StatusDot status={c.status} /> {c.name}
                  </span>
                  <span className="mt-dim">{c.type}</span>
                  <span className="num" style={{ color: c.roas >= 4 ? "var(--positive)" : c.roas < 2.5 ? "var(--negative)" : "var(--text)" }}>{c.roas.toFixed(1)}×</span>
                  <span className="num mt-dim">{c.cpa}</span>
                  <span className="mt-agent">{c.agent}</span>
                  <span><Sparkline data={c.trend} w={56} h={20} fill={false} strokeW={1.6}
                    color={c.bad ? "var(--negative)" : "var(--accent)"} /></span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT — live feed */}
        <div className="card feed-card">
          <div className="card-head">
            <div className="card-title">Flux des agents</div>
            <span className="live-tag"><span className="pulse-dot" style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--accent)" }} /> en direct</span>
          </div>
          <div className="feed">
            {feed.map((a) => (
              <div className={"feed-item" + (a.live ? " feed-new" : "")} key={a.id}>
                <div className={"feed-icon tone-" + a.tone}>
                  <Icon name={a.icon} size={15} />
                </div>
                <div className="feed-body">
                  <div className="feed-top">
                    <span className="feed-agent">{a.agent}</span>
                    <span className="feed-time">{a.time}</span>
                  </div>
                  <div className="feed-text">{a.text}</div>
                  <div className="feed-detail">{a.detail}</div>
                  {a.amount && <span className={"feed-amount tone-" + a.tone}>{a.amount}</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* Stacked perf chart: bars (spend) + line (roas) */
function PerfChart() {
  const spend = [18,19,21,20,23,22,24,25,24,26,27,26,28,27,29];
  const roas = [3.9,4.1,4.0,4.4,4.6,4.5,4.8,5.0,4.9,5.1,5.0,5.2,5.1,5.2,5.24];
  const W = 640, H = 220, padB = 28, padT = 16;
  const maxS = Math.max(...spend);
  const minR = Math.min(...roas) - 0.4, maxR = Math.max(...roas) + 0.2;
  const bw = (W / spend.length) * 0.52;
  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: 240 }}>
        {[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="roasArea" 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(#roasArea)" />
        <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>
  );
}

/* ============================ AGENTS ============================ */
function AgentsView() {
  const { agents } = DATA;
  const [sel, setSel] = useStateV(agents[0].id);
  const [detail, setDetail] = useStateV(null);
  const active = agents.find((a) => a.id === sel);

  if (detail) {
    const a = agents.find((x) => x.id === detail);
    return <AgentDetail a={a} onBack={() => setDetail(null)} />;
  }

  return (
    <div className="view">
      <ViewHeader
        title="Agents autonomes"
        sub="6 agents spécialisés Google Ads. Réglez leur niveau d'autonomie, du conseil à l'exécution totale."
        action={<button className="btn btn-ghost"><Icon name="settings" size={16} /> Règles globales</button>}
      />
      <div className="agents-grid">
        {agents.map((a) => (
          <button className={"agent-card" + (a.id === sel ? " agent-active" : "")} key={a.id} onClick={() => setSel(a.id)} onDoubleClick={() => setDetail(a.id)}>
            <div className="agent-top">
              <div className={"agent-avatar status-" + a.status}>
                <Icon name={a.icon} size={20} />
              </div>
              <StatusDot status={a.status} />
            </div>
            <div className="agent-name">{a.name}</div>
            <div className="agent-role">{a.role}</div>
            <div className="agent-now">{a.now}</div>
            <div className="agent-foot">
              <AutonomyPill level={a.autonomy} />
              <span className="agent-decisions num">{a.decisions.toLocaleString("fr-FR")} décisions</span>
            </div>
          </button>
        ))}
      </div>

      {/* Detail / autonomy control */}
      <div className="card agent-detail">
        <div className="ad-left">
          <div className="ad-head">
            <div className={"agent-avatar lg status-" + active.status}><Icon name={active.icon} size={26} /></div>
            <div>
              <div className="ad-name">{active.name}</div>
              <div className="card-sub">{active.role}</div>
            </div>
          </div>
          <p className="ad-desc">{active.desc}</p>
          <div className="ad-stats">
            <div><div className="ad-stat-v num">{active.decisions.toLocaleString("fr-FR")}</div><div className="ad-stat-l">Décisions (30j)</div></div>
            <div><div className="ad-stat-v num" style={{ color: "var(--positive)" }}>{active.savings}</div><div className="ad-stat-l">Impact budget</div></div>
            <div><div className="ad-stat-v num">{active.status === "active" ? "100 %" : "—"}</div><div className="ad-stat-l">Disponibilité</div></div>
          </div>
          <button className="btn btn-ghost ad-history-btn" onClick={() => setDetail(active.id)}>
            <Icon name="layers" size={15} /> Voir l'historique de décisions <Icon name="chevron" size={14} />
          </button>
        </div>
        <div className="ad-right">
          <div className="ad-control-title">Niveau d'autonomie</div>
          <AutonomySlider level={active.autonomy} />
          <div className="ad-guard">
            <Icon name="shield" size={15} />
            <span>Garde-fous actifs : plafond de dépense quotidien, CPA max, et validation humaine au-delà de <b className="num">5 000 €</b> de réallocation.</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ===== Agent drill-down: decision history ===== */
function AgentDetail({ a, onBack }) {
  const h = DATA.agentHistory[a.id] || { kpis: [], decisions: [] };
  return (
    <div className="view">
      <button className="back-link" onClick={onBack}><Icon name="chevron" size={16} style={{ transform: "rotate(180deg)" }} /> Tous les agents</button>
      <div className="view-header">
        <div className="cd-titlerow">
          <div className={"agent-avatar lg status-" + a.status}><Icon name={a.icon} size={26} /></div>
          <div>
            <h1 className="view-title">{a.name}</h1>
            <div className="cd-meta">
              <AutonomyPill level={a.autonomy} />
              <span className="ct-dim">{a.role}</span>
              <span className="cd-pilot"><StatusDot status={a.status} /> {a.status === "active" ? "En service" : a.status === "paused" ? "En pause" : "Validation"}</span>
            </div>
          </div>
        </div>
        <div className="view-action" style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-ghost"><Icon name="settings" size={15} /> Configurer</button>
        </div>
      </div>

      <div className="cd-metrics" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
        {h.kpis.map((k, i) => (
          <div className="cd-metric" key={i}>
            <div className="cd-metric-l">{k.l}</div>
            <div className="cd-metric-v num">{k.v}</div>
          </div>
        ))}
      </div>

      <div className="card" style={{ marginTop: 4 }}>
        <div className="card-head">
          <div><div className="card-title">Historique de décisions</div><div className="card-sub">Chaque action prise par {a.name}, avec son raisonnement et son impact</div></div>
          <div className="legend"><span><span className="auto-chip">auto</span> exécuté seul</span><span><span className="auto-chip rev">revue</span> validé par un humain</span></div>
        </div>
        <div className="timeline">
          {h.decisions.map((d, i) => (
            <div className="tl-item" key={i}>
              <div className="tl-marker">
                <div className={"tl-dot tone-" + d.tone} />
                {i < h.decisions.length - 1 && <div className="tl-line" />}
              </div>
              <div className="tl-body">
                <div className="tl-top">
                  <span className="tl-time num">{d.time}</span>
                  <span className={"auto-chip" + (d.auto ? "" : " rev")}>{d.auto ? "auto" : "revue"}</span>
                </div>
                <div className="tl-title">{d.title}</div>
                <div className="tl-reason">{d.reason}</div>
                <span className={"tl-impact tone-" + d.tone}>{d.impact}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AutonomySlider({ level }) {
  const steps = [
    { k: "obs", l: "Observation", d: "Analyse seule" },
    { k: "review", l: "Validation", d: "Propose, vous validez" },
    { k: "full", l: "Autonome", d: "Exécute seul" },
  ];
  const idxMap = { paused: 0, obs: 0, review: 1, full: 2 };
  const [idx, setIdx] = useStateV(idxMap[level] ?? 1);
  useEffectV(() => setIdx(idxMap[level] ?? 1), [level]);
  return (
    <div className="aut-slider">
      <div className="aut-track">
        <div className="aut-fill" style={{ width: `${(idx / 2) * 100}%` }} />
        {steps.map((s, i) => (
          <button key={s.k} className={"aut-node" + (i <= idx ? " on" : "")} style={{ left: `${(i / 2) * 100}%` }}
            onClick={() => setIdx(i)} />
        ))}
      </div>
      <div className="aut-labels">
        {steps.map((s, i) => (
          <button key={s.k} className={"aut-label" + (i === idx ? " sel" : "")} onClick={() => setIdx(i)}>
            <div className="aut-l">{s.l}</div>
            <div className="aut-d">{s.d}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { CommandCenter, AgentsView });