import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Head from 'next/head';

export default function VerifyEmail() {
  const router = useRouter();
  const { token } = router.query;
  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (!token) return;

    const verifyEmail = async () => {
      try {
        const res = await fetch('/api/auth/verify-email', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ token }),
        });

        const data = await res.json();

        if (res.ok) {
          setStatus('success');
          setMessage(data.message || 'E-mail byl úspěšně ověřen');
          setTimeout(() => {
            router.push('/login');
          }, 3000);
        } else {
          setStatus('error');
          setMessage(data.error || 'Ověření se nezdařilo');
        }
      } catch (error) {
        setStatus('error');
        setMessage('Došlo k chybě. Prosím zkuste znovu.');
      }
    };

    verifyEmail();
  }, [token, router]);

  return (
    <>
      <Head>
        <title>Ověření e-mailu | Vystříkejto.cz</title>
        <meta name="robots" content="noindex,nofollow,noarchive" />
      </Head>
      <div className="min-h-screen w-full bg-luxury-dark flex items-center justify-center px-4 pt-20 sm:pt-0">
        <div className="w-full max-w-md">
          {status === 'loading' && (
            <div className="text-center">
              <div className="flex justify-center mb-8">
                <svg
                  className="w-16 h-16 text-luxury-gold animate-spin"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                  ></circle>
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
              </div>
              <h1 className="text-3xl font-aptos font-black text-luxury-gold mb-3">
                Ověřování e-mailu
              </h1>
              <p className="text-luxury-light/70">
                Prosím chvíli počkejte...
              </p>
            </div>
          )}

          {status === 'success' && (
            <div className="text-center">
              <div className="flex justify-center mb-8">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-luxury-gold/20 border border-luxury-gold/40">
                  <svg
                    className="w-8 h-8 text-luxury-gold"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                </div>
              </div>
              <h1 className="text-3xl font-aptos font-black text-luxury-gold mb-4">
                E-mail ověřen!
              </h1>
              <p className="text-luxury-light/80 mb-2">
                Váš e-mail byl úspěšně ověřen.
              </p>
              <p className="text-luxury-light/50 text-sm mb-8">
                Za 3 sekundy vás přesměrujeme na přihlášení...
              </p>
              <Link href="/login">
                <button className="w-full py-3 bg-luxury-gold hover:bg-yellow-400 text-luxury-dark font-bold font-aptos text-lg rounded-lg transition-colors duration-300">
                  Přejít na přihlášení
                </button>
              </Link>
            </div>
          )}

          {status === 'error' && (
            <div className="text-center">
              <div className="flex justify-center mb-8">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-500/20 border border-red-500/40">
                  <svg
                    className="w-8 h-8 text-red-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                </div>
              </div>
              <h1 className="text-3xl font-aptos font-black text-luxury-gold mb-4">
                Chyba ověření
              </h1>
              <p className="text-luxury-light/80 mb-6">
                {message}
              </p>
              <div className="flex flex-col gap-3">
                <Link href="/register">
                  <button className="w-full py-3 bg-luxury-gold hover:bg-yellow-400 text-luxury-dark font-bold font-aptos text-lg rounded-lg transition-colors duration-300">
                    Registrovat se znovu
                  </button>
                </Link>
                <Link href="/">
                  <button className="w-full py-3 bg-luxury-light/10 hover:bg-luxury-light/20 text-luxury-light font-bold font-aptos text-lg rounded-lg border border-luxury-gold/30 transition-colors duration-300">
                    Domovská stránka
                  </button>
                </Link>
              </div>
            </div>
          )}
        </div>
      </div>
    </>
  );
}
