// Emission Scenarios — Pillar 03

// SVG line chart
const ScenarioChart = ({ scale = 1 }) => {
  const W = 1120, H = 460;
  const PAD = { l: 70, r: 110, t: 30, b: 50 };
  const innerW = W - PAD.l - PAD.r;
  const innerH = H - PAD.t - PAD.b;

  const years = SCENARIO_YEARS;
  const scaled = {
    bau:    SCENARIOS.bau.data.map(v    => v * scale),
    steady: SCENARIOS.steady.data.map(v => v * scale),
    acc:    SCENARIOS.acc.data.map(v    => v * scale),
  };
  const rawMax = Math.max(...scaled.bau, ...scaled.steady, ...scaled.acc);
  const yMax = rawMax < 1 ? 1 : (rawMax < 10 ? Math.ceil(rawMax * 1.1) : Math.ceil(rawMax / 5) * 5 * 1.05);
  const tickStep = yMax / 6;
  const yTicks = [0,1,2,3,4,5,6].map(i => Math.round(i * tickStep * 100) / 100);

  const xScale = (i) => PAD.l + (i / (years.length - 1)) * innerW;
  const yScale = (v) => PAD.t + (1 - v / yMax) * innerH;

  const pathFor = (data) =>
    data.map((v, i) => `${i === 0 ? "M" : "L"} ${xScale(i)} ${yScale(v)}`).join(" ");

  const areaFor = (data) => {
    const top = data.map((v, i) => `${i === 0 ? "M" : "L"} ${xScale(i)} ${yScale(v)}`).join(" ");
    const bot = `L ${xScale(data.length - 1)} ${yScale(0)} L ${xScale(0)} ${yScale(0)} Z`;
    return top + " " + bot;
  };

  const bauArea = scaled.bau.map((v, i) => ({ x: i, top: v, bot: scaled.acc[i] }));
  const wedgePath =
    "M " + xScale(0) + " " + yScale(scaled.bau[0]) +
    scaled.bau.map((v, i) => i === 0 ? "" : ` L ${xScale(i)} ${yScale(v)}`).join("") +
    [...scaled.acc].reverse().map((v, i) => ` L ${xScale(scaled.acc.length - 1 - i)} ${yScale(v)}`).join("") +
    " Z";

  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{width: "100%", height: "auto", display: "block"}}>
      <defs>
        <linearGradient id="wedge-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#62D32F" stopOpacity="0.18"/>
          <stop offset="100%" stopColor="#62D32F" stopOpacity="0.04"/>
        </linearGradient>
        <linearGradient id="bau-grad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FF5721" stopOpacity="0.12"/>
          <stop offset="100%" stopColor="#FF5721" stopOpacity="0"/>
        </linearGradient>
      </defs>

      {/* Y gridlines */}
      {yTicks.map(t => (
        <g key={t}>
          <line x1={PAD.l} x2={W - PAD.r} y1={yScale(t)} y2={yScale(t)} stroke="var(--rule-soft)" strokeWidth="1" />
          <text x={PAD.l - 14} y={yScale(t) + 4} textAnchor="end" fontSize="11" fontFamily="JetBrains Mono, monospace" fill="var(--fg-3)" fontWeight="600">{t}</text>
        </g>
      ))}
      <text x={PAD.l - 50} y={PAD.t + 12} fontSize="10" fontFamily="JetBrains Mono, monospace" fill="var(--fg-3)" fontWeight="700" letterSpacing="0.08em">kt CO₂e/yr</text>

      {/* X axis */}
      {years.map((y, i) => i % 2 === 0 && (
        <g key={y}>
          <line x1={xScale(i)} x2={xScale(i)} y1={H - PAD.b} y2={H - PAD.b + 4} stroke="var(--fg-3)" />
          <text x={xScale(i)} y={H - PAD.b + 22} textAnchor="middle" fontSize="11.5" fontFamily="JetBrains Mono, monospace" fill="var(--fg-3)" fontWeight="600">{y}</text>
        </g>
      ))}
      <line x1={PAD.l} x2={W - PAD.r} y1={H - PAD.b} y2={H - PAD.b} stroke="var(--rule)" strokeWidth="1.5" />

      {/* "Avoided emissions" wedge between BAU and accelerated */}
      <path d={wedgePath} fill="url(#wedge-grad)" />

      {/* BAU area fill */}
      <path d={areaFor(scaled.bau)} fill="url(#bau-grad)" />

      {/* Lines */}
      <path d={pathFor(scaled.bau)}    fill="none" stroke="#FF5721" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      <path d={pathFor(scaled.steady)} fill="none" stroke="#114A7D" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="6 4" />
      <path d={pathFor(scaled.acc)}    fill="none" stroke="#00953C" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />

      {/* End-point dots + labels */}
      {[
        { key: "bau",    color: "#FF5721", label: "BAU"           },
        { key: "steady", color: "#114A7D", label: "End-of-life"   },
        { key: "acc",    color: "#00953C", label: "Accelerated"   },
      ].map(({ key, color, label }) => {
        const data = SCENARIOS[key].data;
        const v = data[data.length - 1];
        const cx = xScale(data.length - 1);
        const cy = yScale(v);
        return (
          <g key={key}>
            <circle cx={cx} cy={cy} r="5.5" fill="#fff" stroke={color} strokeWidth="2.5" />
            <circle cx={cx} cy={cy} r="2.5" fill={color} />
            <text x={cx + 12} y={cy + 4} fontSize="12" fontFamily="JetBrains Mono, monospace" fontWeight="700" fill={color}>{v < 1 ? v.toFixed(2) : v < 10 ? v.toFixed(1) : Math.round(v)} kt</text>
          </g>
        );
      })}

      {/* "Avoided emissions" annotation */}
      <g transform={`translate(${xScale(7) + 16}, ${yScale(55) - 12})`}>
        <rect x="0" y="0" width="186" height="42" rx="6" fill="#fff" stroke="var(--heat-green-dim)" strokeOpacity="0.4" />
        <text x="11" y="16" fontSize="10.5" fontFamily="Open Sans, sans-serif" fontWeight="700" fill="var(--heat-green-dim)" letterSpacing="0.1em">AVOIDED EMISSIONS</text>
        <text x="11" y="30" fontSize="11" fontFamily="JetBrains Mono, monospace" fontWeight="700" fill="var(--ink-900)">∫ ≈ 186 kt CO₂e by 2040</text>
      </g>

      {/* Today marker */}
      <line x1={xScale(0)} x2={xScale(0)} y1={PAD.t} y2={H - PAD.b} stroke="var(--cyan)" strokeWidth="1" strokeDasharray="2 3" opacity="0.6"/>
      <text x={xScale(0) + 6} y={PAD.t + 14} fontSize="10" fontFamily="JetBrains Mono, monospace" fontWeight="700" fill="var(--cyan-ink)" letterSpacing="0.1em">↑ TODAY</text>

      {/* EU 2032 marker */}
      <line x1={xScale(3)} x2={xScale(3)} y1={PAD.t} y2={H - PAD.b} stroke="var(--orange)" strokeWidth="1" strokeDasharray="2 3" opacity="0.5"/>
      <text x={xScale(3) + 6} y={PAD.t + 14} fontSize="10" fontFamily="JetBrains Mono, monospace" fontWeight="700" fill="var(--orange-700)" letterSpacing="0.1em">EU 2032 BAN</text>
    </svg>
  );
};

