// AGENT_TARGET: probe-scrapbook — collectible flippable mission cards for famous space probes

const PROBE_CARDS = [
  {
    id: "voyager1",
    name: "Voyager 1",
    year: 1977,
    emoji: "🛸",
    target: "Interstellar Space",
    fact: "First human-made object to leave the Solar System — still sending signals from 23 billion km away!",
    color: "#4c9eff",
  },
  {
    id: "voyager2",
    name: "Voyager 2",
    year: 1977,
    emoji: "🛸",
    target: "All Gas Giants",
    fact: "The only spacecraft to fly past all four gas giants: Jupiter, Saturn, Uranus, and Neptune.",
    color: "#7ecfff",
  },
  {
    id: "cassini",
    name: "Cassini",
    year: 1997,
    emoji: "🪐",
    target: "Saturn",
    fact: "Orbited Saturn for 13 years and discovered liquid water geysers on the moon Enceladus.",
    color: "#e8d59a",
  },
  {
    id: "newhorizons",
    name: "New Horizons",
    year: 2006,
    emoji: "🔵",
    target: "Pluto",
    fact: "First spacecraft to fly past Pluto — sent back heart-shaped nitrogen ice plain photos!",
    color: "#aad4ff",
  },
  {
    id: "curiosity",
    name: "Curiosity",
    year: 2011,
    emoji: "🤖",
    target: "Mars",
    fact: "A car-sized rover that found ancient lake beds on Mars — proof water once flowed there.",
    color: "#e05c35",
  },
  {
    id: "juno",
    name: "Juno",
    year: 2011,
    emoji: "⚡",
    target: "Jupiter",
    fact: "Mapped Jupiter's powerful magnetic field — 20,000 times stronger than Earth's!",
    color: "#ffc844",
  },
  {
    id: "perseverance",
    name: "Perseverance",
    year: 2020,
    emoji: "🦾",
    target: "Mars",
    fact: "Made breathable oxygen on another planet for the first time using a box called MOXIE.",
    color: "#ff7a3c",
  },
  {
    id: "jwst",
    name: "James Webb",
    year: 2021,
    emoji: "🔭",
    target: "Deep Universe",
    fact: "Sees galaxies 13.5 billion light-years away — almost to the beginning of time!",
    color: "#c084fc",
  },
];

const SCRAPBOOK_KEY = "planets_probe_scrapbook";

function loadCollected() {
  try {
    const raw = localStorage.getItem(SCRAPBOOK_KEY);
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];
  }
}

function saveCollected(ids) {
  try {
    localStorage.setItem(SCRAPBOOK_KEY, JSON.stringify(ids));
  } catch {}
}

function ProbeScrapbook({ onClose }) {
  // AGENT_TARGET: probe-scrapbook — ProbeScrapbook main component
  const [collected, setCollected] = React.useState(() => loadCollected());
  const [flipped, setFlipped] = React.useState({});

  const collectProbe = (id) => {
    if (collected.includes(id)) return;
    const next = [...collected, id];
    setCollected(next);
    saveCollected(next);
  };

  const toggleFlip = (id) => {
    collectProbe(id);
    setFlipped((prev) => ({ ...prev, [id]: !prev[id] }));
  };

  const resetAll = () => {
    if (!window.confirm("Clear your entire scrapbook?")) return;
    setCollected([]);
    setFlipped({});
    saveCollected([]);
  };

  const collectedCount = collected.length;
  const total = PROBE_CARDS.length;

  return (
    <div
      className="scrapbook-overlay"
      role="dialog"
      aria-modal="true"
      aria-label="Spacecraft Scrapbook"
    >
      <button
        className="scrapbook-close"
        onClick={onClose}
        aria-label="Close scrapbook"
      >
        ✕
      </button>
      <h2 className="scrapbook-title">📚 Spacecraft Scrapbook</h2>
      <p className="scrapbook-progress">
        {collectedCount} / {total} missions collected
        {collectedCount === total && " 🎉 Complete!"}
      </p>

      <div className="scrapbook-grid">
        {PROBE_CARDS.map((probe) => {
          const isCollected = collected.includes(probe.id);
          const isFlipped = !!flipped[probe.id];
          return (
            <button
              key={probe.id}
              className={`scrapbook-card${isCollected ? " collected" : ""}${isFlipped ? " flipped" : ""}`}
              style={{ "--card-color": probe.color }}
              onClick={() => toggleFlip(probe.id)}
              aria-label={`${probe.name} — tap to ${isFlipped ? "flip back" : "read fact"}`}
            >
              <div className="scrapbook-card-inner">
                {/* Front face */}
                <div className="scrapbook-front">
                  <span className="scrapbook-emoji">{probe.emoji}</span>
                  <strong className="scrapbook-name">{probe.name}</strong>
                  <span className="scrapbook-year">{probe.year}</span>
                  <span className="scrapbook-target">→ {probe.target}</span>
                  {!isCollected && (
                    <span className="scrapbook-new-badge">NEW</span>
                  )}
                </div>
                {/* Back face */}
                <div className="scrapbook-back">
                  <span className="scrapbook-back-emoji">{probe.emoji}</span>
                  <p className="scrapbook-fact">{probe.fact}</p>
                  <span className="scrapbook-tap-hint">tap to flip back</span>
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {collectedCount > 0 && (
        <button className="scrapbook-reset" onClick={resetAll}>
          ↺ Clear scrapbook
        </button>
      )}
    </div>
  );
}