import { useState } from 'react';
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import { useLanguage } from '../context/LanguageContext';
import Footer from '../components/Footer';
import { API_HOST } from '../config';

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(`${API_HOST}/api/v1/onboard/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');
            }

            // Navigate to registration success page instead of verify-email
            navigate('/registration-success');
        } catch (err) {
            setError(err.message);
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="relative min-h-screen bg-white">
            {/* Technical grid background */}
            <div className="fixed inset-0 technical-grid opacity-50 pointer-events-none"></div>

            <div className="max-w-[1600px] mx-auto px-8 sm:px-12 lg:px-16 pt-32">
                {/* Header section */}
                <div className="grid-layout mb-16">
                    <div className="col-span-12 md:col-span-8">
                        <h1 className="brutalist-heading relative">
                            Create Account
                            <div className="absolute -right-8 -top-8 w-16 h-16">
                                <div className="geometric-shape diamond w-full h-full bg-black"></div>
                            </div>
                        </h1>
                        <p className="monospace text-xl md:text-2xl font-medium tracking-tight max-w-2xl">
                            Selected plan: <span className="uppercase font-bold">{selectedPlan}</span>
                        </p>
                    </div>
                </div>

                <div className="geometric-divider mb-16"></div>

                {/* Registration Form */}
                <div className="grid-layout">
                    <div className="col-span-12 md:col-span-6 lg:col-span-4">
                        <div className="brutalist-card">
                            {error && (
                                <div className="p-4 border-2 border-black bg-red-100 monospace">
                                    {error}
                                </div>
                            )}

                            <form onSubmit={handleSubmit} className="p-6 space-y-8">
                                <div className="space-y-6">
                                    <div>
                                        <label htmlFor="name" className="block text-sm font-black uppercase mb-2">
                                            First Name
                                        </label>
                                        <input
                                            id="name"
                                            name="name"
                                            type="text"
                                            required
                                            value={name}
                                            onChange={(e) => setName(e.target.value)}
                                            placeholder="Enter your first name"
                                            className="w-full border-2 border-black bg-white px-4 py-3 monospace placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black"
                                        />
                                    </div>

                                    <div>
                                        <label htmlFor="surname" className="block text-sm font-black uppercase mb-2">
                                            Last Name
                                        </label>
                                        <input
                                            id="surname"
                                            name="surname"
                                            type="text"
                                            required
                                            value={surname}
                                            onChange={(e) => setSurname(e.target.value)}
                                            placeholder="Enter your last name"
                                            className="w-full border-2 border-black bg-white px-4 py-3 monospace placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black"
                                        />
                                    </div>

                                    <div>
                                        <label htmlFor="email" className="block text-sm font-black uppercase mb-2">
                                            Email Address
                                        </label>
                                        <input
                                            id="email"
                                            name="email"
                                            type="email"
                                            required
                                            value={email}
                                            onChange={(e) => setEmail(e.target.value)}
                                            placeholder="Enter your email"
                                            className="w-full border-2 border-black bg-white px-4 py-3 monospace placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black"
                                        />
                                    </div>
                                </div>

                                <div className="section-divider"></div>

                                <button
                                    type="submit"
                                    disabled={isLoading}
                                    className="brutalist-button w-full disabled:opacity-50"
                                >
                                    {isLoading ? (
                                        <span className="monospace">Creating account...</span>
                                    ) : (
                                        <span>Create account →</span>
                                    )}
                                </button>
                            </form>
                        </div>

                        <div className="mt-8 text-center">
                            <p className="monospace">
                                Already have an account?{' '}
                                <Link to="/login" className="underline font-bold hover:text-gray-600 transition-colors">
                                    Sign in
                                </Link>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
}

export default Register;