import { FC, useCallback } from "react"
import { TextStyle, View, ViewStyle } from "react-native"
import i18n from "i18next"

import { Icon } from "@/components/Icon"
import { ListItem } from "@/components/ListItem"
import { Screen } from "@/components/Screen"
import { Text } from "@/components/Text"
import { translate } from "@/i18n/translate"
import { AppStackScreenProps } from "@/navigators/navigationTypes"
import { useAppTheme } from "@/theme/context"
import { $styles } from "@/theme/styles"
import type { ThemedStyle } from "@/theme/types"
import { s } from "@/utils/responsive"
import { useHeader } from "@/utils/useHeader"

// Available languages with their native names
const LANGUAGES = [
  { code: "en", name: "English", nativeName: "English" },
  { code: "zh", name: "Chinese", nativeName: "中文" },
  { code: "ja", name: "Japanese", nativeName: "日本語" },
  { code: "ko", name: "Korean", nativeName: "한국어" },
  { code: "es", name: "Spanish", nativeName: "Español" },
  { code: "fr", name: "French", nativeName: "Français" },
  { code: "ar", name: "Arabic", nativeName: "العربية" },
  { code: "hi", name: "Hindi", nativeName: "हिन्दी" },
]

export const LanguageScreen: FC<AppStackScreenProps<"Language">> = function LanguageScreen({
  navigation,
}) {
  const { themed, theme } = useAppTheme()

  const currentLanguage = i18n.language?.split("-")[0] || "en"

  const handleSelectLanguage = useCallback(
    (langCode: string) => {
      if (langCode !== currentLanguage) {
        i18n.changeLanguage(langCode)
      }
      navigation.goBack()
    },
    [currentLanguage, navigation],
  )

  useHeader(
    {
      title: translate("languageScreen:title"),
      leftIcon: "back",
      onLeftPress: () => navigation.goBack(),
    },
    [],
  )

  return (
    <Screen
      preset="scroll"
      safeAreaEdges={["bottom"]}
      contentContainerStyle={[$styles.container, themed($container)]}
    >
      <Text size="xs" style={themed($hint)}>
        {translate("languageScreen:selectHint")}
      </Text>

      <View style={themed($listContainer)}>
        {LANGUAGES.map((lang) => {
          const isSelected = currentLanguage === lang.code
          return (
            <ListItem
              key={lang.code}
              text={lang.nativeName}
              textStyle={isSelected ? themed($selectedText) : undefined}
              RightComponent={
                isSelected ? <Icon icon="check" size={20} color={theme.colors.tint} /> : undefined
              }
              onPress={() => handleSelectLanguage(lang.code)}
              style={themed($listItem)}
            />
          )
        })}
      </View>
    </Screen>
  )
}

const $container: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  paddingTop: spacing.md,
})

const $hint: ThemedStyle<TextStyle> = ({ colors, spacing }) => ({
  color: colors.textDim,
  marginBottom: spacing.md,
})

const $listContainer: ThemedStyle<ViewStyle> = ({ colors }) => ({
  backgroundColor: colors.palette.neutral200,
  borderRadius: s(8),
  overflow: "hidden",
})

const $listItem: ThemedStyle<ViewStyle> = () => ({
  // Item styling handled by ListItem
})

const $selectedText: ThemedStyle<TextStyle> = ({ colors }) => ({
  color: colors.tint,
  fontWeight: "600",
})