import React, { useState, useEffect, useCallback } 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, useLocalSearchParams } from 'expo-router';
import { RaceCard, SearchableDropdown } from '../src/components';
import { getRaces, getTracksGrouped } from '../src/services/api';
import { Race } from '../src/types';
import { useAppStore } from '../src/store/appStore';
import { useScreenTracking } from '../src/analytics/useAnalytics';
import { analytics } from '../src/analytics';

export default function RacePickerScreen() {
  const router = useRouter();

  useScreenTracking('race_picker');
  const params = useLocalSearchParams();
  const mode = params.mode as string | undefined;
  const isScheduleMode = mode === 'schedule';
  
  const { setSelectedRace } = useAppStore();
  
  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 [selectedTracks, setSelectedTracks] = useState<string[]>([]);
  const [dateFilter, setDateFilter] = useState<'today' | 'tomorrow' | null>(null);

  const loadData = async () => {
    try {
      const params: any = { limit: 30 };
      if (dateFilter) params.date = dateFilter;
      
      const [racesData, tracksData] = await Promise.all([
        getRaces(params),
        getTracksGrouped(),
      ]);
      
      setRaces(racesData);
      setTracks(tracksData.all);
      setTracksByType(tracksData.byType);
    } catch (error) {
      console.error('Error loading races:', error);
    } finally {
      setLoading(false);
    }
  };

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

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

  const handleRaceSelect = (race: Race) => {
    setSelectedRace(race);
    analytics.track('race_selected', { race_id: race.id, racing_type: race.racing_type });
    if (isScheduleMode) {
      router.replace('/schedule-builder');
    } else {
      router.back();
    }
  };

  const filteredRaces = races.filter(race => {
    if (selectedTracks.length > 0) {
      return selectedTracks.includes(race.track);
    }
    return true;
  });

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

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.closeButton} 
          onPress={() => router.back()}
        >
          <Ionicons name="close" size={24} color="#111827" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>
          {isScheduleMode ? 'Select Race to Schedule' : 'Select Race'}
        </Text>
        <View style={styles.headerSpacer} />
      </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.filtersContainer}>
        <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>
      </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="#d1d5db" />
            <Text style={styles.emptyStateTitle}>No races found</Text>
          </View>
        ) : (
          filteredRaces.map((race) => (
            <RaceCard
              key={race.id}
              race={race}
              onPress={() => handleRaceSelect(race)}
            />
          ))
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f9fafb',
  },
  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#e5e7eb',
    backgroundColor: '#fff',
  },
  closeButton: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#111827',
  },
  headerSpacer: {
    width: 40,
  },
  trackFilterContainer: {
    paddingHorizontal: 16,
    paddingTop: 16,
  },
  filtersContainer: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 10,
  },
  filterChip: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#e5e7eb',
  },
  filterChipActive: {
    backgroundColor: '#111827',
    borderColor: '#111827',
  },
  filterChipText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#6b7280',
  },
  filterChipTextActive: {
    color: '#fff',
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    padding: 16,
  },
  emptyState: {
    alignItems: 'center',
    padding: 48,
    gap: 8,
  },
  emptyStateTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#6b7280',
  },
});