import type { NextPage } from 'next';
import Head from 'next/head';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import Link from 'next/link';
import toast from 'react-hot-toast';

const Register: NextPage = () => {
  const router = useRouter();
  const { status } = useSession();
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    password: '',
    confirmPassword: '',
    subscribeNewsletter: false,
    agreeTerms: false,
    agreePrivacy: false,
  });
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [passwordError, setPasswordError] = useState('');

  useEffect(() => {
    if (status === 'authenticated') {
      router.push('/');
    }
  }, [status, router]);

  if (status !== 'unauthenticated') {
    return null;
  }

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setPasswordError('');

    // Validace hesel
    if (formData.password !== formData.confirmPassword) {
      setPasswordError('Hesla se neshodují');
      return;
    }

    if (formData.password.length < 8) {
      setPasswordError('Heslo musí mít alespoň 8 znaků');
      return;
    }

    if (!formData.agreeTerms) {
      setError('Musíte souhlasit s obchodními podmínkami');
      return;
    }

    if (!formData.agreePrivacy) {
      setError('Musíte souhlasit s podmínkami ochrany osobních údajů');
      return;
    }

    setIsLoading(true);

    try {
      const response = await fetch('/api/auth/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          firstName: formData.firstName,
          lastName: formData.lastName,
          email: formData.email,
          phone: formData.phone,
          password: formData.password,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        setError(data.error || 'Registrace se nezdařila');
        return;
      }

      toast.success('Registrace byla úspěšná! Zkontrolujte svůj e-mail pro ověření.');

      // Redirect to login after registration (no auto-login)
      setTimeout(() => {
        router.push('/login');
      }, 2000);
    } catch (err) {
      console.error('Registration error:', err);
      setError('Registrace se nezdařila. Prosím zkuste znovu.');
      toast.error('Registrace se nezdařila');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <Head>
        <title>Registrace | Vystříkejto.cz</title>
        <meta name="robots" content="noindex,nofollow,noarchive" />
      </Head>
      <div className="min-h-screen w-full flex flex-col bg-luxury-dark pt-16 sm:pt-20 md:pt-32">
      {/* Registration Form */}
      <div className="w-full flex flex-col items-center justify-center px-4 sm:px-8 lg:px-12 py-12 lg:py-20">
        <div className="w-full max-w-sm">
          {/* Header */}
          <div className="mb-6 text-center">
            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-aptos font-black text-luxury-gold mb-2">
              Registrace
            </h1>
          </div>

          {/* Error Message */}
          {error && (
            <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
              <p className="text-red-400 text-sm">{error}</p>
            </div>
          )}

          {/* Registration Form */}
          <form onSubmit={handleSubmit} className="space-y-5">
            {/* Name Fields */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label htmlFor="firstName" className="block text-luxury-light text-sm font-medium mb-2">
                  Jméno
                </label>
                <input
                  type="text"
                  id="firstName"
                  name="firstName"
                  value={formData.firstName}
                  onChange={handleChange}
                  placeholder="Vaše jméno"
                  autoComplete="given-name"
                  className="w-full px-4 py-3 bg-luxury-light/10 border border-luxury-gold/30 rounded-lg text-luxury-light placeholder:text-luxury-light/40 focus:outline-none focus:ring-2 focus:ring-luxury-gold focus:border-transparent transition-all"
                  required
                />
              </div>
              <div>
                <label htmlFor="lastName" className="block text-luxury-light text-sm font-medium mb-2">
                  Příjmení
                </label>
                <input
                  type="text"
                  id="lastName"
                  name="lastName"
                  value={formData.lastName}
                  onChange={handleChange}
                  placeholder="Vaše příjmení"
                  autoComplete="family-name"
                  className="w-full px-4 py-3 bg-luxury-light/10 border border-luxury-gold/30 rounded-lg text-luxury-light placeholder:text-luxury-light/40 focus:outline-none focus:ring-2 focus:ring-luxury-gold focus:border-transparent transition-all"
                  required
                />
              </div>
            </div>

            {/* Email and Phone Fields */}
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label htmlFor="email" className="block text-luxury-light text-sm font-medium mb-2">
                  E-mailová adresa
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder="Vaše e-mailová adresa"
                  autoComplete="email"
                  className="w-full px-4 py-3 bg-luxury-light/10 border border-luxury-gold/30 rounded-lg text-luxury-light placeholder:text-luxury-light/40 focus:outline-none focus:ring-2 focus:ring-luxury-gold focus:border-transparent transition-all"
                  required
                />
              </div>
              <div>
                <label htmlFor="phone" className="block text-luxury-light text-sm font-medium mb-2">
                  Telefonní číslo
                </label>
                <input
                  type="tel"
                  id="phone"
                  name="phone"
                  value={formData.phone}
                  onChange={handleChange}
                  placeholder="+420 123 456 789"
                  autoComplete="tel"
                  className="w-full px-4 py-3 bg-luxury-light/10 border border-luxury-gold/30 rounded-lg text-luxury-light placeholder:text-luxury-light/40 focus:outline-none focus:ring-2 focus:ring-luxury-gold focus:border-transparent transition-all"
                  required
                />
              </div>
            </div>

            {/* Password Input */}
            <div>
              <label htmlFor="password" className="block text-luxury-light text-sm font-medium mb-2">
                Heslo
              </label>
              <input
                type="password"
                id="password"
                name="password"
                value={formData.password}
                onChange={handleChange}
                placeholder="Vaše heslo"
                autoComplete="new-password"
                className="w-full px-4 py-3 bg-luxury-light/10 border border-luxury-gold/30 rounded-lg text-luxury-light placeholder:text-luxury-light/40 focus:outline-none focus:ring-2 focus:ring-luxury-gold focus:border-transparent transition-all"
                required
              />
              <p className="text-luxury-light/50 text-xs mt-1">
                Heslo musí obsahovat alespoň 8 znaků
              </p>
            </div>

            {/* Confirm Password Input */}
            <div>
              <label htmlFor="confirmPassword" className="block text-luxury-light text-sm font-medium mb-2">
                Potvrzení hesla
              </label>
              <input
                type="password"
                id="confirmPassword"
                name="confirmPassword"
                value={formData.confirmPassword}
                onChange={handleChange}
                placeholder="Zopakujte heslo"
                autoComplete="new-password"
                className={`w-full px-4 py-3 bg-luxury-light/10 border rounded-lg text-luxury-light placeholder:text-luxury-light/40 focus:outline-none focus:ring-2 focus:border-transparent transition-all ${
                  passwordError
                    ? 'border-red-500/50 focus:ring-red-500'
                    : 'border-luxury-gold/30 focus:ring-luxury-gold'
                }`}
                required
              />
              {passwordError && (
                <p className="text-red-400 text-xs mt-1">{passwordError}</p>
              )}
            </div>

            {/* Checkboxes */}
            <div className="space-y-4">
              {/* Newsletter Checkbox */}
              <label className="flex items-start gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  name="subscribeNewsletter"
                  checked={formData.subscribeNewsletter}
                  onChange={handleChange}
                  className="w-4 h-4 mt-1 bg-luxury-light/10 border border-luxury-gold/30 rounded cursor-pointer accent-luxury-gold flex-shrink-0"
                />
                <span className="text-luxury-light/70 text-xs leading-relaxed">
                  Chci odebírat newsletter s novinkami a slevami
                </span>
              </label>

              {/* Terms Checkbox */}
              <label className="flex items-start gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  name="agreeTerms"
                  checked={formData.agreeTerms}
                  onChange={handleChange}
                  className="w-4 h-4 mt-1 bg-luxury-light/10 border border-luxury-gold/30 rounded cursor-pointer accent-luxury-gold flex-shrink-0"
                  required
                />
                <span className="text-luxury-light/70 text-xs leading-relaxed">
                  Souhlasím s{' '}
                  <Link href="/terms" className="text-luxury-gold hover:text-yellow-300 transition-colors">
                    obchodními podmínkami
                  </Link>
                  {' '}
                  <span className="text-red-400">*</span>
                </span>
              </label>

              {/* Privacy Checkbox */}
              <label className="flex items-start gap-3 cursor-pointer">
                <input
                  type="checkbox"
                  name="agreePrivacy"
                  checked={formData.agreePrivacy}
                  onChange={handleChange}
                  className="w-4 h-4 mt-1 bg-luxury-light/10 border border-luxury-gold/30 rounded cursor-pointer accent-luxury-gold flex-shrink-0"
                  required
                />
                <span className="text-luxury-light/70 text-xs leading-relaxed">
                  Souhlasím s{' '}
                  <Link href="/privacy" className="text-luxury-gold hover:text-yellow-300 transition-colors">
                    podmínkami ochrany osobních údajů
                  </Link>
                  {' '}
                  <span className="text-red-400">*</span>
                </span>
              </label>
            </div>

            {/* Submit Button */}
            <button
              type="submit"
              disabled={isLoading}
              className="w-full py-3 bg-luxury-gold hover:bg-yellow-400 text-luxury-dark font-bold rounded-lg transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed text-lg mt-2"
            >
              {isLoading ? 'Registruji...' : 'Vytvořit účet'}
            </button>
          </form>

          {/* Divider */}
          <div className="my-6 flex items-center gap-4">
            <div className="flex-1 h-px bg-luxury-gold/20"></div>
            <span className="text-luxury-light/50 text-sm">nebo</span>
            <div className="flex-1 h-px bg-luxury-gold/20"></div>
          </div>

          {/* Login Link */}
          <div className="text-center">
            <p className="text-luxury-light/70 text-sm">
              Již máte účet?{' '}
              <Link href="/login" className="text-luxury-gold hover:text-yellow-300 font-semibold transition-colors">
                Přihlaste se
              </Link>
            </p>
          </div>
        </div>
      </div>

    </div>
    </>
  );
};

export default Register;
