'use client';

import { useEffect, useState } from 'react';
import { useSearchParams } from 'next/navigation';
import Link from 'next/link';
import axios from 'axios';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';

type Status = 'verifying' | 'success' | 'error';

export default function VerifyEmailPage() {
  const searchParams = useSearchParams();
  const token = searchParams.get('token');

  const [status, setStatus] = useState<Status>('verifying');
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (!token) {
      setStatus('error');
      setMessage('No verification token found in the link.');
      return;
    }

    axios
      .get(`${API_URL}/api/auth/verify-email`, { params: { token } })
      .then((res) => {
        setStatus('success');
        setMessage(res.data.message || 'Email verified successfully. You can now sign in.');
      })
      .catch((err) => {
        setStatus('error');
        const msg =
          err?.response?.data?.error ||
          'This verification link is invalid or has expired. Please request a new one.';
        setMessage(msg);
      });
  }, [token]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-white px-6">
      <div className="w-full max-w-sm text-center">
        {status === 'verifying' && (
          <>
            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-purple-50 mb-6 animate-pulse">
              <svg viewBox="0 0 24 24" className="w-8 h-8 text-brand-purple fill-none stroke-current stroke-2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </div>
            <h1 className="text-2xl font-bold text-gray-900 mb-2">Verifying your email…</h1>
            <p className="text-gray-500 text-sm">Please wait a moment.</p>
          </>
        )}

        {status === 'success' && (
          <>
            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-50 mb-6">
              <svg viewBox="0 0 24 24" className="w-8 h-8 text-green-500 fill-none stroke-current stroke-2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h1 className="text-2xl font-bold text-gray-900 mb-2">Email verified!</h1>
            <p className="text-gray-500 text-sm mb-8">{message}</p>
            <Link
              href="/signin"
              className="inline-block bg-brand-purple hover:bg-purple-700 text-white font-semibold px-6 py-2.5 rounded-lg transition-colors text-sm"
            >
              Sign in to your account
            </Link>
          </>
        )}

        {status === 'error' && (
          <>
            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-50 mb-6">
              <svg viewBox="0 0 24 24" className="w-8 h-8 text-red-500 fill-none stroke-current stroke-2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10" />
                <path d="M12 8v4M12 16h.01" />
              </svg>
            </div>
            <h1 className="text-2xl font-bold text-gray-900 mb-2">Verification failed</h1>
            <p className="text-gray-500 text-sm mb-8">{message}</p>
            <Link
              href="/signin"
              className="inline-block text-brand-purple font-medium hover:underline text-sm"
            >
              Back to sign in
            </Link>
          </>
        )}
      </div>
    </div>
  );
}