// components/dashboard/DashboardClient.tsx
'use client';

import { useEffect, useState } from 'react';
import { UsersIcon, ServerIcon, ActivityIcon, MapPinIcon, FlagIcon, LiveDotIcon, ClockIcon } from '@/components/ui/icons';
import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';

interface Driver {
  driver_guid: string;
  driver_name: string;
  driver_team: string;
  car_model: string;
  car_skin: string;
  laps_completed: number;
  user_rank: number;
  server: {
    server_id: number;
    server_name: string;
    server_track: string;
    server_config: string;
    session_type: number;
    session_flag: string;
    session_time: number;
    session_laps: number;
    session_elapsed_time: number;
    session_ambient_temp: number;
    session_road_temp: number;
    connected_players: number;
  };
}

function getSessionTypeName(type: number): string {
  switch (type) {
    case 0: return 'PRACTICE';
    case 1: return 'RACE';
    case 2: return 'QUALIFYING';
    default: return 'UNKNOWN';
  }
}

function getSessionTypeColor(type: number): string {
  switch (type) {
    case 0: return 'border-blue-500/30 bg-blue-500/10 text-blue-400';
    case 1: return 'border-red-500/30 bg-red-500/10 text-red-400';
    case 2: return 'border-yellow-500/30 bg-yellow-500/10 text-yellow-400';
    default: return 'border-white/20 bg-white/5 text-white/60';
  }
}

