"use client";

import { useEffect, useRef } from "react";

type Props = {
  open: boolean;
  title: string;
  message: string;
  acknowledgeLabel?: string;
  onAcknowledge: () => void;
};

export default function SubmissionSuccessModal({
  open,
  title,
  message,
  acknowledgeLabel = "OK",
  onAcknowledge,
}: Props) {
  const onAckRef = useRef(onAcknowledge);
  onAckRef.current = onAcknowledge;

  useEffect(() => {
    if (!open) return;
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") onAckRef.current();
    };
    window.addEventListener("keydown", onKeyDown);
    return () => {
      document.body.style.overflow = prevOverflow;
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [open]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center p-4">
      <button
        type="button"
        className="absolute inset-0 cursor-default bg-black/75 backdrop-blur-sm"
        aria-label="Close"
        onClick={() => onAckRef.current()}
      />
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="submission-success-title"
        className="relative z-10 w-full max-w-md rounded-xl border border-primary/35 bg-[rgba(15,15,15,0.95)] backdrop-blur-xl px-8 py-10 shadow-[0_0_48px_rgba(197,160,89,0.18)] text-center border-t border-t-primary/20"
      >
        <div className="flex justify-center mb-5">
          <span className="material-symbols-outlined text-primary text-[56px]" style={{ fontVariationSettings: "'FILL' 1" }}>
            check_circle
          </span>
        </div>
        <h2 id="submission-success-title" className="font-[var(--font-display-lg)] text-xl sm:text-2xl text-primary tracking-tight mb-3">
          {title}
        </h2>
        <p className="text-on-surface-variant text-sm sm:text-[15px] leading-relaxed mb-8">{message}</p>
        <button
          type="button"
          className="w-full sm:w-auto min-w-[200px] gold-gradient-bg px-10 py-3.5 rounded-lg text-on-primary font-[var(--font-display-lg)] text-sm font-bold uppercase tracking-wider shadow-[0_10px_30px_rgba(197,160,89,0.2)] hover:shadow-[0_14px_36px_rgba(197,160,89,0.3)] transition-all active:scale-[0.98]"
          onClick={() => onAckRef.current()}
        >
          {acknowledgeLabel}
        </button>
      </div>
    </div>
  );
}