/*
 * File: EmailAlreadyRegisteredModal.tsx
 * Description: Modal for when email is already registered
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Modal,
  Alert,
} from 'react-native';
import { theme } from '../../../../theme/theme';

// ============================================================================
// INTERFACES
// ============================================================================

interface EmailAlreadyRegisteredModalProps {
  visible: boolean;
  onClose: () => void;
  onGoToLogin: () => void;
}

// ============================================================================
// EMAIL ALREADY REGISTERED MODAL COMPONENT
// ============================================================================

/**
 * EmailAlreadyRegisteredModal Component
 * 
 * Purpose: Modal shown when user tries to register with an existing email
 * 
 * Features:
 * - Informative message about existing email
 * - Option to go to login
 * - Option to close and try different email
 */
const EmailAlreadyRegisteredModal: React.FC<EmailAlreadyRegisteredModalProps> = ({
  visible,
  onClose,
  onGoToLogin,
}) => {
  // ============================================================================
  // HANDLERS
  // ============================================================================
  
  /**
   * Handle Go To Login
   * 
   * Purpose: Navigate to login screen
   */
  const handleGoToLogin = () => {
    onClose();
    onGoToLogin();
  };

  /**
   * Handle Try Different Email
   * 
   * Purpose: Close modal and allow user to try different email
   */
  const handleTryDifferentEmail = () => {
    onClose();
  };

  // ============================================================================
  // RENDER
  // ============================================================================
  
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.overlay}>
        <View style={styles.modalContainer}>
          {/* Header */}
          <View style={styles.header}>
            <Text style={styles.title}>Email Already Registered</Text>
            <Text style={styles.subtitle}>
              This email address is already associated with an account.
            </Text>
          </View>

          {/* Content */}
          <View style={styles.content}>
            <Text style={styles.message}>
              It looks like you already have an account with us. You can either:
            </Text>
            
            <View style={styles.optionsContainer}>
              <Text style={styles.optionText}>
                • Sign in to your existing account
              </Text>
              <Text style={styles.optionText}>
                • Try a different email address
              </Text>
            </View>
          </View>

          {/* Actions */}
          <View style={styles.actions}>
            <TouchableOpacity
              style={styles.secondaryButton}
              onPress={handleTryDifferentEmail}
            >
              <Text style={styles.secondaryButtonText}>Try Different Email</Text>
            </TouchableOpacity>
            
            <TouchableOpacity
              style={styles.primaryButton}
              onPress={handleGoToLogin}
            >
              <Text style={styles.primaryButtonText}>Go to Login</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Modal>
  );
};

// ============================================================================
// STYLES
// ============================================================================

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: theme.spacing.lg,
  },
  modalContainer: {
    backgroundColor: theme.colors.background,
    borderRadius: theme.borderRadius.large,
    padding: theme.spacing.xl,
    width: '100%',
    maxWidth: 400,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
  },
  header: {
    alignItems: 'center',
    marginBottom: theme.spacing.lg,
  },
  title: {
    fontSize: theme.typography.fontSize.displaySmall,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.sm,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: theme.typography.fontSize.bodyMedium,
    color: theme.colors.textSecondary,
    textAlign: 'center',
  },
  content: {
    marginBottom: theme.spacing.xl,
  },
  message: {
    fontSize: theme.typography.fontSize.bodyMedium,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.md,
    fontFamily: theme.typography.fontFamily.regular,
  },
  optionsContainer: {
    marginLeft: theme.spacing.sm,
  },
  optionText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    color: theme.colors.textSecondary,
    marginBottom: theme.spacing.xs,
    fontFamily: theme.typography.fontFamily.regular,
  },
  actions: {
    flexDirection: 'column', // Changed from 'row' to 'column'
    gap: theme.spacing.md,
  },
  secondaryButton: {
    backgroundColor: theme.colors.background,
    borderWidth: 1,
    borderColor: theme.colors.border,
    borderRadius: theme.borderRadius.medium,
    paddingVertical: theme.spacing.md,
    paddingHorizontal: theme.spacing.lg,
    alignItems: 'center',
  },
  secondaryButtonText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
  },
  primaryButton: {
    backgroundColor: theme.colors.primary,
    borderRadius: theme.borderRadius.medium,
    paddingVertical: theme.spacing.md,
    paddingHorizontal: theme.spacing.lg,
    alignItems: 'center',
    shadowColor: theme.colors.primary,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 3,
  },
  primaryButtonText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.background,
  },
});

export default EmailAlreadyRegisteredModal;

/*
 * End of File: EmailAlreadyRegisteredModal.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */