"use client";

import { useActionState, useEffect, useState } from "react";
import {
  requestFindIdAction,
  type FindIdActionState,
} from "@/app/actions/session";
import { useI18n } from "@/components/i18n-provider";
import { translateStaticUiText } from "@/lib/i18n-dictionaries";

const INITIAL_STATE: FindIdActionState = {
  status: "idle",
  message: "",
  hasSent: false,
};

export function FindIdForm() {
  const { locale, t } = useI18n();
  const [state, formAction, pending] = useActionState(
    requestFindIdAction,
    INITIAL_STATE,
  );
  const [recoveryEmail, setRecoveryEmail] = useState("");
  const [cooldown, setCooldown] = useState<{
    attemptId?: number;
    secondsRemaining: number;
  }>({ secondsRemaining: 0 });

  useEffect(() => {
    if (!state.attemptId || !state.retryAfterSeconds) {
      return;
    }

    const deadline = Date.now() + state.retryAfterSeconds * 1000;
    const updateCountdown = () => {
      setCooldown({
        attemptId: state.attemptId,
        secondsRemaining: Math.max(
          0,
          Math.ceil((deadline - Date.now()) / 1000),
        ),
      });
    };

    const timer = window.setInterval(updateCountdown, 250);
    return () => window.clearInterval(timer);
  }, [state.attemptId, state.retryAfterSeconds]);

  const secondsRemaining =
    cooldown.attemptId === state.attemptId
      ? cooldown.secondsRemaining
      : state.retryAfterSeconds ?? 0;
  const hasCooldown = Boolean(
    state.retryAfterSeconds && secondsRemaining > 0,
  );

  return (
    <>
      <form action={formAction} className="space-y-4" aria-busy={pending}>
        <label className="block">
          <span className="mb-2 block text-[13px] font-medium text-[#6f7784]">
            {t("signup.recovery")}
          </span>
          <input
            required
            type="email"
            name="recoveryEmail"
            value={recoveryEmail}
            autoComplete="email"
            readOnly={pending}
            onChange={(event) => setRecoveryEmail(event.target.value)}
            className="h-12 w-full rounded-[12px] border border-[#d7deea] px-4 text-[14px] text-[#101418] outline-none transition-colors placeholder:text-[#b4bdca] focus:border-[#2f6df6] focus:shadow-[0_0_0_4px_rgba(47,109,246,0.1)] read-only:bg-[#f8fafc] read-only:text-[#7f8999]"
            placeholder={t("auth.findId.recoveryPlaceholder")}
          />
        </label>

        <button
          type="submit"
          disabled={pending || Boolean(hasCooldown)}
          className="om-btn-primary h-12 w-full rounded-[12px] px-5 text-[14px] font-semibold disabled:cursor-not-allowed"
        >
          {pending
            ? t("signup.recovery.sending")
            : state.hasSent
              ? t("signup.recovery.resend")
              : t("auth.findId.submit")}
        </button>
      </form>

      <div aria-live="polite">
        {state.status === "success" ? (
          <div className="mt-4 text-[13px] leading-6 text-[#40577d]">
            <p className="font-semibold text-[#2f6df6]">
              {translateStaticUiText(locale, state.message)}
            </p>
            <p className="mt-1">
              {state.accountCount
                ? t("auth.findId.sentKnown", {
                    count: state.accountCount,
                    email:
                      state.maskedRecoveryEmail || t("auth.findId.inputEmail"),
                  })
                : t("auth.findId.sentUnknown", {
                    email:
                      state.maskedRecoveryEmail || t("auth.findId.inputEmail"),
                  })}
            </p>
          </div>
        ) : state.status === "error" && (!state.retryAfterSeconds || hasCooldown) ? (
          <p className="mt-4 text-[13px] font-medium leading-6 text-[#bd4052]">
            {hasCooldown
              ? t("auth.findId.retryAfter", { seconds: secondsRemaining })
              : translateStaticUiText(locale, state.message)}
          </p>
        ) : null}
      </div>
    </>
  );
}