import React, { useState } from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, Alert } from 'react-native';
import { InputField, Button, InlineButton } from '@components';
import { styles } from './signup.styles';

interface SignupScreenProps {
  onSignupSuccess: (token: string) => void;
  onSignInPress: () => void;
}

export function SignupScreen({
  onSignupSuccess,
  onSignInPress,
}: SignupScreenProps) {
  const [fullName, setFullName] = useState('');
  const [emailOrPhone, setEmailOrPhone] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  
  const [securePasswordEntry, setSecurePasswordEntry] = useState(true);
  const [secureConfirmPasswordEntry, setSecureConfirmPasswordEntry] = useState(true);
  
  const [loading, setLoading] = useState(false);

  const handleSignUp = async () => {
    if (!fullName.trim() || !emailOrPhone.trim() || !password.trim() || !confirmPassword.trim()) {
      Alert.alert('Error', 'Please fill in all fields');
      return;
    }

    if (password !== confirmPassword) {
      Alert.alert('Error', 'Passwords do not match');
      return;
    }

    setLoading(true);

    try {
      // Simulating signup API call
      await new Promise((resolve) => {
        setTimeout(() => {
          resolve('');
        }, 1000);
      });
      Alert.alert('Success', 'Account created successfully!');
      onSignupSuccess('mock-access-token');
    } finally {
      setLoading(false);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.card}>
        {/* Header */}
        <View style={styles.headerContainer}>
          <Text style={styles.title}>Create Account</Text>
          <Text style={styles.subtitle}>
            Join us to manage orders, addresses, and wishlist items.
          </Text>
        </View>

        {/* Full Name Input */}
        <InputField
          label="FULL NAME"
          placeholder="John Doe"
          value={fullName}
          onChangeText={setFullName}
          autoCapitalize="words"
          autoCorrect={false}
        />

        {/* Email or Phone Input */}
        <InputField
          label="EMAIL OR PHONE NUMBER"
          placeholder="ujjwal@sentientgeeks.com"
          value={emailOrPhone}
          onChangeText={setEmailOrPhone}
          keyboardType="email-address"
          autoCapitalize="none"
          autoCorrect={false}
        />

        {/* Password Input */}
        <InputField
          label="PASSWORD"
          placeholder="••••••••"
          value={password}
          onChangeText={setPassword}
          secureTextEntry={securePasswordEntry}
          autoCapitalize="none"
          autoCorrect={false}
          renderRightAccessory={() => (
            <TouchableOpacity
              style={styles.eyeButton}
              onPress={() => setSecurePasswordEntry(prev => !prev)}
              activeOpacity={0.7}
            >
              <Text style={styles.eyeText}>
                {securePasswordEntry ? '👁️' : '🙈'}
              </Text>
            </TouchableOpacity>
          )}
        />

        {/* Confirm Password Input */}
        <InputField
          label="CONFIRM PASSWORD"
          placeholder="Confirm your password"
          value={confirmPassword}
          onChangeText={setConfirmPassword}
          secureTextEntry={secureConfirmPasswordEntry}
          autoCapitalize="none"
          autoCorrect={false}
          renderRightAccessory={() => (
            <TouchableOpacity
              style={styles.eyeButton}
              onPress={() => setSecureConfirmPasswordEntry(prev => !prev)}
              activeOpacity={0.7}
            >
              <Text style={styles.eyeText}>
                {secureConfirmPasswordEntry ? '👁️' : '🙈'}
              </Text>
            </TouchableOpacity>
          )}
        />

        {/* Sign Up Button */}
        <Button
          title="SIGN UP"
          onPress={handleSignUp}
          loading={loading}
        />

        {/* Already have an account? Sign In */}
        <View style={styles.footerContainer}>
          <InlineButton
            onPress={onSignInPress}
            text="Already have an account?"
            highlightedText="Sign In"
          />
        </View>
      </View>
    </SafeAreaView>
  );
}