/**
 * Email verification page — receives token from signup email link.
 *
 * ⚠️ AUTO-GENERATED BY PRISM - DO NOT EDIT
 */

import { useCallback, useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import { verifyEmail } from '../lib/authApi';

export default function VerifyEmail(): JSX.Element {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const token = searchParams.get('token');
  const { refreshUser } = useAuth();

  const [error, setError] = useState<string | null>(null);
  const [verifying, setVerifying] = useState(true);

  const verify = useCallback(async () => {
    if (!token) {
      setError('No verification token provided');
      setVerifying(false);
      return;
    }

    setVerifying(true);
    setError(null);

    try {
      const result = await verifyEmail(token);
      if (result.user) {
        await refreshUser();
        navigate('/', { replace: true });
      } else {
        navigate('/login', { replace: true });
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Invalid or expired verification link');
      setVerifying(false);
    }
  }, [token, refreshUser, navigate]);

  useEffect(() => {
    verify();
  }, [verify]);

  if (verifying) {
    return (
      <div className="min-h-screen bg-nordic-50 flex items-center justify-center py-12 px-4">
        <div className="w-full max-w-md mx-auto">
          <div className="bg-white rounded-lg shadow-lg p-8 text-center">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-nordic-600 mx-auto mb-4" />
            <p className="text-nordic-600">Verifying your email...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-nordic-50 flex items-center justify-center py-12 px-4">
      <div className="w-full max-w-md mx-auto">
        <div className="bg-white rounded-lg shadow-lg p-8 text-center">
          <h2 className="text-2xl font-bold text-nordic-800 mb-4">Verification Failed</h2>
          <p className="text-red-600 mb-6">{error}</p>
          <button
            onClick={() => navigate('/login')}
            className="bg-nordic-600 text-white py-2 px-4 rounded-md hover:bg-nordic-700 transition-colors"
          >
            Go to login
          </button>
        </div>
      </div>
    </div>
  );
}
