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";

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

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

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

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

  return (
    <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,
        ]}
        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,
    paddingBottom: 80,
  },
  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: "#008000",
  },
  languageText: {
    fontSize: 16,
    color: "#2f465e",
  },
  selectButton: {
    marginTop: "auto",
    padding: 16,
    borderRadius: 4,
    alignItems: "center",
  },
  selectDisabled: {
    backgroundColor: "#b0b7c5",
  },
  selectEnabled: {
    backgroundColor: "#008000",
  },
  selectButtonText: {
    color: "#fdfdfd",
    fontSize: 14,
    fontWeight: "500",
  },
});

export default LanguageScreen;