'use client';

import { useState, useEffect, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { AppData } from '@/lib/types';
import { defaultAppData } from '@/lib/defaultData';
import { calculateStandingsData } from '@/lib/leaderboard';
import RaceResultsTable from './components/RaceResultsTable';
import DriverStandings from './components/DriverStandings';
import PointsKey from './components/PointsKey';

const CumulativeChart = dynamic(() => import('./components/CumulativeChart'), { ssr: false });

const API_BASE = process.env.NEXT_PUBLIC_API_BASE || '';
const SERVER_ID = process.env.NEXT_PUBLIC_SERVER_ID || '';
const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || '';

async function fetchLeaderboard(): Promise<AppData | null> {
  try {
    const res = await fetch(`${API_BASE}/server/${SERVER_ID}/leaderboard`, {
      headers: {
        "Access-Key": ACCESS_TOKEN
      }
    });
    if (!res.ok) return null;
    const data = await res.json();
    // Treat empty leaderboard (no drivers) as null to fall back to defaults
    if (!data || !data.drivers || data.drivers.length === 0) return null;
    return data;
  } catch (e) {
    console.error("Failed to load leaderboard from API:", e);
    return null;
  }
}

export default function ClientPage() {
  const [appData, setAppData] = useState<AppData>(defaultAppData);

  useEffect(() => {
    const loadData = async () => {
      const savedData = await fetchLeaderboard();
      if (savedData) {
        setAppData(savedData);
      }
    };
    loadData();
  }, []);

  const standingsData = useMemo(() => calculateStandingsData(appData), [appData]);

  return (
    <div className="container mx-auto max-w-7xl space-y-12">
      <header className="text-center">
        <h1 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 mb-4">
          Grid Gladiators League Leaderboard
        </h1>
      </header>

      <main className="space-y-12">
        <section>
          <h2 className="text-2xl font-bold text-white mb-4">Race Results</h2>
          <RaceResultsTable appData={appData} />
        </section>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <section className="lg:col-span-2">
            <h2 className="text-2xl font-bold text-white mb-4">Driver Standings</h2>
            <DriverStandings standingsData={standingsData} />
          </section>

          <section className="lg:col-span-1">
            <h2 className="text-2xl font-bold text-white mb-4">Points Table:</h2>
            <PointsKey pointsTable={appData.pointsTable} flPoints={appData.flPoints} />
          </section>
        </div>
      </main>

      <section>
        <h2 className="text-2xl font-bold text-white mb-6 text-center">Cumulative Points per Race</h2>
        <CumulativeChart standingsData={standingsData} tracks={appData.tracks} />
      </section>
    </div>
  );
}