'use client';

import { useMemo, useEffect } from 'react';
import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import {
  Calendar,
  Clock,
  Flag,
  ChevronRight,
  ChevronLeft,
  Car,
  Trophy,
  Zap,
  PlayCircle,
  CheckCircle2,
  XCircle,
  Search,
  SlidersHorizontal,
} from 'lucide-react';
import { RaceFilterModal } from '@/components/races/RaceFilterModal';
import { RacePagination } from '@/components/races/RacePagination';

export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';

export interface Race {
  id: string;
  track: string;
  car: string;
  scheduledAt: string;
  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
  sessionType: string;
  leagueId?: string;
  leagueName?: string;
  strengthOfField?: number | null;
}

export interface RacesAllTemplateProps {
  races: Race[];
  isLoading: boolean;
  // Pagination
  currentPage: number;
  totalPages: number;
  itemsPerPage: number;
  onPageChange: (page: number) => void;
  // Filters
  statusFilter: StatusFilter;
  setStatusFilter: (filter: StatusFilter) => void;
  leagueFilter: string;
  setLeagueFilter: (filter: string) => void;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  // UI State
  showFilters: boolean;
  setShowFilters: (show: boolean) => void;
  showFilterModal: boolean;
  setShowFilterModal: (show: boolean) => void;
  // Actions
  onRaceClick: (raceId: string) => void;
  onLeagueClick: (leagueId: string) => void;
}

