/* ============================================================================
   Operation Outbreak — Wrapped  ·  SLIDE 2 · INDIVIDUAL REPORT CARD
   ============================================================================ */

/* Animated radial gauge with a purple→blue gradient ring. */
function RadialGauge({ value, play, size = 220, stroke = 16, gradId = "gaugeTech", from = "#7387F9", to = "#3F4AD1", label, sub, delay = 200 }) {
  const r = (size - stroke) / 2;
  const circ = 2 * Math.PI * r;
  const offset = play ? circ * (1 - value / 100) : circ;
  return (
    <div style={{ position: "relative", width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <defs>
          <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor={from} />
            <stop offset="100%" stopColor={to} />
          </linearGradient>
        </defs>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={`url(#${gradId})`} strokeWidth={stroke} strokeLinecap="round"
          strokeDasharray={circ} strokeDashoffset={play ? circ * (1 - value / 100) : circ}
          style={{ filter: `drop-shadow(0 0 10px ${from}66)` }}>
          {play && (
            <animate attributeName="stroke-dashoffset" from={circ} to={circ * (1 - value / 100)} dur="1.6s"
              begin="0.15s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.2 0.8 0.2 1" />
          )}
        </circle>
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <div style={{ fontFamily: T.mono, fontWeight: 700, fontSize: size * 0.27, lineHeight: 1, color: T.fg, letterSpacing: "-0.02em" }}>
          <CountUp to={value} play={play} duration={1600} delay={delay} />
        </div>
        {label && <div style={{ marginTop: 6, fontFamily: T.mono, fontSize: 11, fontWeight: 700, letterSpacing: "0.12em", color: T.fg3 }}>{label}</div>}
      </div>
    </div>
  );
}
window.RadialGauge = RadialGauge;

function InterventionChips({ data, play }) {
  const items = [
    { k: "mask", icon: "shield", label: "MASKS", c: T.mint },
    { k: "vaccine", icon: "syringe", label: "VAX", c: T.blue2 },
    { k: "test", icon: "scan-line", label: "TESTS", c: T.purple },
    { k: "rx", icon: "pill", label: "RX", c: T.teal },
  ];
  return (
    <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
      {items.map((it, i) => (
        <div key={it.k} style={{ display: "flex", alignItems: "center", gap: 9, padding: "10px 14px", border: `1px solid ${T.line}`, borderRadius: 12, background: T.panel,
          opacity: play ? 1 : 0, transform: play ? "none" : "translateY(8px)", transition: `all 420ms cubic-bezier(.2,.8,.2,1) ${300 + i * 90}ms` }}>
          <Icon name={it.icon} size={16} color={it.c} stroke={1.75} />
          <span style={{ fontFamily: T.mono, fontSize: 13, fontWeight: 700, color: T.fg }}>{data[it.k]}</span>
          <span style={{ fontFamily: T.mono, fontSize: 10, fontWeight: 600, letterSpacing: "0.1em", color: T.fg3 }}>{it.label}</span>
        </div>
      ))}
    </div>
  );
}

function SlideIndividual({ active, onShare }) {
  const D = window.OO_DATA.individual;
  const play = useReveal(active);
  const chaos = D.downstreamInfections > 0;

  return (
    <div className="oo-slide-inner">
      <div className="oo-s2-head">
        <div className="oo-s2-headl">
          <Eyebrow color={T.purple}>OUTBREAK REPORT CARD // {D.role}</Eyebrow>
          <h1 className="oo-title" style={{ marginTop: 14, lineHeight: 1.04 }}>
            Your outbreak profile <span className="oo-handle">{D.handle}</span>
          </h1>
          <p className="oo-sub" style={{ marginTop: 16 }}>
            {D.survived ? "You made it to the final bell — uninfected." : "You were infected before the final bell."} Here's how your run actually went.
          </p>
        </div>
      </div>

      <div className="oo-s2-grid">
        {/* hero metric — unique pings (massive) */}
        <GlowTile accent={T.purple} span={7} className="oo-s2-hero" pad={30}>
          <Eyebrow color={T.fg3}>UNIQUE PINGS · TOTAL CLOSE CONTACTS</Eyebrow>
          <div style={{ fontFamily: T.mono, fontWeight: 700, fontSize: "clamp(90px,13vw,168px)", lineHeight: 0.86, color: T.fg, letterSpacing: "-0.04em", marginTop: 8 }}>
            <CountUp to={D.uniquePings} play={play} duration={1700} />
          </div>
          <div style={{ marginTop: 18, display: "flex", gap: 26, flexWrap: "wrap", alignItems: "center" }}>
            <div>
              <div style={{ fontFamily: T.mono, fontSize: 11, color: T.fg3, letterSpacing: "0.08em" }}>NEAR-MISSES</div>
              <div style={{ fontFamily: T.mono, fontSize: 34, fontWeight: 700, color: T.coral2, marginTop: 4 }}>
                <CountUp to={D.nearMisses} play={play} duration={1400} delay={400} />
              </div>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: T.fg3, letterSpacing: "0.06em", marginTop: 2 }}>INFECTIOUS BRUSHES, NO BREACH</div>
            </div>
            <div style={{ width: 1, alignSelf: "stretch", background: T.line }} />
            <InterventionChips data={D.interventionsUsed} play={play} />
          </div>
        </GlowTile>

        {/* sponge index gauge */}
        <GlowTile accent={T.blue2} span={5} className="oo-s2-gauge" pad={26}>
          <Eyebrow color={T.fg3}>SPONGE INDEX</Eyebrow>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 8 }}>
            <RadialGauge value={D.spongeIndex} play={play} label="ABSORBED" />
          </div>
          <p style={{ fontFamily: T.sans, fontSize: 13, color: T.fg2, lineHeight: 1.5, marginTop: 8, textAlign: "center" }}>
            How much protective behaviour you soaked up. Higher is safer.
          </p>
        </GlowTile>

        {/* downstream infections — chaos metric */}
        <GlowTile accent={chaos ? T.coral : T.mint} span={6} className="oo-s2-down" pad={26} style={{ background: chaos ? "linear-gradient(135deg,#1a0f10,#11141A)" : "linear-gradient(135deg,#0f1a15,#11141A)" }}>
          <Eyebrow color={chaos ? T.coral2 : T.mint}>DOWNSTREAM INFECTIONS</Eyebrow>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginTop: 10 }}>
            <span style={{ fontFamily: T.mono, fontWeight: 700, fontSize: 96, lineHeight: 0.9, color: chaos ? T.coral2 : T.mint, letterSpacing: "-0.03em" }}>
              <CountUp to={D.downstreamInfections} play={play} duration={1400} delay={300} />
            </span>
            <Icon name={chaos ? "biohazard" : "shield-check"} size={40} color={chaos ? T.coral2 : T.mint} stroke={1.5} />
          </div>
          <p style={{ fontFamily: T.sans, fontSize: chaos ? 18 : 15, fontWeight: chaos ? 600 : 400, color: chaos ? T.coral2 : T.fg, lineHeight: 1.4, marginTop: 14 }}>
            {chaos
              ? `You directly or indirectly infected ${D.downstreamInfections} people.`
              : "You broke zero chains. Nobody got sick because of you."}
          </p>
        </GlowTile>

        {/* compliance percentile */}
        <GlowTile accent={T.mint} span={6} className="oo-s2-percentile" pad={26}>
          <Eyebrow color={T.fg3}>COMPLIANCE PERCENTILE</Eyebrow>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 16, marginTop: 12 }}>
            <span style={{ fontFamily: T.mono, fontWeight: 700, fontSize: 88, lineHeight: 0.85, color: T.fg, letterSpacing: "-0.03em" }}>
              <CountUp to={D.compliancePercentile} play={play} duration={1600} delay={200} /><span style={{ fontSize: 32, color: T.mint }}>th</span>
            </span>
            <div style={{ paddingBottom: 10 }}>
              <Star size={18} color={T.mint} />
              <div style={{ fontFamily: T.mono, fontSize: 11, color: T.fg2, letterSpacing: "0.06em", marginTop: 6 }}>TOP {100 - D.compliancePercentile}% OF<br />THE COHORT</div>
            </div>
          </div>
          <IndexBar value={D.compliancePercentile} accent={T.mint} play={play} />
        </GlowTile>
      </div>
    </div>
  );
}
window.SlideIndividual = SlideIndividual;