'use client';

import React, { useState } from 'react';
import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
import { routes } from '@/lib/routing/RouteConfig';
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Heading } from '@/ui/Heading';
import { Button } from '@/ui/Button';
import { Input } from '@/ui/Input';
import {
  Flame,
  Globe,
  Plus,
  Search,
  Sparkles,
  Target,
  Trophy,
  Users,
  Flag,
  Award,
  Timer,
  Clock,
  type LucideIcon,
} from 'lucide-react';
import { useRouter } from 'next/navigation';

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

type CategoryId =
  | 'all'
  | 'driver'
  | 'team'
  | 'nations'
  | 'trophy'
  | 'new'
  | 'popular'
  | 'openSlots'
  | 'endurance'
  | 'sprint';

interface Category {
  id: CategoryId;
  label: string;
  icon: LucideIcon;
  description: string;
  filter: (league: LeaguesViewData['leagues'][number]) => boolean;
  color?: string;
}

interface LeaguesTemplateProps {
  viewData: LeaguesViewData;
}

// ============================================================================
// CATEGORIES
// ============================================================================

const CATEGORIES: Category[] = [
  {
    id: 'all',
    label: 'All',
    icon: Globe,
    description: 'Browse all available leagues',
    filter: () => true,
  },
  {
    id: 'popular',
    label: 'Popular',
    icon: Flame,
    description: 'Most active leagues right now',
    filter: (league) => {
      const fillRate = (league.usedDriverSlots ?? 0) / (league.maxDrivers ?? 1);
      return fillRate > 0.7;
    },
    color: 'text-orange-400',
  },
  {
    id: 'new',
    label: 'New',
    icon: Sparkles,
    description: 'Fresh leagues looking for members',
    filter: (league) => {
      const oneWeekAgo = new Date();
      oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
      return new Date(league.createdAt) > oneWeekAgo;
    },
    color: 'text-green-500',
  },
  {
    id: 'openSlots',
    label: 'Open Slots',
    icon: Target,
    description: 'Leagues with available spots',
    filter: (league) => {
      if (league.maxTeams && league.maxTeams > 0) {
        const usedTeams = league.usedTeamSlots ?? 0;
        return usedTeams < league.maxTeams;
      }
      const used = league.usedDriverSlots ?? 0;
      const max = league.maxDrivers ?? 0;
      return max > 0 && used < max;
    },
    color: 'text-cyan-400',
  },
  {
    id: 'driver',
    label: 'Driver',
    icon: Trophy,
    description: 'Compete as an individual',
    filter: (league) => league.scoring?.primaryChampionshipType === 'driver',
  },
  {
    id: 'team',
    label: 'Team',
    icon: Users,
    description: 'Race together as a team',
    filter: (league) => league.scoring?.primaryChampionshipType === 'team',
  },
  {
    id: 'nations',
    label: 'Nations',
    icon: Flag,
    description: 'Represent your country',
    filter: (league) => league.scoring?.primaryChampionshipType === 'nations',
  },
  {
    id: 'trophy',
    label: 'Trophy',
    icon: Award,
    description: 'Special championship events',
    filter: (league) => league.scoring?.primaryChampionshipType === 'trophy',
  },
  {
    id: 'endurance',
    label: 'Endurance',
    icon: Timer,
    description: 'Long-distance racing',
    filter: (league) =>
      league.scoring?.scoringPresetId?.includes('endurance') ??
      league.timingSummary?.includes('h Race') ??
      false,
  },
  {
    id: 'sprint',
    label: 'Sprint',
    icon: Clock,
    description: 'Quick, intense races',
    filter: (league) =>
      (league.scoring?.scoringPresetId?.includes('sprint') ?? false) &&
      !(league.scoring?.scoringPresetId?.includes('endurance') ?? false),
  },
];

