'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import DriverRankingsTemplate from '@/templates/DriverRankingsTemplate';
import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';

// Shared state components
import { StateContainer } from '@/components/shared/state/StateContainer';
import { useDriverLeaderboard } from '@/hooks/driver/useDriverLeaderboard';
import { Users } from 'lucide-react';

type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
type SortBy = 'rank' | 'rating' | 'wins' | 'podiums' | 'winRate';

export default function DriverRankingsStatic() {
  const router = useRouter();
  
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedSkill, setSelectedSkill] = useState<'all' | SkillLevel>('all');
  const [sortBy, setSortBy] = useState<SortBy>('rank');
  const [showFilters, setShowFilters] = useState(false);

  const { data: driverData, isLoading, error, retry } = useDriverLeaderboard();

  const handleDriverClick = (driverId: string) => {
    if (driverId.startsWith('demo-')) return;
    router.push(`/drivers/${driverId}`);
  };

  const handleBackToLeaderboards = () => {
    router.push('/leaderboards');
  };

  const drivers = driverData?.drivers || [];

  return (
    <StateContainer
      data={drivers}
      isLoading={isLoading}
      error={error}
      retry={retry}
      config={{
        loading: { variant: 'spinner', message: 'Loading driver rankings...' },
        error: { variant: 'full-screen' },
        empty: {
          icon: Users,
          title: 'No drivers found',
          description: 'There are no drivers in the system yet.',
        }
      }}
    >
      {(driversData) => (
        <DriverRankingsTemplate
          drivers={driversData}
          searchQuery={searchQuery}
          selectedSkill={selectedSkill}
          sortBy={sortBy}
          showFilters={showFilters}
          onSearchChange={setSearchQuery}
          onSkillChange={setSelectedSkill}
          onSortChange={setSortBy}
          onToggleFilters={() => setShowFilters(!showFilters)}
          onDriverClick={handleDriverClick}
          onBackToLeaderboards={handleBackToLeaderboards}
        />
      )}
    </StateContainer>
  );
}