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

/* ============================ AGENCE — MULTI-COMPTES ============================ */
function AgencyView() {
  const { portfolio, portfolioTotals: T } = DATA;
  const [sort, setSort] = React.useState("roas");
  const healthMap = { good: ["Sain", "good"], watch: ["À surveiller", "warn"], risk: ["À risque", "bad"] };
  const sorted = [...portfolio].sort((a, b) => sort === "roas" ? b.roas - a.roas : sort === "spend" ? parseFloat(b.spend.replace(/\s|€|,/g, "")) - parseFloat(a.spend.replace(/\s|€|,/g, "")) : b.alerts - a.alerts);

  return (
    <div className="view">
      <ViewHeader
        title="Vue agence"
        sub="Tout votre portefeuille clients en un coup d'œil. Bidvern pilote chaque compte en parallèle."
        action={<button className="btn btn-accent"><Icon name="grid" size={16} /> Ajouter un compte</button>}
      />

      {/* Aggregate */}
      <div className="agency-totals">
        <div className="at-main">
          <div className="at-label">Dépense pilotée · 30 jours</div>
          <div className="at-value num"><CountUp value={T.spend} /></div>
          <div className="at-sub"><span className="num">{T.accounts}</span> comptes · <span className="num">{T.agents}</span> agents en service · <span className="num">{T.conv}</span> conversions</div>
        </div>
        <div className="at-cells">
          <div className="at-cell"><div className="at-c-v num">{T.roas}×</div><div className="at-c-l">ROAS portefeuille</div></div>
          <div className="at-cell"><div className="at-c-v num">{T.agents}</div><div className="at-c-l">Agents actifs</div></div>
          <div className="at-cell"><div className="at-c-v num" style={{ color: T.alerts ? "var(--warn)" : "var(--positive)" }}>{T.alerts}</div><div className="at-c-l">Alertes ouvertes</div></div>
        </div>
      </div>

      <div className="agency-bar">
        <span className="agency-count">{portfolio.length} comptes</span>
        <div className="seg">
          <span className="seg-label">Trier</span>
          <button className={sort === "roas" ? "on" : ""} onClick={() => setSort("roas")}>ROAS</button>
          <button className={sort === "spend" ? "on" : ""} onClick={() => setSort("spend")}>Dépense</button>
          <button className={sort === "alerts" ? "on" : ""} onClick={() => setSort("alerts")}>Alertes</button>
        </div>
      </div>

      {/* Account cards */}
      <div className="acc-cards">
        {sorted.map((a) => {
          const [hL, hT] = healthMap[a.health];
          return (
            <div className={"acc-card health-" + a.health} key={a.id}>
              <div className="acc-card-head">
                <div className="acc-av" style={{ background: a.color }}>{a.initials}</div>
                <div className="acc-card-id">
                  <div className="acc-card-name">{a.name}</div>
                  <div className="acc-card-sector">{a.sector}</div>
                </div>
                <Badge tone={hT}>{hL}</Badge>
              </div>
              <div className="acc-card-metrics">
                <div><div className="acm-l">ROAS</div><div className="acm-v num">{a.roas.toFixed(1)}× <Delta value={a.roasDelta} /></div></div>
                <div><div className="acm-l">Dépense 30j</div><div className="acm-v num">{a.spend}</div></div>
                <div><div className="acm-l">CPA</div><div className="acm-v num">{a.cpa}</div></div>
                <div><div className="acm-l">Conversions</div><div className="acm-v num">{a.conv.toLocaleString("fr-FR")}</div></div>
              </div>
              <div className="acc-card-spark">
                <Sparkline data={a.trend} w={150} h={40} strokeW={2} color={a.roasDelta >= 0 ? "var(--accent)" : "var(--negative)"} />
                <div className="acc-budget">
                  <div className="acc-budget-top"><span>Budget mensuel</span><span className="num">{a.budget}%</span></div>
                  <div className="acc-budget-bar"><div style={{ width: a.budget + "%", background: a.budget > 85 ? "var(--warn)" : "var(--accent)" }} /></div>
                </div>
              </div>
              <div className="acc-card-foot">
                <span className="acc-foot-item"><StatusDot status="active" /> {a.agents} agents</span>
                <span className="acc-foot-item">{a.alerts > 0 ? <span style={{ color: "var(--warn)" }}><Icon name="bell" size={13} /> {a.alerts} alerte{a.alerts > 1 ? "s" : ""}</span> : <span style={{ color: "var(--text-faint)" }}>Aucune alerte</span>}</span>
                <span className="acc-foot-item acc-mgr">{a.manager}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ============================ RÉGLAGES ============================ */
function SettingsView() {
  const [tab, setTab] = React.useState("plan");
  const tabs = [
    { k: "plan", l: "Compte & facturation" },
    { k: "team", l: "Équipe" },
    { k: "integrations", l: "Intégrations" },
    { k: "rules", l: "Règles d'autonomie" },
    { k: "notif", l: "Notifications" },
  ];
  return (
    <div className="view">
      <ViewHeader title="Réglages" sub="Gérez votre abonnement, votre équipe et le comportement de vos agents." />
      <div className="settings-layout">
        <nav className="settings-nav">
          {tabs.map((t) => (
            <button key={t.k} className={"set-nav-item" + (tab === t.k ? " on" : "")} onClick={() => setTab(t.k)}>{t.l}</button>
          ))}
        </nav>
        <div className="settings-body">
          {tab === "plan" && <PlanTab />}
          {tab === "team" && <TeamTab />}
          {tab === "integrations" && <IntegrationsTab />}
          {tab === "rules" && <RulesTab />}
          {tab === "notif" && <NotifTab />}
        </div>
      </div>
    </div>
  );
}

function PlanTab() {
  const { plan } = DATA;
  return (
    <div className="set-stack">
      <div className="card plan-card">
        <div className="plan-top">
          <div>
            <Badge tone="accent">Plan actuel</Badge>
            <div className="plan-name">{plan.name}</div>
            <div className="plan-price"><span className="num">{plan.price}</span> <small>{plan.cycle}</small></div>
          </div>
          <div className="plan-actions">
            <button className="btn btn-accent">Passer à Agency</button>
            <div className="plan-renew">Renouvellement le {plan.renew}</div>
          </div>
        </div>
        <div className="divider" />
        <div className="usage-grid">
          {plan.usage.map((u, i) => {
            const pct = Math.round((u.used / u.max) * 100);
            return (
              <div className="usage" key={i}>
                <div className="usage-top"><span>{u.l}</span><span className="num">{u.used}{u.unit || ""} / {u.max}{u.unit || ""}</span></div>
                <div className="usage-bar"><div style={{ width: pct + "%", background: pct > 85 ? "var(--warn)" : "var(--accent)" }} /></div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="card">
        <div className="card-title" style={{ marginBottom: 14 }}>Historique de facturation</div>
        <div className="inv-table">
          {DATA.plan.invoices.map((inv, i) => (
            <div className="inv-row" key={i}>
              <span className="num">{inv.date}</span>
              <span className="num">{inv.amount}</span>
              <span><Badge tone="good">{inv.status}</Badge></span>
              <button className="btn btn-mini btn-ghost"><Icon name="doc" size={13} /> Facture</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function TeamTab() {
  const { team } = DATA;
  const roleTone = { "Admin": "accent", "Trader média": "good", "Analyste": "neutral", "Lecture seule": "neutral" };
  return (
    <div className="card">
      <div className="card-head">
        <div className="card-title">Membres de l'équipe</div>
        <button className="btn btn-accent btn-mini"><Icon name="grid" size={14} /> Inviter</button>
      </div>
      <div className="team-table">
        <div className="team-row team-head"><span>Membre</span><span>Rôle</span><span>Comptes</span><span>Activité</span><span></span></div>
        {team.map((m) => (
          <div className="team-row" key={m.id}>
            <span className="team-member">
              <span className="acc-av sm" style={{ background: m.color }}>{m.initials}</span>
              <span><span className="team-name">{m.name}</span><span className="team-email">{m.email}</span></span>
            </span>
            <span><Badge tone={roleTone[m.role]}>{m.role}</Badge></span>
            <span className="num ct-dim">{m.accounts} compte{m.accounts > 1 ? "s" : ""}</span>
            <span className="team-last">{m.last === "En ligne" ? <span style={{ color: "var(--positive)", display: "inline-flex", alignItems: "center", gap: 6 }}><StatusDot status="active" /> En ligne</span> : <span className="ct-dim num">{m.last}</span>}</span>
            <span><button className="icon-btn-sm"><Icon name="settings" size={15} /></button></span>
          </div>
        ))}
      </div>
    </div>
  );
}

function IntegrationsTab() {
  const { integrations } = DATA;
  return (
    <div className="integ-grid">
      {integrations.map((it) => (
        <div className={"integ-card" + (it.status === "connected" ? " connected" : "")} key={it.id}>
          <div className="integ-logo" style={{ background: it.color }}>{it.letter}</div>
          <div className="integ-info">
            <div className="integ-name">{it.name}</div>
            <div className="integ-desc">{it.desc}</div>
          </div>
          {it.status === "connected"
            ? <span className="integ-status"><Icon name="check" size={14} stroke={2.6} style={{ color: "var(--positive)" }} /> Connecté</span>
            : <button className="btn btn-mini btn-ghost">Connecter</button>}
        </div>
      ))}
    </div>
  );
}

function RulesTab() {
  const [rules, setRules] = React.useState({ autopilot: true, capped: true, weekend: false, creative: true });
  const items = [
    { k: "autopilot", t: "Validation requise par défaut", d: "Toute action proposée demande votre accord — aucune exécution automatique (lecture seule par défaut)." },
    { k: "capped", t: "Plafond de réallocation", d: "Validation humaine requise au-delà de 5 000 € de mouvement budgétaire." },
    { k: "weekend", t: "Pause le week-end", d: "Les agents passent en mode observation samedi et dimanche." },
    { k: "creative", t: "Validation des créatives", d: "Toute nouvelle RSA ou vidéo doit être approuvée avant diffusion." },
  ];
  return (
    <div className="set-stack">
      <div className="card">
        <div className="card-title" style={{ marginBottom: 4 }}>Garde-fous globaux</div>
        <div className="card-sub" style={{ marginBottom: 8 }}>Appliqués à tous les agents, sur tous les comptes.</div>
        {items.map((it) => (
          <div className="rule-row" key={it.k}>
            <div><div className="rule-t">{it.t}</div><div className="rule-d">{it.d}</div></div>
            <button className={"toggle" + (rules[it.k] ? " on" : "")} onClick={() => setRules((r) => ({ ...r, [it.k]: !r[it.k] }))} />
          </div>
        ))}
      </div>
      <div className="card limit-card">
        <div>
          <div className="rule-t">Plafond de dépense quotidien global</div>
          <div className="rule-d">Sentinel suspend les campagnes qui dépassent ce seuil cumulé.</div>
        </div>
        <div className="limit-val num">35 000 €<span>/ jour</span></div>
      </div>
    </div>
  );
}

function NotifTab() {
  const [n, setN] = React.useState({ critical: true, weekly: true, decisions: false, briefs: true });
  const items = [
    { k: "critical", t: "Alertes critiques", d: "Notification immédiate (e-mail + Slack) en cas d'incident." },
    { k: "weekly", t: "Rapport hebdomadaire", d: "Synthèse de performance chaque lundi matin." },
    { k: "decisions", t: "Chaque décision d'agent", d: "Recevoir un récapitulatif de toutes les actions automatiques." },
    { k: "briefs", t: "Nouveaux briefs créatifs", d: "Être alerté quand Creative Lab génère une recommandation." },
  ];
  return (
    <div className="card">
      <div className="card-title" style={{ marginBottom: 4 }}>Préférences de notification</div>
      <div className="card-sub" style={{ marginBottom: 8 }}>Choisissez ce qui mérite de vous interrompre.</div>
      {items.map((it) => (
        <div className="rule-row" key={it.k}>
          <div><div className="rule-t">{it.t}</div><div className="rule-d">{it.d}</div></div>
          <button className={"toggle" + (n[it.k] ? " on" : "")} onClick={() => setN((s) => ({ ...s, [it.k]: !s[it.k] }))} />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { AgencyView, SettingsView });