// AGENT_TARGET: constellation-spotlight — on-launch constellation highlight with read-aloud blurb

const SPOTLIGHT_CONSTELLATIONS = [
  {
    id: "orion",
    name: "Orion the Hunter",
    blurb:
      "Orion is one of the brightest constellations. The three middle stars form his famous belt!",
    stars: [
      { x: 48, y: 28 }, // Betelgeuse
      { x: 55, y: 33 }, // Bellatrix
      { x: 51, y: 42 }, // Mintaka (belt)
      { x: 51, y: 46 }, // Alnilam (belt)
      { x: 52, y: 50 }, // Alnitak (belt)
      { x: 46, y: 55 }, // Saiph
      { x: 56, y: 53 }, // Rigel
      { x: 49, y: 38 }, // body
    ],
    lines: [
      [0, 2],
      [1, 2],
      [2, 3],
      [3, 4],
      [4, 5],
      [4, 6],
      [0, 7],
      [1, 7],
      [7, 2],
    ],
    color: "#ffd43b",
  },
  {
    id: "bigdipper",
    name: "The Big Dipper",
    blurb:
      "The Big Dipper looks like a giant ladle in the sky. Its two end stars always point to the North Star!",
    stars: [
      { x: 30, y: 35 }, // Dubhe
      { x: 38, y: 33 }, // Merak
      { x: 46, y: 30 }, // Phecda
      { x: 52, y: 32 }, // Megrez
      { x: 60, y: 27 }, // Alioth
      { x: 67, y: 22 }, // Mizar
      { x: 75, y: 26 }, // Alkaid
    ],
    lines: [
      [0, 1],
      [1, 2],
      [2, 3],
      [3, 4],
      [4, 5],
      [5, 6],
      [3, 0],
    ],
    color: "#78f0ff",
  },
  {
    id: "cassiopeia",
    name: "Cassiopeia the Queen",
    blurb:
      "Cassiopeia looks like the letter W in the sky. She sits right in the Milky Way!",
    stars: [
      { x: 28, y: 38 }, // Segin
      { x: 36, y: 30 }, // Ruchbah
      { x: 45, y: 36 }, // Gamma Cas
      { x: 54, y: 28 }, // Schedar
      { x: 63, y: 34 }, // Caph
    ],
    lines: [
      [0, 1],
      [1, 2],
      [2, 3],
      [3, 4],
    ],
    color: "#ff9f7a",
  },
  {
    id: "leo",
    name: "Leo the Lion",
    blurb:
      "Leo looks like a crouching lion! Its bright star Regulus marks the lion's heart.",
    stars: [
      { x: 52, y: 52 }, // Regulus (heart)
      { x: 45, y: 44 }, // Eta Leo
      { x: 40, y: 36 }, // Mu Leo
      { x: 42, y: 28 }, // Epsilon Leo
      { x: 50, y: 30 }, // Zeta Leo
      { x: 58, y: 38 }, // Gamma Leo
      { x: 60, y: 48 }, // Denebola tail
      { x: 55, y: 44 }, // Delta Leo
    ],
    lines: [
      [0, 1],
      [1, 2],
      [2, 3],
      [3, 4],
      [4, 5],
      [5, 6],
      [6, 7],
      [7, 0],
    ],
    color: "#c084fc",
  },
  {
    id: "lyra",
    name: "Lyra the Harp",
    blurb:
      "Lyra is a tiny constellation with one of the brightest stars — Vega! It is only 25 light-years away.",
    stars: [
      { x: 50, y: 26 }, // Vega
      { x: 46, y: 36 }, // Epsilon 1
      { x: 54, y: 36 }, // Epsilon 2
      { x: 44, y: 44 }, // Zeta
      { x: 56, y: 44 }, // Delta
      { x: 50, y: 50 }, // Beta
    ],
    lines: [
      [0, 1],
      [0, 2],
      [1, 3],
      [2, 4],
      [3, 5],
      [4, 5],
      [1, 2],
    ],
    color: "#7cffb9",
  },
  {
    id: "cygnus",
    name: "Cygnus the Swan",
    blurb:
      "Cygnus forms a cross called the Northern Cross. Its bright star Deneb is one of the most luminous stars we know!",
    stars: [
      { x: 50, y: 24 }, // Deneb
      { x: 50, y: 34 }, // Sadr (center)
      { x: 50, y: 52 }, // Albireo (foot)
      { x: 34, y: 34 }, // Delta (left wing)
      { x: 66, y: 34 }, // Epsilon (right wing)
    ],
    lines: [
      [0, 1],
      [1, 2],
      [3, 1],
      [1, 4],
    ],
    color: "#49b1ff",
  },
  {
    id: "scorpius",
    name: "Scorpius the Scorpion",
    blurb:
      "Scorpius actually looks like a scorpion! Its red star Antares marks the scorpion's heart.",
    stars: [
      { x: 42, y: 28 }, // head
      { x: 46, y: 32 }, // Antares (heart)
      { x: 50, y: 38 }, // body
      { x: 52, y: 44 }, // body
      { x: 54, y: 50 }, // tail base
      { x: 56, y: 56 }, // tail
      { x: 54, y: 62 }, // sting
      { x: 50, y: 66 }, // tip
    ],
    lines: [
      [0, 1],
      [1, 2],
      [2, 3],
      [3, 4],
      [4, 5],
      [5, 6],
      [6, 7],
    ],
    color: "#ff5252",
  },
  {
    id: "gemini",
    name: "Gemini the Twins",
    blurb:
      "Gemini represents the twin brothers Castor and Pollux, whose bright stars sit right next to each other.",
    stars: [
      { x: 38, y: 24 }, // Castor
      { x: 46, y: 24 }, // Pollux
      { x: 36, y: 34 }, // body Castor side
      { x: 44, y: 34 }, // body Pollux side
      { x: 34, y: 44 }, // lower Castor
      { x: 43, y: 44 }, // lower Pollux
      { x: 32, y: 54 }, // feet Castor
      { x: 42, y: 56 }, // feet Pollux
    ],
    lines: [
      [0, 2],
      [2, 4],
      [4, 6],
      [1, 3],
      [3, 5],
      [5, 7],
      [0, 1],
    ],
    color: "#ffe16f",
  },
];

