/* OutputChart — area chart with time-range toggle */
const { useState: useStateChart } = React;

const CHART_DATA = {
  '24h': {
    labels: ['00', '04', '08', '12', '16', '20', '24'],
    actual:   [28, 22, 48, 82, 96, 74, 58],
    forecast: [26, 28, 52, 78, 92, 78, 62],
  },
  '7d': {
    labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
    actual:   [62, 58, 74, 82, 78, 90, 86],
    forecast: [60, 62, 70, 80, 82, 88, 84],
  },
  '30d': {
    labels: ['W1','W2','W3','W4','W5'],
    actual:   [54, 62, 70, 78, 84],
    forecast: [56, 60, 72, 76, 80],
  },
  '90d': {
    labels: ['Jan','Feb','Mar'],
    actual:   [48, 62, 78],
    forecast: [50, 60, 76],
  },
};

function OutputChart() {
  const [range, setRange] = useStateChart('24h');
  const d = CHART_DATA[range];
  const W = 680, H = 240, PL = 40, PR = 16, PT = 12, PB = 32;
  const max = 110;
  const xs = (i) => PL + (i / (d.actual.length - 1)) * (W - PL - PR);
  const ys = (v) => PT + (1 - v / max) * (H - PT - PB);
  const line = (arr) => arr.map((v, i) => `${i === 0 ? 'M' : 'L'}${xs(i)},${ys(v)}`).join(' ');
  const area = () => {
    const l = d.actual.map((v, i) => `${i === 0 ? 'M' : 'L'}${xs(i)},${ys(v)}`).join(' ');
    return `${l} L${xs(d.actual.length - 1)},${ys(0)} L${xs(0)},${ys(0)} Z`;
  };

  return (
    <div className="panel" style={{ gridColumn: '1 / 2' }}>
      <div className="panel-head">
        <div>
          <div className="p-title">Fleet output</div>
          <div className="p-sub">Actual vs forecast · MWh</div>
        </div>
        <div className="seg">
          {['24h','7d','30d','90d'].map(r => (
            <span key={r} className={range === r ? 'on' : ''} onClick={() => setRange(r)}>{r}</span>
          ))}
        </div>
      </div>
      <div className="chart-wrap">
        <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
          <defs>
            <linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%"  stopColor="#2F80ED" stopOpacity="0.28"/>
              <stop offset="100%" stopColor="#2F80ED" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {/* gridlines */}
          {[0, 25, 50, 75, 100].map(v => (
            <g key={v}>
              <line x1={PL} y1={ys(v)} x2={W - PR} y2={ys(v)} stroke="#D6E8FF" strokeDasharray="2 4"/>
              <text x={PL - 8} y={ys(v) + 3} fontSize="10" fill="#6B82A0" textAnchor="end" fontFamily="monospace">{v}</text>
            </g>
          ))}
          {/* x labels */}
          {d.labels.map((l, i) => (
            <text key={i} x={xs(i)} y={H - 10} fontSize="10.5" fill="#6B82A0" textAnchor="middle" fontFamily="var(--font-sans)">{l}</text>
          ))}
          {/* forecast dashed */}
          <path d={line(d.forecast)} fill="none" stroke="#9B8CFF" strokeWidth="1.5" strokeDasharray="4 4"/>
          {/* actual area */}
          <path d={area()} fill="url(#areaFill)"/>
          <path d={line(d.actual)} fill="none" stroke="#2F80ED" strokeWidth="2.25" strokeLinejoin="round"/>
          {/* dots on actual */}
          {d.actual.map((v, i) => (
            <circle key={i} cx={xs(i)} cy={ys(v)} r="3.2" fill="#fff" stroke="#2F80ED" strokeWidth="1.8"/>
          ))}
        </svg>
      </div>
      <div style={{ display: 'flex', gap: 16, fontSize: 11.5, color: 'var(--fg-2)', marginTop: 8 }}>
        <span><span style={{ display: 'inline-block', width: 10, height: 2, background: '#2F80ED', marginRight: 6, verticalAlign: 'middle' }}/>Actual</span>
        <span><span style={{ display: 'inline-block', width: 10, height: 2, background: '#9B8CFF', marginRight: 6, verticalAlign: 'middle' }}/>Forecast</span>
      </div>
    </div>
  );
}

Object.assign(window, { OutputChart });