'use client';

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

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

interface DriverRankingsInteractiveProps {
  drivers: DriverLeaderboardItemViewModel[];
}

export default function DriverRankingsInteractive({ drivers }: DriverRankingsInteractiveProps) {
  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 handleDriverClick = (driverId: string) => {
    if (driverId.startsWith('demo-')) return;
    router.push(`/drivers/${driverId}`);
  };

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

  return (
    <DriverRankingsTemplate
      drivers={drivers}
      searchQuery={searchQuery}
      selectedSkill={selectedSkill}
      sortBy={sortBy}
      showFilters={showFilters}
      onSearchChange={setSearchQuery}
      onSkillChange={setSelectedSkill}
      onSortChange={setSortBy}
      onToggleFilters={() => setShowFilters(!showFilters)}
      onDriverClick={handleDriverClick}
      onBackToLeaderboards={handleBackToLeaderboards}
    />
  );
}