/**
 * Pantalla de Configuración.
 * Incluye: Configuración de usuario (idioma) y acceso a Configuración de fotos.
 */
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import React, { useCallback, useEffect, useState } from 'react';
import {
  Alert,
  ScrollView,
  StyleSheet,
  Switch,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../navigation/types';
import { COLORS, PrimaryButton, SectionTitle } from '../ui/components';
import { useSession } from '../auth/session';

type Nav = NativeStackNavigationProp<RootStackParamList>;

export function SettingsScreen({ navigation }: NativeStackScreenProps<RootStackParamList, 'Settings'>) {
  const { user } = useSession();
  const [language, setLanguage] = useState<string>('en');

  useEffect(() => {
    // Cargar idioma guardado (en un futuro usar AsyncStorage)
    // Por ahora, por defecto inglés
    setLanguage('en');
  }, []);

  const handleLanguageChange = (lang: string) => {
    setLanguage(lang);
    // TODO: Guardar en AsyncStorage y aplicar cambio de idioma
    Alert.alert('Idioma', `Idioma cambiado a ${lang === 'en' ? 'Inglés' : 'Español'}. Reinicia la app para aplicar.`);
  };

  return (
    <ScrollView contentContainerStyle={styles.body}>
      <SectionTitle>Configuración de usuario</SectionTitle>

      <View style={styles.card}>
        <View style={styles.row}>
          <Text style={styles.label}>Idioma de la app</Text>
        </View>
        <View style={styles.languageSelector}>
          <TouchableOpacity
            style={[styles.langBtn, language === 'en' && styles.langBtnActive]}
            onPress={() => handleLanguageChange('en')}
          >
            <Text style={[styles.langBtnText, language === 'en' && styles.langBtnTextActive]}>English</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.langBtn, language === 'es' && styles.langBtnActive]}
            onPress={() => handleLanguageChange('es')}
          >
            <Text style={[styles.langBtnText, language === 'es' && styles.langBtnTextActive]}>Español</Text>
          </TouchableOpacity>
        </View>
        <Text style={styles.hint}>Por defecto: English</Text>
      </View>

      <View style={styles.divider} />

      <SectionTitle>Configuración de fotos</SectionTitle>

      <View style={styles.card}>
        <TouchableOpacity
          style={styles.settingsRow}
          onPress={() => navigation.navigate('PhotoSettings')}
        >
          <View style={styles.settingsRowContent}>
            <Text style={styles.settingsIcon}>📷</Text>
            <Text style={styles.settingsLabel}>Configuración del pie de página</Text>
          </View>
          <Text style={styles.chevron}>›</Text>
        </TouchableOpacity>
        <Text style={styles.hint}>Personaliza logo, campos (proyecto, fecha, coordenadas) y campos personalizados</Text>
      </View>

      <View style={styles.divider} />

      <SectionTitle>Cuenta</SectionTitle>

      <View style={styles.card}>
        <View style={styles.accountRow}>
          <Text style={styles.accountLabel}>Usuario actual</Text>
          <Text style={styles.accountValue}>{user?.name ?? 'Desconocido'}</Text>
        </View>
        <View style={styles.accountRow}>
          <Text style={styles.accountLabel}>Email</Text>
          <Text style={styles.accountValue}>{user?.email ?? ''}</Text>
        </View>
      </View>

      <View style={styles.divider} />

      <SectionTitle>Acerca de</SectionTitle>

      <View style={styles.card}>
        <View style={styles.accountRow}>
          <Text style={styles.accountLabel}>Versión</Text>
          <Text style={styles.accountValue}>1.0.0</Text>
        </View>
        <View style={styles.accountRow}>
          <Text style={styles.accountLabel}>Build</Text>
          <Text style={styles.accountValue}>Avante Móvil</Text>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  body: { padding: 16, gap: 16 },
  card: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 16,
    borderWidth: 1,
    borderColor: COLORS.border,
  },
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  label: { fontSize: 15, fontWeight: '600', color: '#111' },
  hint: { fontSize: 12, color: COLORS.muted, marginTop: 4 },
  languageSelector: {
    flexDirection: 'row',
    gap: 8,
    marginTop: 8,
  },
  langBtn: {
    flex: 1,
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: COLORS.border,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  langBtnActive: {
    backgroundColor: COLORS.primary,
    borderColor: COLORS.primary,
  },
  langBtnText: { fontSize: 14, color: COLORS.muted },
  langBtnTextActive: { color: '#fff', fontWeight: '600' },
  divider: { height: 1, backgroundColor: COLORS.border, marginVertical: 8 },
  settingsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 4,
  },
  settingsRowContent: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  settingsIcon: { fontSize: 20 },
  settingsLabel: { fontSize: 15, fontWeight: '500', color: '#111' },
  chevron: { fontSize: 20, color: COLORS.muted },
  accountRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: COLORS.border,
  },
  accountLabel: { fontSize: 14, color: COLORS.muted },
  accountValue: { fontSize: 14, fontWeight: '600', color: '#111', textAlign: 'right', flex: 1, marginLeft: 16 },
});