wordle/client/src/screens/Screen3Results.tsx

import type { GameStats, SolverReplay } from '@wordle/shared';

interface Screen3ResultsProps {
  won: boolean;
  attemptCount: number;
  revealedWord: string | null;
  stats: GameStats;
  replays?: SolverReplay[];
  onPlayAgain?: () => void;
}

function Histogram({ stats }: { stats: GameStats }) {
  if (stats.gamesPlayed === 0) return <p style={{ color: '#787c7e' }}>No games yet.</p>;

  const maxCount = Math.max(...stats.histogram, 1);

  return (
    <div style={{ maxWidth: '300px', margin: '0 auto' }}>
      {stats.histogram.map((count, idx) => {
        const label = idx < 6 ? `${idx + 1}` : 'X';
        const pct = (count / maxCount) * 100;
        return (
          <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
            <span style={{ width: '20px', textAlign: 'right', fontWeight: 'bold', color: '#555' }}>{label}</span>
            <div style={{ flex: 1, height: '20px', backgroundColor: count > 0 ? '#6aaa64' : '#d3d6da', width: `${Math.max(pct, count > 0 ? 5 : 0)}%`, minWidth: count > 0 ? '12px' : '4px', borderRadius: '2px' }} />
            <span style={{ width: '24px', fontSize: '0.8rem', color: '#555' }}>{count}</span>
          </div>
        );
      })}
    </div>
  );
}

const MINI_COLORS: Record<string, string> = { g: '#6aaa64', y: '#c9b458', x: '#787c7e' };

function MiniBoard({ replay }: { replay: SolverReplay }) {
  return (
    <div style={{ marginBottom: '12px' }}>
      <div style={{ fontSize: '0.7rem', fontWeight: 'bold', color: '#555', marginBottom: '4px', textAlign: 'center' }}>
        {replay.solver}
      </div>
      {replay.steps.map((step, rowIdx) => (
        <div key={rowIdx} style={{ display: 'flex', gap: '2px', justifyContent: 'center', marginBottom: '2px' }}>
          {step.guess.split('').map((letter, colIdx) => {
            const c = step.colors[colIdx];
            const bg = MINI_COLORS[c] ?? '#d3d6da';
            return (
              <div key={colIdx} style={{
                width: '20px', height: '20px',
                backgroundColor: bg,
                color: c === 'x' || !c ? '#fff' : '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: '0.55rem', fontWeight: 'bold',
                textTransform: 'uppercase', fontFamily: 'monospace',
                borderRadius: '2px',
              }}>
                {letter}
              </div>
            );
          })}
        </div>
      ))}
    </div>
  );
}

export function Screen3Results({ won, attemptCount, revealedWord, stats, replays, onPlayAgain }: Screen3ResultsProps) {
  return (
    <div style={{ maxWidth: '400px', margin: '24px auto', padding: '16px', fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1 style={{ fontSize: '1.6rem', marginBottom: '12px' }}>{won ? '🎉 Congratulations!' : 'Better luck next time'}</h1>

      {won ? (
        <p style={{ fontSize: '1.1rem', marginBottom: '8px' }}>Solved in {attemptCount} {attemptCount === 1 ? 'attempt' : 'attempts'}</p>
      ) : (
        revealedWord && <p style={{ fontSize: '1.1rem', marginBottom: '8px' }}>The word was: <strong>{revealedWord.toUpperCase()}</strong></p>
      )}

      <div style={{ margin: '24px 0' }}>
        <h2 style={{ fontSize: '1.1rem', marginBottom: '12px' }}>Statistics</h2>
        <div style={{ display: 'flex', justifyContent: 'center', gap: '24px', marginBottom: '16px' }}>
          <div><div style={{ fontSize: '1.4rem', fontWeight: 'bold' }}>{stats.gamesPlayed}</div><div style={{ fontSize: '0.75rem', color: '#787c7e' }}>Played</div></div>
          <div><div style={{ fontSize: '1.4rem', fontWeight: 'bold' }}>{stats.gamesPlayed > 0 ? Math.round((stats.wins / stats.gamesPlayed) * 100) : 0}%</div><div style={{ fontSize: '0.75rem', color: '#787c7e' }}>Win Rate</div></div>
          <div><div style={{ fontSize: '1.4rem', fontWeight: 'bold' }}>{stats.currentStreak}</div><div style={{ fontSize: '0.75rem', color: '#787c7e' }}>Streak</div></div>
          <div><div style={{ fontSize: '1.4rem', fontWeight: 'bold' }}>{stats.maxStreak}</div><div style={{ fontSize: '0.75rem', color: '#787c7e' }}>Max Streak</div></div>
        </div>
        <Histogram stats={stats} />
      </div>

      {replays && replays.length > 0 && (
        <div style={{ margin: '24px 0' }}>
          <p style={{ fontSize: '0.85rem', color: '#787c7e', marginBottom: '12px' }}>
            How the solvers cracked this word:
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', maxWidth: '320px', margin: '0 auto' }}>
            {replays.map((r) => (
              <MiniBoard key={r.solver} replay={r} />
            ))}
          </div>
        </div>
      )}

      {onPlayAgain && (
        <button
          onClick={onPlayAgain}
          style={{
            padding: '12px 48px',
            fontSize: '1.1rem',
            fontWeight: 'bold',
            backgroundColor: '#6aaa64',
            color: '#fff',
            border: 'none',
            borderRadius: '8px',
            cursor: 'pointer',
          }}
        >
          Play Again
        </button>
      )}
    </div>
  );
}