'use client';

import Image from 'next/image';
import { cn } from '@/lib/utils';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { UserLoginService } from '@/packages/administrativo/services/User/UserLoginService';
import { useForm } from 'react-hook-form';
import { useState } from 'react';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../../../../components/ui/form';
import LoadingButton from '@/shared/components/loadingButton/LoadingButton';
import { Button } from '../../../../components/ui/button';
import { UserLoginSchema } from '@/packages/administrativo/schemas/User/UserLoginSchema';

type FormValues = z.infer<typeof UserLoginSchema>;

export function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {
  const [loading, setLoading] = useState(false);

  const form = useForm<FormValues>({
    resolver: zodResolver(UserLoginSchema),
    defaultValues: {
      email: '',
      password: '',
    },
  });

  // onSubmit agora recebe o evento do form através do handleSubmit
  const onSubmit = async (values: FormValues) => {
    // Ativa o estado de loading do botão
    setLoading(true);

    // Realiza o login
    await UserLoginService(values);

    // Removo o estado de loading do botão
    setLoading(false);
  };

  return (
    <div className={cn('flex flex-col gap-6', className)} {...props}>
      <Card className="overflow-hidden p-0">
        <CardContent className="grid p-0 md:grid-cols-2">
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-3 p-6 md:p-8">
              <div className="mb-6 flex flex-col items-center text-center">
                <h1 className="text-2xl font-bold">Bem vindo de volta!</h1>
                <p className="text-muted-foreground text-balance">
                  Entre na sua conta Orius Tecnologia.
                </p>
              </div>
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Login</FormLabel>
                    <FormControl>
                      <Input type="text" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Senha</FormLabel>
                    <FormControl>
                      <Input type="password" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {/* Botão de loading */}
              <LoadingButton
                text="Entrar"
                textLoading="Aguarde..."
                type="submit"
                loading={loading}
              />
              <div className="after:border-border relative my-4 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
                <span className="bg-card text-muted-foreground relative z-10 px-2">
                  Ou entre em contato
                </span>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <Button variant="outline" type="button" className="w-full">
                  Chamar no Whatsapp
                </Button>
                <Button variant="outline" type="button" className="w-full">
                  Chamar no Local
                </Button>
              </div>
            </form>
          </Form>
          <div className="bg-brand relative hidden items-center justify-center md:flex">
            <Image
              src="/images/logo-login.svg"
              alt="Logo"
              width={300}
              height={300}
              className="object-contain dark:brightness-[0.2] dark:grayscale"
            />
          </div>
        </CardContent>
      </Card>
      <div className="text-muted-foreground text-center text-xs">
        Ao clicar você concorda com <a href="#">Nossos termos de serviços</a> e{' '}
        <a href="#">
          Políticas de Privacidade
        </a>.
      </div>
    </div>
  );
}