// AGENT_TARGET: mission-timeline — historical spacecraft launches on interactive horizontal axis

const SPACE_MISSIONS = [
  {
    id: "sputnik1",
    name: "Sputnik 1",
    year: 1957,
    agency: "USSR",
    type: "satellite",
    detail:
      "First artificial satellite — orbited Earth every 96 minutes, sparking the Space Race.",
  },
  {
    id: "vostok1",
    name: "Vostok 1",
    year: 1961,
    agency: "USSR",
    type: "crewed",
    detail:
      "Yuri Gagarin became the first human in space, completing one full orbit in 108 minutes.",
  },
  {
    id: "apollo11",
    name: "Apollo 11",
    year: 1969,
    agency: "NASA",
    type: "crewed",
    detail:
      "First humans on the Moon. Neil Armstrong and Buzz Aldrin landed July 20, 1969.",
  },
  {
    id: "voyager1",
    name: "Voyager 1",
    year: 1977,
    agency: "NASA",
    type: "probe",
    detail:
      "Flew past Jupiter and Saturn. Now the most distant human-made object, 24 billion km away.",
  },
  {
    id: "voyager2",
    name: "Voyager 2",
    year: 1977,
    agency: "NASA",
    type: "probe",
    detail:
      "Only spacecraft to visit all four giant planets: Jupiter, Saturn, Uranus, and Neptune.",
  },
  {
    id: "pathfinder",
    name: "Pathfinder",
    year: 1996,
    agency: "NASA",
    type: "rover",
    detail:
      "Delivered Sojourner — the first wheeled robot on another planet — onto Mars.",
  },
  {
    id: "cassini",
    name: "Cassini",
    year: 1997,
    agency: "NASA/ESA",
    type: "orbiter",
    detail:
      "Orbited Saturn for 13 years. Discovered a liquid-water ocean beneath Enceladus's ice.",
  },
  {
    id: "newhorizons",
    name: "New Horizons",
    year: 2006,
    agency: "NASA",
    type: "probe",
    detail:
      "Flew past Pluto in 2015, revealing icy mountains and a heart-shaped nitrogen plain.",
  },
  {
    id: "curiosity",
    name: "Curiosity",
    year: 2011,
    agency: "NASA",
    type: "rover",
    detail:
      "Still roving Mars. Found ancient streambed pebbles confirming past liquid water.",
  },
  {
    id: "perseverance",
    name: "Perseverance",
    year: 2020,
    agency: "NASA",
    type: "rover",
    detail:
      "Collecting rock cores for future Earth return. Its Ingenuity helicopter flew first on Mars.",
  },
  {
    id: "jwst",
    name: "James Webb",
    year: 2021,
    agency: "NASA/ESA",
    type: "telescope",
    detail:
      "Deepest infrared images ever captured — galaxies from 13.6 billion years ago.",
  },
];

const MISSION_COLORS = {
  satellite: "#7ec8e3",
  crewed: "#f6c90e",
  probe: "#a78bfa",
  rover: "#f97316",
  orbiter: "#22d3ee",
  telescope: "#86efac",
};

// Three vertical lanes to avoid label collisions
const MISSION_LANE = {
  satellite: 0,
  crewed: 0,
  telescope: 1,
  orbiter: 1,
  probe: 2,
  rover: 2,
};

function MissionTimeline({ onClose }) {
  // AGENT_TARGET: mission-timeline — MissionTimeline component
  const [selected, setSelected] = React.useState(null);

  const MIN_YEAR = 1955;
  const MAX_YEAR = 2026;
  const TIMELINE_W = 1440;
  const PAD_X = 70;
  const INNER_W = TIMELINE_W - PAD_X * 2;
  const LANE_YS = [48, 94, 140];
  const AXIS_Y = 178;
  const SVG_H = 210;

  const yearX = (yr) =>
    PAD_X + ((yr - MIN_YEAR) / (MAX_YEAR - MIN_YEAR)) * INNER_W;

  const ticks = [];
  for (let yr = 1960; yr <= 2025; yr += 5) ticks.push(yr);

  const toggle = (m) =>
    setSelected((prev) => (prev && prev.id === m.id ? null : m));

  return (
    <div
      className="mission-tl-overlay"
      role="dialog"
      aria-label="Space mission timeline"
    >
      <div className="mission-tl-topbar">
        <span className="mission-tl-title">Mission Timeline</span>
        <button
          className="mission-tl-close"
          onClick={onClose}
          aria-label="Close timeline"
        >
          ✕
        </button>
      </div>

      <div className="mission-tl-scroll">
        <svg
          width={TIMELINE_W}
          height={SVG_H}
          className="mission-tl-svg"
          aria-hidden="true"
        >
          <line
            x1={PAD_X}
            y1={AXIS_Y}
            x2={TIMELINE_W - PAD_X}
            y2={AXIS_Y}
            stroke="#334455"
            strokeWidth={2}
          />
          {ticks.map((yr) => (
            <g key={yr}>
              <line
                x1={yearX(yr)}
                y1={AXIS_Y - 4}
                x2={yearX(yr)}
                y2={AXIS_Y + 5}
                stroke="#445566"
                strokeWidth={1}
              />
              <text
                x={yearX(yr)}
                y={AXIS_Y + 17}
                textAnchor="middle"
                fill="#667788"
                fontSize={11}
              >
                {yr}
              </text>
            </g>
          ))}
          {SPACE_MISSIONS.map((m) => {
            const cx = yearX(m.year);
            const cy = LANE_YS[MISSION_LANE[m.type] ?? 1];
            const color = MISSION_COLORS[m.type] || "#aaa";
            const isOn = selected && selected.id === m.id;
            return (
              <g
                key={m.id}
                className="mission-dot-group"
                onClick={() => toggle(m)}
                tabIndex={0}
                onKeyDown={(e) => e.key === "Enter" && toggle(m)}
                role="button"
                aria-label={`${m.name}, ${m.year}`}
                aria-pressed={isOn ? "true" : "false"}
              >
                <rect
                  x={cx - 22}
                  y={cy - 22}
                  width={44}
                  height={44}
                  fill="transparent"
                />
                <circle
                  cx={cx}
                  cy={cy}
                  r={isOn ? 11 : 7}
                  fill={color}
                  opacity={0.93}
                  stroke={isOn ? "#fff" : color}
                  strokeWidth={isOn ? 2 : 1}
                  strokeOpacity={0.4}
                />
                <text
                  x={cx}
                  y={cy - 14}
                  textAnchor="middle"
                  fill={color}
                  fontSize={9.5}
                  fontWeight={isOn ? "700" : "400"}
                  opacity={0.9}
                >
                  {m.name}
                </text>
              </g>
            );
          })}
        </svg>
      </div>

      <div className="mission-tl-legend">
        {Object.entries(MISSION_COLORS).map(([type, color]) => (
          <span key={type} className="mission-tl-legend-item">
            <span
              className="mission-tl-legend-dot"
              style={{ background: color }}
            />
            {type}
          </span>
        ))}
      </div>

      {selected && (
        <div className="mission-tl-detail">
          <button
            className="mission-tl-detail-close"
            onClick={() => setSelected(null)}
            aria-label="Dismiss detail"
          >
            ✕
          </button>
          <strong className="mission-tl-detail-name">{selected.name}</strong>
          <span className="mission-tl-detail-meta">
            {selected.year} · {selected.agency} · {selected.type}
          </span>
          <p className="mission-tl-detail-blurb">{selected.detail}</p>
        </div>
      )}
    </div>
  );
}