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

/**
 * Forgot Password Page component.
 *
 * @description
 * A screen that allows users to request a password reset link via email.
 * Includes a side-panel (desktop) and alternative social login options
 * similar to the main Login page.
 *
 * @ai-rules
 * 1. Navigation: Successfully submitting the email triggers a navigation to `/verify-email`.
 * 2. Visuals: Keeps consistency with `LoginPage` in terms of layout and branding, including
 *    the theme-conditional isotype/hero-image left panel.
 */
export function ForgotPasswordPage() {
  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);

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

    // Navigate to verification screen
    navigate('/verify-email', { state: { email } });

    setIsLoading(false);
  };

  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>
        <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={handleSocialLogin} />
    </>
  );

  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>
  );
}