import {
  Alert,
  Animated,
  Modal,
  Platform,
  Pressable,
  ScrollView,
  Text,
  View,
} from 'react-native';
import { useEffect, useRef, useState } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { colors } from '../lib/theme';
import { useAuthStore } from '../stores/auth';
import { useThemeStore, type ThemeMode } from '../stores/theme';
import { useLanguageStore, type AppLanguage } from '../stores/language';
import { useUserPlan } from '../hooks/useUserPlan';
import { AppHeader } from '../components/AppHeader';

// ─── Picker Sheet ──────────────────────────────────────────────────────────

type PickerOption<T extends string> = { value: T; label: string };

function PickerSheet<T extends string>({
  visible,
  title,
  options,
  selected,
  onSelect,
  onClose,
}: {
  visible: boolean;
  title: string;
  options: PickerOption<T>[];
  selected: T;
  onSelect: (v: T) => void;
  onClose: () => void;
}) {
  const translateY = useRef(new Animated.Value(300)).current;

  useEffect(() => {
    if (visible) {
      Animated.spring(translateY, {
        toValue: 0,
        useNativeDriver: true,
        damping: 22,
        stiffness: 280,
      }).start();
    } else {
      Animated.timing(translateY, {
        toValue: 300,
        duration: 180,
        useNativeDriver: true,
      }).start();
    }
  }, [visible]);

  return (
    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
      <Pressable
        onPress={onClose}
        style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.3)', justifyContent: 'flex-end' }}
      >
        <Animated.View
          onStartShouldSetResponder={() => true}
          style={{
            backgroundColor: '#fff',
            borderTopLeftRadius: 22,
            borderTopRightRadius: 22,
            paddingBottom: 34,
            transform: [{ translateY }],
          }}
        >
          <View
            style={{
              width: 36,
              height: 4,
              borderRadius: 2,
              backgroundColor: '#e5e5e5',
              alignSelf: 'center',
              marginTop: 10,
              marginBottom: 14,
            }}
          />
          <Text
            style={{
              fontSize: 15,
              fontFamily: 'Nunito_700Bold',
              color: '#0a0a0a',
              textAlign: 'center',
              marginBottom: 12,
            }}
          >
            {title}
          </Text>
          {options.map((opt) => (
            <Pressable
              key={opt.value}
              onPress={() => {
                onSelect(opt.value);
                onClose();
              }}
              style={({ pressed }) => ({
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'space-between',
                paddingHorizontal: 20,
                paddingVertical: 14,
                backgroundColor: pressed ? '#f5f5f5' : 'transparent',
              })}
            >
              <Text
                style={{
                  fontSize: 15,
                  fontFamily: opt.value === selected ? 'Nunito_700Bold' : 'Nunito_400Regular',
                  color: opt.value === selected ? colors.brandOrange : '#0a0a0a',
                }}
              >
                {opt.label}
              </Text>
              {opt.value === selected && (
                <Ionicons name="checkmark" size={18} color={colors.brandOrange} />
              )}
            </Pressable>
          ))}
        </Animated.View>
      </Pressable>
    </Modal>
  );
}

// ─── Settings Screen ───────────────────────────────────────────────────────

type SectionRow = {
  icon: React.ComponentProps<typeof Ionicons>['name'];
  iconColor: string;
  label: string;
  sublabel: string;
  soon?: boolean;
  destructive?: boolean;
  value?: string;
  onPress?: () => void;
};

type Section = {
  key: string;
  title: string;
  rows: SectionRow[];
};

