"use client";

import { Suspense, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/src/views/components/ui/card";

import { Input } from "@/src/views/components/ui/input";
import { Label } from "@/src/views/components/ui/label";
import { Button } from "@/src/views/components/ui/button";

import { zodResolver } from "@hookform/resolvers/zod";
import { resetPasswordSchema } from "@/src/schemas/ResetPasswordSchema";
import { ResetPassword } from "@/src/action/ResetPasswordAction";

interface FormValues {
  password: string;
  password_confirmation: string;
}

function ResetPasswordForm() {
  const searchParams = useSearchParams();
  const router = useRouter();

  const token = searchParams.get("token") || "";

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    resolver: zodResolver(resetPasswordSchema),
  });

  const [loading, setLoading] = useState(false);

  const onSubmit = async (data: FormValues) => {
    if (data.password !== data.password_confirmation) {
      toast.error("Passwords do not match");
      return;
    }

    const formData = new FormData();

    formData.append("token", token);
    formData.append("password", data.password);
    formData.append(
      "password_confirmation",
      data.password_confirmation
    );

    setLoading(true);

    const res = await ResetPassword(formData);

    setLoading(false);

    if (res?.success) {
      toast.success("Password reset successfully!");
      router.push("/sign-in");
    } else {
      toast.error("Failed to reset password");
    }
  };

  return (
    <Card className="w-full max-w-md shadow-lg">
      <CardHeader className="text-center">
        <CardTitle className="text-2xl">
          Reset Password
        </CardTitle>

        <CardDescription>
          Enter your new password below.
        </CardDescription>
      </CardHeader>

      <CardContent>
        <form
          onSubmit={handleSubmit(onSubmit)}
          className="flex flex-col gap-4"
        >
          <div>
            <Label htmlFor="password">
              New Password
            </Label>

            <Input
              id="password"
              type="password"
              {...register("password")}
            />

            {errors.password && (
              <p className="text-xs text-red-500">
                {errors.password.message}
              </p>
            )}
          </div>

          <div>
            <Label htmlFor="password_confirmation">
              Confirm Password
            </Label>

            <Input
              id="password_confirmation"
              type="password"
              {...register("password_confirmation")}
            />

            {errors.password_confirmation && (
              <p className="text-xs text-red-500">
                {errors.password_confirmation.message}
              </p>
            )}
          </div>

          <Button disabled={loading}>
            {loading
              ? "Resetting..."
              : "Reset Password"}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}

export default function ResetPasswordPage() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <Suspense fallback={<div>Loading...</div>}>
        <ResetPasswordForm />
      </Suspense>
    </div>
  );
}