'use client';

import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Modal } from '@/components/shared/Modal';
import { Stack } from '@/ui/Stack';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { StatusDot } from '@/ui/StatusDot';
import { Box } from '@/ui/Box';
import { Filter, Search } from 'lucide-react';

export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';

interface RaceFilterModalProps {
  isOpen: boolean;
  onClose: () => void;
  statusFilter: StatusFilter;
  setStatusFilter: (filter: StatusFilter) => void;
  leagueFilter: string;
  setLeagueFilter: (filter: string) => void;
  timeFilter: TimeFilter;
  setTimeFilter: (filter: TimeFilter) => void;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  leagues: Array<{ id: string; name: string }>;
  showSearch?: boolean;
  showTimeFilter?: boolean;
}

export function RaceFilterModal({
  isOpen,
  onClose,
  statusFilter,
  setStatusFilter,
  leagueFilter,
  setLeagueFilter,
  timeFilter,
  setTimeFilter,
  searchQuery,
  setSearchQuery,
  leagues,
  showSearch = true,
  showTimeFilter = true,
}: RaceFilterModalProps) {
  return (
    <Modal
      isOpen={isOpen}
      onOpenChange={(open) => !open && onClose()}
      title="Filters"
      icon={<Icon icon={Filter} size={5} intent="primary" />}
    >
      <Stack gap={6}>
        {/* Search */}
        {showSearch && (
          <Input
            label="Search"
            type="text"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Track, car, or league..."
            icon={<Icon icon={Search} size={4} intent="low" />}
          />
        )}

        {/* Time Filter */}
        {showTimeFilter && (
          <Stack gap={2}>
            <Text as="label" size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">Time</Text>
            <Stack direction="row" wrap gap={2}>
              {(['upcoming', 'live', 'past', 'all'] as TimeFilter[]).map(filter => (
                <Button
                  key={filter}
                  variant={timeFilter === filter ? 'primary' : 'secondary'}
                  size="sm"
                  onClick={() => setTimeFilter(filter)}
                >
                  {filter === 'live' && (
                    <Box mr={2}>
                      <StatusDot intent="success" size={1.5} pulse />
                    </Box>
                  )}
                  {filter.charAt(0).toUpperCase() + filter.slice(1)}
                </Button>
              ))}
            </Stack>
          </Stack>
        )}

        {/* Status Filter */}
        <Select
          label="Status"
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
          options={[
            { value: 'all', label: 'All Statuses' },
            { value: 'scheduled', label: 'Scheduled' },
            { value: 'running', label: 'Live' },
            { value: 'completed', label: 'Completed' },
            { value: 'cancelled', label: 'Cancelled' },
          ]}
        />

        {/* League Filter */}
        <Select
          label="League"
          value={leagueFilter}
          onChange={(e) => setLeagueFilter(e.target.value)}
          options={[
            { value: 'all', label: 'All Leagues' },
            ...leagues.map(league => ({ value: league.id, label: league.name }))
          ]}
        />

        {/* Clear Filters */}
        {(statusFilter !== 'all' || leagueFilter !== 'all' || searchQuery || (showTimeFilter && timeFilter !== 'upcoming')) && (
          <Button
            variant="ghost"
            onClick={() => {
              setStatusFilter('all');
              setLeagueFilter('all');
              setSearchQuery('');
              if (showTimeFilter) setTimeFilter('upcoming');
            }}
            fullWidth
          >
            Clear All Filters
          </Button>
        )}
      </Stack>
    </Modal>
  );
}
