import React, { useState, useEffect, useCallback, useMemo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  RefreshControl,
  ActivityIndicator,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { RaceCard, SearchableDropdown } from '../../src/components';
import { getRaces, getTracksGrouped } from '../../src/services/api';
import { Race } from '../../src/types';
import { usePrefStore } from '../../src/store/prefStore';
import {
  applyPreferenceFilters,
  hasActiveFilters,
} from '../../src/utils/filters';
import { useTheme, Theme } from '../../src/theme/ThemeContext';
import { useScreenTracking } from '../../src/analytics/useAnalytics';
import { analytics } from '../../src/analytics';

const createStyles = (theme: Theme) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: theme.background,
    },
    loadingContainer: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    header: {
      paddingHorizontal: 20,
      paddingTop: 8,
      paddingBottom: 16,
    },
    title: {
      fontSize: 32,
      fontWeight: '800',
      color: theme.text,
    },
    trackFilterContainer: {
      paddingHorizontal: 20,
      marginBottom: 12,
    },
    dateFiltersContainer: {
      flexDirection: 'row',
      paddingHorizontal: 20,
      gap: 10,
      marginBottom: 12,
    },
    filterChip: {
      paddingHorizontal: 16,
      paddingVertical: 8,
      borderRadius: 20,
      backgroundColor: theme.card,
      borderWidth: 1,
      borderColor: theme.border,
    },
    filterChipActive: {
      backgroundColor: theme.primary,
      borderColor: theme.primary,
    },
    filterChipText: {
      fontSize: 14,
      fontWeight: '500',
      color: theme.textSecondary,
    },
    filterChipTextActive: {
      color: theme.primaryText,
    },
    scrollView: {
      flex: 1,
    },
    scrollContent: {
      padding: 20,
      paddingTop: 8,
    },
    emptyState: {
      alignItems: 'center',
      padding: 48,
      gap: 8,
    },
    emptyStateTitle: {
      fontSize: 18,
      fontWeight: '600',
      color: theme.textSecondary,
    },
    emptyStateSubtitle: {
      fontSize: 14,
      color: theme.textTertiary,
    },
  });

export default function RacesScreen() {
  const { theme } = useTheme();
  const styles = useMemo(() => createStyles(theme), [theme]);

  const router = useRouter();
  const preferences = usePrefStore((s) => s.preferences);
  const prefsLoaded = usePrefStore((s) => s.loaded);
  const loadPreferences = usePrefStore((s) => s.loadPreferences);
  const getRaceQueryParams = usePrefStore((s) => s.getRaceQueryParams);

  useScreenTracking('races');

  const [races, setRaces] = useState<Race[]>([]);
  const [tracks, setTracks] = useState<string[]>([]);
  const [tracksByType, setTracksByType] = useState<{ [key: string]: string[] }>({});
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [dateFilter, setDateFilter] = useState<'today' | 'tomorrow' | null>(null);
  const [selectedTracks, setSelectedTracks] = useState<string[]>([]);
  const [prefFilterApplied, setPrefFilterApplied] = useState(false);

  const filtersActive = useMemo(
    () => hasActiveFilters(preferences),
    [preferences],
  );

  const loadData = async () => {
    try {
      // Load preferences if not yet loaded
      if (!prefsLoaded) {
        await loadPreferences();
      }

      const params: any = getRaceQueryParams();
      if (dateFilter) params.date = dateFilter;

      const [racesData, tracksData] = await Promise.all([
        getRaces(params),
        getTracksGrouped(),
      ]);

      // Apply preference filters client-side (handles multi-select cases)
      const prefFiltered = applyPreferenceFilters(racesData, preferences);

      setRaces(prefFiltered);
      setPrefFilterApplied(filtersActive);
      setTracks(tracksData.all);
      setTracksByType(tracksData.byType);
    } catch (error) {
      console.error('Error loading races:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadData();
  }, [dateFilter, preferences]);

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await loadData();
    setRefreshing(false);
  }, [dateFilter]);

  const handleRacePress = (race: Race) => {
    analytics.track('race_selected', { race_id: race.id, racing_type: race.racing_type });
    router.push(`/race/${race.id}`);
  };

  // Filter races by manually selected tracks
  const filteredRaces = races.filter((race) => {
    if (selectedTracks.length === 0) return true;
    return selectedTracks.includes(race.track);
  });

  if (loading) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color={theme.primary} />
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <View style={styles.header}>
        <Text style={styles.title}>Races</Text>
      </View>

      {/* Active preference filter indicator */}
      {prefFilterApplied && (
        <View
          style={[
            styles.trackFilterContainer,
            { flexDirection: 'row', alignItems: 'center', gap: 6 },
          ]}
        >
          <Ionicons name="funnel" size={14} color={theme.primary} />
          <Text style={{ fontSize: 13, color: theme.primary, fontWeight: '500' }}>
            Filtered by your preferences
          </Text>
        </View>
      )}

      {/* Track Filter Dropdown */}
      <View style={styles.trackFilterContainer}>
        <SearchableDropdown
          placeholder="Search tracks..."
          items={tracks || []}
          selectedItems={selectedTracks}
          onSelectionChange={setSelectedTracks}
          multiSelect={true}
          groupedItems={tracksByType}
        />
      </View>

      {/* Date Filters */}
      <View style={styles.dateFiltersContainer}>
        <TouchableOpacity
          style={[styles.filterChip, dateFilter === 'today' && styles.filterChipActive]}
          onPress={() => setDateFilter(dateFilter === 'today' ? null : 'today')}
        >
          <Text style={[styles.filterChipText, dateFilter === 'today' && styles.filterChipTextActive]}>
            Today
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterChip, dateFilter === 'tomorrow' && styles.filterChipActive]}
          onPress={() => setDateFilter(dateFilter === 'tomorrow' ? null : 'tomorrow')}
        >
          <Text
            style={[styles.filterChipText, dateFilter === 'tomorrow' && styles.filterChipTextActive]}
          >
            Tomorrow
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.filterChip, !dateFilter && styles.filterChipActive]}
          onPress={() => setDateFilter(null)}
        >
          <Text style={[styles.filterChipText, !dateFilter && styles.filterChipTextActive]}>
            All Days
          </Text>
        </TouchableOpacity>
      </View>

      {/* Races List */}
      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={styles.scrollContent}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
        showsVerticalScrollIndicator={false}
      >
        {filteredRaces.length === 0 ? (
          <View style={styles.emptyState}>
            <Ionicons name="flag-outline" size={48} color={theme.textTertiary} />
            <Text style={styles.emptyStateTitle}>No races found</Text>
            <Text style={styles.emptyStateSubtitle}>Try adjusting your filters</Text>
          </View>
        ) : (
          filteredRaces.map((race) => (
            <RaceCard key={race.id} race={race} onPress={() => handleRacePress(race)} />
          ))
        )}
      </ScrollView>
    </SafeAreaView>
  );
}