import React from 'react';
import { usePage, router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/mainWebsite';
import { Loader } from 'lucide-react';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
import { ADMIN_HOME_PATH } from '@/admin/constants';

const Success: React.FC = () => {
  const { auth } = usePage<{ auth: { user?: { email_verified_at?: string | null } } }>().props;
  const { t } = useTranslation('success');
  const { localizedPath } = useLocalizedRoutes();

  if (auth.user && auth.user.email_verified_at) {
    router.visit(ADMIN_HOME_PATH, { preserveState: false });

    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-50">
        <div className="text-center">
          <Loader className="animate-spin inline-block w-8 h-8 border border-2 border-blue-600 border-t-transparent rounded-full mx-auto mb-2" />
          <p className="text-gray-600">{t('redirecting')}</p>
        </div>
      </div>
    );
  }

  if (auth.user && !auth.user.email_verified_at) {
    return (
      <MarketingLayout title={t('verify_email')}>
        <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
          <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
            <div className="text-center">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">{t('verify_email')}</h2>
              <p className="text-gray-600 mb-6">{t('check_email')}</p>
              <form method="POST" action="/email/verification-notification">
                <button
                  type="submit"
                  className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition duration-300"
                >
                  {t('resend_verification')}
                </button>
              </form>
              <p className="mt-4 text-sm text-gray-600">
                {t('already_registered')}{' '}
                <a href={localizedPath('/login')} className="text-blue-600 hover:text-blue-500">
                  {t('login')}
                </a>
              </p>
            </div>
          </div>
        </div>
      </MarketingLayout>
    );
  }

  return (
    <MarketingLayout title={t('complete_purchase')}>
      <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
          <div className="text-center">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">{t('complete_purchase')}</h2>
            <p className="text-gray-600 mb-6">{t('login_to_continue')}</p>
            <a
              href={localizedPath('/login')}
              className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-md font-medium transition duration-300 block mb-2"
            >
              {t('login')}
            </a>
            <p className="text-sm text-gray-600">
              {t('no_account')}{' '}
              <a href={localizedPath('/register')} className="text-blue-600 hover:text-blue-500">
                {t('register')}
              </a>
            </p>
          </div>
        </div>
      </div>
    </MarketingLayout>
  );
};

Success.layout = (page: React.ReactNode) => page;

export default Success;