import React, { useEffect, useState } from 'react';
import { useForm } from '@inertiajs/react';
import { LoaderCircle, User, Mail, Phone, Lock, Home, MapPin } from 'lucide-react';
import { Dialog, DialogContent } from '@/components/ui/dialog';

interface RegisterProps {
    package?: {
        id: number;
        name: string;
        description: string;
        price: number;
    } | null;
    privacyHtml: string;
}

import MarketingLayout from '@/layouts/marketing/MarketingLayout';

export default function Register({ package: initialPackage, privacyHtml }: RegisterProps) {
    const [privacyOpen, setPrivacyOpen] = useState(false);
    const [hasTriedSubmit, setHasTriedSubmit] = useState(false);

    const { data, setData, post, processing, errors, clearErrors } = useForm({
        username: '',
        email: '',
        password: '',
        password_confirmation: '',
        first_name: '',
        last_name: '',
        address: '',
        phone: '',
        privacy_consent: false,
        package_id: initialPackage?.id || null,
    });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        setHasTriedSubmit(true);
        post('/register', {
            preserveScroll: true,
        });
    };

    useEffect(() => {
        if (!hasTriedSubmit) {
            return;
        }

        const errorKeys = Object.keys(errors);
        if (errorKeys.length === 0) {
            return;
        }

        const firstError = errorKeys[0];
        const field = document.querySelector<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(`[name="${firstError}"]`);

        if (field) {
            field.scrollIntoView({ behavior: 'smooth', block: 'center' });
            field.focus();
        }
    }, [errors, hasTriedSubmit]);

    return (
        <MarketingLayout title="Registrieren">
            <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
                <div className="max-w-4xl w-full space-y-8">
                    <div className="bg-white rounded-lg shadow-md p-8">
                        <div>
                            <h2 className="mt-6 text-center text-3xl font-bold text-gray-900 font-display">
                                Willkommen bei Fotospiel – Erstellen Sie Ihren Account
                            </h2>
                            <p className="mt-4 text-center text-gray-600 font-sans-marketing">
                                Registrierung ermöglicht Zugriff auf Events, Galerien und personalisierte Features.
                            </p>
                            {initialPackage && (
                                <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
                                    <h3 className="text-lg font-semibold text-blue-900 mb-2">{initialPackage.name}</h3>
                                    <p className="text-blue-800 mb-2">{initialPackage.description}</p>
                                    <p className="text-sm text-blue-700">
                                        {initialPackage.price === 0 ? 'Kostenlos' : `${initialPackage.price} €`}
                                    </p>
                                </div>
                            )}
                        </div>
                        <form onSubmit={submit} className="mt-8 space-y-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div className="md:col-span-1">
                                <label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
                                    Vorname *
                                </label>
                                <div className="relative">
                                    <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                                    <input
                                        id="first_name"
                                        name="first_name"
                                        type="text"
                                        required
                                        value={data.first_name}
                                        onChange={(e) => {
                                            setData('first_name', e.target.value);
                                            if (e.target.value.trim() && errors.first_name) {
                                                clearErrors('first_name');
                                            }
                                        }}
                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.first_name ? 'border-red-500' : 'border-gray-300'}`}
                                        placeholder="Vorname"
                                    />
                                </div>
                                {errors.first_name && <p key={`error-first_name`} className="text-sm text-red-600 mt-1">{errors.first_name}</p>}
                            </div>

                            <div className="md:col-span-1">
                                <label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
                                    Nachname *
                                </label>
                                <div className="relative">
                                    <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                                    <input
                                        id="last_name"
                                        name="last_name"
                                        type="text"
                                        required
                                        value={data.last_name}
                                        onChange={(e) => {
                                            setData('last_name', e.target.value);
                                            if (e.target.value.trim() && errors.last_name) {
                                                clearErrors('last_name');
                                            }
                                        }}
                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.last_name ? 'border-red-500' : 'border-gray-300'}`}
                                        placeholder="Nachname"
                                    />
                                </div>
                                {errors.last_name && <p key={`error-last_name`} className="text-sm text-red-600 mt-1">{errors.last_name}</p>}
                            </div>

                            <div className="md:col-span-2">
                                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
                                    E-Mail-Adresse *
                                </label>
                                <div className="relative">
                                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                                    <input
                                        id="email"
                                        name="email"
                                        type="email"
                                        required
                                        value={data.email}
                                        onChange={(e) => {
                                            setData('email', e.target.value);
                                            if (e.target.value.trim() && errors.email) {
                                                clearErrors('email');
                                            }
                                        }}
                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.email ? 'border-red-500' : 'border-gray-300'}`}
                                        placeholder="email@example.com"
                                    />
                                </div>
                                {errors.email && <p key={`error-email`} className="text-sm text-red-600 mt-1">{errors.email}</p>}
                            </div>

                            <div className="md:col-span-2">
                                <label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">
                                    Adresse *
                                </label>
                                <div className="relative">
                                    <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                                    <input
                                        id="address"
                                        name="address"
                                        type="text"
                                        required
                                        value={data.address}
                                        onChange={(e) => {
                                            setData('address', e.target.value);
                                            if (e.target.value.trim() && errors.address) {
                                                clearErrors('address');
                                            }
                                        }}
                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.address ? 'border-red-500' : 'border-gray-300'}`}
                                        placeholder="Adresse"
                                    />
                                </div>
                                {errors.address && <p key={`error-address`} className="text-sm text-red-600 mt-1">{errors.address}</p>}
                            </div>

                            <div className="md:col-span-1">
                                <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
                                    Telefon *
                                </label>
                                <div className="relative">
                                    <Phone className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                                    <input
                                        id="phone"
                                        name="phone"
                                        type="tel"
                                        required
                                        value={data.phone}
                                        onChange={(e) => {
                                            setData('phone', e.target.value);
                                            if (e.target.value.trim() && errors.phone) {
                                                clearErrors('phone');
                                            }
                                        }}
                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.phone ? 'border-red-500' : 'border-gray-300'}`}
                                        placeholder="Telefonnummer"
                                    />
                                </div>
                                {errors.phone && <p key={`error-phone`} className="text-sm text-red-600 mt-1">{errors.phone}</p>}
                            </div>

                            <div className="md:col-span-1">
                                <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
                                    Benutzername *
                                </label>
                                <div className="relative">
                                    <User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                                    <input
                                        id="username"
                                        name="username"
                                        type="text"
                                        required
                                        value={data.username}
                                        onChange={(e) => {
                                            setData('username', e.target.value);
                                            if (e.target.value.trim() && errors.username) {
                                                clearErrors('username');
                                            }
                                        }}
                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.username ? 'border-red-500' : 'border-gray-300'}`}
                                        placeholder="Benutzername"
                                    />
                                </div>
                                {errors.username && <p key={`error-username`} className="text-sm text-red-600 mt-1">{errors.username}</p>}
                            </div>

                            <div className="md:col-span-1">
                                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
                                    Passwort *
                                </label>
                                <div className="relative">
                                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                                    <input
                                        id="password"
                                        name="password"
                                        type="password"
                                        required
                                        value={data.password}
                                        onChange={(e) => {
                                            setData('password', e.target.value);
                                            if (e.target.value.trim() && errors.password) {
                                                clearErrors('password');
                                            }
                                            if (data.password_confirmation && e.target.value === data.password_confirmation) {
                                                clearErrors('password_confirmation');
                                            }
                                        }}
                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password ? 'border-red-500' : 'border-gray-300'}`}
                                        placeholder="Passwort"
                                    />
                                </div>
                                {errors.password && <p key={`error-password`} className="text-sm text-red-600 mt-1">{errors.password}</p>}
                            </div>

                            <div className="md:col-span-1">
                                <label htmlFor="password_confirmation" className="block text-sm font-medium text-gray-700 mb-1">
                                    Passwort bestätigen *
                                </label>
                                <div className="relative">
                                    <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                                    <input
                                        id="password_confirmation"
                                        name="password_confirmation"
                                        type="password"
                                        required
                                        value={data.password_confirmation}
                                        onChange={(e) => {
                                            setData('password_confirmation', e.target.value);
                                            if (e.target.value.trim() && errors.password_confirmation) {
                                                clearErrors('password_confirmation');
                                            }
                                            if (data.password && e.target.value === data.password) {
                                                clearErrors('password_confirmation');
                                            }
                                        }}
                                        className={`block w-full pl-10 pr-3 py-3 border rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FFB6C1] focus:border-[#FFB6C1] sm:text-sm ${errors.password_confirmation ? 'border-red-500' : 'border-gray-300'}`}
                                        placeholder="Passwort bestätigen"
                                    />
                                </div>
                                {errors.password_confirmation && <p key={`error-password_confirmation`} className="text-sm text-red-600 mt-1">{errors.password_confirmation}</p>}
                            </div>

                            <div className="md:col-span-2 flex items-start">
                                <input
                                    id="privacy_consent"
                                    name="privacy_consent"
                                    type="checkbox"
                                    required
                                    checked={data.privacy_consent}
                                    onChange={(e) => {
                                        setData('privacy_consent', e.target.checked);
                                        if (e.target.checked && errors.privacy_consent) {
                                            clearErrors('privacy_consent');
                                        }
                                    }}
                                    className="h-4 w-4 text-[#FFB6C1] focus:ring-[#FFB6C1] border-gray-300 rounded"
                                />
                                <label htmlFor="privacy_consent" className="ml-2 block text-sm text-gray-900">
                                    Ich stimme der{' '}
                                    <button
                                        type="button"
                                        onClick={() => setPrivacyOpen(true)}
                                        className="text-[#FFB6C1] hover:underline inline bg-transparent border-none cursor-pointer p-0 font-medium"
                                    >
                                        Datenschutzerklärung
                                    </button>{' '}
                                    zu.
                                </label>
                                {errors.privacy_consent && <p className="mt-2 text-sm text-red-600">{errors.privacy_consent}</p>}
                            </div>
                        </div>
                        
                        {Object.keys(errors).length > 0 && (
                            <div key={`general-errors-${Object.keys(errors).join('-')}`} className="p-4 bg-red-50 border border-red-200 rounded-md mb-6">
                                <h4 className="text-sm font-medium text-red-800 mb-2">Fehler bei der Registrierung:</h4>
                                <ul className="text-sm text-red-800 space-y-1">
                                    {Object.entries(errors).map(([key, value]) => (
                                        <li key={key} className="flex items-start">
                                            <span className="font-medium">{key.replace('_', ' ')}:</span> {value}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        )}
                        
                        <button
                            type="submit"
                            disabled={processing}
                            className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-[#FFB6C1] hover:bg-[#FF69B4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#FFB6C1] transition duration-300 disabled:opacity-50"
                        >
                            {processing && <LoaderCircle className="h-4 w-4 animate-spin mr-2" />}
                            Account erstellen
                        </button>

                        <div className="text-center">
                            <p className="text-sm text-gray-600">
                                Bereits registriert?{' '}
                                <a href="/login" className="font-medium text-[#FFB6C1] hover:text-[#FF69B4]">
                                    Anmelden
                                </a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>

            <Dialog open={privacyOpen} onOpenChange={setPrivacyOpen}>
                <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto p-0">
                    <div className="p-6">
                        <div dangerouslySetInnerHTML={{ __html: privacyHtml }} />
                    </div>
                </DialogContent>
            </Dialog>
        </div>
        </MarketingLayout>
    );
}