import { useState } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useLanguage } from '../context/LanguageContext';

function Register() {
    const [searchParams] = useSearchParams();
    const navigate = useNavigate();
    const { t } = useLanguage();
    const [email, setEmail] = useState('');
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState('');
    const selectedPlan = searchParams.get('plan') || 'starter';

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

        try {
            // Generate a random ID and token (you might want to handle this differently)
            const id = Math.random().toString(36).substr(2, 9);
            const token = Math.random().toString(36).substr(2, 9);

            const response = await fetch('http://192.168.1.35:8080/api/v1/check-email', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    id,
                    name,
                    surname,
                    email,
                    token,
                    plan: selectedPlan,
                    status: true
                }),
            });

            if (!response.ok) {
                throw new Error('Registration failed');
            }

            // Show success message and redirect
            navigate('/registration-success');
        } catch (err) {
            setError(err.message);
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center px-4 relative">
            {/* Background elements */}
            <div className="absolute inset-0 pointer-events-none overflow-hidden">
                <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-brand-purple/10 rounded-full blur-3xl transform -translate-x-1/2 -translate-y-1/2"></div>
                <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-brand-pink/10 rounded-full blur-3xl transform translate-x-1/2 translate-y-1/2"></div>
            </div>

            <div className="w-full max-w-md">
                <div className="bg-white/80 backdrop-blur-sm shadow-xl rounded-3xl p-8">
                    <div className="text-center">
                        <h2 className="text-[40px] font-light tracking-tight text-gray-900 relative inline-block">
                            Create Account
                            <span className="absolute -top-1 -right-1 w-2 h-2 bg-brand-purple rounded-full"></span>
                        </h2>
                        <p className="mt-2 text-sm text-gray-600">
                            Selected plan: <span className="font-medium capitalize">{selectedPlan}</span>
                        </p>
                    </div>

                    {error && (
                        <div className="mt-4 p-4 bg-red-50 rounded-2xl text-red-600 text-sm">
                            {error}
                        </div>
                    )}

                    <form onSubmit={handleSubmit} className="mt-8 space-y-6">
                        <div className="space-y-4">
                            <div>
                                <label htmlFor="name" className="sr-only">First Name</label>
                                <input
                                    id="name"
                                    name="name"
                                    type="text"
                                    required
                                    value={name}
                                    onChange={(e) => setName(e.target.value)}
                                    placeholder="First Name"
                                    className="block w-full rounded-full border-0 px-6 py-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-purple transition-all"
                                />
                            </div>

                            <div>
                                <label htmlFor="surname" className="sr-only">Last Name</label>
                                <input
                                    id="surname"
                                    name="surname"
                                    type="text"
                                    required
                                    value={surname}
                                    onChange={(e) => setSurname(e.target.value)}
                                    placeholder="Last Name"
                                    className="block w-full rounded-full border-0 px-6 py-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-purple transition-all"
                                />
                            </div>

                            <div>
                                <label htmlFor="email" className="sr-only">Email address</label>
                                <input
                                    id="email"
                                    name="email"
                                    type="email"
                                    required
                                    value={email}
                                    onChange={(e) => setEmail(e.target.value)}
                                    placeholder="Email address"
                                    className="block w-full rounded-full border-0 px-6 py-4 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-brand-purple transition-all"
                                />
                            </div>
                        </div>

                        <div>
                            <button
                                type="submit"
                                disabled={isLoading}
                                className="relative flex w-full justify-center items-center rounded-full bg-brand-purple px-6 py-4 text-sm font-semibold text-white shadow-sm hover:bg-brand-purple/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-purple transition-all gap-2 disabled:opacity-70"
                            >
                                {isLoading ? (
                                    <>
                                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                                        <span>Creating account...</span>
                                    </>
                                ) : (
                                    <>
                                        <span>Create account</span>
                                        <span className="transform group-hover:translate-x-1 transition-transform">→</span>
                                    </>
                                )}
                            </button>
                        </div>

                        <p className="mt-4 text-center text-sm text-gray-500">
                            Already have an account?{' '}
                            <a href="/login" className="font-medium text-brand-purple hover:text-brand-purple/80 relative inline-block group">
                                Sign in
                                <span className="absolute bottom-0 left-0 w-full h-0.5 bg-brand-purple transform scale-x-0 transition-transform group-hover:scale-x-100"></span>
                            </a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    );
}

export default Register;