import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { setLanguage } from "../../services/i18n/index";
import { useRouter, useNavigation } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { useSafeAreaInsets } from "react-native-safe-area-context";

const LanguageScreen = () => {
  const router = useRouter();
  const navigation = useNavigation();
  const [selectedLang, setSelectedLang] = useState<string | null>(null);
  const insets = useSafeAreaInsets();

  useEffect(() => {
    navigation.setOptions({ headerShown: false });
  }, [navigation]);

  const handleLanguagePress = (lang: string) => {
    setSelectedLang(lang);
  };

  const handleSelect = async () => {
    if (selectedLang) {
      await setLanguage(selectedLang);
      router.navigate("/auth/login");
    }
  };

  return (
    <>
      <StatusBar style="dark" />
      <View style={styles.container}>
        <Text style={styles.title}>Select Language</Text>
        <Text style={styles.subtitle}>
          Please select your preferred language
        </Text>

        <TouchableOpacity
          style={[
            styles.languageCard,
            selectedLang === "en" && styles.selectedCard,
          ]}
          onPress={() => handleLanguagePress("en")}
        >
          <Text style={styles.languageText}>English</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.languageCard,
            selectedLang === "hi" && styles.selectedCard,
          ]}
          onPress={() => handleLanguagePress("hi")}
        >
          <Text style={styles.languageText}>हिन्दी</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.selectButton,
            selectedLang ? styles.selectEnabled : styles.selectDisabled,
            { marginBottom: insets.bottom + 16 },
          ]}
          onPress={handleSelect}
          disabled={!selectedLang}
        >
          <Text style={styles.selectButtonText}>Select</Text>
        </TouchableOpacity>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f3f5f8",
    paddingTop: 108,
    paddingHorizontal: 16,
  },
  title: {
    fontSize: 28,
    fontWeight: "600",
    color: "#1a1c1e",
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 14,
    color: "#252a34",
    marginBottom: 24,
  },
  languageCard: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#d8dde7",
    borderRadius: 4,
    padding: 16,
    marginBottom: 16,
    justifyContent: "center",
  },
  selectedCard: {
    borderColor: "#009E71",
  },
  languageText: {
    fontSize: 16,
    color: "#2f465e",
  },
  selectButton: {
    marginTop: "auto",
    marginBottom: 16,
    padding: 16,
    borderRadius: 4,
    alignItems: "center",
  },
  selectDisabled: {
    backgroundColor: "#b0b7c5",
  },
  selectEnabled: {
    backgroundColor: "#008000",
  },
  selectButtonText: {
    color: "#fdfdfd",
    fontSize: 14,
    fontWeight: "500",
  },
});

export default LanguageScreen;
