import { useTranslation } from "react-i18next";
import { View, Text, Pressable, FlatList, Alert } from "react-native";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import type { WorkoutStackParamList } from "@navigation/types";
import { useTemplates } from "../hooks/useTemplates";

export function TemplatesScreen() {
  const { t } = useTranslation("common");
  const navigation = useNavigation<NativeStackNavigationProp<WorkoutStackParamList>>();
  const { templates, remove, toggleFavorite } = useTemplates();

  const handleDelete = (id: string, name: string) => {
    Alert.alert(t("alert.deleteTemplate"), t("alert.deleteConfirm", { name }), [
      { text: t("cancel"), style: "cancel" },
      { text: t("delete"), style: "destructive", onPress: () => remove(id) },
    ]);
  };

  return (
    <View className="flex-1 bg-white">
      <FlatList
        data={templates}
        keyExtractor={(item) => item.id}
        contentContainerClassName="p-4"
        ListEmptyComponent={
          <View className="py-12 items-center">
            <Text className="text-slate-400 text-lg">{t("alert.deleteTemplate")}</Text>
            <Text className="text-slate-400 text-sm mt-1">
              {t("noTemplatesYet")}
            </Text>
          </View>
        }
        renderItem={({ item }) => (
          <Pressable
            onPress={() => navigation.navigate("Builder", { templateId: item.id })}
            className="bg-slate-50 rounded-2xl p-4 mb-3 border border-slate-200"
          >
            <View className="flex-row justify-between items-start">
              <View className="flex-1">
                <Text className="font-semibold text-slate-900 text-base">{item.name}</Text>
                <Text className="text-slate-500 text-sm mt-1">
                  {t("pool", { length: item.poolLength })}
                </Text>
              </View>
              <View className="flex-row gap-2">
                <Pressable
                  onPress={() => toggleFavorite(item.id, item.isFavorite)}
                  className="p-1"
                >
                  <Text className="text-lg">{item.isFavorite ? "★" : "☆"}</Text>
                </Pressable>
                <Pressable
                  onPress={() => handleDelete(item.id, item.name)}
                  className="p-1"
                >
                  <Text className="text-red-400 text-lg">×</Text>
                </Pressable>
              </View>
            </View>
          </Pressable>
        )}
      />
    </View>
  );
}