import React, { useState } from 'react';
import { Page } from '../types';

interface RegisterProps {
    setPage: (page: Page) => void;
}

import { supabase } from '../supabaseClient';

const Register: React.FC<RegisterProps> = ({ setPage }) => {
    const [formData, setFormData] = useState({
        firstName: '',
        lastName: '',
        email: '',
        phone: '',
        password: '',
        confirmPassword: '',
        privacyAccepted: false
    });
    const [loading, setLoading] = useState(false);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value, type, checked } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: type === 'checkbox' ? checked : value
        }));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        if (formData.password !== formData.confirmPassword) {
            alert('Passwörter stimmen nicht überein.');
            return;
        }

        setLoading(true);
        const { error } = await supabase.auth.signUp({
            email: formData.email,
            password: formData.password,
            options: {
                data: {
                    first_name: formData.firstName,
                    last_name: formData.lastName,
                    phone: formData.phone,
                },
            },
        });
        setLoading(false);

        if (error) {
            alert(error.message);
        } else {
            setPage(Page.REGISTER_SUCCESS);
        }
    };

    return (
        <div className="min-h-screen bg-background-light dark:bg-background-dark pt-32 pb-12 px-6 flex items-center justify-center">
            <div className="w-full max-w-xl bg-white dark:bg-slate-900 p-8 md:p-12 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-800">
                <h2 className="font-display text-3xl mb-2 text-center text-slate-900 dark:text-white">Konto erstellen</h2>
                <p className="text-center text-slate-500 mb-8">Starten Sie Ihre Reise mit Riboneo.</p>

                <form onSubmit={handleSubmit} className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Vorname</label>
                            <input
                                name="firstName"
                                type="text"
                                required
                                className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
                                value={formData.firstName}
                                onChange={handleChange}
                            />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Nachname</label>
                            <input
                                name="lastName"
                                type="text"
                                required
                                className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
                                value={formData.lastName}
                                onChange={handleChange}
                            />
                        </div>
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">E-Mail Adresse</label>
                        <input
                            name="email"
                            type="email"
                            required
                            className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
                            value={formData.email}
                            onChange={handleChange}
                        />
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Telefonnummer</label>
                        <input
                            name="phone"
                            type="tel"
                            required
                            className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
                            value={formData.phone}
                            onChange={handleChange}
                        />
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Passwort</label>
                            <input
                                name="password"
                                type="password"
                                required
                                className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
                                value={formData.password}
                                onChange={handleChange}
                            />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Passwort wiederholen</label>
                            <input
                                name="confirmPassword"
                                type="password"
                                required
                                className="w-full px-4 py-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 focus:ring-2 focus:ring-primary outline-none transition-all"
                                value={formData.confirmPassword}
                                onChange={handleChange}
                            />
                        </div>
                    </div>

                    <div className="flex items-start gap-3 py-2">
                        <input
                            id="privacy"
                            name="privacyAccepted"
                            type="checkbox"
                            required
                            className="mt-1 w-5 h-5 text-primary rounded border-slate-300 focus:ring-primary"
                            checked={formData.privacyAccepted}
                            onChange={handleChange}
                        />
                        <label htmlFor="privacy" className="text-sm text-slate-600 dark:text-slate-400">
                            Ich stimme der Datenschutzerklärung zu und willige ein, dass meine Daten zur Kontaktaufnahme gespeichert werden.
                        </label>
                    </div>

                    <button
                        type="submit"
                        disabled={loading}
                        className="w-full py-4 bg-primary text-white font-bold rounded-xl hover:bg-opacity-90 transition-all shadow-lg hover:shadow-primary/20 bg-secondary text-primary disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        {loading ? 'Senden...' : 'Absenden'}
                    </button>
                </form>

                <p className="mt-8 text-center text-sm text-slate-500">
                    Bereits ein Konto?{' '}
                    <button onClick={() => setPage(Page.LOGIN)} className="text-primary font-bold hover:underline">
                        Hier einloggen
                    </button>
                </p>
            </div>
        </div>
    );
};

export default Register;