import React, { useEffect, useState } from 'react';
import TeamLogo from './TeamLogo';

const Results = () => {
  const [matches, setMatches] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    setLoading(true);
    fetch('/api/matches')
      .then(res => res.ok ? res.json() : Promise.reject(res))
      .then(data => {
        setMatches(data.filter(m => m.result));
        setLoading(false);
      })
      .catch(() => {
        setError('Failed to load results');
        setLoading(false);
      });
  }, []);

  if (loading) return <div style={{ padding: 32 }}>Loading results...</div>;
  if (error) return <div style={{ padding: 32, color: 'red' }}>{error}</div>;

  return (
    <div style={{ padding: 32 }}>
      <h2>Results</h2>
      <table style={{ width: '100%', marginTop: 16, borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th>Stage</th>
            <th>Team 1</th>
            <th>Team 2</th>
            <th>Score</th>
            <th>Winner</th>
          </tr>
        </thead>
        <tbody>
          {matches.map(match => {
            const winnerId = match.result?.winnerId;
            return (
              <tr key={match.id}>
                <td>{match.stage?.type || ''}</td>
                <td style={{ textAlign: 'center', padding: '8px' }}>
                  <TeamLogo team={match.team1} size="small" />
                </td>
                <td style={{ textAlign: 'center', padding: '8px' }}>
                  <TeamLogo team={match.team2} size="small" />
                </td>
                <td>{match.result ? `${match.result.team1Score} - ${match.result.team2Score}` : ''}</td>
                <td>
                  {match.result ? (
                    <span style={{ color: 'green', fontWeight: 'bold' }}>
                      {winnerId === match.team1?.id ? match.team1?.name : match.team2?.name}
                    </span>
                  ) : ''}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

export default Results;