function formatElapsedTime(ms: number): string {
  const totalSeconds = Math.floor(ms / 1000);
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  
  if (hours > 0) {
    return `${hours}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  }
  return `${minutes}:${String(seconds).padStart(2, '0')}`;
}

export default function DashboardClient({ initialDrivers }: { initialDrivers: Driver[] }) {
  const [drivers, setDrivers] = useState<Driver[]>(initialDrivers);
  const [isLoading, setIsLoading] = useState(false);

  // Auto-refresh every 3 seconds
  useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true);
        const response = await fetch('/api/dashboard');
        const data = await response.json();
        setDrivers(data.drivers);
      } catch (error) {
        console.error('[Dashboard] Failed to fetch data:', error);
      } finally {
        setIsLoading(false);
      }
    };

    const interval = setInterval(fetchData, 3000);
    return () => clearInterval(interval);
  }, []);

  // Group drivers by server
  const serverGroups = drivers.reduce((acc, driver) => {
    const serverId = driver.server?.server_id ?? 0;
    if (!acc[serverId]) {
      acc[serverId] = [];
    }
    acc[serverId].push(driver);
    return acc;
  }, {} as Record<number, Driver[]>);

  return (
    <>
      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-12">
        <StatCard 
          title="DRIVERS ONLINE" 
          value={drivers.length}
          icon={<UsersIcon className="w-8 h-8" />}
          pulse={isLoading}
        />
        <StatCard 
          title="ACTIVE SERVERS" 
          value={Object.keys(serverGroups).length}
          icon={<ServerIcon className="w-8 h-8" />}
          pulse={isLoading}
        />
        <StatCard 
          title="TOTAL LAPS" 
          value={drivers.reduce((sum, d) => sum + d.laps_completed, 0)}
          icon={<ActivityIcon className="w-8 h-8" />}
          pulse={isLoading}
        />
      </div>

      {/* Server Listings */}
      <div className="max-w-7xl mx-auto px-6 py-12 space-y-6">
        {Object.keys(serverGroups).length === 0 ? (
          <div className="border border-white/10 p-16 text-center bg-black">
            <div className="w-16 h-16 border-2 border-white/20 mx-auto mb-6"></div>
            <p className="text-white/40 text-base tracking-wider">NO ACTIVE SESSIONS</p>
            <p className="text-white/20 text-sm mt-2">System idle — waiting for connections</p>
          </div>
        ) : (
          Object.entries(serverGroups).map(([serverId, serverDrivers]) => {
            const server = serverDrivers[0].server;
            return (
              <div key={serverId} className="border border-white/10 sharp-border bg-black">
                {/* Server Header */}
                <div className="border-b border-white/10 p-6 topo-lines-dense">
                  <div className="flex items-start justify-between">
                    <div className="flex-1 space-y-3">
                      <div className="flex items-center space-x-3">
                        <div className="flex items-center space-x-2 px-2 py-1 border border-white/30 text-xs">
                          <LiveDotIcon className="w-2 h-2 animate-pulse" />
                          <span className="font-medium tracking-wider">LIVE</span>
                        </div>
                        <span className="text-xs text-white/40 tracking-wider">
                          ID: {server?.server_id}
                        </span>
                      </div>
                      <h2 className="text-2xl font-light tracking-tight" style={{ letterSpacing: "0.1em" }}>
                        {server?.server_name}
                      </h2>
                      <div className="flex flex-wrap gap-x-6 gap-y-2">
                        <div className="flex items-center space-x-2">
                          <MapPinIcon className="w-4 h-4 text-white/60" />
                          <span className="text-white/80 text-sm">
                            {cleanTrackName(server?.server_track || '')}
                            {server?.server_config && ` - ${cleanTrackConfig(server.server_config)}`}
                          </span>
                        </div>
                        <div className="flex items-center space-x-2">
                          <FlagIcon className="w-4 h-4 text-white/60" />
                          <span className="text-white/80 text-sm">{server?.session_flag}</span>
                        </div>
                        <div className="flex items-center space-x-2">
                          <UsersIcon className="w-4 h-4 text-white/60" />
                          <span className="text-white/80 text-sm">{server?.connected_players} CONNECTED</span>
                        </div>
                      </div>
                    </div>
                    
                    {/* Session Info Badge */}
                    <div className="flex flex-col items-end space-y-2">
                      <div className={`px-3 py-2 border text-xs font-bold tracking-wider ${getSessionTypeColor(server?.session_type || 0)}`}>
                        {getSessionTypeName(server?.session_type || 0)}
                      </div>
                      <div className="flex items-center space-x-2 px-3 py-2 border border-white/20 bg-black text-xs">
                        <ClockIcon className="w-3 h-3 text-white/60" />
                        <span className="font-mono text-white/80">
                          {formatElapsedTime(server?.session_elapsed_time || 0)}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Driver Table */}
                <div className="overflow-x-auto">
                  <table className="w-full">
                    <thead>
                      <tr className="border-b border-white/10">
                        <th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">POS</th>
                        <th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">DRIVER</th>
                        <th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">TEAM</th>
                        <th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">CAR</th>
                        <th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">RANK</th>
                        <th className="px-6 py-4 text-left text-xs font-bold tracking-wider text-white/60">LAPS</th>
                      </tr>
                    </thead>
                    <tbody>
                      {serverDrivers.map((driver, index) => (
                        <tr 
                          key={driver.driver_guid} 
                          className="border-b border-white/5 hover:bg-white/5 transition-colors"
                        >
                          <td className="px-6 py-4">
                            <span className="text-base font-bold tracking-tight">
                              {String(index + 1).padStart(2, '0')}
                            </span>
                          </td>
                          <td className="px-6 py-4">
                            <span className="font-semibold tracking-tight text-base">{driver.driver_name}</span>
                          </td>
                          <td className="px-6 py-4">
                            <span className="text-white/50 text-sm">
                              {driver.driver_team || '—'}
                            </span>
                          </td>
                          <td className="px-6 py-4">
                            <span className="text-white/70 text-sm font-mono tracking-tight">
                              {driver.car_model}
                            </span>
                          </td>
                          <td className="px-6 py-4">
                            <span className="inline-block px-3 py-1 border border-white/20 text-sm font-mono">
                              {driver.user_rank}
                            </span>
                          </td>
                          <td className="px-6 py-4">
                            <span className="font-mono text-sm">{driver.laps_completed}</span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            );
          })
        )}
      </div>
    </>
  );
}

function StatCard({ 
  title, 
  value, 
  icon,
  pulse 
}: { 
  title: string; 
  value: number; 
  icon: React.ReactNode;
  pulse?: boolean;
}) {
  return (
    <div className={`border border-white/10 p-6 sharp-border transition-opacity ${pulse ? 'opacity-70' : 'opacity-100'}`}>
      <div className="flex items-center justify-between mb-4">
        <span className="text-xs font-bold tracking-wider text-white/60">{title}</span>
        <div className="text-white/40">
          {icon}
        </div>
      </div>
      <div className="text-5xl font-bold tracking-tight">
        {value.toLocaleString()}
      </div>
    </div>
  );
}