export function LeaguesPageClient({ viewData }: LeaguesTemplateProps) {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState('');
  const [activeCategory, setActiveCategory] = useState<CategoryId>('all');

  const filteredLeagues = viewData.leagues.filter((league) => {
    const matchesSearch = !searchQuery || 
      league.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (league.description ?? '').toLowerCase().includes(searchQuery.toLowerCase());
    
    const category = CATEGORIES.find(c => c.id === activeCategory);
    const matchesCategory = !category || category.filter(league);

    return matchesSearch && matchesCategory;
  });

  return (
    <Box minHeight="screen" bg="zinc-950" color="text-zinc-200">
      <Box maxWidth="7xl" mx="auto" px={{ base: 4, sm: 6, lg: 8 }} py={12}>
        {/* Hero */}
        <Box as="header" display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems={{ base: 'start', md: 'end' }} justifyContent="between" gap={8} mb={16}>
          <Stack gap={4}>
            <Box display="flex" alignItems="center" gap={3} color="text-blue-500">
              <Trophy size={24} />
              <Text fontSize="xs" weight="bold" uppercase letterSpacing="widest">Competition Hub</Text>
            </Box>
            <Heading level={1} fontSize="5xl" weight="bold" color="text-white">
              Find Your <Text as="span" color="text-blue-500">Grid</Text>
            </Heading>
            <Text color="text-zinc-400" maxWidth="md" leading="relaxed">
              From casual sprints to epic endurance battles — discover the perfect league for your racing style.
            </Text>
          </Stack>

          <Box display="flex" alignItems="center" gap={4}>
            <Box display="flex" flexDirection="col" alignItems="end">
              <Text fontSize="2xl" weight="bold" color="text-white" font="mono">{viewData.leagues.length}</Text>
              <Text weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">Active Leagues</Text>
            </Box>
            <Box w="px" h="8" bg="zinc-800" />
            <Button 
              onClick={() => router.push(routes.league.create)}
              variant="primary"
              size="lg"
            >
              <Stack direction="row" align="center" gap={2}>
                <Plus size={16} />
                Create League
              </Stack>
            </Button>
          </Box>
        </Box>

        {/* Search & Filters */}
        <Box as="section" display="flex" flexDirection="col" gap={8} mb={12}>
          <Input
            type="text"
            placeholder="Search leagues by name, description, or game..."
            value={searchQuery}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
            icon={<Search size={20} />}
          />

          <Box as="nav" display="flex" flexWrap="wrap" gap={2}>
            {CATEGORIES.map((category) => {
              const isActive = activeCategory === category.id;
              const CategoryIcon = category.icon;
              return (
                <Button
                  key={category.id}
                  onClick={() => setActiveCategory(category.id)}
                  variant={isActive ? 'primary' : 'secondary'}
                  size="sm"
                >
                  <Stack direction="row" align="center" gap={2}>
                    <Box 
                      color={!isActive && category.color ? category.color : undefined}
                    >
                      <CategoryIcon size={14} />
                    </Box>
                    <Text>{category.label}</Text>
                  </Stack>
                </Button>
              );
            })}
          </Box>
        </Box>

        {/* Grid */}
        <Box as="main">
          {filteredLeagues.length > 0 ? (
            <Box display="grid" responsiveGridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
              {filteredLeagues.map((league) => (
                <LeagueCard
                  key={league.id}
                  league={league as unknown as LeagueSummaryViewModel}
                  onClick={() => router.push(routes.league.detail(league.id))}
                />
              ))}
            </Box>
          ) : (
            <Box display="flex" flexDirection="col" alignItems="center" justifyContent="center" py={24} border borderStyle="dashed" borderColor="zinc-800" bg="zinc-900/20">
              <Box color="text-zinc-800" mb={4}>
                <Search size={48} />
              </Box>
              <Heading level={3} fontSize="xl" weight="bold" color="text-zinc-500">No Leagues Found</Heading>
              <Text color="text-zinc-600" size="sm" mt={2}>Try adjusting your search or filters</Text>
              <Button 
                variant="ghost"
                mt={6}
                onClick={() => { setSearchQuery(''); setActiveCategory('all'); }}
              >
                Clear All Filters
              </Button>
            </Box>
          )}
        </Box>
      </Box>
    </Box>
  );
}