// components/events/EventResultsClient.tsx
'use client';

import { useEffect, useState } from 'react';
import { TrophyIcon, UsersIcon, FlagIcon } from '@/components/ui/icons';

interface TeamStanding {
  team_id: number;
  team_name: string;
  total_points: number;
  races_participated: number;
  best_finish: number;
  drivers: {
    driver_guid: string;
    driver_name: string;
    position: number;
    points_awarded: number;
    dnf: boolean;
  }[];
}

function getPositionColor(position: number): string {
  if (position === 1) return 'bg-yellow-500/20 border-yellow-500/50 text-yellow-400';
  if (position === 2) return 'bg-gray-400/20 border-gray-400/50 text-gray-300';
  if (position === 3) return 'bg-orange-600/20 border-orange-600/50 text-orange-400';
  return 'bg-white/5 border-white/10 text-white/60';
}

export default function EventResultsClient({ 
  eventId, 
  initialStandings 
}: { 
  eventId: number; 
  initialStandings: TeamStanding[] 
}) {
  const [standings, setStandings] = useState<TeamStanding[]>(initialStandings);
  const [isLoading, setIsLoading] = useState(false);

  // Auto-refresh every 5 seconds
  useEffect(() => {
    const fetchResults = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(`/api/events/${eventId}/results`);
        const data = await response.json();
        setStandings(data.standings);
      } catch (error) {
        console.error('[Results] Failed to fetch:', error);
      } finally {
        setIsLoading(false);
      }
    };

    const interval = setInterval(fetchResults, 5000);
    return () => clearInterval(interval);
  }, [eventId]);

  if (standings.length === 0) {
    return (
      <div className="border border-white/10 p-16 text-center bg-black">
        <TrophyIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
        <p className="text-white/40 text-base tracking-wider">NO RESULTS YET</p>
        <p className="text-white/20 text-sm mt-2">Results will appear after the event concludes</p>
      </div>
    );
  }

  return (
    <div className={`space-y-4 transition-opacity ${isLoading ? 'opacity-70' : 'opacity-100'}`}>
      {standings.map((team: TeamStanding, index: number) => (
        <div 
          key={team.team_id}
          className={`border p-6 transition-all ${getPositionColor(index + 1)}`}
        >
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-center space-x-4">
              {/* Position Badge */}
              <div className="w-16 h-16 border-2 flex items-center justify-center">
                <span className="text-3xl font-bold">
                  {index + 1}
                </span>
              </div>
              
              {/* Team Info */}
              <div>
                <h2 className="text-2xl font-bold tracking-tight">
                  {team.team_name}
                </h2>
                <div className="flex items-center space-x-4 mt-2 text-sm text-white/60">
                  <div className="flex items-center space-x-1">
                    <UsersIcon className="w-4 h-4" />
                    <span>{team.drivers.length} {team.drivers.length === 1 ? 'Driver' : 'Drivers'}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <FlagIcon className="w-4 h-4" />
                    <span>Best Finish: P{team.best_finish}</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Total Points */}
            <div className="text-right">
              <div className="text-5xl font-bold tracking-tight">
                {team.total_points}
              </div>
              <div className="text-sm text-white/60 tracking-wider">POINTS</div>
            </div>
          </div>

          {/* Driver Results */}
          <div className="border-t border-white/10 pt-4 mt-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {team.drivers.map((driver: any) => (
                <div 
                  key={driver.driver_guid}
                  className="flex items-center justify-between p-3 bg-black/30 border border-white/5"
                >
                  <div className="flex items-center space-x-3">
                    <div className={`w-8 h-8 border flex items-center justify-center text-xs font-bold ${
                      driver.position <= 3 ? 'border-white/30' : 'border-white/10'
                    }`}>
                      P{driver.position}
                    </div>
                    <div>
                      <div className="font-semibold text-sm">{driver.driver_name}</div>
                      {driver.dnf && (
                        <div className="text-xs text-red-400">DNF</div>
                      )}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="font-bold text-lg">{driver.points_awarded}</div>
                    <div className="text-xs text-white/40">pts</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}