import React, { useEffect, useState, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TouchableOpacity,
  ActivityIndicator,
} from 'react-native';
import { router, useLocalSearchParams } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useAuth } from '@/contexts/AuthContext';
import { Button } from '@/components/ui/Button';
import { ErrorMessage } from '@/components/ui/ErrorMessage';
import { AppColors, FontSizes, Spacing } from '@/constants/theme';

export default function WelcomeBackScreen() {
  const { requestOtp, isLoading, error, clearError } = useAuth();
  const params = useLocalSearchParams<{ email: string; name: string }>();

  const email = params.email || '';
  const name = params.name || '';

  const [codeSent, setCodeSent] = useState(false);
  const [sendingOtp, setSendingOtp] = useState(false);
  const hasSentOtp = useRef(false);

  // Clear errors on mount
  useEffect(() => {
    clearError();
  }, []);

  // Auto-send OTP on mount
  useEffect(() => {
    if (!email || hasSentOtp.current) return;

    const sendOtp = async () => {
      hasSentOtp.current = true;
      setSendingOtp(true);
      console.log('[WelcomeBack] Auto-sending OTP to:', email);

      const result = await requestOtp(email);
      console.log('[WelcomeBack] Result:', JSON.stringify(result));

      setSendingOtp(false);
      if (result.success) {
        setCodeSent(true);
      }
    };

    sendOtp();
  }, [email]);

  const handleContinue = async () => {
    clearError();

    if (!email) {
      router.replace('/(auth)/login');
      return;
    }

    // If code wasn't sent, try sending first
    if (!codeSent) {
      setSendingOtp(true);
      const result = await requestOtp(email);
      setSendingOtp(false);

      if (!result.success) return;
      setCodeSent(true);
    }

    // Navigate to OTP verification
    console.log('[WelcomeBack] -> verify-otp');
    router.push({
      pathname: '/(auth)/verify-otp',
      params: { email, isNewUser: '0' }
    });
  };

  const handleBack = () => {
    router.replace('/(auth)/login');
  };

  const displayName = name || email.split('@')[0];

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContent}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={false}
      >
        <TouchableOpacity style={styles.backButton} onPress={handleBack}>
          <Ionicons name="arrow-back" size={24} color={AppColors.textPrimary} />
        </TouchableOpacity>

        <View style={styles.iconContainer}>
          <View style={styles.iconCircle}>
            <Ionicons name="hand-right" size={48} color={AppColors.primary} />
          </View>
        </View>

        <View style={styles.header}>
          <Text style={styles.title}>
            Welcome back{displayName ? `, ${displayName}` : ''}!
          </Text>
          {sendingOtp ? (
            <View style={styles.sendingContainer}>
              <ActivityIndicator size="small" color={AppColors.primary} />
              <Text style={styles.sendingText}>Sending verification code...</Text>
            </View>
          ) : codeSent ? (
            <Text style={styles.subtitle}>We've sent a verification code to</Text>
          ) : (
            <Text style={styles.subtitle}>We'll send a verification code to</Text>
          )}
          <Text style={styles.email}>{email}</Text>
        </View>

        {error && (
          <ErrorMessage message={error.message} onDismiss={clearError} />
        )}

        <View style={styles.buttonContainer}>
          <Button
            title={codeSent ? 'Continue to Verify' : 'Send Code & Continue'}
            onPress={handleContinue}
            loading={isLoading || sendingOtp}
            fullWidth
            size="lg"
          />
        </View>

        <TouchableOpacity style={styles.notYouLink} onPress={handleBack}>
          <Text style={styles.notYouText}>Not you? </Text>
          <Text style={styles.notYouLinkText}>Use another email</Text>
        </TouchableOpacity>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: AppColors.background,
  },
  scrollContent: {
    flexGrow: 1,
    paddingHorizontal: Spacing.lg,
    paddingTop: Spacing.xl,
    paddingBottom: Spacing.xl,
  },
  backButton: {
    width: 44,
    height: 44,
    justifyContent: 'center',
    alignItems: 'flex-start',
    marginBottom: Spacing.xl,
  },
  iconContainer: {
    alignItems: 'center',
    marginBottom: Spacing.xl,
  },
  iconCircle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: `${AppColors.primary}15`,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    alignItems: 'center',
    marginBottom: Spacing.xl,
  },
  title: {
    fontSize: FontSizes['2xl'],
    fontWeight: '700',
    color: AppColors.textPrimary,
    marginBottom: Spacing.md,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
    textAlign: 'center',
  },
  sendingContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: Spacing.sm,
  },
  sendingText: {
    fontSize: FontSizes.base,
    color: AppColors.primary,
  },
  email: {
    fontSize: FontSizes.base,
    fontWeight: '600',
    color: AppColors.textPrimary,
    marginTop: Spacing.xs,
  },
  buttonContainer: {
    marginTop: Spacing.lg,
  },
  notYouLink: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: Spacing.lg,
    marginTop: Spacing.md,
  },
  notYouText: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
  },
  notYouLinkText: {
    fontSize: FontSizes.base,
    color: AppColors.primary,
    fontWeight: '500',
  },
});