// Episode timeline — temp dots + med markers on one X-axis
// The soul of the app. Dark-first.

function Timeline({ width = 370, height = 156, mode = 'd' }) {
  const T = UN[mode];
  const padL = 28, padR = 12, padT = 14, padB = 30;
  const plotW = width - padL - padR;
  const plotH = height - padT - padB;

  // 24h window
  const hours = 30;
  const xAt = (h) => padL + (h / hours) * plotW;

  // temp scale 36.0 → 40.0
  const tMin = 36.0, tMax = 40.0;
  const yAt = (t) => padT + plotH - ((t - tMin) / (tMax - tMin)) * plotH;

  const sevColor = (t) => {
    if (t < 37.6) return T.sev.mild;
    if (t < 38.5) return T.sev.warm;
    if (t < 39.5) return T.sev.hot;
    return T.sev.urgent;
  };

  // synthetic temp curve — slow rise day 1, crashes after Tylenol, climbs back
  const tempPts = [
    [0,  37.1], [1,  37.4], [2,  37.6], [3,  38.1], [4,  38.6],
    [5,  38.9], [6,  39.0], [7,  38.5], [8,  38.0], [9,  37.7],
    [10, 37.8], [11, 38.2], [12, 38.6], [13, 39.1], [14, 39.3],
    [15, 38.8], [16, 38.3], [17, 37.9], [18, 37.6], [19, 37.8],
    [20, 38.0], [21, 38.3], [22, 38.6], [23, 38.4],
  ];

  // dose markers (hours from start, med)
  const doses = [
    { h: 3.2,  m: 'TYL' },
    { h: 8.0,  m: 'MOT' },
    { h: 13.5, m: 'TYL' },
    { h: 19.0, m: 'MOT' },
  ];

  const nowH = 23;

  // build smooth path
  const linePath = (() => {
    const pts = tempPts.map(([h, t]) => [xAt(h), yAt(t)]);
    if (pts.length < 2) return '';
    let d = `M ${pts[0][0]},${pts[0][1]}`;
    for (let i = 1; i < pts.length; i++) {
      const [x0, y0] = pts[i - 1], [x1, y1] = pts[i];
      const cx = (x0 + x1) / 2;
      d += ` C ${cx},${y0} ${cx},${y1} ${x1},${y1}`;
    }
    return d;
  })();

  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block' }}>
      {/* gridlines: severity thresholds */}
      {[37.5, 38.5, 39.5].map(t => (
        <line key={t} x1={padL} x2={width - padR} y1={yAt(t)} y2={yAt(t)}
              stroke={T.line} strokeWidth={1} strokeDasharray="2 4" />
      ))}
      {/* y labels */}
      {[37, 38, 39, 40].map(t => (
        <text key={t} x={padL - 6} y={yAt(t) + 3.5}
              fontFamily={UN.font.num} fontSize={9.5} fill={T.textMute}
              textAnchor="end" style={{ fontVariantNumeric: 'tabular-nums' }}>
          {t}°
        </text>
      ))}
      {/* x labels — day boundary */}
      <text x={xAt(0)} y={height - 14} fontFamily={UN.font.num} fontSize={9.5}
            fill={T.textMute} textAnchor="start">Day 2</text>
      <text x={xAt(12)} y={height - 14} fontFamily={UN.font.num} fontSize={9.5}
            fill={T.textMute} textAnchor="middle">Day 3</text>
      <text x={xAt(nowH)} y={height - 14} fontFamily={UN.font.num} fontSize={9.5}
            fill={T.sage} textAnchor="end" fontWeight={600}>now</text>

      {/* dose markers — vertical trust-blue lines from bottom */}
      {doses.map((d, i) => (
        <g key={i}>
          <line x1={xAt(d.h)} x2={xAt(d.h)} y1={padT + 4} y2={height - padB - 2}
                stroke={T.trust} strokeWidth={1.2} strokeOpacity={0.35}
                strokeDasharray="2 3" />
          <g transform={`translate(${xAt(d.h) - 11}, ${height - padB - 6})`}>
            <rect width={22} height={11} rx={3} fill={T.trust} opacity={0.92} />
            <text x={11} y={8} fontFamily={UN.font.num} fontSize={7.5}
                  fontWeight={700} fill="#fff" textAnchor="middle"
                  letterSpacing={0.4}>{d.m}</text>
          </g>
        </g>
      ))}

      {/* now line */}
      <line x1={xAt(nowH)} x2={xAt(nowH)} y1={padT} y2={height - padB}
            stroke={T.sage} strokeWidth={1.5} strokeOpacity={0.8} />
      <circle cx={xAt(nowH)} cy={padT} r={2.5} fill={T.sage} />

      {/* temp line */}
      <path d={linePath} stroke={T.textDim} strokeWidth={1.2}
            fill="none" strokeOpacity={0.55} />

      {/* temp dots */}
      {tempPts.map(([h, t], i) => (
        <circle key={i} cx={xAt(h)} cy={yAt(t)} r={3}
                fill={sevColor(t)} stroke={T.bg} strokeWidth={1} />
      ))}

      {/* current dot ring */}
      <circle cx={xAt(tempPts[tempPts.length - 1][0])}
              cy={yAt(tempPts[tempPts.length - 1][1])}
              r={6} fill="none" stroke={sevColor(tempPts[tempPts.length - 1][1])}
              strokeWidth={1.2} strokeOpacity={0.4} />
    </svg>
  );
}

window.Timeline = Timeline;