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

const ForgotPassword: NextPage = () => {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');
  const [successMessage, setSuccessMessage] = useState('');

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

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

      const data = await response.json();

      if (!response.ok) {
        setError(data.error || 'Odeslání se nezdařilo');
        toast.error(data.error || 'Odeslání se nezdařilo');
        return;
      }

      setSuccessMessage(data.message || 'E-mail s instrukcemi byl odeslán');
      toast.success(data.message || 'E-mail s instrukcemi byl odeslán');
      
      // Čistý formulář
      setEmail('');
      
      // Přesměr na login po 3 sekundách
      setTimeout(() => {
        router.push('/login');
      }, 3000);
    } catch (err) {
      setError('Odeslání se nezdařilo. Prosím zkuste znovu.');
      toast.error('Odeslání se nezdařilo');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <Head>
        <title>Zapomenuté heslo | Vystříkejto.cz</title>
        <meta name="robots" content="noindex,nofollow,noarchive" />
      </Head>
      <div className="min-h-screen w-full flex items-center justify-center bg-luxury-dark pt-16 sm:pt-20 md:pt-32 pb-8">
        <div className="w-full max-w-md mx-auto px-4">
          {/* Card Container */}
          <div className="bg-luxury-dark border border-luxury-gold/30 rounded-xl shadow-2xl p-8">
            {/* Header */}
            <div className="mb-8 text-center">
              <h1 className="text-4xl sm:text-5xl font-aptos font-black text-luxury-gold mb-2">
                Zapomenuté heslo
              </h1>
              <p className="text-luxury-light/70 text-sm">
                Zadejte svou e-mailovou adresu a pošleme vám instrukce pro reset hesla
              </p>
            </div>

            {/* Success Message */}
            {successMessage && (
              <div className="mb-6 p-4 bg-green-500/10 border border-green-500/30 rounded-lg">
                <p className="text-green-400 text-sm">{successMessage}</p>
              </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>
            )}

            {/* Form */}
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Email Input */}
              <div>
                <label htmlFor="email" className="block text-luxury-light text-sm font-medium mb-2">
                  E-mailová adresa <span className="text-red-400">*</span>
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  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
                  disabled={isLoading}
                />
              </div>

              {/* Info Box */}
              <div className="p-4 bg-blue-500/10 border border-blue-500/30 rounded-lg">
                <p className="text-blue-400 text-xs leading-relaxed">
                  Na vaši e-mailovou adresu Vám pošleme bezpečný odkaz pro reset hesla. Odkaz bude platný 24 hodin.
                </p>
              </div>

              {/* Submit Button */}
              <button
                type="submit"
                disabled={isLoading || !email}
                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"
              >
                {isLoading ? 'Odesílám...' : 'Odeslat instrukce'}
              </button>
            </form>

            {/* Divider */}
            <div className="my-8 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>

            {/* Links */}
            <div className="space-y-3 text-center">
              <div>
                <p className="text-luxury-light/70 text-sm">
                  Vzpomněli jste si na heslo?{' '}
                  <Link href="/login" className="text-luxury-gold hover:text-yellow-300 font-semibold transition-colors">
                    Přihlaste se
                  </Link>
                </p>
              </div>
              <div>
                <p className="text-luxury-light/70 text-sm">
                  Nemáte účet?{' '}
                  <Link href="/register" className="text-luxury-gold hover:text-yellow-300 font-semibold transition-colors">
                    Vytvořit účet
                  </Link>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ForgotPassword;
