// app/live/page.tsx
// Live race view with track map and timing

import { query } from '@/lib/db';
import { ActivityIcon } from '@/components/ui/icons';
import LiveSessionClient from '@/components/live/LiveSessionClient';
export const dynamic = "force-dynamic";

interface LiveData {
  server_id: number;
  server_name: string;
  server_track: string;
  server_config: string;
  connected_players: number;
  cars: any[];
}

async function getLiveData(): Promise<LiveData[]> {
  const sql = `
    SELECT 
      s.server_id,
      s.server_name,
      s.server_track,
      s.server_config,
      s.connected_players
    FROM servers s
    WHERE s.connected_players > 0
    ORDER BY s.connected_players DESC
  `;

  const servers = await query(sql);
  
  // For each server, get connected cars with their positions
  const liveData = await Promise.all(
    servers.map(async (server: any) => {
      const carsSql = `
        SELECT 
          u.driver_guid,
          u.driver_name,
          u.car_model,
          u.laps_completed
        FROM users u
        WHERE u.current_server = $1 AND u.is_connect = true
        ORDER BY u.user_rank ASC
      `;
      
      const cars = await query(carsSql, [server.server_id]);
      
      // Add mock data for positions (real data will come from telemetry stream)
      const carsWithPositions = cars.map((car: any, index: number) => ({
        ...car,
        carID: index,
        position: index + 1,
        current_lap: car.laps_completed || 0,
        normalizedSplinePos: Math.random(),
        speed: 0,
        gear: 0,
        rpm: 0,
        last_lap_time: null,
        best_lap_time: null,
      }));
      
      return {
        ...server,
        cars: carsWithPositions,
      };
    })
  );

  return liveData;
}

export default async function LivePage() {
  const liveData = await getLiveData();

  return (
    <>
      {/* Hero */}
      <div className="relative border-b border-white/10 grid-overlay">
        <div className="max-w-[1920px] mx-auto px-6 py-12">
          <div className="space-y-4">
            <div className="inline-flex items-center space-x-2 px-3 py-1 border border-white/20 bg-black">
              <ActivityIcon className="w-4 h-4" />
              <span className="text-xs font-medium tracking-wider">LIVE TIMING</span>
            </div>
            <h1 className="text-6xl font-bold tracking-tight">
              LIVE VIEW
            </h1>
            <p className="text-white/60 text-lg max-w-3xl">
              Real-time race positions and telemetry from active servers
            </p>
          </div>
        </div>
      </div>

      {/* Live Sessions */}
      <div className="max-w-[1920px] mx-auto px-6 py-12 space-y-12">
        {liveData.length === 0 ? (
          <div className="border border-white/10 p-16 text-center bg-black">
            <ActivityIcon className="w-16 h-16 mx-auto mb-6 text-white/20" />
            <p className="text-white/40 text-base tracking-wider">NO ACTIVE SESSIONS</p>
            <p className="text-white/20 text-sm mt-2">Join a server to see live timing</p>
          </div>
        ) : (
          liveData.map((session) => (
            <LiveSessionClient
              key={session.server_id}
              serverId={session.server_id}
              serverName={session.server_name}
              serverTrack={session.server_track}
              serverConfig={session.server_config}
              connectedPlayers={session.connected_players}
              initialCars={session.cars}
            />
          ))
        )}
      </div>

      {/* Info Box */}
      <div className="max-w-[1920px] mx-auto px-6 pb-12">
        <div className="border border-white/10 p-6 topo-lines-dense bg-black">
          <h3 className="text-sm font-bold tracking-wider text-white/60 mb-4">ABOUT LIVE VIEW</h3>
          <div className="space-y-2 text-sm text-white/60">
            <p>• Data updates in real-time from UDP telemetry stream</p>
            <p>• Track positions calculated from normalized spline position (0.0 - 1.0)</p>
            <p>• Lap times and gaps updated every sector</p>
          </div>
        </div>
      </div>
    </>
  );
}