import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { Colors } from "@/constants/theme";
import { useTheme } from "@/context/ThemeContext";
import { League } from "@/types/api";
import { Image } from "expo-image";
import React from "react";
import { useTranslation } from "react-i18next";
import { Modal, Pressable, ScrollView, StyleSheet, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

interface LeagueModalProps {
  visible: boolean;
  onClose: () => void;
  leagues: League[];
  selectedLeagueKey: string | null;
  onSelect: (leagueKey: string) => void;
}

export function LeagueModal({
  visible,
  onClose,
  leagues,
  selectedLeagueKey,
  onSelect,
}: LeagueModalProps) {
  const { theme } = useTheme();
  const { t } = useTranslation();
  const isDark = theme === "dark";
  const bg = isDark ? "#1C1C1E" : "#FFFFFF";
  const text = isDark ? "#FFFFFF" : "#000000";

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={onClose}
    >
      <Pressable style={styles.overlay} onPress={onClose}>
        <View />
      </Pressable>

      <View style={[styles.sheet, { backgroundColor: bg }]}>
        <SafeAreaView edges={["bottom"]}>
          <View style={styles.header}>
            <ThemedText type="subtitle" style={styles.title}>
              {t("home.select_league")}
            </ThemedText>
            <Pressable onPress={onClose} style={styles.closeButton}>
              <IconSymbol name="close" size={24} color={text} />
            </Pressable>
          </View>
          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
            {leagues.length === 0 ? (
              <View style={styles.emptyContainer}>
                <ThemedText style={styles.emptyText}>
                  {t("home.no_leagues")}
                </ThemedText>
              </View>
            ) : (
              leagues.map((league) => {
                const isSelected = selectedLeagueKey === league.key;
                const optionBg = isDark ? "#2C2C2E" : "#F5F5F5";
                const iconBg = isDark ? "#3A3A3C" : "#E5E5EA";

                return (
                  <Pressable
                    key={league.id}
                    style={[
                      styles.option,
                      { backgroundColor: optionBg },
                    ]}
                    onPress={() => {
                      onSelect(league.key);
                      onClose();
                    }}
                  >
                    {/* 左侧图标 */}
                    <View style={[styles.iconContainer, { backgroundColor: iconBg }]}>
                      {league.logo ? (
                        <Image
                          source={{ uri: league.logo }}
                          style={styles.leagueLogo}
                          contentFit="contain"
                        />
                      ) : (
                        <IconSymbol name="trophy-outline" size={24} color={text} />
                      )}
                    </View>

                    {/* 中间内容 */}
                    <View style={styles.content}>
                      <ThemedText
                        style={[
                          styles.leagueName,
                          { fontWeight: isSelected ? "600" : "400" },
                        ]}
                      >
                        {league.name}
                      </ThemedText>
                      {league.countryName && (
                        <ThemedText style={styles.countryName}>
                          {league.countryName}
                        </ThemedText>
                      )}
                    </View>

                    {/* 右侧指示点 */}
                    <View
                      style={[
                        styles.indicator,
                        {
                          backgroundColor: isSelected
                            ? Colors.light.tint
                            : isDark
                              ? "#666666"
                              : "#CCCCCC",
                        },
                      ]}
                    />
                  </Pressable>
                );
              })
            )}
          </ScrollView>
        </SafeAreaView>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  sheet: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
    height: "55%",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: "600",
  },
  closeButton: {
    width: 32,
    height: 32,
    alignItems: "center",
    justifyContent: "center",
  },
  scrollView: {
    maxHeight: 400,
  },
  emptyContainer: {
    padding: 40,
    alignItems: "center",
    justifyContent: "center",
  },
  emptyText: {
    fontSize: 16,
    opacity: 0.6,
  },
  option: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 16,
    paddingHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
  },
  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: "center",
    justifyContent: "center",
    marginRight: 12,
  },
  leagueLogo: {
    width: 32,
    height: 32,
  },
  content: {
    flex: 1,
  },
  leagueName: {
    fontSize: 16,
    marginBottom: 4,
  },
  countryName: {
    fontSize: 12,
    opacity: 0.6,
  },
  indicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginLeft: 12,
  },
});