import { router } from "expo-router";
import { useTranslation } from "react-i18next";
import { Pressable, View } from "react-native";
import { Button } from "@/components/ui/Button";
import { AppHeader } from "@/components/ui/Header";
import { Screen } from "@/components/ui/Screen";
import { Text } from "@/components/ui/Text";
import { routes } from "@/lib/routes";
import { useLangStore, type Language } from "@/lib/stores/langStore";
import { colors, gutter } from "@/lib/theme";

const OPTIONS: { code: Language; label: string; hint: string }[] = [
  { code: "en", label: "English", hint: "Continue in English" },
  { code: "am", label: "አማርኛ", hint: "በአማርኛ ይቀጥሉ" },
];

export default function LanguageScreen() {
  const { t } = useTranslation();
  const language = useLangStore((s) => s.language);
  const setLanguage = useLangStore((s) => s.setLanguage);

  return (
    <Screen>
      <AppHeader title={t("common.language")} subtitle="Choose your preferred language" />
      <View style={{ flex: 1, paddingHorizontal: gutter, paddingTop: 8 }}>
        <View style={{ gap: 12 }}>
          {OPTIONS.map((opt) => {
            const selected = language === opt.code;
            return (
              <Pressable
                key={opt.code}
                onPress={() => setLanguage(opt.code)}
                style={{
                  padding: 18,
                  borderRadius: 20,
                  backgroundColor: colors.surface,
                  borderWidth: selected ? 2 : 1,
                  borderColor: selected ? colors.brand : colors.line,
                }}
              >
                <Text variant="h3">{opt.label}</Text>
                <Text variant="caption" color={colors.muted} style={{ marginTop: 4 }}>
                  {opt.hint}
                </Text>
              </Pressable>
            );
          })}
        </View>
        <View style={{ flex: 1 }} />
        <Button
          title={t("common.continue")}
          onPress={() => router.push(routes.signIn as never)}
          style={{ marginBottom: 16 }}
        />
      </View>
    </Screen>
  );
}