"use client";

import { useEffect } from "react";
import { useActionState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { verifyMaintenancePreviewAction } from "@/lib/actions/maintenance";

export function MaintenancePage({ customMessage, previewEnabled }: { customMessage?: string; previewEnabled: boolean }) {
  const t = useTranslations("maintenance");
  const router = useRouter();
  const [state, formAction, pending] = useActionState(verifyMaintenancePreviewAction, {});

  // Nach richtigem Passwort steht das Bypass-Cookie schon serverseitig, ein
  // Refresh reicht, damit das Layout beim nächsten Render die echte Seite
  // statt der Wartungsseite zeigt — kein eigener Redirect nötig.
  useEffect(() => {
    if (state.success) router.refresh();
  }, [state.success, router]);

  return (
    <main className="rk-grain flex min-h-screen items-center justify-center px-6">
      <div className="rk-frame relative w-full max-w-xl px-12 py-16 text-center">
        <span className="rk-corner" data-pos="tl" />
        <span className="rk-corner" data-pos="tr" />
        <span className="rk-corner" data-pos="bl" />
        <span className="rk-corner" data-pos="br" />

        <h1 className="rk-wordmark text-2xl sm:text-3xl">{t("title")}</h1>
        <p className="mt-6 text-sm text-[var(--rk-ink-muted)]">
          {customMessage || t("body")}
        </p>

        {previewEnabled && (
          <form action={formAction} className="mt-8 flex flex-col items-center gap-3">
            <input
              type="password"
              name="password"
              placeholder={t("previewPasswordPlaceholder")}
              autoComplete="off"
              className="bg-transparent border border-white/15 rounded-lg px-3.5 py-2.5 text-sm text-center w-full max-w-xs focus:outline-none focus:border-white/50"
            />
            <button
              type="submit"
              disabled={pending}
              className="text-xs uppercase tracking-[0.15em] border border-white/30 rounded-lg px-4 py-2 hover:border-white disabled:opacity-50 transition-colors"
            >
              {t("previewSubmit")}
            </button>
            {state.error && <p className="text-xs text-red-400">{state.error}</p>}
          </form>
        )}
      </div>
    </main>
  );
}