"use client";

import { useEffect, type ReactNode } from "react";
import { confirmModalDict } from "@/components/confirm-modal/dict";

type ConfirmModalProps = {
  open: boolean;
  title: string;
  description?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  isConfirming?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  children?: ReactNode;
};

export function ConfirmModal({
  open,
  title,
  description,
  confirmLabel = confirmModalDict.confirm,
  cancelLabel = confirmModalDict.cancel,
  isConfirming = false,
  onConfirm,
  onCancel,
  children,
}: ConfirmModalProps) {
  useEffect(() => {
    if (!open) {
      return;
    }

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape" && !isConfirming) {
        onCancel();
      }
    };

    document.addEventListener("keydown", handleEscape);
    document.body.style.overflow = "hidden";

    return () => {
      document.removeEventListener("keydown", handleEscape);
      document.body.style.overflow = "";
    };
  }, [open, isConfirming, onCancel]);

  if (!open) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-[110] flex items-end justify-center bg-black/40 p-4 sm:items-center">
      <button
        type="button"
        aria-label={cancelLabel}
        className="absolute inset-0"
        onClick={() => {
          if (!isConfirming) {
            onCancel();
          }
        }}
      />

      <div
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="confirm-modal-title"
        aria-describedby={description ? "confirm-modal-description" : undefined}
        className="relative z-10 w-full max-w-md rounded-3xl bg-card p-6 shadow-soft"
      >
        <div className="space-y-2 text-center sm:text-start">
          <h2 id="confirm-modal-title" className="text-lg font-bold text-card-foreground">
            {title}
          </h2>
          {description ? (
            <p id="confirm-modal-description" className="text-sm leading-7 text-muted-foreground">
              {description}
            </p>
          ) : null}
        </div>

        {children ? <div className="mt-4">{children}</div> : null}

        <div className="mt-6 flex flex-row gap-3">
          <button
            type="button"
            onClick={onConfirm}
            disabled={isConfirming}
            className="inline-flex h-11 flex-1 items-center justify-center rounded-2xl bg-destructive text-destructive-foreground transition-opacity hover:opacity-90 disabled:opacity-60"
          >
            {isConfirming ? confirmModalDict.deleting : confirmLabel}
          </button>
          <button
            type="button"
            onClick={onCancel}
            disabled={isConfirming}
            className="inline-flex h-11 flex-1 items-center justify-center rounded-2xl border border-border bg-background text-foreground transition-colors hover:bg-accent disabled:opacity-60"
          >
            {cancelLabel}
          </button>
        </div>
      </div>
    </div>
  );
}