"use client";
import { useForm } from "react-hook-form";
import { signin } from "./actions"; // optional: remove if you use your own API
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { toast, Bounce } from "react-toastify";
import { useRouter } from "next/navigation";

type FormData = {
  name: string;
  password: string;
};

export default function SignInPage() {
  const { register, handleSubmit, formState } = useForm<FormData>({
    mode: "onSubmit",
  });
  const router = useRouter();

  async function onSubmit(data: FormData) {
    // Example with next-auth credential sign in (optional)
    // If you use your own API, replace this block with a fetch to /api/auth/signin
    const res = await signin(data.name, data.password);
    if (res) {
      router.push("/dashboard");
    } else {
      toast.error("Falsche Anmeldedaten!", {
        position: "bottom-right",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: false,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "light",
        transition: Bounce,
      });
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Anmelden</CardTitle>
          <CardDescription>
            Nutze deinen Namen und Passwort zum anmelden.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form
            id="signin-form"
            onSubmit={handleSubmit(onSubmit)}
            className="space-y-4"
          >
            <div>
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                placeholder="Dein Name"
                suppressHydrationWarning={true}
                {...register("name", { required: "Name is required" })}
                aria-invalid={Boolean(formState.errors.name)}
              />
              {formState.errors.name && (
                <p className="text-sm text-red-600 mt-1">
                  {formState.errors.name.message}
                </p>
              )}
            </div>
            <div>
              <Label htmlFor="password">Password</Label>
              <Input
                id="password"
                type="password"
                placeholder="Dein Passwort"
                suppressHydrationWarning={true}
                {...register("password", {
                  required: "Password is required",
                  minLength: 4,
                })}
                aria-invalid={Boolean(formState.errors.password)}
              />
              {formState.errors.password && (
                <p className="text-sm text-red-600 mt-1">
                  {formState.errors.password.type === "minLength"
                    ? "Password must be at least 6 characters"
                    : formState.errors.password.message}
                </p>
              )}
            </div>
          </form>
        </CardContent>
        <CardFooter>
          <div className="w-full flex justify-end">
            <Button
              form="signin-form"
              type="submit"
              disabled={formState.isSubmitting}
            >
              {formState.isSubmitting ? "Anmelden..." : "Anmelden"}
            </Button>
          </div>
        </CardFooter>
      </Card>
    </div>
  );
}