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

interface Screen3ResultsProps {
  won: boolean;
  attemptCount: number;
  revealedWord: string | null;
  stats: GameStats;
  onPlayAgain?: () => void; // Story 1.3
}

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>
  );
}

export function Screen3Results({ won, attemptCount, revealedWord, stats, 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>

      {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>
  );
}