// Cost trajectory — DC fade + cloud ramp + savings booked, as a layered SVG line chart.

function CostCurve() {
  const s = ProgramStore.useStore();
  const r = ProgramStore.rollups(s);
  const series = s.costSeries;

  // Chart geometry
  const W = 560, H = 280;
  const PAD_L = 44, PAD_R = 18, PAD_T = 18, PAD_B = 28;
  const innerW = W - PAD_L - PAD_R;
  const innerH = H - PAD_T - PAD_B;

  const maxY = Math.ceil(Math.max(...series.map(d => d.dc + d.cloud)) * 1.1 / 2) * 2;
  const xAt = (i) => PAD_L + (i / (series.length - 1)) * innerW;
  const yAt = (v) => PAD_T + innerH - (v / maxY) * innerH;

  const toPath = (key) => series.map((d, i) => `${i === 0 ? 'M' : 'L'}${xAt(i).toFixed(1)},${yAt(d[key]).toFixed(1)}`).join(' ');
  const toAreaPath = (key) => {
    const top = series.map((d, i) => `${i === 0 ? 'M' : 'L'}${xAt(i).toFixed(1)},${yAt(d[key]).toFixed(1)}`).join(' ');
    const bottom = `L${xAt(series.length - 1).toFixed(1)},${yAt(0)} L${xAt(0).toFixed(1)},${yAt(0)} Z`;
    return top + bottom;
  };

  // Y-axis ticks
  const ticks = [];
  const step = maxY / 4;
  for (let i = 0; i <= 4; i++) ticks.push(i * step);

  return (
    <div className="cio-card">
      <div className="cio-card-head">
        <div>
          <span className="eyebrow">Cost trajectory · $M / quarter</span>
          <h3>DC fade, cloud ramp, savings booked</h3>
        </div>
        <span className="right">6Q horizon</span>
      </div>

      <div className="cc-wrap">
        <div className="cc-stats">
          <div className="cc-stat">
            <span className="lbl">Savings booked</span>
            <span className="val">${r.totalSaved.toFixed(1)}M<span className="delta">forecast</span></span>
          </div>
          <div className="cc-stat">
            <span className="lbl">DC exit by Q2 27</span>
            <span className="val">{Math.round(r.dcExit)}%<span className="delta">on track</span></span>
          </div>
          <div className="cc-stat">
            <span className="lbl">End-state run rate</span>
            <span className="val">${r.endRunRate.toFixed(1)}M<span className="delta">vs ${r.startRunRate.toFixed(1)}M</span></span>
          </div>
        </div>

        <div className="cc-chart">
          <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet" style={{ width:'100%', height:'100%' }}>
            {/* Y grid + labels */}
            {ticks.map((t, i) => (
              <g key={i}>
                <line x1={PAD_L} x2={W - PAD_R} y1={yAt(t)} y2={yAt(t)} stroke="var(--rule)" strokeWidth="1"/>
                <text x={PAD_L - 8} y={yAt(t) + 3} textAnchor="end" fontSize="9" fontFamily="var(--font-mono)" fill="var(--fg-4)">${t.toFixed(0)}M</text>
              </g>
            ))}
            {/* Quarter labels */}
            {series.map((d, i) => (
              <text key={i} x={xAt(i)} y={H - 8} textAnchor="middle" fontSize="10" fontFamily="var(--font-mono)" fill="var(--fg-3)" letterSpacing="0.04em">
                {d.q}
              </text>
            ))}
            {/* Saved area (amber, faint fill) */}
            <path d={toAreaPath('saved')} fill="#ffa32926" stroke="none"/>
            <path d={toPath('saved')} fill="none" stroke="#ffa329" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
            {/* Cloud line (blue) */}
            <path d={toPath('cloud')} fill="none" stroke="#48a5da" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
            {/* DC line (dark fg) */}
            <path d={toPath('dc')} fill="none" stroke="var(--fg-3)" strokeWidth="2" strokeDasharray="0" strokeLinejoin="round" strokeLinecap="round"/>

            {/* Data point dots — latest value annotated */}
            {series.map((d, i) => (
              <g key={i}>
                <circle cx={xAt(i)} cy={yAt(d.dc)}    r="2.5" fill="var(--fg-3)"/>
                <circle cx={xAt(i)} cy={yAt(d.cloud)} r="2.5" fill="#48a5da"/>
                <circle cx={xAt(i)} cy={yAt(d.saved)} r="2.5" fill="#ffa329"/>
              </g>
            ))}

            {/* Today marker */}
            <line
              x1={xAt(s.today)} x2={xAt(s.today)}
              y1={PAD_T - 2} y2={H - PAD_B + 2}
              stroke="var(--accent)" strokeWidth="1" strokeDasharray="2 3"
            />
            <text x={xAt(s.today)} y={PAD_T - 6} textAnchor="middle" fontSize="8" fontFamily="var(--font-mono)" fill="var(--accent)" letterSpacing="0.1em">NOW</text>
          </svg>
        </div>

        <div className="cc-legend">
          <span><span className="sw cc-sw-dc"/> On-prem DC</span>
          <span><span className="sw cc-sw-cloud"/> Cloud</span>
          <span><span className="sw cc-sw-saved"/> Savings booked</span>
        </div>
      </div>
    </div>
  );
}