ACPlayer_Webpage/components/live/LiveSessionClient.tsx

// components/live/LiveSessionClient.tsx
'use client';

import { useLiveTelemetry } from '@/hooks/useLiveTelemetry';
import LiveTrackMap from '@/components/live/LiveTrackMap';
import LiveTiming from '@/components/live/LiveTiming';
import { MapPinIcon, UsersIcon, SettingsIcon, LiveDotIcon } from '@/components/ui/icons';
import { cleanTrackName, cleanTrackConfig } from '@/lib/trackUtils';

interface LiveSessionClientProps {
  serverId: number;
  serverName: string;
  serverTrack: string;
  serverConfig: string;
  connectedPlayers: number;
  initialCars: any[];
}

export default function LiveSessionClient({
  serverId,
  serverName,
  serverTrack,
  serverConfig,
  connectedPlayers,
  initialCars,
}: LiveSessionClientProps) {
  const { telemetry, connected, error } = useLiveTelemetry(serverId);

  // Use live telemetry if available, otherwise use initial data
  const cars = telemetry.length > 0 ? telemetry : initialCars;

  return (
    <div className="border border-white/10 bg-black">
      {/* Server Header */}
      <div className="border-b border-white/10 p-6 topo-lines-dense">
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-2xl font-bold tracking-tight mb-2">
              {serverName}
            </h2>
            <div className="flex items-center space-x-4 text-sm text-white/60">
              <div className="flex items-center space-x-1">
                <MapPinIcon className="w-4 h-4" />
                <span>{cleanTrackName(serverTrack)}</span>
              </div>
              {serverConfig && (
                <div className="flex items-center space-x-1">
                  <SettingsIcon className="w-4 h-4" />
                  <span>{cleanTrackConfig(serverConfig)}</span>
                </div>
              )}
              <div className="flex items-center space-x-1">
                <UsersIcon className="w-4 h-4" />
                <span>{connectedPlayers} drivers</span>
              </div>
            </div>
          </div>
          <div className={`flex items-center space-x-2 px-3 py-2 border ${
            connected 
              ? 'border-red-500/30 bg-red-500/10' 
              : 'border-white/20 bg-white/5'
          }`}>
            <LiveDotIcon className={`w-2 h-2 ${connected ? 'text-red-500 animate-pulse' : 'text-white/40'}`} />
            <span className={`text-xs font-bold tracking-wider ${
              connected ? 'text-red-400' : 'text-white/40'
            }`}>
              {connected ? 'LIVE' : error ? 'OFFLINE' : 'CONNECTING'}
            </span>
          </div>
        </div>
      </div>

      {/* Main Content Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6 p-6">
        {/* Left: Timing Board (3 columns) */}
        <div className="lg:col-span-3">
          <div className="border border-white/10 bg-black p-4">
            <div className="flex items-center justify-between mb-4 border-b border-white/10 pb-3">
              <h3 className="text-xl font-bold tracking-tight">LIVE TIMING</h3>
              {connected && (
                <div className="text-xs text-white/40">
                  Updates: {telemetry.length} cars
                </div>
              )}
            </div>
            <LiveTiming entries={cars} />
          </div>
        </div>

        {/* Right: Track Map (2 columns) */}
        <div className="lg:col-span-2">
          <div className="sticky top-20">
            <LiveTrackMap
              track={serverTrack}
              trackConfig={serverConfig}
              cars={cars}
            />
            
            {/* Session Info */}
            <div className="mt-4 border border-white/10 bg-black p-4">
              <h4 className="text-sm font-bold tracking-wider text-white/60 mb-3">SESSION INFO</h4>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-white/60">Drivers:</span>
                  <span className="font-mono">{connectedPlayers}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-white/60">Track:</span>
                  <span className="font-mono">{cleanTrackName(serverTrack)}</span>
                </div>
                {serverConfig && (
                  <div className="flex justify-between">
                    <span className="text-white/60">Layout:</span>
                    <span className="font-mono">{cleanTrackConfig(serverConfig)}</span>
                  </div>
                )}
                <div className="flex justify-between">
                  <span className="text-white/60">Stream:</span>
                  <span className={`font-mono ${connected ? 'text-green-400' : 'text-red-400'}`}>
                    {connected ? 'Connected' : 'Offline'}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}