/* global React, Icon */

// ─────────────────────────────────────────────────────────────────────────────
// SR AE — three focused screens with a single primary lens each.
//
//   Briefing  → "What's the most pressing thing in my book this week?"
//   Deal Rhythm → "Show me the 2 deals at a glance"
//   Analytics  → "How healthy is the soft state of my portfolio?"
//
// Each screen is bounded to roughly one viewport. Hierarchy is enforced
// visually — one hero, then supporting evidence, then below-the-fold detail.
// Clicking a deal opens the standard deal modal (consistent with AE/MGR),
// landing on Champion pack as the default tab in Sr AE mode.
// ─────────────────────────────────────────────────────────────────────────────

const { useMemo: useMemoSr, useState: useStateSr } = React;

function srPegaDeals(deals) {
  return (deals || []).filter((d) => d && d.pegaMode === true);
}

function srInitials(name) {
  return (name || "").split(" ").map((n) => n[0]).join("").slice(0, 2);
}

function srWarmthTone(w) {
  if (w == null) return "muted";
  if (w >= 70) return "good";
  if (w >= 45) return "amber";
  return "warn";
}

function srSummarizeDeal(d) {
  const stakeholders = d.stakeholders || [];
  const commitments = d.commitments || [];
  const ammo = d.championPack?.ammunition || [];

  const overdueBuyer = commitments.filter((c) => c.direction === "buyer-to-us" && c.status === "overdue").length;
  const overdueAll   = commitments.filter((c) => c.status === "overdue").length;
  const ourAtRisk    = commitments.filter((c) => c.direction === "us-to-buyer" && c.status === "at-risk").length;
  const openIn       = commitments.filter((c) => c.direction === "buyer-to-us" && c.status !== "done").length;
  const openOut      = commitments.filter((c) => c.direction === "us-to-buyer" && c.status !== "done").length;
  const silent       = stakeholders.filter((s) => !s.missing && (s.silenceDays || 0) >= 14 && (s.power || 0) >= 3).length;
  const ammoReady    = ammo.filter((a) => a.status === "ready").length;
  const readiness    = ammo.length ? Math.round((ammoReady / ammo.length) * 100) : 0;
  const engaged      = stakeholders.filter((s) => !s.missing).length;
  const avgWarmth    = engaged
    ? Math.round(stakeholders.filter((s) => !s.missing).reduce((sum, s) => sum + (s.warmth || 0), 0) / engaged)
    : 0;

  return {
    deal: d,
    overdueBuyer, overdueAll, ourAtRisk,
    openIn, openOut,
    silent, ammoReady, ammoTotal: ammo.length, readiness,
    engaged, totalStakeholders: stakeholders.length, avgWarmth,
  };
}

