import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { XerticaLogo } from '../../brand/xertica-logo';
import { AuthPageShell, SocialLoginButtons } from '../../blocks/auth';
import { ArrowLeft, Mail, CheckCircle2 } from 'lucide-react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useBrandColors } from '../../../contexts/BrandColorsContext';

/**
 * Email Verification Page component.
 *
 * @description
 * An informative screen shown after a password reset request. It instructs
 * the user to check their email and provides a "Resend email" feature.
 * Includes the same consistent layout as the other auth pages, including the
 * theme-conditional isotype/hero-image left panel.
 *
 * @ai-rules
 * 1. Data Source: It retrieves the email from the router's `location.state`.
 * 2. Visual Feedback: Displays a temporary success message upon successful resale of the verification email.
 * 3. Navigation: Includes a link to return to the `LoginPage`.
 */
export function VerifyEmailPage() {
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation();
  const { currentTheme } = useBrandColors();
  const email = location.state?.email || 'your@email.com';
  const [isResending, setIsResending] = useState(false);
  const [resendSuccess, setResendSuccess] = useState(false);

  const handleResend = async () => {
    setIsResending(true);
    setResendSuccess(false);

    // Simulate email resending
    await new Promise(resolve => setTimeout(resolve, 1500));

    setIsResending(false);
    setResendSuccess(true);

    // Remove success message after 3 seconds
    setTimeout(() => setResendSuccess(false), 3000);
  };

  const handleSocialLogin = (_provider: string) => {
    // Wire your SSO/social provider integration here
  };

  const content = (
    <>
      <div className="text-center">
        <div className="flex items-center justify-center mb-4">
          <XerticaLogo className="h-12 w-auto text-primary dark:text-foreground" variant="theme" />
        </div>

        <div className="flex items-center justify-center mb-4">
          <div className="p-4 bg-primary/10 rounded-[var(--radius)]">
            <Mail className="w-12 h-12 text-primary" />
          </div>
        </div>

        <h2 className="text-sm text-muted-foreground">{t('verifyEmail.heading')}</h2>
        <p className="mt-2 text-muted-foreground">{t('verifyEmail.instructionsSent')}</p>
        <p className="mt-1 text-primary">{email}</p>
      </div>

      <div className="bg-accent rounded-[var(--radius)] p-4 space-y-3">
        <p className="text-muted-foreground">{t('verifyEmail.instructions')}</p>
        <div className="flex items-start gap-2 text-muted-foreground">
          <CheckCircle2 className="w-4 h-4 mt-0.5 flex-shrink-0 text-[var(--chart-2)]" />
          <span className="text-sm">{t('verifyEmail.checkSpam')}</span>
        </div>
      </div>

      {resendSuccess && (
        <div className="bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 rounded-[var(--radius)] p-3 flex items-center gap-2">
          <CheckCircle2 className="w-5 h-5 text-[var(--chart-2)] flex-shrink-0" />
          <span className="text-sm text-[var(--chart-2)]">{t('verifyEmail.resentSuccess')}</span>
        </div>
      )}

      <div className="space-y-3">
        <p className="text-center text-muted-foreground">{t('verifyEmail.notReceived')}</p>
        <Button variant="outline" className="w-full" onClick={handleResend} disabled={isResending}>
          {isResending ? t('verifyEmail.resending') : t('verifyEmail.resend')}
        </Button>

        <Button
          type="button"
          onClick={() => navigate('/login')}
          variant="outline"
          className="w-full text-muted-foreground hover:text-foreground"
        >
          <ArrowLeft className="w-4 h-4 mr-2" />
          {t('verifyEmail.backToLogin')}
        </Button>
      </div>

      <SocialLoginButtons onSocialLogin={handleSocialLogin} />
    </>
  );

  return currentTheme === 'xertica' ? (
    <AuthPageShell leftPanel="isotype">{content}</AuthPageShell>
  ) : (
    <AuthPageShell
      imageSrc="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format"
      imageAlt={t('verifyEmail.heroImageAlt')}
    >
      {content}
    </AuthPageShell>
  );
}