export function RacesAllTemplate({
  races,
  isLoading,
  currentPage,
  totalPages,
  itemsPerPage,
  onPageChange,
  statusFilter,
  setStatusFilter,
  leagueFilter,
  setLeagueFilter,
  searchQuery,
  setSearchQuery,
  showFilters,
  setShowFilters,
  showFilterModal,
  setShowFilterModal,
  onRaceClick,
  onLeagueClick,
}: RacesAllTemplateProps) {
  // Filter races
  const filteredRaces = useMemo(() => {
    return races.filter(race => {
      if (statusFilter !== 'all' && race.status !== statusFilter) {
        return false;
      }

      if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
        return false;
      }

      if (searchQuery) {
        const query = searchQuery.toLowerCase();
        const matchesTrack = race.track.toLowerCase().includes(query);
        const matchesCar = race.car.toLowerCase().includes(query);
        const matchesLeague = race.leagueName?.toLowerCase().includes(query);
        if (!matchesTrack && !matchesCar && !matchesLeague) {
          return false;
        }
      }

      return true;
    });
  }, [races, statusFilter, leagueFilter, searchQuery]);

  // Paginate
  const paginatedRaces = useMemo(() => {
    const start = (currentPage - 1) * itemsPerPage;
    return filteredRaces.slice(start, start + itemsPerPage);
  }, [filteredRaces, currentPage, itemsPerPage]);

  // Reset page when filters change
  useEffect(() => {
    onPageChange(1);
  }, [statusFilter, leagueFilter, searchQuery]);

  const formatDate = (date: Date | string) => {
    const d = typeof date === 'string' ? new Date(date) : date;
    return d.toLocaleDateString('en-US', {
      weekday: 'short',
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    });
  };

  const formatTime = (date: Date | string) => {
    const d = typeof date === 'string' ? new Date(date) : date;
    return d.toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const statusConfig = {
    scheduled: {
      icon: Clock,
      color: 'text-primary-blue',
      bg: 'bg-primary-blue/10',
      border: 'border-primary-blue/30',
      label: 'Scheduled',
    },
    running: {
      icon: PlayCircle,
      color: 'text-performance-green',
      bg: 'bg-performance-green/10',
      border: 'border-performance-green/30',
      label: 'LIVE',
    },
    completed: {
      icon: CheckCircle2,
      color: 'text-gray-400',
      bg: 'bg-gray-500/10',
      border: 'border-gray-500/30',
      label: 'Completed',
    },
    cancelled: {
      icon: XCircle,
      color: 'text-warning-amber',
      bg: 'bg-warning-amber/10',
      border: 'border-warning-amber/30',
      label: 'Cancelled',
    },
  };

  const breadcrumbItems = [
    { label: 'Races', href: '/races' },
    { label: 'All Races' },
  ];

  if (isLoading) {
    return (
      <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
        <div className="max-w-5xl mx-auto">
          <div className="animate-pulse space-y-6">
            <div className="h-6 bg-iron-gray rounded w-1/4" />
            <div className="h-10 bg-iron-gray rounded w-1/3" />
            <div className="space-y-4">
              {[1, 2, 3, 4, 5].map(i => (
                <div key={i} className="h-24 bg-iron-gray rounded-lg" />
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-deep-graphite py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto space-y-6">
        {/* Breadcrumbs */}
        <Breadcrumbs items={breadcrumbItems} />

        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <Heading level={1} className="text-2xl font-bold text-white flex items-center gap-3">
              <Flag className="w-6 h-6 text-primary-blue" />
              All Races
            </Heading>
            <p className="text-gray-400 text-sm mt-1">
              {filteredRaces.length} race{filteredRaces.length !== 1 ? 's' : ''} found
            </p>
          </div>
          
          <Button
            variant="secondary"
            onClick={() => setShowFilters(!showFilters)}
            className="flex items-center gap-2"
          >
            <SlidersHorizontal className="w-4 h-4" />
            Filters
          </Button>
        </div>

        {/* Search & Filters */}
        <Card className={`!p-4 ${showFilters ? '' : 'hidden sm:block'}`}>
          <div className="space-y-4">
            {/* Search */}
            <div className="relative">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search by track, car, or league..."
                className="w-full pl-10 pr-4 py-2.5 bg-deep-graphite border border-charcoal-outline rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-blue"
              />
            </div>

            {/* Filter Row */}
            <div className="flex flex-wrap gap-4">
              {/* Status Filter */}
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
                className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
              >
                <option value="all">All Statuses</option>
                <option value="scheduled">Scheduled</option>
                <option value="running">Live</option>
                <option value="completed">Completed</option>
                <option value="cancelled">Cancelled</option>
              </select>

              {/* League Filter */}
              <select
                value={leagueFilter}
                onChange={(e) => setLeagueFilter(e.target.value)}
                className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
              >
                <option value="all">All Leagues</option>
                {races && [...new Set(races.map(r => r.leagueId))].filter(Boolean).map(leagueId => {
                  const race = races.find(r => r.leagueId === leagueId);
                  return race ? (
                    <option key={leagueId} value={leagueId}>
                      {race.leagueName}
                    </option>
                  ) : null;
                })}
              </select>

              {/* Clear Filters */}
              {(statusFilter !== 'all' || leagueFilter !== 'all' || searchQuery) && (
                <button
                  onClick={() => {
                    setStatusFilter('all');
                    setLeagueFilter('all');
                    setSearchQuery('');
                  }}
                  className="px-4 py-2 text-sm text-primary-blue hover:underline"
                >
                  Clear filters
                </button>
              )}
            </div>
          </div>
        </Card>

        {/* Race List */}
        {paginatedRaces.length === 0 ? (
          <Card className="text-center py-12">
            <div className="flex flex-col items-center gap-4">
              <div className="p-4 bg-iron-gray rounded-full">
                <Calendar className="w-8 h-8 text-gray-500" />
              </div>
              <div>
                <p className="text-white font-medium mb-1">No races found</p>
                <p className="text-sm text-gray-500">
                  {races.length === 0 
                    ? 'No races have been scheduled yet'
                    : 'Try adjusting your search or filters'}
                </p>
              </div>
            </div>
          </Card>
        ) : (
          <div className="space-y-3">
            {paginatedRaces.map(race => {
               const config = statusConfig[race.status as keyof typeof statusConfig];
               const StatusIcon = config.icon;

              return (
                <div
                  key={race.id}
                  onClick={() => onRaceClick(race.id)}
                  className={`group relative overflow-hidden rounded-xl bg-iron-gray border ${config.border} p-4 cursor-pointer transition-all duration-200 hover:scale-[1.01] hover:border-primary-blue`}
                >
                  {/* Live indicator */}
                  {race.status === 'running' && (
                    <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-performance-green via-performance-green/50 to-performance-green animate-pulse" />
                  )}

                  <div className="flex items-center gap-4">
                    {/* Date Column */}
                    <div className="hidden sm:flex flex-col items-center min-w-[80px] text-center">
                      <p className="text-xs text-gray-500 uppercase">
                        {new Date(race.scheduledAt).toLocaleDateString('en-US', { month: 'short' })}
                      </p>
                      <p className="text-2xl font-bold text-white">
                        {new Date(race.scheduledAt).getDate()}
                      </p>
                      <p className="text-xs text-gray-500">
                        {formatTime(race.scheduledAt)}
                      </p>
                    </div>

                    {/* Divider */}
                    <div className="hidden sm:block w-px h-16 bg-charcoal-outline" />

                    {/* Main Content */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-start justify-between gap-4">
                        <div className="min-w-0">
                          <h3 className="font-semibold text-white truncate group-hover:text-primary-blue transition-colors">
                            {race.track}
                          </h3>
                          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1">
                            <span className="flex items-center gap-1.5 text-sm text-gray-400">
                              <Car className="w-3.5 h-3.5" />
                              {race.car}
                            </span>
                            {race.strengthOfField && (
                              <span className="flex items-center gap-1.5 text-sm text-warning-amber">
                                <Zap className="w-3.5 h-3.5" />
                                SOF {race.strengthOfField}
                              </span>
                            )}
                            <span className="sm:hidden text-sm text-gray-500">
                              {formatDate(race.scheduledAt)}
                            </span>
                          </div>
                          <Link
                            href={`/leagues/${race.leagueId}`}
                            onClick={(e) => e.stopPropagation()}
                            className="inline-flex items-center gap-1.5 mt-2 text-sm text-primary-blue hover:underline"
                          >
                            <Trophy className="w-3.5 h-3.5" />
                            {race.leagueName}
                          </Link>
                        </div>

                        {/* Status Badge */}
                        <div className={`flex items-center gap-1.5 px-2.5 py-1 rounded-full ${config.bg} ${config.border} border flex-shrink-0`}>
                          <StatusIcon className={`w-3.5 h-3.5 ${config.color}`} />
                          <span className={`text-xs font-medium ${config.color}`}>
                            {config.label}
                          </span>
                        </div>
                      </div>
                    </div>

                    {/* Arrow */}
                    <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-primary-blue transition-colors flex-shrink-0" />
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Pagination */}
        <RacePagination
          currentPage={currentPage}
          totalPages={totalPages}
          totalItems={filteredRaces.length}
          itemsPerPage={itemsPerPage}
          onPageChange={onPageChange}
        />

        {/* Filter Modal */}
        <RaceFilterModal
          isOpen={showFilterModal}
          onClose={() => setShowFilterModal(false)}
          statusFilter={statusFilter}
          setStatusFilter={setStatusFilter}
          leagueFilter={leagueFilter}
          setLeagueFilter={setLeagueFilter}
          timeFilter="all"
          setTimeFilter={() => {}}
          searchQuery={searchQuery}
          setSearchQuery={setSearchQuery}
          leagues={[...new Set(races.map(r => ({ id: r.leagueId || '', name: r.leagueName || '' })))]}
          showSearch={true}
          showTimeFilter={false}
        />
      </div>
    </div>
  );
}