// ─────────────────────────────────────────────────────────────────────────────
// 1) BRIEFING (home) — hero + 2 deal pulses + counter strip + recent changes
// ─────────────────────────────────────────────────────────────────────────────
function SrAeBriefingScreen({ deals, openDeal }) {
  const pega = srPegaDeals(deals);
  const summaries = useMemoSr(() => pega.map(srSummarizeDeal), [pega]);

  // Hero: the deal whose next champion milestone is soonest. That's the one
  // thing demanding attention this week.
  const hero = useMemoSr(() => {
    let pick = null;
    summaries.forEach((s) => {
      const milestone = s.deal.championPack?.nextMilestone;
      if (!milestone) return;
      if (!pick || milestone.daysAway < pick.deal.championPack.nextMilestone.daysAway) {
        pick = s;
      }
    });
    return pick;
  }, [summaries]);

  // Cross-portfolio counters
  const counters = useMemoSr(() => {
    return summaries.reduce((acc, s) => ({
      overdueBuyer: acc.overdueBuyer + s.overdueBuyer,
      silent:       acc.silent + s.silent,
      atRisk:       acc.atRisk + s.ourAtRisk,
    }), { overdueBuyer: 0, silent: 0, atRisk: 0 });
  }, [summaries]);

  // Top 3 recent observations across both deals' champion signals
  const recentObs = useMemoSr(() => {
    const out = [];
    pega.forEach((d) => {
      (d.championPack?.recentSignals || []).slice(0, 2).forEach((s) => {
        out.push({ dealId: d.id, dealCompany: d.company, time: s.time, text: s.signal });
      });
    });
    return out.slice(0, 3);
  }, [pega]);

  const openAt = (dealId, initialTab) => openDeal && openDeal(dealId, initialTab);

  // Portfolio counters — only the non-zero ones render, so a healthy book
  // shows a calm one-liner instead of three "0" tiles.
  const counterStrip = [
    counters.overdueBuyer > 0 && { key: "overdue", tone: "tone-warn",  v: counters.overdueBuyer, l: "engagements acheteur en retard",                  find: (s) => s.overdueBuyer > 0, tab: "peg-commitments" },
    counters.silent > 0       && { key: "silent",  tone: "tone-amber", v: counters.silent,       l: "stakeholders silencieux ≥ 14j (pouvoir 3+)",    find: (s) => s.silent > 0,       tab: "peg-grid" },
    counters.atRisk > 0       && { key: "atrisk",  tone: "tone-amber", v: counters.atRisk,       l: "de nos engagements à risque",                   find: (s) => s.ourAtRisk > 0,    tab: "peg-commitments" },
  ].filter(Boolean);

  return (
    <div className="scroll srae-screen" data-screen-label="Sr AE · Briefing">

      {/* ── TIER 1 · HERO — the one thing this week ─────────────────────── */}
      {hero && (
        <SrAeHero summary={hero} openAt={openAt} />
      )}

      {/* ── TIER 2 · Deal pulses (2 cards side by side) ─────────────────── */}
      <div className="srae-pulse-grid">
        {summaries.map((s) => (
          <SrAeDealPulse key={s.deal.id} summary={s} openAt={openAt} isHero={s.deal.id === hero?.deal.id} />
        ))}
      </div>

      {/* ── TIER 3 · Counter strip — only non-zero signals ──────────────── */}
      {counterStrip.length > 0 ? (
        <div className="srae-counters">
          {counterStrip.map((c) => (
            <button
              key={c.key}
              type="button"
              className={`srae-counter ${c.tone}`}
              onClick={() => {
                const target = summaries.find(c.find) || summaries[0];
                if (target) openAt(target.deal.id, c.tab);
              }}
            >
              <span className="srae-counter-v">{c.v}</span>
              <span className="srae-counter-l">{c.l}</span>
            </button>
          ))}
        </div>
      ) : (
        <div className="srae-counters-calm">Rien d'urgent côté portefeuille.</div>
      )}

      {/* ── TIER 4 · What changed (below the fold, light) ───────────────── */}
      <div className="card srae-card">
        <header className="section-h">
          <span>Ce qui a bougé</span>
          <span className="count">3 plus récents — 96h</span>
        </header>
        <ul className="srae-obs-list">
          {recentObs.map((o, i) => (
            <li key={i} className="srae-obs">
              <span className="srae-obs-time">{o.time}</span>
              <span className="srae-obs-text">{o.text}</span>
              <button type="button" className="srae-link" onClick={() => openAt(o.dealId)}>
                {o.dealCompany} →
              </button>
            </li>
          ))}
          {recentObs.length === 0 && <li className="srae-empty">Aucun signal récent.</li>}
        </ul>
      </div>
    </div>
  );
}

