/**
 * 注册页 RegisterScreen（响应式适配）
 * 胡萝卜BBS - 用户注册
 * 现代化设计 - 渐变背景 + 动画效果
 * 注册表单在桌面端居中显示，限制最大宽度
 * 支持横屏模式下的布局调整
 */

import React, { useState, useEffect, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  ActivityIndicator,
  Animated,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { colors, spacing, borderRadius, shadows, fontSizes } from '../../theme';
import { authService, resolveAuthApiError } from '../../services/authService';
import { useAuthStore } from '../../stores';
import { RootStackParamList } from '../../navigation/types';
import { useResponsive, useResponsiveValue } from '../../hooks';
import { ResponsiveContainer } from '../../components/common';
import { showPrompt } from '../../services/promptService';

type RegisterNavigationProp = NativeStackNavigationProp<RootStackParamList, 'Auth'>;

export const RegisterScreen: React.FC = () => {
  const navigation = useNavigation<RegisterNavigationProp>();
  const register = useAuthStore((state) => state.register);
  
  // 响应式布局
  const { isWideScreen, isLandscape, isDesktop } = useResponsive();

  const [username, setUsername] = useState('');
  const [nickname, setNickname] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [verificationCode, setVerificationCode] = useState('');
  const [loading, setLoading] = useState(false);
  const [sendingCode, setSendingCode] = useState(false);
  const [countdown, setCountdown] = useState(0);
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const [agreedToTerms, setAgreedToTerms] = useState(true);

  // 动画值
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(50)).current;
  const scaleAnim = useRef(new Animated.Value(0.95)).current;
  const inputFadeAnim = useRef(new Animated.Value(0)).current;

  // 响应式值
  const iconSize = useResponsiveValue({ xs: 48, sm: 52, md: 56, lg: 64, xl: 72 });
  const iconContainerSize = useResponsiveValue({ xs: 80, sm: 88, md: 96, lg: 108, xl: 120 });
  const titleSize = useResponsiveValue({ xs: 24, sm: 26, md: 28, lg: 30, xl: 32 });
  const formMaxWidth = isDesktop ? 520 : isWideScreen ? 480 : undefined;

  // 启动入场动画
  useEffect(() => {
    Animated.sequence([
      Animated.parallel([
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
        Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
      ]),
      Animated.timing(slideAnim, {
        toValue: 0,
        duration: 400,
        useNativeDriver: true,
      }),
      Animated.timing(inputFadeAnim, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start();
  }, []);

  useEffect(() => {
    if (countdown <= 0) {
      return;
    }
    const timer = setInterval(() => {
      setCountdown((prev) => (prev <= 1 ? 0 : prev - 1));
    }, 1000);
    return () => clearInterval(timer);
  }, [countdown]);

  // 表单验证
  const validateForm = (): boolean => {
    if (!username.trim()) {
      showPrompt({ title: '提示', message: '请输入用户名', type: 'warning' });
      return false;
    }
    if (username.length < 3 || username.length > 20) {
      showPrompt({ title: '提示', message: '用户名长度需在3-20个字符之间', type: 'warning' });
      return false;
    }
    if (!/^[a-zA-Z0-9_]+$/.test(username)) {
      showPrompt({ title: '提示', message: '用户名只能包含字母、数字和下划线', type: 'warning' });
      return false;
    }
    if (!nickname.trim()) {
      showPrompt({ title: '提示', message: '请输入昵称', type: 'warning' });
      return false;
    }
    if (nickname.length < 2 || nickname.length > 20) {
      showPrompt({ title: '提示', message: '昵称长度需在2-20个字符之间', type: 'warning' });
      return false;
    }
    if (!email.trim()) {
      showPrompt({ title: '提示', message: '请输入邮箱', type: 'warning' });
      return false;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      showPrompt({ title: '提示', message: '请输入正确的邮箱地址', type: 'warning' });
      return false;
    }
    if (!verificationCode.trim()) {
      showPrompt({ title: '提示', message: '请输入邮箱验证码', type: 'warning' });
      return false;
    }
    // 手机号验证（如果填写了）
    if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
      showPrompt({ title: '提示', message: '请输入正确的手机号', type: 'warning' });
      return false;
    }
    if (!password) {
      showPrompt({ title: '提示', message: '请输入密码', type: 'warning' });
      return false;
    }
    if (password.length < 6) {
      showPrompt({ title: '提示', message: '密码长度不能少于6位', type: 'warning' });
      return false;
    }
    if (password !== confirmPassword) {
      showPrompt({ title: '提示', message: '两次输入的密码不一致', type: 'warning' });
      return false;
    }
    if (!agreedToTerms) {
      showPrompt({ title: '提示', message: '请同意用户协议和隐私政策', type: 'warning' });
      return false;
    }
    return true;
  };

  const handleSendCode = async () => {
    if (!email.trim()) {
      showPrompt({ title: '提示', message: '请先输入邮箱', type: 'warning' });
      return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      showPrompt({ title: '提示', message: '请输入正确的邮箱地址', type: 'warning' });
      return;
    }
    if (countdown > 0) {
      return;
    }

    setSendingCode(true);
    try {
      const ok = await authService.sendRegisterCode(email.trim());
      if (ok) {
        setCountdown(60);
        showPrompt({ title: '发送成功', message: '验证码已发送，请查收邮箱', type: 'success' });
      }
    } catch (error: any) {
      showPrompt({ title: '发送失败', message: resolveAuthApiError(error, '验证码发送失败，请稍后重试'), type: 'error' });
    } finally {
      setSendingCode(false);
    }
  };

  // 处理注册
  const handleRegister = async () => {
    if (!validateForm()) return;
    
    setLoading(true);
    try {
      const success = await register({
        username,
        password,
        nickname,
        email: email.trim(),
        verification_code: verificationCode.trim(),
        phone: phone || undefined,
      });
      if (success) {
        // 注册成功，导航会自动切换到主页
      } else {
        const msg = useAuthStore.getState().error || '注册失败，请稍后重试';
        showPrompt({ title: '注册失败', message: msg, type: 'error' });
      }
    } catch (error: any) {
      showPrompt({ title: '注册失败', message: resolveAuthApiError(error, '请稍后重试'), type: 'error' });
    } finally {
      setLoading(false);
    }
  };

  // 跳转到登录页
  const handleGoToLogin = () => {
    navigation.goBack();
  };

  // 渲染表单内容
  const renderFormContent = () => (
    <>
      {/* 标题区域 */}
      <Animated.View 
        style={[
          styles.headerSection,
          isLandscape && styles.headerSectionLandscape,
          {
            opacity: fadeAnim,
            transform: [{ scale: scaleAnim }],
          },
        ]}
      >
        <View style={[
          styles.iconContainer,
          { width: iconContainerSize, height: iconContainerSize, borderRadius: iconContainerSize / 2 }
        ]}>
          <MaterialCommunityIcons 
            name="account-plus" 
            size={iconSize} 
            color="#FFF" 
          />
        </View>
        <Text style={[styles.title, { fontSize: titleSize }]}>创建账号</Text>
        <Text style={styles.subtitle}>加入胡萝卜，开始你的旅程</Text>
      </Animated.View>

      {/* 表单卡片 */}
      <Animated.View 
        style={[
          styles.formCard,
          formMaxWidth && { maxWidth: formMaxWidth, alignSelf: 'center', width: '100%' },
          {
            opacity: inputFadeAnim,
            transform: [{ translateY: slideAnim }],
          },
        ]}
      >
        {/* 用户名输入框 */}
        <View style={styles.inputContainer}>
          <View style={[
            styles.inputWrapper,
            isWideScreen && styles.inputWrapperWide,
          ]}>
            <MaterialCommunityIcons 
              name="account-outline" 
              size={22} 
              color={colors.primary.main} 
              style={styles.inputIcon}
            />
            <TextInput
              style={[
                styles.input,
                isWideScreen && styles.inputWide,
              ]}
              placeholder="用户名（3-20个字符）"
              placeholderTextColor={colors.text.hint}
              value={username}
              onChangeText={setUsername}
              autoCapitalize="none"
              autoCorrect={false}
              maxLength={20}
            />
            {username.length > 0 && (
              <TouchableOpacity 
                onPress={() => setUsername('')}
                style={styles.clearButton}
              >
                <MaterialCommunityIcons 
                  name="close-circle" 
                  size={20} 
                  color={colors.text.hint} 
                />
              </TouchableOpacity>
            )}
          </View>
        </View>

        {/* 昵称输入框 */}
        <View style={styles.inputContainer}>
          <View style={[
            styles.inputWrapper,
            isWideScreen && styles.inputWrapperWide,
          ]}>
            <MaterialCommunityIcons 
              name="emoticon-outline" 
              size={22} 
              color={colors.primary.main} 
              style={styles.inputIcon}
            />
            <TextInput
              style={[
                styles.input,
                isWideScreen && styles.inputWide,
              ]}
              placeholder="昵称（2-20个字符）"
              placeholderTextColor={colors.text.hint}
              value={nickname}
              onChangeText={setNickname}
              maxLength={20}
            />
            {nickname.length > 0 && (
              <TouchableOpacity 
                onPress={() => setNickname('')}
                style={styles.clearButton}
              >
                <MaterialCommunityIcons 
                  name="close-circle" 
                  size={20} 
                  color={colors.text.hint} 
                />
              </TouchableOpacity>
            )}
          </View>
        </View>

        {/* 邮箱输入框 */}
        <View style={styles.inputContainer}>
          <View style={[
            styles.inputWrapper,
            isWideScreen && styles.inputWrapperWide,
          ]}>
            <MaterialCommunityIcons 
              name="email-outline" 
              size={22} 
              color={colors.primary.main} 
              style={styles.inputIcon}
            />
            <TextInput
              style={[
                styles.input,
                isWideScreen && styles.inputWide,
              ]}
              placeholder="邮箱（必填）"
              placeholderTextColor={colors.text.hint}
              value={email}
              onChangeText={setEmail}
              autoCapitalize="none"
              autoCorrect={false}
              keyboardType="email-address"
            />
            {email.length > 0 && (
              <TouchableOpacity 
                onPress={() => setEmail('')}
                style={styles.clearButton}
              >
                <MaterialCommunityIcons 
                  name="close-circle" 
                  size={20} 
                  color={colors.text.hint} 
                />
              </TouchableOpacity>
            )}
          </View>
        </View>

        {/* 邮箱验证码 */}
        <View style={styles.inputContainer}>
          <View style={styles.codeRow}>
            <View style={[styles.inputWrapper, styles.codeInputWrapper, isWideScreen && styles.inputWrapperWide]}>
              <MaterialCommunityIcons
                name="shield-key-outline"
                size={22}
                color={colors.primary.main}
                style={styles.inputIcon}
              />
              <TextInput
                style={[styles.input, isWideScreen && styles.inputWide]}
                placeholder="邮箱验证码"
                placeholderTextColor={colors.text.hint}
                value={verificationCode}
                onChangeText={setVerificationCode}
                keyboardType="number-pad"
                maxLength={6}
              />
            </View>
            <TouchableOpacity
              style={[
                styles.sendCodeButton,
                (sendingCode || countdown > 0) && styles.sendCodeButtonDisabled,
              ]}
              onPress={handleSendCode}
              disabled={sendingCode || countdown > 0}
              activeOpacity={0.8}
            >
              <Text style={styles.sendCodeButtonText}>
                {sendingCode ? '发送中...' : countdown > 0 ? `${countdown}s` : '发送验证码'}
              </Text>
            </TouchableOpacity>
          </View>
        </View>

        {/* 手机号输入框 */}
        <View style={styles.inputContainer}>
          <View style={[
            styles.inputWrapper,
            isWideScreen && styles.inputWrapperWide,
          ]}>
            <MaterialCommunityIcons 
              name="phone-outline" 
              size={22} 
              color={colors.primary.main} 
              style={styles.inputIcon}
            />
            <TextInput
              style={[
                styles.input,
                isWideScreen && styles.inputWide,
              ]}
              placeholder="手机号（选填）"
              placeholderTextColor={colors.text.hint}
              value={phone}
              onChangeText={setPhone}
              keyboardType="phone-pad"
              maxLength={11}
            />
            {phone.length > 0 && (
              <TouchableOpacity 
                onPress={() => setPhone('')}
                style={styles.clearButton}
              >
                <MaterialCommunityIcons 
                  name="close-circle" 
                  size={20} 
                  color={colors.text.hint} 
                />
              </TouchableOpacity>
            )}
          </View>
        </View>

        {/* 密码输入框 */}
        <View style={styles.inputContainer}>
          <View style={[
            styles.inputWrapper,
            isWideScreen && styles.inputWrapperWide,
          ]}>
            <MaterialCommunityIcons 
              name="lock-outline" 
              size={22} 
              color={colors.primary.main} 
              style={styles.inputIcon}
            />
            <TextInput
              style={[
                styles.input,
                isWideScreen && styles.inputWide,
              ]}
              placeholder="密码（至少6位）"
              placeholderTextColor={colors.text.hint}
              value={password}
              onChangeText={setPassword}
              secureTextEntry={!showPassword}
              autoCapitalize="none"
            />
            <TouchableOpacity 
              onPress={() => setShowPassword(!showPassword)}
              style={styles.clearButton}
            >
              <MaterialCommunityIcons 
                name={showPassword ? 'eye-off-outline' : 'eye-outline'} 
                size={20} 
                color={colors.text.hint} 
              />
            </TouchableOpacity>
          </View>
        </View>

        {/* 确认密码输入框 */}
        <View style={styles.inputContainer}>
          <View style={[
            styles.inputWrapper,
            isWideScreen && styles.inputWrapperWide,
          ]}>
            <MaterialCommunityIcons 
              name="lock-check-outline" 
              size={22} 
              color={colors.primary.main} 
              style={styles.inputIcon}
            />
            <TextInput
              style={[
                styles.input,
                isWideScreen && styles.inputWide,
              ]}
              placeholder="确认密码"
              placeholderTextColor={colors.text.hint}
              value={confirmPassword}
              onChangeText={setConfirmPassword}
              secureTextEntry={!showConfirmPassword}
              autoCapitalize="none"
              returnKeyType="done"
              onSubmitEditing={handleRegister}
            />
            <TouchableOpacity 
              onPress={() => setShowConfirmPassword(!showConfirmPassword)}
              style={styles.clearButton}
            >
              <MaterialCommunityIcons 
                name={showConfirmPassword ? 'eye-off-outline' : 'eye-outline'} 
                size={20} 
                color={colors.text.hint} 
              />
            </TouchableOpacity>
          </View>
        </View>

        {/* 服务条款 */}
        <TouchableOpacity 
          style={styles.termsContainer}
          onPress={() => setAgreedToTerms(!agreedToTerms)}
          activeOpacity={0.8}
        >
          <View style={[styles.checkbox, agreedToTerms && styles.checkboxChecked]}>
            <MaterialCommunityIcons 
              name={agreedToTerms ? "checkbox-marked" : "checkbox-blank-outline"} 
              size={24} 
              color={agreedToTerms ? colors.primary.main : colors.text.hint} 
            />
          </View>
          <Text style={styles.termsText}>
            我已阅读并同意
            <Text style={styles.termsLink}>《用户协议》</Text>
            和
            <Text style={styles.termsLink}>《隐私政策》</Text>
          </Text>
        </TouchableOpacity>

        {/* 注册按钮 */}
        <TouchableOpacity
          style={[styles.registerButton, loading && styles.registerButtonDisabled]}
          onPress={handleRegister}
          disabled={loading}
          activeOpacity={0.8}
        >
          <LinearGradient
            colors={['#FF6B35', '#FF8F66']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
            style={[
              styles.registerButtonGradient,
              isWideScreen && styles.registerButtonGradientWide,
            ]}
          >
            {loading ? (
              <ActivityIndicator size="small" color="#FFF" />
            ) : (
              <Text style={styles.registerButtonText}>注 册</Text>
            )}
          </LinearGradient>
        </TouchableOpacity>
      </Animated.View>

      {/* 底部登录提示 */}
      <Animated.View 
        style={[
          styles.footerSection,
          { opacity: inputFadeAnim },
        ]}
      >
        <Text style={styles.footerText}>已有账号？</Text>
        <TouchableOpacity onPress={handleGoToLogin}>
          <Text style={styles.loginLink}>立即登录</Text>
        </TouchableOpacity>
      </Animated.View>
    </>
  );

  return (
    <SafeAreaView style={styles.container}>
      <LinearGradient
        colors={['#FF6B35', '#FF8F66', '#FFB088']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.gradient}
      >
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={styles.keyboardView}
        >
          {isWideScreen ? (
            <ResponsiveContainer maxWidth={600}>
              <ScrollView
                contentContainerStyle={[
                  styles.scrollContent,
                  isLandscape && styles.scrollContentLandscape,
                ]}
                showsVerticalScrollIndicator={false}
                keyboardShouldPersistTaps="handled"
              >
                {/* 装饰性背景元素 */}
                <View style={styles.decorCircle1} />
                <View style={styles.decorCircle2} />
                
                {renderFormContent()}
              </ScrollView>
            </ResponsiveContainer>
          ) : (
            <ScrollView
              contentContainerStyle={[
                styles.scrollContent,
                isLandscape && styles.scrollContentLandscape,
              ]}
              showsVerticalScrollIndicator={false}
              keyboardShouldPersistTaps="handled"
            >
              {/* 装饰性背景元素 */}
              <View style={styles.decorCircle1} />
              <View style={styles.decorCircle2} />
              
              {renderFormContent()}
            </ScrollView>
          )}
        </KeyboardAvoidingView>
      </LinearGradient>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gradient: {
    flex: 1,
  },
  keyboardView: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
    paddingHorizontal: spacing.xl,
    paddingVertical: spacing.xl,
  },
  scrollContentLandscape: {
    paddingVertical: spacing.md,
  },
  // 装饰性背景元素
  decorCircle1: {
    position: 'absolute',
    top: -80,
    right: -80,
    width: 250,
    height: 250,
    borderRadius: 125,
    backgroundColor: 'rgba(255,255,255,0.1)',
  },
  decorCircle2: {
    position: 'absolute',
    bottom: 150,
    left: -120,
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: 'rgba(255,255,255,0.08)',
  },
  // 头部区域
  headerSection: {
    alignItems: 'center',
    marginTop: spacing.xl,
    marginBottom: spacing.xl,
  },
  headerSectionLandscape: {
    marginTop: spacing.md,
    marginBottom: spacing.md,
  },
  iconContainer: {
    backgroundColor: 'rgba(255,255,255,0.25)',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: spacing.md,
    borderWidth: 2,
    borderColor: 'rgba(255,255,255,0.4)',
    ...shadows.md,
  },
  title: {
    fontWeight: '800',
    color: '#FFFFFF',
    marginBottom: spacing.xs,
    textShadowColor: 'rgba(0,0,0,0.1)',
    textShadowOffset: { width: 0, height: 2 },
    textShadowRadius: 4,
  },
  subtitle: {
    fontSize: fontSizes.md,
    color: 'rgba(255,255,255,0.9)',
  },
  // 表单卡片
  formCard: {
    backgroundColor: colors.background.paper,
    borderRadius: borderRadius['2xl'],
    padding: spacing.xl,
    marginBottom: spacing.lg,
    ...shadows.md,
  },
  inputContainer: {
    marginBottom: spacing.md,
  },
  codeRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
  },
  inputWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.background.default,
    borderRadius: borderRadius.lg,
    borderWidth: 1.5,
    borderColor: colors.divider,
    paddingHorizontal: spacing.md,
    height: 52,
  },
  inputWrapperWide: {
    height: 56,
  },
  codeInputWrapper: {
    flex: 1,
  },
  inputIcon: {
    marginRight: spacing.sm,
  },
  input: {
    flex: 1,
    fontSize: fontSizes.md,
    color: colors.text.primary,
  },
  inputWide: {
    fontSize: fontSizes.lg,
  },
  clearButton: {
    padding: spacing.xs,
  },
  sendCodeButton: {
    height: 52,
    minWidth: 110,
    paddingHorizontal: spacing.md,
    borderRadius: borderRadius.lg,
    backgroundColor: colors.primary.main,
    alignItems: 'center',
    justifyContent: 'center',
  },
  sendCodeButtonDisabled: {
    opacity: 0.6,
  },
  sendCodeButtonText: {
    color: '#fff',
    fontSize: fontSizes.sm,
    fontWeight: '600',
  },
  // 服务条款
  termsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: spacing.lg,
    marginTop: spacing.sm,
  },
  checkbox: {
    marginRight: spacing.sm,
  },
  checkboxChecked: {
    // 选中状态的额外样式
  },
  termsText: {
    fontSize: fontSizes.sm,
    color: colors.text.secondary,
    flex: 1,
    lineHeight: 20,
  },
  termsLink: {
    color: colors.primary.main,
    fontWeight: '500',
  },
  // 注册按钮
  registerButton: {
    borderRadius: borderRadius.lg,
    overflow: 'hidden',
    ...shadows.md,
  },
  registerButtonGradient: {
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
  },
  registerButtonGradientWide: {
    height: 54,
  },
  registerButtonDisabled: {
    opacity: 0.7,
  },
  registerButtonText: {
    fontSize: fontSizes.lg,
    fontWeight: '700',
    color: '#FFFFFF',
  },
  // 底部区域
  footerSection: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 'auto',
    paddingTop: spacing.md,
    paddingBottom: spacing.md,
  },
  footerText: {
    fontSize: fontSizes.md,
    color: 'rgba(255,255,255,0.9)',
  },
  loginLink: {
    fontSize: fontSizes.md,
    color: '#FFFFFF',
    fontWeight: '700',
    marginLeft: spacing.xs,
    textDecorationLine: 'underline',
  },
});

export default RegisterScreen;