import Link from "next/link";
import { completePasswordResetAction } from "@/app/actions/session";
import { AuthPageShell } from "@/components/auth-page-shell";
import { DismissibleBottomToast } from "@/components/dismissible-bottom-toast";
import { SubmitButton } from "@/components/submit-button";
import { redirectToCanonicalMailAuthHostIfNeeded } from "@/lib/auth";
import { toSearchString } from "@/lib/mail-urls";
import { getPasswordResetTokenStatus } from "@/lib/official-mail";

type ResetPasswordTokenPageProps = {
  params: Promise<{ token: string }>;
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
};

function pickParam(value: string | string[] | undefined) {
  return Array.isArray(value) ? value[0] : value;
}

export default async function ResetPasswordTokenPage({
  params,
  searchParams,
}: ResetPasswordTokenPageProps) {
  const { token } = await params;
  const query = searchParams ? await searchParams : {};
  await redirectToCanonicalMailAuthHostIfNeeded(
    `/reset-password/${encodeURIComponent(token)}`,
    toSearchString(query),
  );

  const resetToken = token.trim();
  const tokenStatus = await getPasswordResetTokenStatus(resetToken);
  const error = pickParam(query.error);
  const notice = error
    ? {
        tone: "error" as const,
        message:
          error === "required"
            ? "새 비밀번호와 비밀번호 확인을 모두 입력해주세요."
            : error === "password-mismatch"
              ? "비밀번호 확인이 일치하지 않습니다."
              : error === "invalid-token"
                ? "재설정 링크가 올바르지 않습니다."
                : error === "used-token"
                  ? "이미 사용된 재설정 링크입니다."
                  : error === "expired-token"
                    ? "재설정 링크가 만료되었습니다. 다시 요청해주세요."
                    : "비밀번호 재설정 중 오류가 발생했습니다.",
      }
    : null;

  return (
    <AuthPageShell
      title="새 비밀번호 설정"
      description="보조 이메일로 받은 링크에서 새 비밀번호를 바로 설정합니다."
    >
      <DismissibleBottomToast
        notice={notice}
        clearSearchParams={["error", "success", "details"]}
      />

      {tokenStatus.status === "valid" ? (
        <form action={completePasswordResetAction} className="space-y-4">
          <input type="hidden" name="token" value={resetToken} />

          <label className="block">
            <span className="mb-2 block text-[14px] font-medium text-[#6f7784]">
              새 비밀번호
            </span>
            <input
              required
              type="password"
              name="password"
              autoComplete="new-password"
              className="h-[54px] w-full rounded-[12px] border border-[#d7deea] px-4 text-[16px] text-[#101418] outline-none transition-colors focus:border-[#2f6df6]"
              placeholder="새 비밀번호 입력"
            />
          </label>

          <label className="block">
            <span className="mb-2 block text-[14px] font-medium text-[#6f7784]">
              새 비밀번호 확인
            </span>
            <input
              required
              type="password"
              name="passwordConfirm"
              autoComplete="new-password"
              className="h-[54px] w-full rounded-[12px] border border-[#d7deea] px-4 text-[16px] text-[#101418] outline-none transition-colors focus:border-[#2f6df6]"
              placeholder="새 비밀번호 다시 입력"
            />
          </label>

          <SubmitButton
            label="비밀번호 재설정 완료"
            pendingLabel="변경 중..."
            className="om-btn-primary h-[56px] w-full rounded-[12px] px-5 text-[18px] tracking-[-0.04em]"
          />
        </form>
      ) : (
        <div className="rounded-[16px] border border-[#dbe2ec] bg-[#f8fbff] px-5 py-5">
          <p className="text-[14px] leading-7 text-[#d9485c]">
            {tokenStatus.status === "used"
              ? "이미 사용된 재설정 링크입니다."
              : tokenStatus.status === "expired"
                ? "재설정 링크가 만료되었습니다. 비밀번호 찾기에서 새 링크를 요청해주세요."
                : "재설정 링크가 올바르지 않습니다."}
          </p>
          <div className="mt-4 text-[14px] text-[#5d6777]">
            <Link
              href="/reset-password"
              className="font-semibold text-[#2f6df6]"
            >
              비밀번호 찾기로 돌아가기
            </Link>
          </div>
        </div>
      )}
    </AuthPageShell>
  );
}