const Scenarios = ({ country = 'sen' }) => {
  const profile = COUNTRY_PROFILES[country] || COUNTRY_PROFILES.sen;
  if (!profile.available || profile.scale === 0) {
    return (
      <section className="band band-paper pillar-anchor" id="scenarios">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="swatch"></span>Pillar 03 · Emission Scenarios</div>
            <h1 className="headline">No scenario engine for {profile.short}.</h1>
            <p className="lede">{profile.scen_lede}</p>
          </div>
          <div className="meta"><b>Status</b>{profile.code === "eu" ? "Regulatory framework" : "Scoping"}<div className="pill-meta">Awaiting data</div></div>
        </div>
      </section>
    );
  }
  return (
    <>
      <section className="band band-paper pillar-anchor" id="scenarios">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="swatch"></span>Pillar 03 · Emission Scenarios</div>
            <h1 className="headline">
              Three trajectories to 2050 —
              <br/>
              <span className="em-green">one closes the gap.</span>
            </h1>
            <p className="lede">{profile.scen_lede}</p>
          </div>
          <div className="meta">
            <b>Methodology</b>
            HEAT × ENTSO-E TYNDP
            <div className="pill-meta">v2.1 · Mar 2026</div>
          </div>
        </div>

        <div className="chart-card">
          <div className="chart-head">
            <div>
              <h3>Annual SF₆ emissions · 2026 – 2050</h3>
              <div style={{fontSize: 12.5, color: "var(--fg-3)", marginTop: 4}}>Source: operator inventory × IPCC AR6 GWP × scenario leakage rates · kt CO₂e/yr</div>
            </div>
            <div className="legend">
              <span className="scenario-line"><span className="swatch-line solid-bau"></span>BAU</span>
              <span className="scenario-line"><span className="swatch-line solid-steady" style={{backgroundImage: "repeating-linear-gradient(90deg, var(--ink-700) 0 4px, transparent 4px 8px)", background: "var(--ink-700)"}}></span>End-of-life replacement</span>
              <span className="scenario-line"><span className="swatch-line solid-acc"></span>Accelerated retrofit</span>
            </div>
          </div>
          <ScenarioChart scale={profile.scale} />
        </div>

        <div className="row-3" style={{marginTop: 28}}>
          {[
            { k: "bau",    cls: "orange", emoji: "↗" },
            { k: "steady", cls: "navy",   emoji: "→" },
            { k: "acc",    cls: "green",  emoji: "↘" },
          ].map(({ k, cls, emoji }) => {
            const s = SCENARIOS[k];
            const peak2050 = s.data[s.data.length - 1] * profile.scale;
            return (
              <div className="scenario-card" key={k}>
                <div className="h">
                  <span className="swatch-line" style={{background: s.color}}></span>
                  <h4>{s.label}</h4>
                </div>
                <div className={`v ${cls}`}>{emoji} <span className="num">{peak2050 < 1 ? peak2050.toFixed(2) : peak2050 < 10 ? peak2050.toFixed(1) : Math.round(peak2050)}</span><span className="unit"> kt CO₂e in 2050</span></div>
                <div className="d">{s.desc}</div>
              </div>
            );
          })}
        </div>
      </section>

      <section className="band band-paper-2">
        <div className="section-head">
          <div>
            <div className="eyebrow navy"><span className="swatch"></span>Scenario assumptions</div>
            <h2 className="section-h">What changes between the three pathways.</h2>
            <p className="lede">Same asset perimeter, same GWP factor. The levers are <b>leakage discipline, retirement age, new-build specification, and recovery rate</b> at end-of-life.</p>
          </div>
          <div className="meta">
            <b>Disclosure</b>
            All figures preliminary
            <div className="pill-meta">For internal planning</div>
          </div>
        </div>

        <div className="assump-card">
          <div className="h">Parameter sheet · scenario engine inputs</div>
          <div className="assump-row head">
            <div>Parameter</div>
            <div>Business as usual</div>
            <div>End-of-life replacement</div>
            <div>Accelerated retrofit</div>
          </div>
          {SCENARIO_ASSUMPTIONS.map((a, i) => (
            <div className="assump-row" key={i}>
              <div className="lbl">{a.lbl}</div>
              <div className="v" style={{color: "var(--orange-700)"}}>{a.bau}</div>
              <div className="v" style={{color: "var(--ink-700)"}}>{a.steady}</div>
              <div className="v" style={{color: "var(--heat-green-dim)"}}>{a.acc}</div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
};

window.Scenarios = Scenarios;