"use client";

import { useActionState, useTransition } from "react";
import { useTranslations } from "next-intl";
import { requestAccountDeletionAction, cancelAccountDeletionRequestAction } from "@/lib/actions/accountDeletion";
import { Field } from "@/components/auth/RegisterForm";

export function AccountDeletionPanel({ locale, deletionRequested }: { locale: string; deletionRequested: boolean }) {
  const t = useTranslations("auth");
  const [state, formAction, pending] = useActionState(requestAccountDeletionAction, {});
  const [cancelPending, startCancel] = useTransition();

  if (deletionRequested) {
    return (
      <div className="border border-amber-400/30 rounded-2xl p-5">
        <p className="text-sm text-amber-400 mb-3">{t("deleteAccountPending")}</p>
        <button
          type="button"
          disabled={cancelPending}
          onClick={() => startCancel(async () => {
            await cancelAccountDeletionRequestAction();
          })}
          className="text-xs border border-white/30 rounded-lg px-3.5 py-1.5 hover:border-white disabled:opacity-50 transition-colors"
        >
          {t("deleteAccountCancelButton")}
        </button>
      </div>
    );
  }

  if (state.requested) {
    return (
      <div className="border border-amber-400/30 rounded-2xl p-5">
        <p className="text-sm text-amber-400">{t("deleteAccountPending")}</p>
      </div>
    );
  }

  return (
    <form action={formAction} className="border border-red-500/25 rounded-2xl p-5 flex flex-col gap-3">
      <input type="hidden" name="locale" value={locale} />
      <p className="text-xs uppercase tracking-[0.1em] text-red-400/80">{t("deleteAccountTitle")}</p>
      <p className="text-xs text-[var(--rk-ink-muted)]">{t("deleteAccountWarning")}</p>
      <Field label={t("twoFactorPasswordConfirm")} name="password" type="password" autoComplete="current-password" required />
      {state.error && <p className="text-sm text-red-400">{state.error}</p>}
      <button
        type="submit"
        disabled={pending}
        className="self-start text-xs border border-red-500/40 text-red-400 rounded-lg px-4 py-2 uppercase tracking-[0.15em] hover:border-red-400 hover:bg-red-500/10 disabled:opacity-50 transition-colors"
      >
        {pending ? "…" : t("deleteAccountButton")}
      </button>
    </form>
  );
}