import React, { useState, useEffect, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TouchableOpacity,
  Modal,
  TextInput,
  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, BorderRadius, FontSizes, Spacing } from '@/constants/theme';

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

  const email = params.email || '';

  // Invite code state
  const [inviteCode, setInviteCode] = useState('');
  const [inviteModalVisible, setInviteModalVisible] = useState(false);
  const [tempInviteCode, setTempInviteCode] = useState('');

  // OTP sending state
  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('[VerifyEmail] Auto-sending OTP to:', email);

      const result = await requestOtp(email);
      console.log('[VerifyEmail] 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 for new user
    console.log('[VerifyEmail] -> verify-otp');
    router.push({
      pathname: '/(auth)/verify-otp',
      params: { email, isNewUser: '1', inviteCode }
    });
  };

  const handleBack = () => {
    router.back();
  };

  const handleInviteCodeSubmit = () => {
    setInviteCode(tempInviteCode);
    setInviteModalVisible(false);
  };

  const openInviteModal = () => {
    setTempInviteCode(inviteCode);
    setInviteModalVisible(true);
  };

  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="mail" size={48} color={AppColors.primary} />
          </View>
        </View>

        <View style={styles.header}>
          <Text style={styles.title}>Let's get started!</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>

        {/* Invite Code */}
        {inviteCode ? (
          <TouchableOpacity style={styles.inviteBadge} onPress={openInviteModal}>
            <Ionicons name="gift" size={16} color={AppColors.success} />
            <Text style={styles.inviteBadgeText}>Invite code: {inviteCode}</Text>
            <Ionicons name="pencil" size={14} color={AppColors.success} />
          </TouchableOpacity>
        ) : (
          <TouchableOpacity style={styles.inviteLink} onPress={openInviteModal}>
            <Text style={styles.inviteLinkText}>Have an invite code?</Text>
          </TouchableOpacity>
        )}

        {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>

        <View style={styles.infoContainer}>
          <Text style={styles.infoText}>
            After verification, you'll be able to set up your profile and start monitoring your loved ones
          </Text>
        </View>
      </ScrollView>

      {/* Invite Code Modal */}
      <Modal
        visible={inviteModalVisible}
        transparent
        animationType="slide"
        onRequestClose={() => setInviteModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <Text style={styles.modalTitle}>Enter Invite Code</Text>
            <Text style={styles.modalSubtitle}>
              If you received a referral code, enter it below
            </Text>

            <View style={styles.codeContainer}>
              {[0, 1, 2, 3, 4, 5].map((index) => (
                <View
                  key={index}
                  style={[
                    styles.codeCell,
                    tempInviteCode[index] && styles.codeCellFilled,
                  ]}
                >
                  <Text style={styles.codeCellText}>
                    {tempInviteCode[index] || ''}
                  </Text>
                </View>
              ))}
            </View>

            <TextInput
              style={styles.hiddenInput}
              value={tempInviteCode}
              onChangeText={(text) => setTempInviteCode(text.replace(/[^0-9]/g, '').slice(0, 6))}
              keyboardType="number-pad"
              maxLength={6}
              autoFocus
            />

            <TouchableOpacity
              style={styles.testCodeHint}
              onPress={() => setTempInviteCode('123456')}
            >
              <Text style={styles.testCodeText}>For testing: tap to use 123456</Text>
            </TouchableOpacity>

            <View style={styles.modalButtons}>
              <TouchableOpacity
                style={styles.modalCancelButton}
                onPress={() => setInviteModalVisible(false)}
              >
                <Text style={styles.modalCancelText}>Cancel</Text>
              </TouchableOpacity>

              <Button
                title="Apply"
                onPress={handleInviteCodeSubmit}
                size="md"
                style={styles.modalApplyButton}
              />
            </View>
          </View>
        </View>
      </Modal>
    </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.lg,
  },
  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,
  },
  inviteBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: `${AppColors.success}15`,
    paddingVertical: Spacing.sm,
    paddingHorizontal: Spacing.md,
    borderRadius: BorderRadius.md,
    marginBottom: Spacing.lg,
    gap: Spacing.xs,
  },
  inviteBadgeText: {
    fontSize: FontSizes.sm,
    color: AppColors.success,
    fontWeight: '500',
  },
  inviteLink: {
    alignItems: 'center',
    paddingVertical: Spacing.md,
    marginBottom: Spacing.sm,
  },
  inviteLinkText: {
    fontSize: FontSizes.base,
    color: AppColors.primary,
    fontWeight: '500',
  },
  buttonContainer: {
    marginTop: Spacing.lg,
  },
  infoContainer: {
    alignItems: 'center',
    marginTop: Spacing.xl,
    paddingHorizontal: Spacing.md,
  },
  infoText: {
    fontSize: FontSizes.sm,
    color: AppColors.textMuted,
    textAlign: 'center',
    lineHeight: 20,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    padding: Spacing.lg,
  },
  modalContent: {
    backgroundColor: AppColors.background,
    borderRadius: BorderRadius.lg,
    padding: Spacing.xl,
    width: '100%',
    maxWidth: 400,
  },
  modalTitle: {
    fontSize: FontSizes.xl,
    fontWeight: '700',
    color: AppColors.textPrimary,
    marginBottom: Spacing.sm,
    textAlign: 'center',
  },
  modalSubtitle: {
    fontSize: FontSizes.sm,
    color: AppColors.textSecondary,
    textAlign: 'center',
    marginBottom: Spacing.lg,
  },
  codeContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    gap: Spacing.sm,
    marginBottom: Spacing.sm,
  },
  codeCell: {
    width: 44,
    height: 52,
    borderRadius: BorderRadius.md,
    borderWidth: 2,
    borderColor: AppColors.border,
    backgroundColor: AppColors.surface,
    justifyContent: 'center',
    alignItems: 'center',
  },
  codeCellFilled: {
    borderColor: AppColors.primary,
    backgroundColor: `${AppColors.primary}10`,
  },
  codeCellText: {
    fontSize: FontSizes['2xl'],
    fontWeight: '600',
    color: AppColors.textPrimary,
  },
  hiddenInput: {
    position: 'absolute',
    opacity: 0,
    height: 0,
  },
  testCodeHint: {
    alignItems: 'center',
    paddingVertical: Spacing.sm,
    marginBottom: Spacing.md,
  },
  testCodeText: {
    fontSize: FontSizes.xs,
    color: AppColors.primary,
    textDecorationLine: 'underline',
  },
  modalButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: Spacing.md,
  },
  modalCancelButton: {
    flex: 1,
    padding: Spacing.md,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: BorderRadius.md,
    borderWidth: 1,
    borderColor: AppColors.border,
  },
  modalCancelText: {
    fontSize: FontSizes.base,
    color: AppColors.textSecondary,
  },
  modalApplyButton: {
    flex: 1,
  },
});