import { HomeHeader } from "@/components/home-header";
import { MatchCard } from "@/components/match-card";
import { SelectionModal } from "@/components/selection-modal";
import { CalendarModal } from "@/components/simple-calendar";
import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { Colors } from "@/constants/theme";
import { useTheme } from "@/context/ThemeContext";
import { fetchSports, fetchTodayMatches } from "@/lib/api";
import { Match, Sport } from "@/types/api";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  ActivityIndicator,
  FlatList,
  StyleSheet,
  TouchableOpacity,
  View,
} from "react-native";

export default function HomeScreen() {
  const { theme } = useTheme();
  const { t } = useTranslation();
  const isDark = theme === "dark";
  const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
  const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";

  const [sports, setSports] = useState<Sport[]>([]);
  const [matches, setMatches] = useState<Match[]>([]);
  const [loading, setLoading] = useState(true);

  // Selection States
  const [selectedSportId, setSelectedSportId] = useState<number | null>(null);
  const [selectedDate, setSelectedDate] = useState(new Date());

  // Modal Visibilities
  const [showSportModal, setShowSportModal] = useState(false);
  const [showCalendarModal, setShowCalendarModal] = useState(false);

  // Load Sports
  useEffect(() => {
    loadSports();
  }, []);

  // Load Matches when sport or date changes
  useEffect(() => {
    if (selectedSportId !== null) {
      loadMatches(selectedSportId);
    }
  }, [selectedSportId, selectedDate]);

  const loadSports = async () => {
    try {
      const list = await fetchSports();
      setSports(list);
      if (list.length > 0) {
        setSelectedSportId(list[0].id);
      }
    } catch (e) {
      console.error(e);
    }
  };

  const loadMatches = async (sportId: number) => {
    setLoading(true);
    try {
      // Pass selectedDate if API supported it
      const list = await fetchTodayMatches(sportId);
      setMatches(list);
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

  const currentSport = sports.find((s) => s.id === selectedSportId);

  const renderHeader = () => (
    <View style={styles.filterContainer}>
      {/* Time Filter (Mock) */}
      <TouchableOpacity
        style={[styles.filterBtn, { backgroundColor: filterBg }]}
      >
        <IconSymbol name="time-outline" size={18} color={iconColor} />
        <ThemedText style={styles.filterText}>{t("home.time")}</ThemedText>
      </TouchableOpacity>

      {/* Sport Selector */}
      <TouchableOpacity
        style={[
          styles.filterBtn,
          styles.mainFilterBtn,
          { backgroundColor: filterBg },
        ]}
        onPress={() => setShowSportModal(true)}
      >
        <IconSymbol name="football-outline" size={18} color={iconColor} />
        <ThemedText style={styles.filterText}>
          {currentSport ? currentSport.name : t("home.select_sport")}
        </ThemedText>
      </TouchableOpacity>

      {/* Date Selector */}
      <TouchableOpacity
        style={[styles.filterBtn, { backgroundColor: filterBg }]}
        onPress={() => setShowCalendarModal(true)}
      >
        <ThemedText style={styles.dateDayText}>
          {selectedDate.getDate()}
        </ThemedText>
        <ThemedText style={styles.dateMonthText}>
          {selectedDate.getHours()}:
          {selectedDate.getMinutes().toString().padStart(2, "0")}
        </ThemedText>
      </TouchableOpacity>
    </View>
  );

  return (
    <ThemedView style={styles.container}>
      <HomeHeader />

      {renderHeader()}

      {loading ? (
        <View style={styles.center}>
          <ActivityIndicator size="large" color={Colors[theme].tint} />
          <ThemedText style={{ marginTop: 10 }}>{t("home.loading")}</ThemedText>
        </View>
      ) : (
        <FlatList
          data={matches}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => <MatchCard match={item} />}
          contentContainerStyle={styles.listContent}
          ListEmptyComponent={
            <View style={styles.center}>
              <ThemedText>{t("home.no_matches")}</ThemedText>
            </View>
          }
        />
      )}

      {/* Modals */}
      <SelectionModal
        visible={showSportModal}
        onClose={() => setShowSportModal(false)}
        title={t("home.select_sport")}
        options={sports.map((s) => ({
          id: s.id,
          label: s.name,
          value: s.id,
        }))}
        selectedValue={selectedSportId}
        onSelect={setSelectedSportId}
      />

      <CalendarModal
        visible={showCalendarModal}
        onClose={() => setShowCalendarModal(false)}
        selectedDate={selectedDate}
        onSelectDate={setSelectedDate}
      />
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingTop: 50,
  },
  filterContainer: {
    flexDirection: "row",
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 12,
  },
  filterBtn: {
    flex: 1,
    height: 44, // Increased from 36
    flexDirection: "column", // Stacked logic for Date, or Row for others
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 8, // Rounded corners
    // iOS shadow
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    // Android elevation
    elevation: 2,
  },
  mainFilterBtn: {
    flex: 2, // Wider for sport
    flexDirection: "row",
    gap: 8,
  },
  filterText: {
    fontSize: 14,
    fontWeight: "500",
  },
  dateDayText: {
    fontSize: 16,
    fontWeight: "bold",
  },
  dateMonthText: {
    fontSize: 10,
    opacity: 0.6,
  },
  listContent: {
    padding: 16,
    paddingTop: 8,
  },
});