'use client';

import React from 'react';
import { Trophy, Users, Award } from 'lucide-react';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import { DriverLeaderboardPreview } from '@/components/leaderboards/DriverLeaderboardPreview';
import { TeamLeaderboardPreview } from '@/components/leaderboards/TeamLeaderboardPreview';

// ============================================================================
// TYPES
// ============================================================================

interface LeaderboardsTemplateProps {
  drivers: {
    id: string;
    name: string;
    rating: number;
    skillLevel: string;
    nationality: string;
    wins: number;
    rank: number;
    avatarUrl: string;
    position: number;
  }[];
  teams: {
    id: string;
    name: string;
    tag: string;
    memberCount: number;
    category?: string;
    totalWins: number;
    logoUrl: string;
    position: number;
  }[];
  onDriverClick: (driverId: string) => void;
  onTeamClick: (teamId: string) => void;
  onNavigateToDrivers: () => void;
  onNavigateToTeams: () => void;
}

// ============================================================================
// MAIN TEMPLATE COMPONENT
// ============================================================================

export function LeaderboardsTemplate({
  drivers,
  teams,
  onDriverClick,
  onTeamClick,
  onNavigateToDrivers,
  onNavigateToTeams,
}: LeaderboardsTemplateProps) {
  return (
    <div className="max-w-7xl mx-auto px-4 pb-12">
      <div className="relative mb-10 py-10 px-8 rounded-2xl bg-gradient-to-br from-yellow-600/20 via-iron-gray/80 to-deep-graphite border border-yellow-500/20 overflow-hidden">
        <div className="absolute top-0 right-0 w-96 h-96 bg-yellow-400/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-amber-600/5 rounded-full blur-3xl" />
        <div className="absolute top-1/2 right-1/4 w-48 h-48 bg-purple-500/5 rounded-full blur-2xl" />

        <div className="relative z-10">
          <div className="flex items-center gap-4 mb-4">
            <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-yellow-400/20 to-amber-600/10 border border-yellow-400/30">
              <Award className="w-7 h-7 text-yellow-400" />
            </div>
            <div>
              <Heading level={1} className="text-3xl lg:text-4xl">
                Leaderboards
              </Heading>
              <p className="text-gray-400">Where champions rise and legends are made</p>
            </div>
          </div>

          <p className="text-gray-400 text-lg leading-relaxed max-w-2xl mb-6">
            Track the best drivers and teams across all competitions. Every race counts. Every position matters. Who will claim the throne?
          </p>

          <div className="flex flex-wrap gap-3">
            <Button
              variant="secondary"
              onClick={onNavigateToDrivers}
              className="flex items-center gap-2"
            >
              <Trophy className="w-4 h-4 text-primary-blue" />
              Driver Rankings
            </Button>
            <Button
              variant="secondary"
              onClick={onNavigateToTeams}
              className="flex items-center gap-2"
            >
              <Users className="w-4 h-4 text-purple-400" />
              Team Rankings
            </Button>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <DriverLeaderboardPreview drivers={drivers} onDriverClick={onDriverClick} onNavigateToDrivers={onNavigateToDrivers} />
        <TeamLeaderboardPreview teams={teams} onTeamClick={onTeamClick} onNavigateToTeams={onNavigateToTeams} />
      </div>
    </div>
  );
}