'use client';

import { useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { useSearchParams, usePathname } from 'next/navigation';
import Link from 'next/link';
import { api } from '@/lib/api';

export default function VerifyEmailPage() {
  const t = useTranslations('Auth');
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const locale = pathname.startsWith('/en') ? 'en' : 'vi';
  const [message, setMessage] = useState<string>('');
  const [error, setError] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const token = searchParams.get('token');
    if (!token) {
      setError(t('verifyEmailError'));
      setLoading(false);
      return;
    }

    api
      .get(`/auth/verify-email?token=${encodeURIComponent(token)}`)
      .then((response) => {
        setMessage(response.data.message || t('verifyEmailSuccess'));
      })
      .catch(() => {
        setError(t('verifyEmailError'));
      })
      .finally(() => {
        setLoading(false);
      });
  }, [searchParams, t]);

  return (
    <div className="min-h-screen bg-[#0f1117] flex items-center justify-center p-4">
      <div className="w-full max-w-md rounded-2xl border border-white/10 bg-white/5 backdrop-blur p-8 shadow-2xl text-center">
        <h1 className="text-3xl font-black text-white mb-4">{t('verifyEmail')}</h1>
        <p className="text-gray-300 mb-6">
          {loading ? t('verifying') : error ? error : message}
        </p>
        {!loading && (
          <Link href={`/${locale}/auth/login`} className="inline-flex items-center justify-center rounded-full bg-violet-600 px-6 py-3 text-sm font-semibold text-white hover:bg-violet-500">
            {t('backToLogin')}
          </Link>
        )}
      </div>
    </div>
  );
}