// app/events/[id]/results/page.tsx
// Event championship results page with auto-refresh

import { query } from '@/lib/db';
import { TrophyIcon } from '@/components/ui/icons';
import Link from 'next/link';
import EventResultsClient from '@/components/events/EventResultsClient';

export const dynamic = "force-dynamic";

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;
  }[];
}

async function getEventResults(eventId: string) {
  // Get event info
  const eventSql = `
    SELECT 
      event_id,
      event_name,
      event_track,
      event_date,
      event_status
    FROM events
    WHERE event_id = $1
  `;
  const events = await query(eventSql, [eventId]);
  const event = events[0];

  // Get team standings with driver details
  const standingsSql = `
    SELECT 
      tcs.team_id,
      t.name as team_name,
      tcs.total_points,
      tcs.races_participated,
      tcs.best_finish,
      json_agg(
        json_build_object(
          'driver_guid', u.driver_guid,
          'driver_name', u.driver_name,
          'position', er.position,
          'points_awarded', er.points_awarded,
          'laps_completed', er.laps_completed,
          'dnf', er.dnf
        ) ORDER BY er.position ASC
      ) as drivers
    FROM team_championship_standings tcs
    JOIN teams t ON tcs.team_id = t.id
    LEFT JOIN event_results er ON tcs.event_id = er.event_id AND tcs.team_id = er.team_id
    LEFT JOIN users u ON er.driver_guid = u.driver_guid
    WHERE tcs.event_id = $1
    GROUP BY tcs.team_id, t.name, tcs.total_points, tcs.races_participated, tcs.best_finish
    ORDER BY tcs.total_points DESC, tcs.best_finish ASC
  `;
  
  const standings = await query(standingsSql, [eventId]);

  return { event, standings };
}

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 async function EventResultsPage({ params }: { params: { id: string } }) {
  const { event, standings } = await getEventResults(params.id);

  if (!event) {
    return (
      <div className="max-w-7xl mx-auto px-6 py-16">
        <div className="border border-white/10 p-16 text-center bg-black">
          <p className="text-white/40">Event not found</p>
        </div>
      </div>
    );
  }

  return (
    <>
      {/* Hero */}
      <div className="relative border-b border-white/10 grid-overlay">
        <div className="max-w-7xl mx-auto px-6 py-16">
          <div className="space-y-4">
            <Link 
              href={`/events/${params.id}`}
              className="inline-flex items-center space-x-2 text-white/60 hover:text-white transition-colors text-sm"
            >
              <span>←</span>
              <span>Back to Event</span>
            </Link>
            
            <div className="flex items-center space-x-3">
              <TrophyIcon className="w-12 h-12 text-yellow-500" />
              <div>
                <h1 className="text-5xl font-bold tracking-tight">
                  CHAMPIONSHIP RESULTS
                </h1>
                <p className="text-white/60 text-lg mt-2">
                  {event.event_name}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Team Championship Standings */}
      <div className="max-w-7xl mx-auto px-6 py-12">
        {standings.length === 0 ? (
          <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>
        ) : (
          <div className="space-y-4">
            {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>
        )}

        {/* Points System Info */}
        <div className="mt-8 border border-white/10 p-6 bg-black">
          <h3 className="text-sm font-bold tracking-wider text-white/60 mb-4">POINTS SYSTEM</h3>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 text-sm">
            <div><span className="font-mono text-white/80">P1:</span> <span className="font-bold">25 pts</span></div>
            <div><span className="font-mono text-white/80">P2:</span> <span className="font-bold">18 pts</span></div>
            <div><span className="font-mono text-white/80">P3:</span> <span className="font-bold">15 pts</span></div>
            <div><span className="font-mono text-white/80">P4:</span> <span className="font-bold">12 pts</span></div>
            <div><span className="font-mono text-white/80">P5:</span> <span className="font-bold">10 pts</span></div>
          </div>
          <p className="text-xs text-white/40 mt-4">
            Team points are the sum of all driver points from that team in the event
          </p>
        </div>
      </div>
    </>
  );
}