export default function SettingsScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const { t } = useTranslation();
  const { signOut } = useAuthStore();
  const { mode: themeMode, setMode: setThemeMode } = useThemeStore();
  const { language, setLanguage } = useLanguageStore();
  const { plan } = useUserPlan();

  const [themePickerOpen, setThemePickerOpen] = useState(false);
  const [langPickerOpen, setLangPickerOpen] = useState(false);
  const [voicePickerOpen, setVoicePickerOpen] = useState(false);

  // Lyra Voice: hardcoded ElevenLabs voice IDs (expandable by user later)
  // Backend endpoint PATCH /api/profile/me/demographics does NOT accept lyraVoiceId.
  // A dedicated PATCH /api/profile/me/lyra-voice endpoint is needed from backend-agent.
  // For now: picker is wired to local state only, changes are NOT persisted.
  const [selectedVoice, setSelectedVoice] = useState('EXAVITQu4vr4xnSDxMaL');

  async function handleSignOut() {
    Alert.alert(t('auth.signOut'), '', [
      { text: t('common.cancel'), style: 'cancel' },
      {
        text: t('auth.signOut'),
        style: 'cancel',
        onPress: async () => {
          await signOut();
          router.replace('/');
        },
      },
    ]);
  }

  const themeOptions: PickerOption<ThemeMode>[] = [
    { value: 'system', label: t('settings.theme_system') },
    { value: 'light', label: t('settings.theme_light') },
    { value: 'dark', label: t('settings.theme_dark') },
  ];

  const themeLabel =
    themeMode === 'system'
      ? t('settings.theme_system')
      : themeMode === 'light'
        ? t('settings.theme_light')
        : t('settings.theme_dark');

  const langOptions: PickerOption<AppLanguage>[] = [
    { value: 'de', label: t('settings.language_de') },
    { value: 'en', label: t('settings.language_en') },
  ];

  const voiceOptions: PickerOption<string>[] = [
    { value: 'EXAVITQu4vr4xnSDxMaL', label: t('settings.lyra_voice_sarah') },
    { value: 'ThT5KcBeYPX3keUQqHPh', label: t('settings.lyra_voice_aria') },
    { value: 'XB0fDUnXU5powFXDhCwa', label: t('settings.lyra_voice_charlotte') },
    { value: 'Xb7hH8MSUJpSbSDYk0k2', label: t('settings.lyra_voice_alice') },
    { value: 'pqHfZKP75CvOlQylNhV4', label: t('settings.lyra_voice_bill') },
  ];

  const selectedVoiceName =
    voiceOptions.find((v) => v.value === selectedVoice)?.label ?? t('settings.lyra_voice_sarah');

  const sections: Section[] = [
    {
      key: 'profile',
      title: t('settings.section_profile'),
      rows: [
        {
          icon: 'person-outline',
          iconColor: '#6366f1',
          label: t('settings.profile_edit'),
          sublabel: t('settings.profile_edit_desc'),
          soon: true,
        },
        {
          icon: 'image-outline',
          iconColor: '#6366f1',
          label: t('settings.profile_avatar'),
          sublabel: t('settings.profile_avatar_desc'),
          soon: true,
        },
      ],
    },
    {
      key: 'theme',
      title: t('settings.section_theme'),
      rows: [
        {
          icon: 'color-palette-outline',
          iconColor: '#a78bfa',
          label: t('settings.theme'),
          sublabel: t('settings.theme_desc'),
          value: themeLabel,
          onPress: () => setThemePickerOpen(true),
        },
        {
          icon: 'language-outline',
          iconColor: '#a78bfa',
          label: t('settings.language'),
          sublabel: t('settings.language_desc'),
          value: language === 'de' ? t('settings.language_de') : t('settings.language_en'),
          onPress: () => setLangPickerOpen(true),
        },
      ],
    },
    {
      key: 'notifications',
      title: t('settings.section_notifications'),
      rows: [
        {
          icon: 'notifications-outline',
          iconColor: '#2563eb',
          label: t('settings.notifications_push'),
          sublabel: t('settings.notifications_push_desc'),
          soon: true,
        },
        {
          icon: 'flame-outline',
          iconColor: '#f97316',
          label: t('settings.notifications_streak'),
          sublabel: t('settings.notifications_streak_desc'),
          soon: true,
        },
      ],
    },
    {
      key: 'devices',
      title: t('settings.section_devices'),
      rows: [
        {
          icon: 'phone-portrait-outline',
          iconColor: '#16a34a',
          label: t('settings.devices'),
          sublabel: t('settings.devices_desc'),
          soon: true,
        },
        {
          icon: 'star-outline',
          iconColor: colors.brandOrange,
          label: t('settings.subscription'),
          sublabel: t('settings.subscription_desc'),
          soon: true,
        },
      ],
    },
    {
      key: 'lyra',
      title: t('settings.section_lyra'),
      rows: [
        {
          icon: 'mic-outline',
          iconColor: '#ec4899',
          label: t('settings.lyra_voice'),
          sublabel:
            plan === 'legend'
              ? t('settings.lyra_voice_desc')
              : t('settings.lyra_voice_only_legend'),
          value: plan === 'legend' ? selectedVoiceName : undefined,
          // Voice picker is wired but changes are local-only until
          // PATCH /api/profile/me/lyra-voice endpoint is added by backend-agent.
          onPress: plan === 'legend' ? () => setVoicePickerOpen(true) : undefined,
          soon: plan !== 'legend',
        },
      ],
    },
    {
      key: 'account',
      title: t('settings.danger_section'),
      rows: [
        {
          icon: 'log-out-outline',
          iconColor: colors.textMuted,
          label: t('settings.sign_out'),
          sublabel: '',
          onPress: handleSignOut,
        },
        {
          icon: 'trash-outline',
          iconColor: colors.error,
          label: t('settings.delete_account'),
          sublabel: t('settings.delete_desc'),
          destructive: true,
          soon: true,
        },
      ],
    },
  ];

  if (__DEV__) {
    sections.push({
      key: 'debug',
      title: t('settings.section_debug'),
      rows: [
        {
          icon: 'bug-outline',
          iconColor: '#737373',
          label: t('settings.debug_llm'),
          sublabel: t('settings.debug_llm_desc'),
          soon: true,
        },
        {
          icon: 'volume-high-outline',
          iconColor: '#737373',
          label: t('settings.debug_tts'),
          sublabel: t('settings.debug_tts_desc'),
          soon: true,
        },
      ],
    });
  }

  return (
    <View style={{ flex: 1, backgroundColor: colors.bg }}>
      <AppHeader showBack title={t('settings.title')} />

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{
          paddingHorizontal: 16,
          paddingTop: 16,
          paddingBottom: insets.bottom + 40,
        }}
        showsVerticalScrollIndicator={false}
      >
        {sections.map((section) => (
          <View key={section.key} style={{ marginBottom: 24 }}>
            <Text
              style={{
                fontSize: 11,
                color: '#a3a3a3',
                fontFamily: 'Nunito_600SemiBold',
                textTransform: 'uppercase',
                letterSpacing: 1,
                marginBottom: 8,
                marginLeft: 4,
              }}
            >
              {section.title}
            </Text>
            <View
              style={{
                backgroundColor: colors.surface,
                borderRadius: 14,
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0.05)',
                overflow: 'hidden',
              }}
            >
              {section.rows.map((row, i) => (
                <Pressable
                  key={row.label}
                  onPress={row.soon ? undefined : row.onPress}
                  disabled={row.soon}
                  style={({ pressed }) => ({
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 12,
                    paddingHorizontal: 14,
                    minHeight: 56,
                    borderBottomWidth: i < section.rows.length - 1 ? 1 : 0,
                    borderBottomColor: 'rgba(0,0,0,0.04)',
                    opacity: row.soon ? 0.5 : pressed ? 0.7 : 1,
                    backgroundColor: pressed && !row.soon ? '#f5f5f5' : 'transparent',
                  })}
                >
                  <View
                    style={{
                      width: 36,
                      height: 36,
                      borderRadius: 10,
                      backgroundColor: row.iconColor + '18',
                      alignItems: 'center',
                      justifyContent: 'center',
                      flexShrink: 0,
                    }}
                  >
                    <Ionicons
                      name={row.icon}
                      size={18}
                      color={row.destructive ? colors.error : row.iconColor}
                    />
                  </View>
                  <View style={{ flex: 1 }}>
                    <Text
                      style={{
                        fontSize: 15,
                        color: row.destructive ? colors.error : colors.text,
                        fontFamily: 'Nunito_600SemiBold',
                      }}
                    >
                      {row.label}
                    </Text>
                    {row.sublabel ? (
                      <Text
                        style={{
                          fontSize: 12,
                          color: colors.textMuted,
                          fontFamily: 'Nunito_400Regular',
                          marginTop: 2,
                        }}
                      >
                        {row.sublabel}
                      </Text>
                    ) : null}
                  </View>
                  {row.soon ? (
                    <Text
                      style={{
                        fontSize: 10,
                        color: '#a3a3a3',
                        fontFamily: 'Nunito_600SemiBold',
                        textTransform: 'uppercase',
                        letterSpacing: 0.5,
                        flexShrink: 0,
                      }}
                    >
                      {t('settings.soon_badge')}
                    </Text>
                  ) : row.value ? (
                    <Text
                      style={{
                        fontSize: 13,
                        color: colors.textMuted,
                        fontFamily: 'Nunito_400Regular',
                        flexShrink: 0,
                        marginLeft: 4,
                      }}
                      numberOfLines={1}
                    >
                      {row.value}
                    </Text>
                  ) : (
                    <Ionicons
                      name="chevron-forward"
                      size={16}
                      color="#d4d4d8"
                      style={{ flexShrink: 0 }}
                    />
                  )}
                </Pressable>
              ))}
            </View>
          </View>
        ))}

        <Text
          style={{
            textAlign: 'center',
            fontSize: 11,
            color: '#a3a3a3',
            fontFamily: 'Nunito_400Regular',
            marginTop: 6,
            opacity: 0.7,
          }}
        >
          {t('settings.skeleton_footer')}
        </Text>
        <Text
          style={{
            textAlign: 'center',
            fontSize: 10,
            color: '#a3a3a3',
            fontFamily: 'Nunito_400Regular',
            marginTop: 4,
            opacity: 0.5,
          }}
        >
          {Platform.OS}
        </Text>
      </ScrollView>

      <PickerSheet
        visible={themePickerOpen}
        title={t('settings.theme_picker_title')}
        options={themeOptions}
        selected={themeMode}
        onSelect={setThemeMode}
        onClose={() => setThemePickerOpen(false)}
      />

      <PickerSheet
        visible={langPickerOpen}
        title={t('settings.language_picker_title')}
        options={langOptions}
        selected={language}
        onSelect={setLanguage}
        onClose={() => setLangPickerOpen(false)}
      />

      <PickerSheet
        visible={voicePickerOpen}
        title={t('settings.lyra_voice_picker_title')}
        options={voiceOptions}
        selected={selectedVoice}
        onSelect={setSelectedVoice}
        onClose={() => setVoicePickerOpen(false)}
      />
    </View>
  );
}