// ── Hero card ────────────────────────────────────────────────────────────────
function SrAeHero({ summary, openAt }) {
  const d = summary.deal;
  const m = d.championPack?.nextMilestone;
  if (!m) return null;
  const readinessTone = srWarmthTone(summary.readiness);
  const tone = m.daysAway <= 7 ? "warn" : m.daysAway <= 14 ? "amber" : "info";

  // Top 3 blockers ranked by severity
  const blockers = [];
  if (summary.overdueBuyer > 0) blockers.push({ tone: "warn",  text: `${summary.overdueBuyer} engagements acheteur en retard` });
  if (summary.silent > 0)       blockers.push({ tone: "amber", text: `${summary.silent} stakeholders silencieux` });
  if (summary.readiness < 70)   blockers.push({ tone: "amber", text: `Pack munitions ${summary.readiness}% — incomplet` });
  if (summary.ourAtRisk > 0)    blockers.push({ tone: "amber", text: `${summary.ourAtRisk} de nos engagements à risque` });

  return (
    <div className={`card srae-card srae-hero tone-${tone}`}>
      <div className="srae-hero-top">
        <div className="srae-hero-tag">
          <span className={`srae-hero-dot tone-${tone}`} aria-hidden />
          <span>Cette semaine — inflexion la plus proche</span>
        </div>
        <button type="button" className="srae-hero-deal-link" onClick={() => openAt(d.id)}>
          {d.company} →
        </button>
      </div>

      <div className="srae-hero-body">
        <div className="srae-hero-main">
          <h1 className="srae-hero-title">{m.label}</h1>
          <div className="srae-hero-date">
            <b>{m.date}</b> · J-{m.daysAway} · {d.company}
          </div>
          {m.context && <p className="srae-hero-ctx">{m.context}</p>}
        </div>

        <aside className="srae-hero-side">
          <div className="srae-hero-side-block">
            <span className="srae-eyebrow">Champion</span>
            <div className="srae-hero-champ">{d.championPack?.name || d.champion}</div>
            <div className="srae-hero-champ-role">{d.championPack?.role || d.championRole}</div>
          </div>
          <div className="srae-hero-side-block">
            <span className="srae-eyebrow">Pack munitions</span>
            <div className="srae-hero-readiness">
              <span className={`srae-hero-readiness-v tone-${readinessTone}-text`}>{summary.readiness}%</span>
              <span className="srae-hero-readiness-of">prêt</span>
            </div>
            <div className="srae-mini-bar">
              <span className={`srae-mini-fill tone-${readinessTone}`} style={{ width: `${summary.readiness}%` }} />
            </div>
            <div className="srae-mini-meta">{summary.ammoReady} / {summary.ammoTotal} pièces</div>
          </div>
        </aside>
      </div>

      {blockers.length > 0 && (
        <div className="srae-hero-blockers">
          <span className={`srae-tag ${blockers[0].tone}`}>{blockers[0].text}</span>
          {blockers.length > 1 && (
            <span className="srae-hero-blockers-more">
              +{blockers.length - 1} autre{blockers.length - 1 > 1 ? "s" : ""}
            </span>
          )}
        </div>
      )}

      <footer className="srae-hero-foot">
        <button type="button" className="btn sm accent" onClick={() => openAt(d.id, "peg-champion")}>
          Ouvrir le pack champion
        </button>
        <button type="button" className="btn sm ghost" onClick={() => openAt(d.id, "peg-commitments")}>
          Voir les engagements
        </button>
        <button type="button" className="btn sm ghost" onClick={() => openAt(d.id, "peg-grid")}>
          Voir les stakeholders
        </button>
      </footer>
    </div>
  );
}

