import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import axios from 'axios';
import { useAuth } from '../../modules/auth';
import { Button } from '../../components/ui';

const loginSchema = z.object({
  email: z.string().min(1, 'E-mail é obrigatório').email('E-mail inválido'),
  password: z.string().min(1, 'Senha é obrigatória'),
});

type LoginFormData = z.infer<typeof loginSchema>;

export function LoginPage() {
  const { login } = useAuth();
  const navigate = useNavigate();
  const [apiError, setApiError] = useState<string | null>(null);

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
  });

  async function onSubmit(data: LoginFormData) {
    setApiError(null);

    try {
      await login(data.email, data.password);
      navigate('/', { replace: true });
    } catch (err) {
      if (axios.isAxiosError(err)) {
        const status = err.response?.status;
        if (status === 401) {
          setApiError('E-mail ou senha incorretos');
        } else if (status === 403) {
          setApiError('Usuário inativo');
        } else {
          setApiError('Erro ao realizar login. Tente novamente.');
        }
      } else {
        setApiError('Erro ao realizar login. Tente novamente.');
      }
    }
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-[#0B1F2A]">
      <div className="w-full max-w-sm rounded-lg bg-[#0F2A38] p-8">
        <div className="mb-8 text-center">
          <img src="/logo/logo-full.png" alt="ISIS" className="mx-auto h-12" />
          <p className="mt-1 text-small text-text-secondary">Sistema de Gestão</p>
        </div>

        <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
          <div>
            <label htmlFor="email" className="mb-1 block text-small text-text-secondary">
              E-mail
            </label>
            <input
              id="email"
              type="email"
              placeholder="seu@email.com"
              {...register('email')}
              className="w-full rounded border border-white/10 bg-[#0B1F2A] px-3 py-2 text-body text-text-primary placeholder:text-text-muted focus:border-isis-blue focus:outline-none"
            />
            {errors.email && <p className="mt-1 text-small text-red-400">{errors.email.message}</p>}
          </div>

          <div>
            <label htmlFor="password" className="mb-1 block text-small text-text-secondary">
              Senha
            </label>
            <input
              id="password"
              type="password"
              placeholder="••••••••"
              {...register('password')}
              className="w-full rounded border border-white/10 bg-[#0B1F2A] px-3 py-2 text-body text-text-primary placeholder:text-text-muted focus:border-isis-blue focus:outline-none"
            />
            {errors.password && (
              <p className="mt-1 text-small text-red-400">{errors.password.message}</p>
            )}
          </div>

          {apiError && <p className="text-small text-red-400">{apiError}</p>}

          <Button type="submit" loading={isSubmitting} className="w-full">
            {isSubmitting ? 'Entrando...' : 'Entrar'}
          </Button>
        </form>

        <div className="mt-4 text-center">
          <Link to="/esqueci-senha" className="text-small text-isis-blue hover:underline">
            Esqueceu sua senha?
          </Link>
        </div>
      </div>
    </div>
  );
}