"use client";

import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";

// import { DashboardUser } from "@/routes";
import type { ErrorContext } from "@better-fetch/fetch";
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "sonner";
import type { z } from "zod";

import { Button } from "@/components/ui/button";
// import LoadingButton from "@/components/loading-button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";

import { signIn } from "@/lib/auth/auth-client";
import { signInSchema } from "@/lib/auth/schema";

export default function SignIn() {
  const router = useRouter();

  // const [pendingCredentials, setPendingCredentials] = useState(false);
  // const [pendingGithub, setPendingGithub] = useState(false);

  const form = useForm<z.infer<typeof signInSchema>>({
    resolver: zodResolver(signInSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const handleCredentialsSignIn = async (
    values: z.infer<typeof signInSchema>,
  ) => {
    await signIn.email(
      {
        email: values.email,
        password: values.password,
      },
      {
        onRequest: () => {
          // setPendingCredentials(true);
        },
        onSuccess: async () => {
          router.push("/post-login");
          router.refresh();
          toast.success("Inicio de sesión exitoso", {
            description: "Bienvenido de nuevo.",
          });
        },
        onError: (ctx: ErrorContext) => {
          toast.error("No se pudo iniciar sesión", {
            description:
              ctx.error.message ??
              "Verifica tus credenciales e inténtalo nuevamente.",
          });
        },
      },
    );
    // setPendingCredentials(false);
  };

  return (
    <div className="flex min-h-full items-center justify-center bg-slate-50 py-12">
      <div className="mx-auto flex w-full max-w-5xl flex-col justify-center gap-12 px-4 lg:flex-row lg:items-center">
        <section className="w-full space-y-6 lg:w-1/2">
          <p className="text-primary text-sm font-semibold tracking-[0.3em] uppercase">
            Admin Template
          </p>
          <h1 className="text-4xl font-bold text-slate-900 lg:text-5xl">
            Panel administrativo base para tu aplicación
          </h1>
          <p className="text-base leading-relaxed text-slate-600">
            Accede a un panel listo para usar con autenticación, gestión de
            usuarios y páginas de ejemplo. Personaliza las secciones según tu
            proyecto.
          </p>
        </section>

        <Card className="w-full max-w-md border-slate-200 shadow-md">
          <CardHeader>
            <CardTitle className="text-center text-2xl font-semibold text-slate-900">
              Inicia sesión
            </CardTitle>
          </CardHeader>
          <CardContent>
            <Form {...form}>
              <form
                onSubmit={form.handleSubmit(handleCredentialsSignIn)}
                className="space-y-6"
              >
                <FormField
                  control={form.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Correo institucional</FormLabel>
                      <FormControl>
                        <Input
                          type="email"
                          placeholder="nombre.apellido@ejemplo.com"
                          autoComplete="email"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                <FormField
                  control={form.control}
                  name="password"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Contraseña</FormLabel>
                      <FormControl>
                        <Input
                          type="password"
                          placeholder="Ingresa tu contraseña"
                          autoComplete="current-password"
                          {...field}
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />

                <Button className="w-full" type="submit">
                  Iniciar sesión
                </Button>
              </form>
            </Form>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}