// ── Deal pulse card ──────────────────────────────────────────────────────────
function SrAeDealPulse({ summary, openAt, isHero }) {
  const d = summary.deal;
  const m = d.championPack?.nextMilestone;

  // One chip, shown only when something actually needs attention. Neutral
  // metrics (cycle %, pack readiness, ARR) live a click deeper in Deal Rhythm.
  let topRisk = null;
  if (summary.overdueBuyer > 0) topRisk = { tone: "warn",  text: `${summary.overdueBuyer} engagements acheteur en retard` };
  else if (summary.silent > 0)  topRisk = { tone: "amber", text: `${summary.silent} stakeholders silencieux ≥ 14j` };
  else if (summary.readiness < 70) topRisk = { tone: "amber", text: `Pack champion ${summary.readiness}% prêt` };

  return (
    <div
      className={`card srae-card srae-pulse ${isHero ? "is-hero" : ""}`}
      onClick={() => openAt(d.id)}
    >
      <header className="srae-pulse-top">
        <div>
          <div className="srae-pulse-company">{d.company}</div>
          <div className="srae-pulse-deal">{d.dealName}</div>
        </div>
      </header>

      {m && (
        <div className="srae-pulse-focal">
          <div className="srae-pulse-focal-label">{m.label}</div>
          <div className="srae-pulse-focal-meta"><b>J-{m.daysAway}</b> · {m.date}</div>
        </div>
      )}

      <div className="srae-pulse-champ-line">
        Champion · <b>{d.championPack?.name || d.champion}</b>
      </div>

      {topRisk && (
        <div className="srae-pulse-risk">
          <span className={`srae-tag ${topRisk.tone}`}>{topRisk.text}</span>
        </div>
      )}

      <footer className="srae-card-cta">
        <button
          type="button"
          className="btn sm accent move-cta"
          onClick={(e) => { e.stopPropagation(); openAt(d.id); }}
        >
          <span className="move-cta-text">Ouvrir</span>
          <span className="coach-cta-track" aria-hidden="true">
            <span className="coach-cta-dot" />
            <span className="coach-cta-dot" />
            <span className="coach-cta-dot" />
            <Icon name="arrow" size={14} className="coach-cta-arrow" />
          </span>
        </button>
      </footer>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 2) DEAL RHYTHM — compact 2-row table, same shell as AE deals
// ─────────────────────────────────────────────────────────────────────────────
// Kanban axis for Sr AE: cycle phase. Time-to-next-inflection collapsed every
// deal into one column (all next milestones land within ~2 weeks). What
// actually distributes a long-cycle public-sector book is cycle position —
// how far each deal has travelled from discovery toward the closing window.
const SRAE_KANBAN_COLS = [
  { k: "discovery", label: "Découverte",         sub: "Cadrage & qualification · cycle < 50 %", predicate: (p) => p < 50 },
  { k: "decision",  label: "Décision en cours",  sub: "Instruction & arbitrages · 50 – 74 %",   predicate: (p) => p >= 50 && p < 75 },
  { k: "closing",   label: "Fenêtre de clôture", sub: "Validation finale · cycle ≥ 75 %",       predicate: (p) => p >= 75 },
];

function SrAeDealsScreen({ deals, openDeal }) {
  const pega = srPegaDeals(deals);
  const summaries = useMemoSr(() => pega.map(srSummarizeDeal), [pega]);
  const [view, setView] = useStateSr("cards"); // cards | list

  return (
    <div className="scroll srae-screen" data-screen-label="Sr AE · Deal Rhythm">
      <div className="srae-view-toggle" role="tablist" aria-label="Affichage">
        <button
          type="button"
          className={`srae-view-btn ${view === "cards" ? "is-on" : ""}`}
          aria-pressed={view === "cards"}
          onClick={() => setView("cards")}
          title="Vue kanban"
        >
          <Icon name="grid" size={12} />
          <span>Kanban</span>
        </button>
        <button
          type="button"
          className={`srae-view-btn ${view === "list" ? "is-on" : ""}`}
          aria-pressed={view === "list"}
          onClick={() => setView("list")}
          title="Vue liste"
        >
          <Icon name="list" size={12} />
          <span>Liste</span>
        </button>
      </div>

      {view === "cards"
        ? <SrAeKanban summaries={summaries} openDeal={openDeal} />
        : <SrAeDealsList summaries={summaries} openDeal={openDeal} />}
    </div>
  );
}

// ── Kanban view — columns by time-to-next-inflection ────────────────────────
function SrAeKanban({ summaries, openDeal }) {
  // Bucket each deal by cycle position (months elapsed / total cycle months).
  const bucketed = SRAE_KANBAN_COLS.map((col) => ({
    ...col,
    items: summaries.filter((s) => {
      const d = s.deal;
      const pct = d.cycleMonthCurrent && d.cycleMonths
        ? Math.round((d.cycleMonthCurrent / d.cycleMonths) * 100)
        : 0;
      return col.predicate(pct);
    }),
  }));

  return (
    <div className="srae-kanban">
      {bucketed.map((col) => (
        <section key={col.k} className={`srae-kanban-col tone-${col.k}`}>
          <header className="srae-kanban-h">
            <div>
              <h3 className="srae-kanban-title">{col.label}</h3>
              <span className="srae-kanban-sub">{col.sub}</span>
            </div>
            <span className="srae-kanban-count">{col.items.length}</span>
          </header>

          <div className="srae-kanban-body">
            {col.items.map((s) => (
              <SrAeKanbanCard key={s.deal.id} summary={s} openDeal={openDeal} />
            ))}
            {col.items.length === 0 && (
              <div className="srae-kanban-empty">—</div>
            )}
          </div>
        </section>
      ))}
    </div>
  );
}

function SrAeKanbanCard({ summary, openDeal }) {
  const d = summary.deal;
  const m = d.championPack?.nextMilestone;
  const cyclePct = d.cycleMonthCurrent && d.cycleMonths
    ? Math.round((d.cycleMonthCurrent / d.cycleMonths) * 100)
    : null;

  // One short chip; full detail lives in the deal modal. Kept terse so the
  // footer stays on a single line next to the CTA.
  let topRisk = null;
  if (summary.overdueBuyer > 0) topRisk = { tone: "warn",  text: `${summary.overdueBuyer} en retard` };
  else if (summary.silent > 0)  topRisk = { tone: "amber", text: `${summary.silent} silencieux` };
  else if (summary.readiness < 70) topRisk = { tone: "amber", text: `Pack ${summary.readiness}%` };

  return (
    <div
      className="srae-kanban-card"
      onClick={() => openDeal && openDeal(d.id)}
    >
      <div className="srae-kanban-card-top">
        <div className="srae-kanban-card-id">
          <div className="srae-kanban-card-company">{d.company}</div>
          <div className="srae-kanban-card-deal">{d.dealName}</div>
        </div>
        <span className="srae-kanban-card-arr">{d.arr}</span>
      </div>

      <dl className="srae-kanban-card-rows">
        <div className="srae-kanban-card-row">
          <dt>Inflexion</dt>
          <dd>{m ? <>{m.label} · <b>J-{m.daysAway}</b></> : "—"}</dd>
        </div>
        <div className="srae-kanban-card-row">
          <dt>Champion</dt>
          <dd>{d.championPack?.name || d.champion}</dd>
        </div>
        <div className="srae-kanban-card-row">
          <dt>Cycle</dt>
          <dd>Mois {d.cycleMonthCurrent}/{d.cycleMonths} · {cyclePct}%</dd>
        </div>
      </dl>

      <div className="srae-kanban-card-foot">
        {topRisk
          ? <span className={`srae-tag ${topRisk.tone}`}>{topRisk.text}</span>
          : <span className="srae-kanban-card-clear">Aucun blocage</span>}
        <button
          type="button"
          className="btn sm accent move-cta"
          onClick={(e) => { e.stopPropagation(); openDeal && openDeal(d.id); }}
        >
          <span className="move-cta-text">Ouvrir</span>
          <span className="coach-cta-track" aria-hidden="true">
            <span className="coach-cta-dot" />
            <span className="coach-cta-dot" />
            <span className="coach-cta-dot" />
            <Icon name="arrow" size={14} className="coach-cta-arrow" />
          </span>
        </button>
      </div>
    </div>
  );
}

// ── List view — compact table, kept from previous design ────────────────────
function SrAeDealsList({ summaries, openDeal }) {
  return (
    <div className="srae-truth-grid">
      <div className="srae-truth-head" role="row">
        <span>Compte</span>
        <span>Cycle</span>
        <span>Champion · prochaine échéance</span>
        <span>Engagements</span>
        <span>Pack</span>
        <span aria-label="open" />
      </div>

      {summaries.map((s) => {
        const d = s.deal;
        const m = d.championPack?.nextMilestone;
        const cyclePct = d.cycleMonthCurrent && d.cycleMonths
          ? Math.round((d.cycleMonthCurrent / d.cycleMonths) * 100)
          : null;
        return (
          <button
            key={d.id}
            type="button"
            className="srae-truth-row"
            onClick={() => openDeal && openDeal(d.id)}
          >
            <span className="srae-truth-id">
              <span className="srae-truth-name">{d.company}</span>
              <span className="srae-truth-sub">{d.dealName}</span>
              <span className="srae-truth-meta">{d.arr} · clôture {d.closeDate}</span>
            </span>

            <span className="srae-truth-cycle">
              <div className="srae-mini-bar">
                <span className="srae-mini-fill tone-amber" style={{ width: `${cyclePct}%` }} />
              </div>
              <span className="srae-mini-meta">Mois {d.cycleMonthCurrent} / {d.cycleMonths}</span>
            </span>

            <span className="srae-truth-champ">
              <span className="srae-truth-champ-name">{d.championPack?.name || d.champion}</span>
              {m && (
                <>
                  <span className="srae-truth-champ-mile">{m.label}</span>
                  <span className="srae-truth-champ-date">{m.date} · <b>J-{m.daysAway}</b></span>
                </>
              )}
            </span>

            <span className="srae-truth-cmts">
              <span><b>{s.openIn}</b> entrants</span>
              <span><b>{s.openOut}</b> sortants</span>
              {s.overdueAll > 0 && <span className="srae-tag warn">{s.overdueAll} en retard</span>}
            </span>

            <span className="srae-truth-ammo">
              <div className="srae-mini-bar">
                <span className={`srae-mini-fill tone-${srWarmthTone(s.readiness)}`} style={{ width: `${s.readiness}%` }} />
              </div>
              <span className="srae-mini-meta"><b>{s.readiness}%</b></span>
            </span>

            <span className="srae-truth-caret"><Icon name="chevronR" size={14} /></span>
          </button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 3) ANALYTICS — portfolio tiles + MEDDPICC pulse per deal
// ─────────────────────────────────────────────────────────────────────────────
function SrAeAnalyticsScreen({ deals }) {
  const pega = srPegaDeals(deals);

  const agg = useMemoSr(() => {
    let buyerCommitments = 0, buyerFulfilled = 0, buyerOverdue = 0;
    let ourCommitments = 0, ourFulfilled = 0, ourAtRisk = 0;
    let cold = 0, hot = 0;
    pega.forEach((d) => {
      (d.commitments || []).forEach((c) => {
        if (c.direction === "buyer-to-us") {
          buyerCommitments++;
          if (c.status === "done") buyerFulfilled++;
          if (c.status === "overdue") buyerOverdue++;
        } else {
          ourCommitments++;
          if (c.status === "done") ourFulfilled++;
          if (c.status === "at-risk") ourAtRisk++;
        }
      });
      (d.stakeholders || []).forEach((s) => {
        if (s.missing) return;
        if ((s.silenceDays || 0) >= 14) cold++;
        if ((s.warmth || 0) >= 70) hot++;
      });
    });
    return {
      buyerFulfillRate: buyerCommitments ? Math.round((buyerFulfilled / buyerCommitments) * 100) : 0,
      ourFulfillRate: ourCommitments ? Math.round((ourFulfilled / ourCommitments) * 100) : 0,
      buyerCommitments, buyerFulfilled, buyerOverdue,
      ourCommitments, ourFulfilled, ourAtRisk,
      cold, hot,
    };
  }, [pega]);

  const meddpiccLabels = {
    metrics: "Metrics",
    economicBuyer: "Economic Buyer",
    decisionCriteria: "Decision Criteria",
    decisionProcess: "Decision Process",
    paperProcess: "Paper Process",
    identifyPain: "Identify Pain",
    champion: "Champion",
    competition: "Competition",
  };

  return (
    <div className="scroll srae-screen" data-screen-label="Sr AE · Analytics">
      {/* Portfolio tiles */}
      <div className="srae-tiles">
        <article className="srae-tile">
          <span className="srae-eyebrow">Engagements acheteur honorés</span>
          <div className="srae-tile-v">{agg.buyerFulfillRate}%</div>
          <div className="srae-tile-sub">
            {agg.buyerFulfilled} sur {agg.buyerCommitments}
            {agg.buyerOverdue > 0 && <span className="srae-tag warn">{agg.buyerOverdue} en retard</span>}
          </div>
          <div className="srae-mini-bar">
            <span className={`srae-mini-fill tone-${srWarmthTone(agg.buyerFulfillRate)}`} style={{ width: `${agg.buyerFulfillRate}%` }} />
          </div>
        </article>
        <article className="srae-tile">
          <span className="srae-eyebrow">Nos engagements honorés</span>
          <div className="srae-tile-v">{agg.ourFulfillRate}%</div>
          <div className="srae-tile-sub">
            {agg.ourFulfilled} sur {agg.ourCommitments}
            {agg.ourAtRisk > 0 && <span className="srae-tag amber">{agg.ourAtRisk} à risque</span>}
          </div>
          <div className="srae-mini-bar">
            <span className={`srae-mini-fill tone-${srWarmthTone(agg.ourFulfillRate)}`} style={{ width: `${agg.ourFulfillRate}%` }} />
          </div>
        </article>
        <article className="srae-tile">
          <span className="srae-eyebrow">Chauds vs froids</span>
          <div className="srae-tile-v">
            <span className="tone-good-text">{agg.hot}</span>
            <span className="srae-tile-divider"> / </span>
            <span className="tone-warn-text">{agg.cold}</span>
          </div>
          <div className="srae-tile-sub">Warmth ≥ 70 vs silence ≥ 14j</div>
        </article>
      </div>

      {/* MEDDPICC pulse per deal */}
      <div className="srae-meddpicc-grid">
        {pega.map((d) => {
          const meddpicc = d.meddpicc || {};
          const avg = Object.keys(meddpicc).length
            ? Math.round(Object.values(meddpicc).reduce((s, v) => s + v, 0) / Object.keys(meddpicc).length)
            : 0;
          return (
            <div key={d.id} className="card srae-card">
              <header className="section-h">
                <span>{d.company}</span>
                <span className="count">MEDDPICC moyen <b>{avg}</b> / 100</span>
              </header>
              <ul className="srae-meddpicc">
                {Object.entries(meddpicc).map(([k, v]) => (
                  <li key={k} className="srae-meddpicc-row">
                    <span className="srae-meddpicc-l">{meddpiccLabels[k] || k}</span>
                    <span className="srae-mini-bar">
                      <span className={`srae-mini-fill tone-${srWarmthTone(v)}`} style={{ width: `${v}%` }} />
                    </span>
                    <span className="srae-meddpicc-v">{v}</span>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.SrAeBriefingScreen  = SrAeBriefingScreen;
window.SrAeDealsScreen     = SrAeDealsScreen;
window.SrAeAnalyticsScreen = SrAeAnalyticsScreen;
window.srPegaDeals         = srPegaDeals;