import React, { useState } from 'react';
import { Button } from '../components/Button';
import { Input } from '../components/Input';

interface RegisterProps {
    onNavigate: (page: string) => void;
}

export const Register: React.FC<RegisterProps> = ({ onNavigate }) => {
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        phone: '',
        password: '',
        confirmPassword: ''
    });
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState('');
    const [success, setSuccess] = useState(false);

    const handleChange = (field: string, value: string) => {
        setFormData(prev => ({ ...prev, [field]: value }));
        setError('');
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setIsLoading(true);
        setError('');

        // Validações
        if (formData.password !== formData.confirmPassword) {
            setError('As senhas não coincidem');
            setIsLoading(false);
            return;
        }

        if (formData.password.length < 6) {
            setError('A senha deve ter no mínimo 6 caracteres');
            setIsLoading(false);
            return;
        }

        // Simular registro (conta será criada como Cliente/EVENT_OWNER automaticamente)
        setTimeout(() => {
            setIsLoading(false);
            setSuccess(true);
            setTimeout(() => {
                onNavigate('login');
            }, 2000);
        }, 1500);
    };

    if (success) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-white">
                <div className="text-center fade-in">
                    <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                    </div>
                    <h2 className="text-2xl font-bold text-gray-900 mb-2">Cadastro realizado com sucesso!</h2>
                    <p className="text-gray-600">Redirecionando para o login...</p>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen flex bg-white">
            {/* Left Side - Image */}
            <div className="hidden lg:block lg:w-1/2 relative overflow-hidden">
                <img
                    src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
                    alt="Photum Cadastro"
                    className="absolute inset-0 w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-brand-black/40 flex items-center justify-center">
                    <div className="text-center text-white p-12">
                        <h1 className="text-5xl font-serif font-bold mb-4">Faça parte da Photum</h1>
                        <p className="text-xl font-light tracking-wide max-w-md mx-auto">
                            Eternize seus momentos especiais com a melhor plataforma de gestão de eventos fotográficos.
                        </p>
                    </div>
                </div>
            </div>

            {/* Right Side - Form */}
            <div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
                <div className="max-w-md w-full space-y-8 fade-in">
                    <div className="text-center lg:text-left">
                        <span className="text-brand-gold font-bold tracking-widest uppercase text-sm">Comece agora</span>
                        <h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Crie sua conta</h2>
                        <p className="mt-2 text-sm text-gray-600">
                            Já tem uma conta?{' '}
                            <button
                                onClick={() => onNavigate('login')}
                                className="text-brand-gold hover:text-brand-gold/80 font-medium"
                            >
                                Faça login
                            </button>
                        </p>
                    </div>

                    <form className="mt-8 space-y-5" onSubmit={handleSubmit}>
                        <div className="space-y-4">
                            <Input
                                label="Nome Completo"
                                type="text"
                                required
                                placeholder="João Silva"
                                value={formData.name}
                                onChange={(e) => handleChange('name', e.target.value)}
                            />

                            <Input
                                label="E-mail"
                                type="email"
                                required
                                placeholder="nome@exemplo.com"
                                value={formData.email}
                                onChange={(e) => handleChange('email', e.target.value)}
                            />

                            <Input
                                label="Telefone"
                                type="tel"
                                required
                                placeholder="(00) 00000-0000"
                                value={formData.phone}
                                onChange={(e) => handleChange('phone', e.target.value)}
                            />

                            <Input
                                label="Senha"
                                type="password"
                                required
                                placeholder="••••••••"
                                value={formData.password}
                                onChange={(e) => handleChange('password', e.target.value)}
                            />

                            <Input
                                label="Confirmar Senha"
                                type="password"
                                required
                                placeholder="••••••••"
                                value={formData.confirmPassword}
                                onChange={(e) => handleChange('confirmPassword', e.target.value)}
                                error={error}
                            />
                        </div>

                        <div className="flex items-start">
                            <input
                                type="checkbox"
                                required
                                className="mt-1 h-4 w-4 text-brand-gold focus:ring-brand-gold border-gray-300 rounded"
                            />
                            <label className="ml-2 text-sm text-gray-600">
                                Concordo com os{' '}
                                <a href="#" className="text-brand-gold hover:text-brand-gold/80">
                                    termos de uso
                                </a>{' '}
                                e{' '}
                                <a href="#" className="text-brand-gold hover:text-brand-gold/80">
                                    política de privacidade
                                </a>
                            </label>
                        </div>

                        <Button type="submit" className="w-full" size="lg" isLoading={isLoading}>
                            Criar Conta
                        </Button>
                    </form>

                    <div className="text-center text-xs text-gray-500 pt-4">
                        Ao criar uma conta, você concorda em receber atualizações e novidades sobre nossos serviços.
                    </div>
                </div>
            </div>
        </div>
    );
};