"use client";

import { useState } from "react";
import { useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { Loader2 } from "lucide-react";
import { Link, useRouter } from "@/i18n/navigation";
import { z } from "zod";
import AuthLayout from "@/components/auth/AuthLayout";
import PasswordInput from "@/components/auth/PasswordInput";
import Button from "@/components/ui/Button";
import { readApiJson, toastError, toastPromise } from "@/lib/toast";

export default function ResetPasswordForm() {
  const t = useTranslations("auth");
  const router = useRouter();
  const searchParams = useSearchParams();
  const token = searchParams.get("token") ?? "";

  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [loading, setLoading] = useState(false);

  const schema = z
    .object({
      password: z.string().min(1, t("passwordRequired")).min(6, t("passwordMinLength")),
      confirm: z.string().min(1, t("passwordRequired")),
    })
    .refine((data) => data.password === data.confirm, {
      message: t("passwordMismatch"),
      path: ["confirm"],
    });

  if (!token) {
    return (
      <AuthLayout title={t("resetPasswordTitle")} subtitle={t("invalidResetLink")}>
        <div className="space-y-4 text-center">
          <p className="text-sm text-[var(--text-muted)]">{t("invalidResetLinkHint")}</p>
          <Link
            href="/forgot-password"
            className="inline-flex cursor-pointer text-sm font-medium text-[var(--accent)] transition-colors hover:text-[var(--accent-hover)]"
          >
            {t("requestNewLink")}
          </Link>
        </div>
      </AuthLayout>
    );
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    const parsed = schema.safeParse({ password, confirm });
    if (!parsed.success) {
      const message = parsed.error.issues[0]?.message ?? t("passwordMismatch");
      toastError(message);
      return;
    }

    setLoading(true);
    try {
      await toastPromise(
        readApiJson(
          await fetch("/api/auth/reset-password", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ token, password: parsed.data.password }),
          }),
          t("invalidResetLink")
        ),
        {
          loading: t("updatingPassword"),
          success: t("passwordResetSuccess"),
          error: (err) =>
            err instanceof Error ? err.message : t("networkError"),
        }
      );
      router.push("/login?reset=true");
      router.refresh();
    } catch {
      // surfaced via toast
    } finally {
      setLoading(false);
    }
  }

  return (
    <AuthLayout title={t("resetPasswordTitle")} subtitle={t("resetPasswordSubtitle")}>
      <form onSubmit={handleSubmit} className="space-y-5" noValidate>
        <PasswordInput
          label={t("newPassword")}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder={t("passwordMinPlaceholder")}
          disabled={loading}
          autoComplete="new-password"
        />
        <PasswordInput
          label={t("confirmPassword")}
          value={confirm}
          onChange={(e) => setConfirm(e.target.value)}
          placeholder={t("repeatPassword")}
          disabled={loading}
          autoComplete="new-password"
        />

        <Button type="submit" disabled={loading} className="w-full" size="lg">
          {loading ? (
            <>
              <Loader2 className="h-4 w-4 animate-spin" />
              {t("updatingPassword")}
            </>
          ) : (
            t("updatePassword")
          )}
        </Button>
      </form>
    </AuthLayout>
  );
}