/* global React, Icon */

// ─────────────────────────────────────────────────────────────────────────────
// PEGA MODE — three new deal-detail tabs for long-cycle, multi-stakeholder
// public-sector deals. Designed around the senior-AE thesis: information to
// act on, not actions to perform. Three primitives:
//
//   1. Stakeholder Gradient — dense, sortable map of 20+ stakeholders
//      across warmth, silence, open commitments, and MEDDPICC role.
//      Replaces the 2D scatter (too sparse at this stakeholder count).
//
//   2. Commitment Ledger — two-sided record of what was said in public,
//      by whom, by when. Memory + leverage, not task list.
//
//   3. Champion Enablement — what to send the champion before her next
//      internal milestone. The verb flips from "chase" to "equip".
//
// All three tabs only render when deal.pegaMode === true.
// ─────────────────────────────────────────────────────────────────────────────

const { useState, useMemo } = React;

// ── Shared helpers ────────────────────────────────────────────────────────────

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

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

function pegaSilenceTone(days) {
  if (days == null) return "muted";
  if (days <= 5) return "good";
  if (days <= 12) return "amber";
  return "warn";
}

function pegaDaysAgo(days) {
  if (days == null) return "—";
  if (days === 0) return "auj.";
  if (days === 1) return "1j";
  return `${days}j`;
}

// MEDDPICC role → short chip label + color tone
const MEDDPICC_META = {
  "Champion":          { label: "Champion",   tone: "good"  },
  "Economic Buyer":    { label: "Econ. Buyer", tone: "amber" },
  "Decision Criteria": { label: "Criteria",   tone: "info"  },
  "Decision Process":  { label: "Process",    tone: "info"  },
  "Paper Process":     { label: "Paper",      tone: "info"  },
  "Identify Pain":     { label: "Pain",       tone: "info"  },
  "Coach":             { label: "Coach",      tone: "good"  },
  "Competition":       { label: "Comp.",      tone: "warn"  },
};

// ─────────────────────────────────────────────────────────────────────────────
// 1) STAKEHOLDER GRADIENT
// ─────────────────────────────────────────────────────────────────────────────

