import { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ActivityIndicator,
  Platform,
} from 'react-native';
import { Image } from 'expo-image';
import { useRouter } from 'expo-router';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Path } from 'react-native-svg';
import { useTranslation } from 'react-i18next';
import { Ionicons } from '@expo/vector-icons';
import { useAuthStore } from '../../stores/auth';
import { HERO_AVATARS, getAvatarUrl } from '../../lib/avatars';
import { KeyboardAwareScreen } from '../../components/KeyboardAwareScreen';

function GoogleIcon() {
  return (
    <Svg width={20} height={20} viewBox="0 0 24 24">
      <Path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
      <Path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
      <Path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
      <Path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
    </Svg>
  );
}

function AppleIcon() {
  return (
    <Svg width={20} height={20} viewBox="0 0 24 24" fill="#ffffff">
      <Path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
    </Svg>
  );
}

type OAuthProvider = 'google' | 'apple' | null;

const INPUT_STYLE = {
  fontSize: 16,
  lineHeight: 22,
  paddingVertical: 14,
  paddingHorizontal: 16,
  color: '#0a0a0a',
  fontFamily: 'Nunito_400Regular',
} as const;

export default function SignUpScreen() {
  const router = useRouter();
  const { t } = useTranslation();
  const { signUp, signInWithOAuth } = useAuthStore();

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [nickname, setNickname] = useState('');
  const [avatarId, setAvatarId] = useState('spider');
  const [termsAccepted, setTermsAccepted] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [oauthLoading, setOauthLoading] = useState<OAuthProvider>(null);

  const isLoading = submitting || oauthLoading !== null;

  const onOAuth = async (provider: 'google' | 'apple') => {
    setError(null);
    setOauthLoading(provider);
    const res = await signInWithOAuth(provider);
    setOauthLoading(null);
    if (res.error) {
      setError(res.error);
      return;
    }
    router.replace('/(app)');
  };

  const onSubmit = async () => {
    if (!email.trim() || !password || !nickname.trim()) {
      setError(t('auth.fillRequired'));
      return;
    }
    if (password.length < 8) {
      setError(t('auth.passwordMin8'));
      return;
    }
    if (!termsAccepted) {
      setError(t('auth.pleaseAcceptTerms'));
      return;
    }
    setError(null);
    setSubmitting(true);
    const res = await signUp(email.trim(), password, {
      username: nickname.trim(),
      avatarId,
      avatarUrl: getAvatarUrl(avatarId),
    });
    setSubmitting(false);
    if (res.error) {
      setError(res.error);
      return;
    }
    router.push({ pathname: '/confirm-otp', params: { email: email.trim() } });
  };

  return (
    <SafeAreaView className="flex-1 bg-white">
      <KeyboardAwareScreen
        scrollable
        contentContainerStyle={{ flexGrow: 1, paddingBottom: 32, paddingHorizontal: 24, paddingTop: 32 }}
      >
          <Text className="text-3xl text-neutral-900 mb-1" style={{ fontFamily: 'Nunito_700Bold' }}>{t('auth.signupTitle')}</Text>
          <Text className="text-base text-neutral-500 mb-8" style={{ fontFamily: 'Nunito_400Regular' }}>
            {t('auth.signupSubtitle')}
          </Text>

          {/* OAuth Buttons */}
          <TouchableOpacity
            onPress={() => onOAuth('google')}
            disabled={isLoading}
            activeOpacity={0.8}
            className="flex-row items-center justify-center gap-3 bg-white border border-neutral-200 rounded-xl mb-3 disabled:opacity-40"
            style={{ paddingVertical: 14 }}
          >
            {oauthLoading === 'google' ? (
              <ActivityIndicator color="#0a0a0a" size="small" />
            ) : (
              <GoogleIcon />
            )}
            <Text className="text-neutral-900 text-base" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.googleSignup')}</Text>
          </TouchableOpacity>

          {Platform.OS === 'ios' ? (
            <TouchableOpacity
              onPress={() => onOAuth('apple')}
              disabled={isLoading}
              activeOpacity={0.8}
              className="flex-row items-center justify-center gap-3 bg-neutral-900 rounded-xl mb-6 disabled:opacity-40"
              style={{ paddingVertical: 14 }}
            >
              {oauthLoading === 'apple' ? (
                <ActivityIndicator color="white" size="small" />
              ) : (
                <AppleIcon />
              )}
              <Text className="text-white text-base" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.appleSignup')}</Text>
            </TouchableOpacity>
          ) : null}

          {/* Divider */}
          <View className="flex-row items-center mb-6">
            <View className="flex-1 h-px bg-neutral-200" />
            <Text className="text-neutral-400 text-xs mx-3" style={{ fontFamily: 'Nunito_400Regular' }}>{t('auth.orWithEmail')}</Text>
            <View className="flex-1 h-px bg-neutral-200" />
          </View>

          {error && (
            <View className="bg-red-50 border border-red-200 rounded-xl px-4 py-3 mb-4">
              <Text className="text-red-600 text-sm" style={{ fontFamily: 'Nunito_400Regular' }}>{error}</Text>
            </View>
          )}

          <TextInput
            className="bg-neutral-100 rounded-xl mb-3"
            style={INPUT_STYLE}
            placeholder={t('auth.emailRequired')}
            placeholderTextColor="#a3a3a3"
            autoCapitalize="none"
            autoComplete="email"
            keyboardType="email-address"
            value={email}
            onChangeText={setEmail}
          />

          <TextInput
            className="bg-neutral-100 rounded-xl mb-3"
            style={INPUT_STYLE}
            placeholder={t('auth.passwordRequired')}
            placeholderTextColor="#a3a3a3"
            secureTextEntry
            autoComplete="new-password"
            value={password}
            onChangeText={setPassword}
          />

          <TextInput
            className="bg-neutral-100 rounded-xl mb-6"
            style={INPUT_STYLE}
            placeholder={t('auth.nicknamePlaceholder')}
            placeholderTextColor="#a3a3a3"
            autoCapitalize="none"
            autoComplete="username"
            value={nickname}
            onChangeText={setNickname}
          />

          {/* Avatar Picker */}
          <Text className="text-sm text-neutral-700 mb-3" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.chooseAvatar')}</Text>
          <View className="flex-row flex-wrap gap-3 mb-6">
            {HERO_AVATARS.map((avatar) => {
              const selected = avatar.id === avatarId;
              return (
                <TouchableOpacity
                  key={avatar.id}
                  onPress={() => setAvatarId(avatar.id)}
                  disabled={isLoading}
                  activeOpacity={0.7}
                  className={`rounded-full ${selected ? 'opacity-100' : 'opacity-40'}`}
                >
                  <Image
                    source={{ uri: avatar.url }}
                    className={`w-14 h-14 rounded-full border-2 ${selected ? avatar.color : 'border-transparent'}`}
                    style={{ width: 56, height: 56, borderRadius: 28 }}
                  />
                </TouchableOpacity>
              );
            })}
          </View>

          {/* Privacy notice */}
          <View className="flex-row items-start gap-3 bg-neutral-50 border border-neutral-200 rounded-xl p-4 mb-4">
            <View
              style={{
                width: 32,
                height: 32,
                backgroundColor: '#22c55e',
                borderRadius: 8,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Ionicons name="shield-checkmark" size={18} color="#ffffff" />
            </View>
            <Text className="flex-1 text-xs text-neutral-500 leading-5" style={{ fontFamily: 'Nunito_400Regular', marginTop: 6 }}>
              {t('auth.privacyNotice')}
            </Text>
          </View>

          {/* Terms Checkbox */}
          <TouchableOpacity
            onPress={() => setTermsAccepted(!termsAccepted)}
            disabled={isLoading}
            activeOpacity={0.7}
            className="flex-row items-start gap-3 mb-6"
          >
            <View
              className={`w-5 h-5 rounded border-2 mt-0.5 items-center justify-center ${
                termsAccepted ? 'bg-rebreak-500 border-rebreak-500' : 'border-neutral-300'
              }`}
            >
              {termsAccepted && (
                <Text className="text-white text-xs" style={{ fontFamily: 'Nunito_700Bold' }}>✓</Text>
              )}
            </View>
            <Text className="flex-1 text-sm text-neutral-500 leading-5" style={{ fontFamily: 'Nunito_400Regular' }}>
              {t('auth.acceptTerms')}{' '}
              <Text className="text-rebreak-500" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.termsLink')}</Text>
              {t('auth.acceptTermsSuffix')}
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={onSubmit}
            disabled={isLoading || !email || !password || !nickname || !termsAccepted}
            activeOpacity={0.8}
            className="bg-rebreak-500 rounded-xl items-center disabled:opacity-40"
            style={{ paddingVertical: 16 }}
          >
            {submitting ? (
              <ActivityIndicator color="white" size="small" />
            ) : (
              <Text className="text-white text-base" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.signupTitle')}</Text>
            )}
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => router.push('/signin')}
            activeOpacity={0.7}
            className="py-4 items-center mt-2"
          >
            <Text className="text-neutral-500 text-sm" style={{ fontFamily: 'Nunito_400Regular' }}>
              {t('auth.alreadyRegistered')}{' '}
              <Text className="text-rebreak-500" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.signin')}</Text>
            </Text>
          </TouchableOpacity>
      </KeyboardAwareScreen>
    </SafeAreaView>
  );
}