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

export function VerifyEmailContent() {
  const navigate = useNavigate();
  const location = useLocation();
  const { t } = useTranslation();
  const email = location.state?.email || 'seu@email.com';
  const [isResending, setIsResending] = useState(false);
  const [resendSuccess, setResendSuccess] = useState(false);

  const handleResend = async () => {
    setIsResending(true);
    setResendSuccess(false);
    await new Promise(resolve => setTimeout(resolve, 1500));
    setIsResending(false);
    setResendSuccess(true);
    setTimeout(() => setResendSuccess(false), 3000);
  };

  return (
    <AuthPageShell
      imageSrc="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format"
      imageAlt={t('verifyEmail.heroImageAlt')}
    >
      <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={provider => console.log(`Login com ${provider}`)} />
    </AuthPageShell>
  );
}