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

interface LoginContentProps {
  onLogin: (email: string, password: string) => boolean;
}

export function LoginContent({ onLogin }: LoginContentProps) {
  const navigate = useNavigate();
  const { t } = useTranslation();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);
    await new Promise(resolve => setTimeout(resolve, 1000));
    if (!onLogin(email, password)) setError(t('login.errorFillFields'));
    setIsLoading(false);
  };

  return (
    <AuthPageShell
      imageSrc="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format"
      imageAlt={t('login.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>
        <h2 className="text-sm text-muted-foreground">{t('login.heading')}</h2>
      </div>

      <form className="space-y-6" onSubmit={handleSubmit}>
        <div className="space-y-2">
          <Label htmlFor="email">{t('login.emailLabel')}</Label>
          <Input
            id="email"
            name="email"
            type="email"
            required
            className="w-full"
            placeholder={t('login.emailPlaceholder')}
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">{t('login.passwordLabel')}</Label>
          <Input
            id="password"
            name="password"
            type="password"
            required
            className="w-full"
            placeholder="••••••••"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
        </div>
        {error && <div className="text-destructive text-sm text-center">{error}</div>}
        <Button type="submit" className="w-full" disabled={isLoading}>
          {isLoading ? t('login.submitting') : t('login.submit')}
        </Button>
        <div className="text-center">
          <button
            type="button"
            onClick={() => navigate('/forgot-password')}
            className="text-sm text-primary hover:opacity-80 transition-colors"
          >
            {t('login.forgotPassword')}
          </button>
        </div>
      </form>

      <SocialLoginButtons
        onSocialLogin={provider => {
          console.log(`Login com ${provider}`);
          onLogin('social@user.com', 'social-auth');
        }}
      />
    </AuthPageShell>
  );
}