// Space Explorer: the solar system, planet fact cards, the weight calculator
// and the space quizzes (the shared QuizFlow, dark theme). Stays dark.

function Starfield() {
  const stars = useRef(null);
  if (!stars.current) {
    stars.current = Array.from({ length: 150 }).map(() => ({
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 2 + 1,
      dur: (Math.random() * 3 + 2) + 's',
      minO: (Math.random() * 0.3).toFixed(2),
      maxO: (Math.random() * 0.5 + 0.5).toFixed(2),
      delay: (Math.random() * 3) + 's'
    }));
  }
  return (
    <div className="starfield">
      {stars.current.map((s, i) => (
        <div key={i} className="star" style={{
          left: s.x + '%', top: s.y + '%',
          width: s.size + 'px', height: s.size + 'px',
          '--dur': s.dur, '--min-o': s.minO, '--max-o': s.maxO,
          animationDelay: s.delay
        }} />
      ))}
    </div>
  );
}

function SpaceExplorer({ onBack }) {
  const [data, setData] = useState(null); // { explorer, items } from /api/explorers/space-explorer
  const [loadError, setLoadError] = useState(false);
  const [view, setView] = useState('solar'); // solar | detail | quiz
  const [selected, setSelected] = useState(null);
  const [weight, setWeight] = useState(60);

  const load = useCallback(async () => {
    setLoadError(false);
    const d = await api('/api/explorers/space-explorer');
    if (!d || d.error) { setLoadError(true); return; }
    setData(d);
  }, []);
  useEffect(() => { load(); }, [load]);

  const items = data ? data.items : [];
  const sun = items.find(p => p.isStar);
  const planets = items.filter(p => !p.isStar);

  const openItem = (p) => { setSelected(p); setView('detail'); window.scrollTo(0, 0); };
  const navItem = (dir) => {
    const i = items.findIndex(p => p.id === selected.id);
    const n = i + dir;
    if (n >= 0 && n < items.length) setSelected(items[n]);
  };

  // ─── SOLAR SYSTEM ──────
  const renderSolarSystem = () => {
    const orbitSizes = [55, 80, 105, 135, 175, 215, 255, 290, 320];
    const planetSizes = [14, 20, 22, 18, 42, 38, 30, 28, 12];
    const orbitSpeeds = ['8s','12s','16s','22s','40s','60s','80s','100s','140s'];
    return (
      <>
        <div className="solar-system">
          <div className="solar-wrapper">
            {sun && <button className="sun" onClick={() => openItem(sun)} aria-label="The Sun" />}
            {planets.map((planet, i) => {
              const r = orbitSizes[i] || 320;
              const size = planetSizes[i] || 14;
              return (
                <React.Fragment key={planet.id}>
                  <div className="orbit-ring" style={{ width: r*2+'px', height: r*2+'px', marginLeft: -r+'px', marginTop: -r+'px' }} />
                  <div className="planet-orbit" style={{ width: r*2+'px', height: r*2+'px', marginLeft: -r+'px', marginTop: -r+'px', '--orbit-speed': orbitSpeeds[i] || '140s' }}>
                    {/* the visible dot is small; the button around it is a 44px target */}
                    <button className="planet-hit" onClick={() => openItem(planet)} aria-label={planet.name}>
                      <span className="planet-dot" style={{
                        width: size+'px', height: size+'px',
                        background: `radial-gradient(circle at 35% 35%, ${planet.color}dd, ${planet.color}88)`,
                        boxShadow: `0 0 ${size/2}px ${planet.color}44`
                      }} />
                    </button>
                  </div>
                </React.Fragment>
              );
            })}
          </div>
        </div>
        <div className="planet-picker">
          <div className="planet-picker-label">Tap a planet to visit it:</div>
          <div className="planet-picker-row">
            {items.map(p => (
              <button key={p.id} className="planet-chip" onClick={() => openItem(p)}>
                <span className="planet-chip-emoji">{p.emoji}</span>
                <span>{p.name}</span>
              </button>
            ))}
          </div>
        </div>
      </>
    );
  };

  // ─── PLANET DETAIL ─────
  const renderDetail = () => {
    const p = selected;
    if (!p) return null;
    const i = items.findIndex(x => x.id === p.id);
    const planetWeight = (weight * p.gravity).toFixed(1);
    const f = p.facts || {};
    return (
      <div className="planet-detail">
        <div className="planet-nav">
          <button onClick={() => setView('solar')}>← Solar System</button>
          <div style={{ display: 'flex', gap: 8 }}>
            {i > 0 && <button onClick={() => navItem(-1)}>← {items[i - 1].name}</button>}
            {i < items.length - 1 && <button onClick={() => navItem(1)}>{items[i + 1].name} →</button>}
          </div>
        </div>
        <div className="planet-detail-header">
          <div className="planet-visual" style={{
            background: `radial-gradient(circle at 35% 35%, ${p.color}, ${p.color}88)`,
            boxShadow: `0 0 40px ${p.color}44`
          }} />
          <h2 style={{ color: p.color }}>{p.emoji} {p.name}</h2>
          {p.isDwarf && <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: '0.95rem' }}>(Dwarf Planet)</span>}
          <p style={{ color: 'rgba(255,255,255,0.8)', marginTop: 8 }}>{p.blurb}</p>
        </div>
        <div className="info-grid">
          {(p.cards || []).map(c => (
            <div key={c.label} className="info-card">
              <div className="label">{c.icon} {c.label}</div>
              <div className="value">{c.value}</div>
            </div>
          ))}
        </div>
        {p.gravity !== undefined && (
          <div className="weight-calc">
            <h3>What Would I Weigh on {p.name}?</h3>
            <div>
              <span style={{ fontSize: '1.1rem' }}>I weigh</span>
              <input type="number" inputMode="numeric" className="weight-input" value={weight}
                onChange={e => setWeight(Number(e.target.value) || 0)} />
              <span style={{ fontSize: '1.1rem' }}>lbs on Earth</span>
            </div>
            <div className="weight-result">{planetWeight} lbs on {p.name}!</div>
            <div className="weight-comment">{p.weightComment}</div>
          </div>
        )}
        <div className="planet-dots-nav">
          {items.map(pl => (
            <button key={pl.id} className={pl.id === p.id ? 'active' : ''} onClick={() => setSelected(pl)} aria-label={pl.name}>
              {pl.emoji}
            </button>
          ))}
        </div>
      </div>
    );
  };

  return (
    <div className="space-explorer">
      <Starfield />
      {view !== 'quiz' && (
        <div className="space-header">
          {view === 'solar' && <button className="back-btn" onClick={onBack}>← Workshop</button>}
          <h1>Space Explorer</h1>
          <div className="subtitle">Visit every planet, then test yourself! 🚀</div>
          {view === 'solar' && <button className="quiz-launch-btn" onClick={() => setView('quiz')}>Quiz Time!</button>}
        </div>
      )}
      {loadError && <OopsCard message="Space could not load." onRetry={load} />}
      {!loadError && view === 'solar' && renderSolarSystem()}
      {view === 'detail' && renderDetail()}
      {view === 'quiz' && (
        <QuizFlow activitySlug="space-explorer" theme="space" backLabel="Back to Space"
          onBack={() => setView('solar')} heading="Space Quiz Time!" />
      )}
    </div>
  );
}