"use client";

import { useEffect, useState, type FormEvent } from "react";
import Link from "next/link";

import { CheckCircle2 } from "lucide-react";

import { authApi } from "@/api/auth.api";
import { Button } from "@/components/common/Button";
import { FormField } from "@/components/app/FormField";
import { PASSWORD_RESET_TOKEN_KEY } from "@/constants/auth";
import { isApiError } from "@/lib/apiError";
import { useTranslation } from "@/hooks/useTranslation";

const MIN_PASSWORD = 8;

export default function ResetPasswordPage() {
  const { t } = useTranslation();
  const [token, setToken] = useState<string | null>(null);
  const [hydrated, setHydrated] = useState(false);
  const [pw, setPw] = useState("");
  const [confirm, setConfirm] = useState("");
  const [errors, setErrors] = useState<{ pw?: string; confirm?: string }>({});
  const [formError, setFormError] = useState("");
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);

  // The verified reset token is handed over from the forgot-password flow.
  useEffect(() => {
    setToken(sessionStorage.getItem(PASSWORD_RESET_TOKEN_KEY));
    setHydrated(true);
  }, []);

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    const next: typeof errors = {};
    if (!pw) next.pw = t("app.auth.errors.passwordRequired");
    else if (pw.length < MIN_PASSWORD) next.pw = t("app.auth.errors.passwordShort");
    if (pw !== confirm) next.confirm = t("app.auth.errors.passwordMismatch");
    setErrors(next);
    if (Object.keys(next).length > 0) return;
    if (!token) return;

    setLoading(true);
    setFormError("");
    try {
      await authApi.forgotReset({ token, password: pw, password_confirmation: confirm });
      sessionStorage.removeItem(PASSWORD_RESET_TOKEN_KEY);
      setDone(true);
    } catch (err) {
      if (isApiError(err) && err.kind === "validation" && err.fieldErrors) {
        setErrors({ pw: err.fieldError("password"), confirm: err.fieldError("password_confirmation") });
      } else {
        setFormError(isApiError(err) ? err.message : t("app.auth.errors.generic"));
      }
      setLoading(false);
    }
  }

  if (done) {
    return (
      <div className="text-center">
        <span className="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-accent-100 to-accent-50 text-accent-600 dark:from-accent-500/20 dark:to-accent-500/5 dark:text-accent-300">
          <CheckCircle2 className="h-6 w-6" />
        </span>
        <h1 className="mt-6 text-2xl font-bold text-slate-900 dark:text-white">
          {t("app.auth.reset.successTitle")}
        </h1>
        <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
          {t("app.auth.reset.successBody")}
        </p>
        <Link
          href="/login"
          className="mt-8 inline-flex items-center justify-center rounded-full bg-brand-600 px-6 py-3 text-sm font-semibold text-white shadow-soft transition hover:bg-brand-700"
        >
          {t("app.auth.reset.signIn")}
        </Link>
      </div>
    );
  }

  // No token in this session → the flow wasn't completed or the link is stale.
  if (hydrated && !token) {
    return (
      <div className="text-center">
        <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
          {t("app.auth.reset.expiredTitle")}
        </h1>
        <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
          {t("app.auth.reset.expiredBody")}
        </p>
        <Link
          href="/forgot-password"
          className="mt-8 inline-flex items-center justify-center rounded-full bg-brand-600 px-6 py-3 text-sm font-semibold text-white shadow-soft transition hover:bg-brand-700"
        >
          {t("app.auth.reset.requestNew")}
        </Link>
      </div>
    );
  }

  return (
    <div>
      <h1 className="text-2xl font-bold text-slate-900 dark:text-white sm:text-3xl">
        {t("app.auth.reset.title")}
      </h1>
      <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">
        {t("app.auth.reset.subtitle")}
      </p>

      {formError && (
        <p
          role="alert"
          className="mt-6 rounded-xl bg-rose-50 px-4 py-3 text-sm font-medium text-rose-700 dark:bg-rose-500/10 dark:text-rose-300"
        >
          {formError}
        </p>
      )}

      <form noValidate onSubmit={onSubmit} className="mt-8 space-y-4">
        <FormField
          label={t("app.auth.reset.password")}
          type="password"
          autoComplete="new-password"
          value={pw}
          onChange={(e) => setPw(e.target.value)}
          error={errors.pw}
          required
        />
        <FormField
          label={t("app.auth.reset.confirmPassword")}
          type="password"
          autoComplete="new-password"
          value={confirm}
          onChange={(e) => setConfirm(e.target.value)}
          error={errors.confirm}
          required
        />
        <Button type="submit" size="md" loading={loading} className="w-full font-bold">
          {loading ? t("app.auth.reset.submitting") : t("app.auth.reset.submit")}
        </Button>
      </form>
    </div>
  );
}