// screens.jsx — Setup, Countdown, GameOver components

const { useState, useEffect, useRef, useMemo, useCallback } = React;

const AVATARS = ['🐶', '🐱', '🐰', '🐻', '🦊', '🐼', '🐯', '🦁', '🐸', '🐵', '🦄', '🐲', '🐧', '🐮', '🐷', '🐔'];

const PLAYER_COLORS = [
  { color: '#FF5C8A', dark: '#C73061', soft: '#FFD1DF' }, // pink
  { color: '#3BC5BE', dark: '#1A8782', soft: '#C7F0EE' }, // teal
];

// ───────────────────────────────────────────────────────────
// SetupScreen
// ───────────────────────────────────────────────────────────
function SetupScreen({ onStart, raceLength, setRaceLength, soundOn, toggleSound, bestRecords }) {
  const [p1Name, setP1Name] = useState('小红');
  const [p2Name, setP2Name] = useState('小蓝');
  const [p1Avatar, setP1Avatar] = useState('🐶');
  const [p2Avatar, setP2Avatar] = useState('🐰');

  const begin = () => {
    GameAudio.play('click');
    onStart({
      players: [
        { name: p1Name.trim() || '玩家1', avatar: p1Avatar, ...PLAYER_COLORS[0] },
        { name: p2Name.trim() || '玩家2', avatar: p2Avatar, ...PLAYER_COLORS[1] },
      ],
    });
  };

  return (
    <div className="setup">
      <SkyDecor />

      <button
        className="sound-toggle"
        onClick={() => { toggleSound(); GameAudio.play('click'); }}
        title="开关音效"
      >
        {soundOn ? '🔊' : '🔇'}
      </button>

      <div className="setup-title">
        <span className="flag">🏁</span>
        <span>加法大赛车</span>
        <span className="flag" style={{transform: 'scaleX(-1)'}}>🏁</span>
      </div>
      <div className="setup-sub">两人比赛 · 10以内加法 · 谁先到终点谁就赢！</div>

      <div className="player-cards">
        <PlayerCard
          which="p1"
          name={p1Name} setName={setP1Name}
          avatar={p1Avatar} setAvatar={setP1Avatar}
          otherAvatar={p2Avatar}
          color={PLAYER_COLORS[0]}
          label="玩家 1"
        />
        <PlayerCard
          which="p2"
          name={p2Name} setName={setP2Name}
          avatar={p2Avatar} setAvatar={setP2Avatar}
          otherAvatar={p1Avatar}
          color={PLAYER_COLORS[1]}
          label="玩家 2"
        />
      </div>

      <div className="setup-actions">
        <div className="race-len-control">
          <span>🏁 终点距离：</span>
          <input
            type="range" min="5" max="20" step="1"
            value={raceLength}
            onChange={(e) => setRaceLength(parseInt(e.target.value, 10))}
          />
          <span style={{fontFamily: 'var(--font-num)', fontSize: 22, fontWeight: 700, color: 'var(--p1-dark)'}}>
            {raceLength}
          </span>
          <span>题</span>
        </div>
        <button className="btn-start" onClick={begin}>开始比赛！</button>
      </div>

      {bestRecords && bestRecords.length > 0 && (
        <div className="records-section">
          <h4>🏆 历史最佳</h4>
          <div className="records-list">
            {bestRecords.slice(0, 5).map((r, i) => (
              <div className="record-row" key={i}>
                <span className="who">
                  <span style={{fontSize: 20}}>{r.avatar}</span>
                  <span>{r.name}</span>
                </span>
                <span style={{color: 'var(--text-soft)'}}>
                  {r.length}题 · 用了 {r.questions} 题完成
                </span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function PlayerCard({ which, name, setName, avatar, setAvatar, otherAvatar, label }) {
  return (
    <div className={"pcard " + which}>
      <h3>
        <span className="badge">{label}</span>
      </h3>
      <input
        className="name-input"
        type="text"
        maxLength="8"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="输入名字"
      />
      <div className="avatar-label">选一个头像 👇</div>
      <div className="avatar-grid">
        {AVATARS.map((em) => (
          <button
            key={em}
            className={
              "avatar-btn" +
              (avatar === em ? " selected" : "") +
              (otherAvatar === em && avatar !== em ? " disabled" : "")
            }
            onClick={() => { setAvatar(em); GameAudio.play('click'); }}
          >{em}</button>
        ))}
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// SkyDecor — clouds + sun (reused across screens)
// ───────────────────────────────────────────────────────────
function SkyDecor() {
  return (
    <div className="sky-decor">
      <div className="sun" />
      <div className="cloud cloud-a" />
      <div className="cloud cloud-b" />
      <div className="cloud cloud-c" />
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// Countdown
// ───────────────────────────────────────────────────────────
function Countdown({ onDone }) {
  const [n, setN] = useState(3);
  useEffect(() => {
    GameAudio.play('countdown');
    const seq = [
      setTimeout(() => { setN(2); GameAudio.play('countdown'); }, 900),
      setTimeout(() => { setN(1); GameAudio.play('countdown'); }, 1800),
      setTimeout(() => { setN(0); GameAudio.play('go'); }, 2700),
      setTimeout(() => { onDone(); }, 3700),
    ];
    return () => seq.forEach(clearTimeout);
  }, []);
  return (
    <div className="countdown-overlay">
      {n > 0 ? (
        <div className="countdown-num" key={n}>{n}</div>
      ) : (
        <div className="countdown-num go" key="go">GO!</div>
      )}
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// GameOver
// ───────────────────────────────────────────────────────────
function GameOver({ winner, players, questionsAsked, onPlayAgain, onBackToSetup, raceLength }) {
  const w = players[winner];
  useEffect(() => { GameAudio.play('win'); }, []);
  return (
    <div className="gameover">
      <Confetti winnerColor={w.color} />
      <div
        className="go-card"
        style={{ '--winner-stroke': w.color, '--winner-shadow': w.dark }}
      >
        <div className="go-trophy">🏆</div>
        <div className="go-winner">
          {w.avatar} {w.name} 获胜！
        </div>
        <div className="go-stat">恭喜冲过终点 🎉</div>

        <div className="go-stats-row">
          <div className="col">
            <div className="num" style={{color: w.dark}}>{raceLength}</div>
            <div className="lbl">赛道长度</div>
          </div>
          <div className="col">
            <div className="num" style={{color: 'var(--text)'}}>{questionsAsked}</div>
            <div className="lbl">总共答了</div>
          </div>
          <div className="col">
            <div className="num" style={{color: 'var(--p1-dark)'}}>{players[0].score}</div>
            <div className="lbl">{players[0].name} 答对</div>
          </div>
          <div className="col">
            <div className="num" style={{color: 'var(--p2-dark)'}}>{players[1].score}</div>
            <div className="lbl">{players[1].name} 答对</div>
          </div>
        </div>

        <div className="go-actions">
          <button
            className="btn-again secondary"
            onClick={() => { GameAudio.play('click'); onBackToSetup(); }}
          >← 返回设置</button>
          <button
            className="btn-again"
            style={{background: `linear-gradient(180deg, ${w.color} 0%, ${w.dark} 100%)`, boxShadow: `0 6px 0 -1px ${w.dark}, 0 12px 24px rgba(0,0,0,0.2)`}}
            onClick={() => { GameAudio.play('click'); onPlayAgain(); }}
          >再来一局！</button>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// Confetti
// ───────────────────────────────────────────────────────────
function Confetti({ winnerColor }) {
  const pieces = useMemo(() => {
    const colors = ['#FF5C8A', '#3BC5BE', '#FFD93D', '#A66BFF', '#7CDB58', winnerColor || '#FF5C8A'];
    return Array.from({ length: 80 }, (_, i) => ({
      left: Math.random() * 100,
      delay: Math.random() * 2,
      dur: 3 + Math.random() * 3,
      color: colors[i % colors.length],
      rot: Math.random() * 360,
      shape: Math.random() < 0.5 ? 'rect' : 'circle',
    }));
  }, [winnerColor]);
  return (
    <div className="confetti">
      {pieces.map((p, i) => (
        <div
          key={i}
          className="conf-piece"
          style={{
            left: p.left + '%',
            background: p.color,
            borderRadius: p.shape === 'circle' ? '50%' : '2px',
            animationDelay: p.delay + 's',
            animationDuration: p.dur + 's',
            transform: `rotate(${p.rot}deg)`,
          }}
        />
      ))}
    </div>
  );
}

Object.assign(window, { SetupScreen, Countdown, GameOver, SkyDecor, Confetti, AVATARS, PLAYER_COLORS });