const SPOTLIGHT_SESSION_KEY = "planets_constellation_spotlight_seen";

function pickTodayConstellation() {
  // Rotate through constellations by day so each session teaches a different one
  const dayIndex = Math.floor(Date.now() / 86400000);
  return SPOTLIGHT_CONSTELLATIONS[dayIndex % SPOTLIGHT_CONSTELLATIONS.length];
}

function ConstellationSpotlight({ onDismiss }) {
  // AGENT_TARGET: constellation-spotlight — ConstellationSpotlight overlay component
  const dismissedRef = React.useRef(false);
  const [visible, setVisible] = React.useState(true);
  const [highlighted, setHighlighted] = React.useState(false);
  const constellation = React.useMemo(() => pickTodayConstellation(), []);

  React.useEffect(() => {
    // Brief delay before glowing in
    const t1 = setTimeout(() => setHighlighted(true), 400);
    // Play pre-generated Grok TTS clip (voice = ara). Falls back to the
    // browser speechSynthesis voice if the narration system is unavailable.
    const speakBlurb = () => {
      try {
        if (window.__narration && window.__narration.isEnabled()) {
          window.__narration.play(`const_${constellation.id}.mp3`);
          return;
        }
      } catch (_) {}
      try {
        if (window.speechSynthesis) {
          const utt = new SpeechSynthesisUtterance(
            `Tonight's constellation: ${constellation.name}. ${constellation.blurb}`,
          );
          utt.rate = 0.88;
          utt.pitch = 1.05;
          window.speechSynthesis.cancel();
          window.speechSynthesis.speak(utt);
        }
      } catch (_) {}
    };
    const t2 = setTimeout(speakBlurb, 800);
    // Auto-dismiss after 10s
    const t3 = setTimeout(() => dismiss(), 10000);
    return () => {
      clearTimeout(t1);
      clearTimeout(t2);
      clearTimeout(t3);
      try {
        if (window.__narration) window.__narration.stop();
      } catch (_) {}
      try {
        window.speechSynthesis && window.speechSynthesis.cancel();
      } catch (_) {}
    };
  }, []);

  const dismiss = () => {
    if (dismissedRef.current) return;
    dismissedRef.current = true;
    setVisible(false);
    onDismiss();
  };

  if (!visible) return null;

  const { stars, lines, color, name, blurb } = constellation;

  return (
    <div
      className={`const-spotlight-wrap${highlighted ? " const-highlighted" : ""}`}
      role="dialog"
      aria-modal="false"
      aria-label={`Constellation spotlight: ${name}`}
      onClick={dismiss}
    >
      <svg
        className="const-spotlight-svg"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid meet"
        aria-hidden="true"
      >
        {/* Connection lines */}
        {lines.map(([a, b], i) => (
          <line
            key={i}
            x1={stars[a].x}
            y1={stars[a].y}
            x2={stars[b].x}
            y2={stars[b].y}
            className="const-line"
            style={{ stroke: color }}
          />
        ))}
        {/* Stars */}
        {stars.map((s, i) => (
          <circle
            key={i}
            cx={s.x}
            cy={s.y}
            r={i === 0 ? 1.5 : 1.1}
            className="const-star-dot"
            style={{ fill: color, filter: `drop-shadow(0 0 3px ${color})` }}
          />
        ))}
      </svg>

      <div
        className="const-spotlight-card"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="const-spotlight-label">✦ Tonight's Constellation</div>
        <strong className="const-spotlight-name">{name}</strong>
        <p className="const-spotlight-blurb">{blurb}</p>
        <button className="const-spotlight-dismiss" onClick={dismiss}>
          Got it!
        </button>
      </div>
    </div>
  );
}