MotionWebStudio/pages/auth/Register.tsx

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { supabase, isSupabaseConfigured } from '../../lib/supabaseClient';
import { Button } from '../../components/Button';
import { useAuth } from '../../context/AuthContext';
import { UserPlus, AlertCircle, ArrowLeft, CheckCircle, Mail, Info, Send, ShieldCheck } from 'lucide-react';

export const Register: React.FC = () => {
  const navigate = useNavigate();
  const { refreshDemoUser } = useAuth();
  const [lastName, setLastName] = useState('');
  const [firstName, setFirstName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [dateOfBirth, setDateOfBirth] = useState('');
  const [privacyAccepted, setPrivacyAccepted] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    // Alapvető validációk
    if (!lastName || !firstName) {
      setError('A név megadása kötelező.');
      setLoading(false);
      return;
    }

    if (password !== confirmPassword) {
      setError('A jelszavak nem egyeznek.');
      setLoading(false);
      return;
    }

    if (password.length < 6) {
      setError('A jelszónak legalább 6 karakter hosszúnak kell lennie.');
      setLoading(false);
      return;
    }

    if (!dateOfBirth) {
      setError('A születési dátum megadása kötelező.');
      setLoading(false);
      return;
    }

    if (!privacyAccepted) {
      setError('A regisztrációhoz el kell fogadnia az Adatkezelési tájékoztatót.');
      setLoading(false);
      return;
    }

    try {
      if (!isSupabaseConfigured) {
        // Demo mód szimuláció
        await new Promise(resolve => setTimeout(resolve, 1000));
        const demoUser = {
          user: {
            id: 'demo-user-123',
            email: email,
            user_metadata: {
              first_name: firstName,
              last_name: lastName,
              date_of_birth: dateOfBirth
            }
          },
          access_token: 'demo-token',
        };
        localStorage.setItem('demo_user_session', JSON.stringify(demoUser));
        refreshDemoUser();
        navigate('/dashboard');
        return;
      }

      // HashRouter esetén a redirect URL-nek pontosnak kell lennie.
      // A window.location.origin a base URL (pl. http://localhost:5173)
      const redirectUrl = `${window.location.origin}/#/auth/login`;

      console.log('Attempting signup with redirect:', redirectUrl);

      const { data, error: signUpError } = await supabase.auth.signUp({
        email,
        password,
        options: {
          emailRedirectTo: redirectUrl,
          data: {
            first_name: firstName,
            last_name: lastName,
            date_of_birth: dateOfBirth,
          }
        }
      });

      if (signUpError) {
        console.error('Detailed registration error:', signUpError);
        
        // Specifikus hibaüzenetek kezelése
        if (signUpError.message.includes('Error sending confirmation email')) {
          setError('A rendszer nem tudta kiküldeni a megerősítő e-mailt a Resend szerverén keresztül. Kérjük, ellenőrizze, hogy a Supabase Dashboard-on a "Custom SMTP" beállításoknál a Sender Email megegyezik-e a Resend-ben hitelesített domainnel!');
        } else if (signUpError.message.includes('User already registered') || signUpError.status === 422) {
          setError('Ezzel az e-mail címmel már regisztráltak. Kérjük, próbáljon meg bejelentkezni.');
        } else if (signUpError.status === 429) {
          setError('Túl sok regisztrációs kísérlet. Kérjük, várjon néhány percet!');
        } else {
          setError(`Hiba történt a regisztráció során: ${signUpError.message}`);
        }
        setLoading(false);
        return;
      }

      if (data.user) {
        // Ha azonnal van session, akkor nincs e-mail megerősítés (ritka egyedi SMTP-nél)
        if (data.session) {
          navigate('/dashboard');
        } else {
          setSuccess(true);
        }
      }
    } catch (err: any) {
      setError('Váratlan hiba történt a regisztráció során. Kérjük, próbálja meg később.');
      console.error('Unexpected catch error:', err);
    } finally {
      setLoading(false);
    }
  };

  if (success) {
    return (
      <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
        <div className="w-full max-w-lg bg-white p-8 md:p-12 shadow-2xl rounded-[32px] border border-gray-100 text-center animate-fade-in-up">
          <div className="w-20 h-20 bg-primary/10 rounded-3xl flex items-center justify-center mx-auto mb-8 text-primary shadow-inner">
            <Mail className="w-10 h-10" />
          </div>
          <h2 className="text-3xl font-black text-gray-900 mb-4 tracking-tight">E-mail kiküldve!</h2>
          <p className="text-gray-600 mb-8 leading-relaxed">
            Küldtünk egy megerősítő linket a(z) <strong className="text-gray-900">{email}</strong> e-mail címre a <strong>Resend</strong> szolgáltatón keresztül. A belépéshez kérjük, kattintson a levélben található linkre.
          </p>
          
          <div className="bg-blue-50/50 p-6 rounded-2xl text-left mb-8 border border-blue-100 flex gap-4">
             <div className="mt-1"><Info className="w-5 h-5 text-blue-500" /></div>
             <div>
               <p className="text-sm font-bold text-blue-900 mb-1">Nem találja a levelet?</p>
               <p className="text-xs text-blue-800 leading-relaxed">
                 Nézze meg a <strong>Spam</strong> vagy a <strong>Promóciók</strong> mappát is. Ha 5 percen belül nem érkezik meg, próbálja meg újra a bejelentkezési oldalon az újraküldést.
               </p>
             </div>
          </div>

          <div className="space-y-4">
            <Link to="/auth/login" className="block">
              <Button fullWidth size="lg">Tovább a bejelentkezéshez</Button>
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen pt-20 pb-12 bg-gray-50 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
          <h2 className="text-4xl font-black text-gray-900 tracking-tighter">Regisztráció</h2>
          <p className="mt-2 text-sm text-gray-600 font-medium">
            Csatlakozzon a MotionWeb közösségéhez.
          </p>
        </div>

        <div className="bg-white py-10 px-6 md:px-10 shadow-xl rounded-[32px] border border-gray-100">
          <form className="space-y-6" onSubmit={handleRegister}>
            {error && (
              <div className="rounded-2xl bg-red-50 p-4 border border-red-100 flex items-start animate-fade-in shadow-sm">
                <div className="flex-shrink-0">
                  <AlertCircle className="h-5 w-5 text-red-400" aria-hidden="true" />
                </div>
                <div className="ml-3 text-xs font-bold text-red-800 uppercase tracking-wide leading-relaxed">
                  {error}
                </div>
              </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label htmlFor="lastName" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Vezetéknév</label>
                <input id="lastName" type="text" required value={lastName} onChange={(e) => setLastName(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="Kovács" />
              </div>
              <div>
                <label htmlFor="firstName" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Keresztnév</label>
                <input id="firstName" type="text" required value={firstName} onChange={(e) => setFirstName(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="János" />
              </div>
            </div>

            <div>
              <label htmlFor="email" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">E-mail cím</label>
              <input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="pelda@email.hu" />
            </div>

            <div>
              <label htmlFor="dateOfBirth" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Születési dátum</label>
              <input id="dateOfBirth" type="date" required value={dateOfBirth} onChange={(e) => setDateOfBirth(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" />
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label htmlFor="password" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Jelszó</label>
                <input id="password" type="password" required value={password} onChange={(e) => setPassword(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="••••••••" />
              </div>
              <div>
                <label htmlFor="confirmPassword" className="block text-xs font-black text-gray-400 uppercase tracking-widest mb-1">Megerősítés</label>
                <input id="confirmPassword" type="password" required value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className="appearance-none block w-full px-4 py-3 border border-gray-200 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-primary/10 focus:border-primary sm:text-sm bg-white text-gray-900 font-medium" placeholder="••••••••" />
              </div>
            </div>

            <div className="flex items-start bg-gray-50 p-4 rounded-2xl border border-gray-100">
              <input id="privacy" type="checkbox" required checked={privacyAccepted} onChange={(e) => setPrivacyAccepted(e.target.checked)} className="h-5 w-5 text-primary focus:ring-primary border-gray-300 rounded-lg cursor-pointer mt-0.5" />
              <div className="ml-3 text-sm">
                <label htmlFor="privacy" className="font-semibold text-gray-700 leading-tight">
                  Elfogadom az <Link to="/privacy" className="text-primary hover:underline">Adatkezelési tájékoztatót</Link>
                </label>
              </div>
            </div>

            <div className="pt-2">
              <Button type="submit" fullWidth disabled={loading} size="lg" className="shadow-lg shadow-primary/20">
                {loading ? 'Fiók létrehozása...' : <>Regisztráció <UserPlus className="ml-2 w-5 h-5" /></>}
              </Button>
            </div>
          </form>

          <div className="mt-8 text-center border-t border-gray-100 pt-6">
            <span className="text-sm text-gray-500 font-medium">Már van fiókja? </span>
            <Link to="/auth/login" className="text-sm font-bold text-primary hover:text-secondary transition-colors underline-offset-4 hover:underline">Jelentkezzen be</Link>
          </div>
        </div>

        <div className="mt-8 text-center">
          <Link to="/" className="text-sm font-bold text-gray-400 hover:text-gray-900 flex items-center justify-center transition-all group">
             <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> Vissza a főoldalra
          </Link>
        </div>
      </div>
    </div>
  );
};