"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Card, Button, Input } from "@/components/ui/basic";
import { login } from "@/lib/auth";
const schema = z.object({
  username: z.string().min(1),
  password: z.string().min(1),
});
type Form = z.infer<typeof schema>;
export default function Login() {
  const router = useRouter();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<Form>({ resolver: zodResolver(schema) });
  async function onSubmit(v: Form) {
    try {
      await login(v.username, v.password);
      router.push("/dashboard");
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Login failed");
    }
  }
  return (
    <main className="grid min-h-screen place-items-center p-4">
      <Card className="w-full max-w-md">
        <h1 className="text-3xl font-semibold">Welcome back</h1>
        <p className="mb-6 text-zinc-400">
          Sign in to monitor your AI-NVR deployment.
        </p>
        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <Input placeholder="Username" {...register("username")} />
          {errors.username && (
            <p className="text-sm text-red-400">Username required</p>
          )}
          <Input
            placeholder="Password"
            type="password"
            {...register("password")}
          />
          {errors.password && (
            <p className="text-sm text-red-400">Password required</p>
          )}
          <Button disabled={isSubmitting} className="w-full">
            {isSubmitting ? "Signing in…" : "Sign in"}
          </Button>
        </form>
      </Card>
    </main>
  );
}