function PegaStakeholderGridTab({ deal }) {
  const [sort, setSort] = useState("warmth"); // warmth | silence | name | commitments
  const [filter, setFilter] = useState("all"); // all | champions | cold | open-cmts | missing
  const [openId, setOpenId] = useState(null);

  const rows = useMemo(() => {
    const list = (deal.stakeholders || []).slice();
    const sorters = {
      warmth: (a, b) => (b.warmth ?? -1) - (a.warmth ?? -1),
      silence: (a, b) => (b.silenceDays ?? -1) - (a.silenceDays ?? -1),
      name: (a, b) => a.name.localeCompare(b.name),
      commitments: (a, b) => (b.openCommitments ?? 0) - (a.openCommitments ?? 0),
    };
    list.sort(sorters[sort] || sorters.warmth);
    return list;
  }, [deal.stakeholders, sort]);

  const filtered = useMemo(() => {
    return rows.filter((s) => {
      if (filter === "champions") return s.meddpicc === "Champion" || s.meddpicc === "Coach";
      if (filter === "cold") return (s.silenceDays ?? 0) >= 14;
      if (filter === "open-cmts") return (s.openCommitments ?? 0) > 0;
      if (filter === "missing") return !!s.missing;
      return true;
    });
  }, [rows, filter]);

  const counts = useMemo(() => {
    const all = rows.length;
    const engaged = rows.filter((s) => !s.missing).length;
    const cold = rows.filter((s) => (s.silenceDays ?? 0) >= 14).length;
    const openC = rows.reduce((sum, s) => sum + (s.openCommitments ?? 0), 0);
    return { all, engaged, cold, openC };
  }, [rows]);

  return (
    <div className="dd-section" style={{ paddingTop: 8 }}>
      <div className="dd-section-h">
        <span>Stakeholder gradient</span>
        <span className="count" style={{ color: "var(--text-3)" }}>
          {counts.engaged} engagés · {counts.cold} froids · {counts.openC} engagements ouverts
        </span>
      </div>

      <div className="peg-toolbar">
        <div className="peg-chips" role="tablist" aria-label="Filtrer">
          {[
            { k: "all",       label: `Tous · ${counts.all}` },
            { k: "champions", label: "Champions / coachs" },
            { k: "cold",      label: `Froids (>14j) · ${counts.cold}` },
            { k: "open-cmts", label: `Engagements ouverts · ${counts.openC}` },
            { k: "missing",   label: "Manquants" },
          ].map((c) => (
            <button
              key={c.k}
              type="button"
              className={`peg-chip ${filter === c.k ? "is-on" : ""}`}
              onClick={() => setFilter(c.k)}
            >
              {c.label}
            </button>
          ))}
        </div>
        <div className="peg-sort">
          <label className="peg-sort-label">Trier</label>
          <select
            className="peg-sort-select"
            value={sort}
            onChange={(e) => setSort(e.target.value)}
          >
            <option value="warmth">Warmth</option>
            <option value="silence">Silence</option>
            <option value="commitments">Engagements ouverts</option>
            <option value="name">Nom</option>
          </select>
        </div>
      </div>

      <div className="peg-grid" role="table" aria-label="Stakeholder gradient">
        <div className="peg-grid-head" role="row">
          <span role="columnheader">Personne</span>
          <span role="columnheader">MEDDPICC</span>
          <span role="columnheader">Warmth</span>
          <span role="columnheader">Dernier contact</span>
          <span role="columnheader">Silence</span>
          <span role="columnheader">Engagements</span>
          <span role="columnheader" aria-label="Actions" />
        </div>

        {filtered.map((s) => {
          const meta = MEDDPICC_META[s.meddpicc] || { label: s.meddpicc || "—", tone: "info" };
          const warmthTone = pegaWarmthTone(s.warmth ?? 0);
          const silenceTone = pegaSilenceTone(s.silenceDays);
          const isOpen = openId === s.name;
          return (
            <div
              key={s.name}
              className={`peg-grid-row ${s.missing ? "is-missing" : ""} ${isOpen ? "is-open" : ""}`}
              role="row"
            >
              <button
                type="button"
                className="peg-grid-cells"
                onClick={() => setOpenId(isOpen ? null : s.name)}
                aria-expanded={isOpen}
              >
                <span className="peg-grid-cell peg-c-person">
                  <span className="avatar sm">{pegaInitials(s.name)}</span>
                  <span className="peg-c-person-id">
                    <span className="peg-c-name">{s.name}</span>
                    <span className="peg-c-role">{s.role}</span>
                  </span>
                </span>

                <span className="peg-grid-cell">
                  <span className={`peg-meddpicc tone-${meta.tone}`}>{meta.label}</span>
                </span>

                <span className="peg-grid-cell">
                  {s.missing ? (
                    <span className="peg-muted">—</span>
                  ) : (
                    <span className="peg-warmth">
                      <span className={`peg-warmth-track tone-${warmthTone}`}>
                        <span
                          className="peg-warmth-fill"
                          style={{ width: `${Math.max(4, s.warmth ?? 0)}%` }}
                        />
                      </span>
                      <span className="peg-warmth-v">{s.warmth ?? 0}</span>
                    </span>
                  )}
                </span>

                <span className="peg-grid-cell peg-c-mono">
                  {s.missing ? <span className="peg-muted">jamais</span> : pegaDaysAgo(s.lastTouchDays)}
                </span>

                <span className="peg-grid-cell">
                  {s.missing ? (
                    <span className="peg-muted">—</span>
                  ) : (
                    <span className={`peg-silence tone-${silenceTone}`}>
                      {pegaDaysAgo(s.silenceDays)}
                    </span>
                  )}
                </span>

                <span className="peg-grid-cell">
                  {(s.openCommitments ?? 0) > 0 ? (
                    <span className="peg-cmt-count">{s.openCommitments}</span>
                  ) : (
                    <span className="peg-muted">0</span>
                  )}
                </span>

                <span className="peg-grid-cell peg-c-caret">
                  <Icon name="chevronR" size={12} />
                </span>
              </button>

              {isOpen && (
                <div className="peg-grid-body">
                  <p className="peg-note">{s.note || "Aucune note."}</p>
                  <div className="peg-row-meta">
                    <span><b>Pouvoir</b> {s.power ?? "—"}/5</span>
                    <span><b>Soutien</b> {s.support ?? "—"}/5</span>
                    {s.missing && <span className="peg-tag warn">Manquant — pas encore engagé</span>}
                  </div>
                </div>
              )}
            </div>
          );
        })}

        {filtered.length === 0 && (
          <div className="peg-empty">Aucun stakeholder ne correspond à ce filtre.</div>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 2) COMMITMENT LEDGER
// ─────────────────────────────────────────────────────────────────────────────

const SOURCE_ICON = { meeting: "calendar", email: "mail", call: "phone", agreement: "handshake" };
const STATUS_META = {
  overdue:  { label: "En retard", tone: "warn"  },
  "at-risk":{ label: "À risque",  tone: "amber" },
  open:     { label: "Ouvert",    tone: "info"  },
  done:     { label: "Honoré",    tone: "good"  },
};

// Status drives the row's left-bar color AND the due-date color. No status
// chip is rendered — the visual encoding already carries the meaning.
function pegaStatusTone(status) {
  if (status === "overdue") return "warn";
  if (status === "at-risk") return "amber";
  if (status === "done")    return "good";
  return "info";
}

// Due-date label: short, color-encoded, replaces both the verbose "Échéance"
// prefix and the separate status badge.
function pegaDueLabel(c) {
  if (c.status === "done") return "Honoré";
  if (c.status === "overdue") return `${c.ageDays || 0}j de retard`;
  if (c.status === "at-risk") return `${c.dueDate} · à risque`;
  return `Échéance ${c.dueDate}`;
}

// Each commitment carries a `type` that groups it within its direction.
// Inbound (buyer-to-us) types describe the nature of what we're waiting on and
// share a single "Relancer" CTA. Outbound (us-to-buyer) types describe what we
// owe, and each carries its own action verb (recurring items have none).
const CMT_TYPE_META = {
  // buyer-to-us — what they owe us
  approval:    { label: "Approbation", icon: "check"  },
  decision:    { label: "Décision",    icon: "target" },
  information: { label: "Information",  icon: "note"   },
  // us-to-buyer — what we owe them
  document:    { label: "Document",   icon: "paperclip", cta: "Envoyer"    },
  meeting:     { label: "Rencontre",  icon: "calendar",  cta: "Programmer" },
  data:        { label: "Données",    icon: "trend",     cta: "Partager"   },
  recurring:   { label: "Récurrent",  icon: "route",     cta: null         },
};

// Display order of the type groups within each direction section.
const CMT_TYPE_ORDER = {
  "buyer-to-us": ["approval", "decision", "information"],
  "us-to-buyer": ["document", "meeting", "data", "recurring"],
};

// ── CTA wiring ────────────────────────────────────────────────────────────────
// Every action CTA opens the same chooser (do it myself / let AI do it) and
// routes the choice to the global action-preview modal, confirming with a toast.

function pegaFirstName(name) {
  if (!name) return "";
  const stripped = name.replace(/^(Col\.|Gén\.|Cdr|Cdt|Capt\.|CG|ICA|Mme|M\.|Dr|Mr)\s+/i, "");
  return stripped.split(" ")[0];
}

// Ammo piece → choose manual prep vs AI draft, then preview, then toast.
function pegaAmmoAction(a, championName) {
  const who = championName || "le champion";
  window.openActionChoice({
    kicker: "Préparer cette pièce",
    title: a.title,
    context: a.desc,
    selfSub: "Rédiger et finaliser la pièce vous-même",
    aiSub: "L'IA génère un brouillon prêt à relire",
    onSelf: () => window.previewAction({
      kicker: "Préparation manuelle",
      title: a.title,
      meta: [
        { label: "Pièce", value: a.title },
        { label: "Destinataire", value: who },
        { label: "Statut", value: (AMMO_STATUS[a.status] || {}).label || "—" },
      ],
      body: { label: "À faire", text: `${a.desc} Une fois prête, marquez la pièce comme prête à transmettre à ${who}.` },
      primaryLabel: "Marquer comme prêt",
      onConfirm: () => window.fireToast && window.fireToast(`« ${a.title} » marqué comme prêt`),
    }),
    onAi: () => window.previewAction({
      kicker: "IA · brouillon généré",
      title: a.title,
      meta: [
        { label: "Pièce", value: a.title },
        { label: "Destinataire", value: who },
      ],
      body: {
        label: "Brouillon",
        text: `Bonjour ${pegaFirstName(who)}, voici « ${a.title} » pour préparer votre prochaine échéance interne. ${a.desc} Dites-moi si vous souhaitez l'ajuster avant diffusion.`,
      },
      primaryLabel: `Envoyer à ${pegaFirstName(who)}`,
      onConfirm: () => window.fireToast && window.fireToast(`Envoyé à ${who}`),
    }),
  });
}

// Commitment CTA → manual vs AI, framed by direction (chase vs deliver).
function pegaCommitmentAction(c, ctaLabel, direction) {
  const inbound = direction === "buyer-to-us";
  const who = c.who;
  window.openActionChoice({
    kicker: inbound ? "Relancer cet engagement" : "Honorer cet engagement",
    title: c.what,
    context: `${who} · ${c.whoRole}`,
    selfSub: inbound ? "Rédiger la relance vous-même" : "Préparer et transmettre vous-même",
    aiSub: "L'IA prépare un brouillon prêt à envoyer",
    onSelf: () => window.previewAction({
      kicker: "Action manuelle",
      title: c.what,
      meta: [
        { label: inbound ? "À relancer" : "Destinataire", value: `${who} · ${c.whoRole}` },
        { label: "Échéance", value: c.dueDate },
        { label: "Source", value: c.sourceTitle },
      ],
      body: {
        label: "À faire",
        text: inbound
          ? `Relancez ${who} sur cet engagement, puis consignez sa réponse.`
          : `Préparez « ${c.what} » et transmettez-le à ${who}.`,
      },
      primaryLabel: inbound ? "Marquer comme relancé" : "Marquer comme honoré",
      onConfirm: () => window.fireToast && window.fireToast(
        inbound ? `Relance notée pour ${who}` : `« ${c.what} » honoré`
      ),
    }),
    onAi: () => window.previewAction({
      kicker: "IA · brouillon généré",
      title: c.what,
      meta: [
        { label: "Destinataire", value: `${who} · ${c.whoRole}` },
        { label: "Canal", value: "Email" },
      ],
      body: {
        label: "Brouillon",
        text: inbound
          ? `Bonjour ${pegaFirstName(who)}, un point rapide sur « ${c.what} » évoqué (${c.sourceTitle}). Où en sommes-nous ? Merci d'avance.`
          : `Bonjour ${pegaFirstName(who)}, comme convenu (${c.sourceTitle}), voici « ${c.what} ». Dites-moi si un ajustement est nécessaire.`,
      },
      primaryLabel: ctaLabel || "Envoyer",
      onConfirm: () => window.fireToast && window.fireToast(
        inbound ? `Relance envoyée à ${who}` : `Envoyé à ${who}`
      ),
    }),
  });
}

function PegaCommitmentsTab({ deal }) {
  const [statusF, setStatusF] = useState("open"); // open | overdue | done | all

  const all = deal.commitments || [];

  const filtered = useMemo(() => {
    return all.filter((c) => {
      if (statusF === "open"    && !(c.status === "open" || c.status === "at-risk")) return false;
      if (statusF === "overdue" && c.status !== "overdue") return false;
      if (statusF === "done"    && c.status !== "done") return false;
      return true;
    });
  }, [all, statusF]);

  const inbound  = filtered.filter((c) => c.direction === "buyer-to-us");
  const outbound = filtered.filter((c) => c.direction === "us-to-buyer");

  const counts = useMemo(() => ({
    total:     all.length,
    overdue:   all.filter((c) => c.status === "overdue").length,
  }), [all]);

  return (
    <div className="dd-section" style={{ paddingTop: 8 }}>
      <div className="dd-section-h">
        <span>Commitment ledger</span>
        <span className="count" style={{ color: "var(--text-3)" }}>
          {counts.total} engagements · {counts.overdue} en retard
        </span>
      </div>

      {/* Single, minimal filter row — status only. Direction is split into
          two sections below, so a direction filter would be redundant. */}
      <div className="peg-toolbar">
        <div className="peg-chips" role="tablist" aria-label="Statut">
          {[
            { k: "open",    label: "Ouverts" },
            { k: "overdue", label: `En retard${counts.overdue ? ` · ${counts.overdue}` : ""}` },
            { k: "done",    label: "Honorés" },
            { k: "all",     label: "Tous" },
          ].map((c) => (
            <button
              key={c.k}
              type="button"
              className={`peg-chip ${statusF === c.k ? "is-on" : ""}`}
              onClick={() => setStatusF(c.k)}
            >
              {c.label}
            </button>
          ))}
        </div>
      </div>

      {/* Two stacked sections, each grouped by commitment type. Direction is
          encoded by the section header; type by the icon-led group subheaders. */}
      <PegaCmtSection
        title="Acheteur → nous"
        sub="Ce qu'ils nous doivent"
        direction="buyer-to-us"
        items={inbound}
        actionLabel="Relancer"
      />
      <PegaCmtSection
        title="Nous → acheteur"
        sub="Ce que nous leur devons"
        direction="us-to-buyer"
        items={outbound}
      />
    </div>
  );
}

// One section per direction. Items are grouped by `type` into icon-led
// subheaders, then laid out as a 2-up card grid (not a flat list). Each card:
// source icon + what + recipient + due-with-tone label + a single CTA.
// Inbound shares one CTA (actionLabel); outbound uses the type's own verb.
function PegaCmtSection({ title, sub, direction, items, actionLabel }) {
  const order = CMT_TYPE_ORDER[direction] || [];
  const groups = order
    .map((type) => ({ type, meta: CMT_TYPE_META[type], items: items.filter((c) => c.type === type) }))
    .filter((g) => g.items.length > 0);

  // Safety net for any item whose type isn't in the configured order.
  const known = new Set(order);
  const leftovers = items.filter((c) => !known.has(c.type));
  if (leftovers.length) {
    groups.push({ type: "autres", meta: { label: "Autres", icon: "note" }, items: leftovers });
  }

  return (
    <section className="peg-cmt-section">
      <header className="peg-cmt-section-h">
        <div>
          <h4 className="peg-cmt-section-title">{title}</h4>
          <span className="peg-cmt-section-sub">{sub}</span>
        </div>
        <span className="peg-cmt-section-count">{items.length}</span>
      </header>

      {items.length === 0 ? (
        <div className="peg-empty">Aucun engagement.</div>
      ) : (
        <div className="peg-cmt-groups">
          {groups.map((g) => (
            <div key={g.type} className="peg-cmt-group">
              <div className="peg-cmt-group-h">
                <span className="peg-cmt-group-icon"><Icon name={g.meta.icon} size={13} /></span>
                <span className="peg-cmt-group-label">{g.meta.label}</span>
                <span className="peg-cmt-group-count">{g.items.length}</span>
              </div>

              <div className="peg-cmt-grid">
                {g.items.map((c) => {
                  const tone = pegaStatusTone(c.status);
                  const cta = direction === "buyer-to-us" ? actionLabel : g.meta.cta;
                  return (
                    <article key={c.id} className={`peg-cmt-card status-${c.status} tone-${tone}`}>
                      <div className="peg-cmt-card-top">
                        <span className="peg-cmt-card-icon">
                          <Icon name={SOURCE_ICON[c.source] || "note"} size={13} />
                        </span>
                        <p className="peg-cmt-card-what">{c.what}</p>
                      </div>

                      <div className="peg-cmt-card-meta">
                        <span className="peg-cmt-card-who">
                          <span className="avatar xs">{pegaInitials(c.who)}</span>
                          <span className="peg-cmt-card-who-id">
                            <b>{c.who}</b> <span className="peg-cmt-card-role">· {c.whoRole}</span>
                          </span>
                        </span>
                        <span className="peg-cmt-card-src">{c.sourceTitle}</span>
                      </div>

                      <div className="peg-cmt-card-foot">
                        <span className={`peg-cmt-due tone-${tone}-text`}>{pegaDueLabel(c)}</span>
                        {c.status !== "done" && cta && (
                          <button
                            type="button"
                            className="btn sm accent"
                            onClick={() => pegaCommitmentAction(c, cta, direction)}
                          >
                            {cta}
                          </button>
                        )}
                      </div>
                    </article>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// 3) CHAMPION ENABLEMENT
// ─────────────────────────────────────────────────────────────────────────────

const AMMO_STATUS = {
  ready:   { label: "Prêt",       tone: "good",  icon: "check" },
  draft:   { label: "Brouillon",  tone: "muted", icon: "note"  },
  missing: { label: "À produire", tone: "warn",  icon: "plus"  },
};

function PegaChampionTab({ deal }) {
  const pack = deal.championPack;
  if (!pack) {
    return (
      <div className="dd-section" style={{ paddingTop: 8 }}>
        <p className="peg-empty">Aucun pack champion configuré pour ce deal.</p>
      </div>
    );
  }
  const milestone = pack.nextMilestone || {};
  const ammo = pack.ammunition || [];
  const ammoCounts = {
    ready:   ammo.filter((a) => a.status === "ready").length,
    draft:   ammo.filter((a) => a.status === "draft").length,
    missing: ammo.filter((a) => a.status === "missing").length,
  };
  const readiness = ammo.length
    ? Math.round((ammoCounts.ready / ammo.length) * 100)
    : 0;

  return (
    <div className="dd-section peg-champ" style={{ paddingTop: 8 }}>
      {/* Hero — qui c'est, prochaine échéance, quel rôle */}
      <div className="peg-champ-hero">
        <div className="peg-champ-id">
          <span className="avatar lg">{pegaInitials(pack.name)}</span>
          <div>
            <h3 className="h3 peg-champ-name">{pack.name}</h3>
            <p className="peg-champ-role">{pack.role}</p>
            <div className="peg-champ-meta">
              <span className={`peg-meddpicc tone-${pegaWarmthTone(pack.warmth)}`}>
                Warmth {pack.warmth}
              </span>
              <span className="peg-muted">
                Notre rôle : <b>équiper</b>, pas être présent au COMEX.
              </span>
            </div>
          </div>
        </div>

        <div className="peg-champ-milestone">
          <div className="peg-eyebrow">Prochaine échéance interne</div>
          <div className="peg-champ-mile-title">{milestone.label}</div>
          <div className="peg-champ-mile-date">
            <b>{milestone.date}</b> · J-{milestone.daysAway}
          </div>
          {milestone.context && <p className="peg-champ-mile-ctx">{milestone.context}</p>}
          {milestone.audience && milestone.audience.length > 0 && (
            <div className="peg-champ-audience">
              <span className="peg-eyebrow">Audience interne</span>
              <span className="peg-champ-audience-list">{milestone.audience.join(" · ")}</span>
            </div>
          )}
        </div>
      </div>

      {/* Readiness — composition du pack en un coup d'œil */}
      <div className="peg-readiness">
        <div className="peg-readiness-num">
          <span className="peg-readiness-pct">{readiness}%</span>
          <span className="peg-readiness-cap">pack prêt</span>
        </div>
        <div className="peg-readiness-body">
          <div
            className="peg-readiness-track"
            role="img"
            aria-label={`${ammoCounts.ready} prêtes, ${ammoCounts.draft} en brouillon, ${ammoCounts.missing} à produire`}
          >
            {ammoCounts.ready > 0 && (
              <span className="peg-readiness-seg tone-good" style={{ flexGrow: ammoCounts.ready }} />
            )}
            {ammoCounts.draft > 0 && (
              <span className="peg-readiness-seg tone-draft" style={{ flexGrow: ammoCounts.draft }} />
            )}
            {ammoCounts.missing > 0 && (
              <span className="peg-readiness-seg tone-warn" style={{ flexGrow: ammoCounts.missing }} />
            )}
          </div>
          <div className="peg-readiness-legend">
            <span><i className="peg-readiness-dot tone-good" />{ammoCounts.ready} prêtes</span>
            <span><i className="peg-readiness-dot tone-draft" />{ammoCounts.draft} brouillon</span>
            <span><i className="peg-readiness-dot tone-warn" />{ammoCounts.missing} à produire</span>
          </div>
        </div>
      </div>

      {/* Munitions */}
      <div className="dd-section-h" style={{ marginTop: 8 }}>
        <span>Pack munitions</span>
        <span className="count" style={{ color: "var(--text-3)" }}>
          {ammo.length} pièces
        </span>
      </div>
      <div className="peg-ammo-grid">
        {ammo.map((a) => {
          const st = AMMO_STATUS[a.status] || AMMO_STATUS.draft;
          return (
            <div key={a.id} className={`peg-ammo status-${a.status}`}>
              <div className="peg-ammo-head">
                <span className={`peg-ammo-ic tone-${st.tone}`}>
                  <Icon name={st.icon} size={13} />
                </span>
                <span className={`peg-ammo-state tone-${st.tone}`}>{st.label}</span>
              </div>
              <div className="peg-ammo-title">{a.title}</div>
              <p className="peg-ammo-desc">{a.desc}</p>
              <div className="peg-ammo-foot">
                <button
                  type="button"
                  className={`btn sm ${a.status === "ready" ? "accent" : "ghost"}`}
                  onClick={() => pegaAmmoAction(a, pack.name)}
                >
                  {a.action}
                </button>
              </div>
            </div>
          );
        })}
      </div>

      {/* Objections attendues */}
      <div className="dd-section-h" style={{ marginTop: 16 }}>
        <span>Objections attendues au COMEX</span>
        <span className="count" style={{ color: "var(--text-3)" }}>
          {(pack.expectedObjections || []).length}
        </span>
      </div>
      <ul className="peg-obj-list">
        {(pack.expectedObjections || []).map((o, i) => (
          <li key={i} className={`peg-obj prio-${o.priority || "medium"}`}>
            <div className="peg-obj-q"><span className="peg-obj-dot" aria-hidden="true" />« {o.objection} »</div>
            <div className="peg-obj-src">{o.source}</div>
          </li>
        ))}
      </ul>

      {/* Signaux récents — preuve que Camille travaille pour nous */}
      {pack.recentSignals && pack.recentSignals.length > 0 && (
        <>
          <div className="dd-section-h" style={{ marginTop: 16 }}>
            <span>Signaux récents</span>
            <span className="count" style={{ color: "var(--text-3)" }}>
              {pack.recentSignals.length}
            </span>
          </div>
          <ul className="peg-signal-list">
            {pack.recentSignals.map((s, i) => (
              <li key={i} className="peg-signal">
                <span className="peg-signal-time">{s.time}</span>
                <span className="peg-signal-text">{s.signal}</span>
              </li>
            ))}
          </ul>
        </>
      )}
    </div>
  );
}

// Expose so screens-deal-detail.jsx can reference them.
window.PegaStakeholderGridTab = PegaStakeholderGridTab;
window.PegaCommitmentsTab = PegaCommitmentsTab;
window.PegaChampionTab = PegaChampionTab;