import React, { useState } from 'react';
import { Button, Input, Label } from 'xertica-ui/ui';
import { XerticaLogo } from 'xertica-ui/brand';
import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { AuthPageShell, SocialLoginButtons } from 'xertica-ui/blocks';
import { useTranslation } from 'react-i18next';
import { useBrandColors } from 'xertica-ui/hooks';

export function ForgotPasswordContent() {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { currentTheme } = useBrandColors();
  const [email, setEmail] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    await new Promise(resolve => setTimeout(resolve, 1500));
    navigate('/verify-email', { state: { email } });
    setIsLoading(false);
  };

  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>
        <h2 className="text-sm text-muted-foreground">{t('forgotPassword.heading')}</h2>
        <p className="mt-2 text-muted-foreground">{t('forgotPassword.subheading')}</p>
      </div>

      <form className="space-y-6" onSubmit={handleSubmit}>
        <div className="form-group space-y-2">
          <Label htmlFor="email">{t('forgotPassword.emailLabel')}</Label>
          <Input
            id="email"
            name="email"
            type="email"
            required
            className="w-full"
            placeholder={t('forgotPassword.emailPlaceholder')}
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </div>
        <div className="space-y-3">
          <Button type="submit" className="w-full" disabled={isLoading}>
            {isLoading ? t('forgotPassword.submitting') : t('forgotPassword.submit')}
          </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('forgotPassword.backToLogin')}
          </Button>
        </div>
      </form>

      <SocialLoginButtons onSocialLogin={provider => console.log(`Login com ${provider}`)} />
    </>
  );

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