"use client";

import { useEffect, useId } from "react";
import { Button } from "@/components/Button";

export function ConfirmDialog({
  title,
  description,
  confirmLabel,
  busy = false,
  busyLabel,
  onCancel,
  onConfirm,
}: {
  title: string;
  description: string;
  confirmLabel: string;
  busy?: boolean;
  busyLabel?: string;
  onCancel: () => void;
  onConfirm: () => void;
}) {
  const titleId = useId();
  const descriptionId = useId();

  useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape" && !busy) {
        event.preventDefault();
        onCancel();
      }
    }

    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [busy, onCancel]);

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-primary/40 p-4 sm:items-center">
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        aria-describedby={descriptionId}
        className="w-full max-w-sm rounded-pv border border-line bg-surface p-4"
      >
        <h2 id={titleId} className="text-[0.9375rem] font-semibold text-primary">
          {title}
        </h2>
        <p id={descriptionId} className="mt-1 text-[0.8125rem] text-ink-60">
          {description}
        </p>
        <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-end">
          <Button type="button" variant="secondary" size="sm" disabled={busy} onClick={onCancel}>
            Keep as is
          </Button>
          <Button type="button" size="sm" disabled={busy} onClick={onConfirm}>
            {busy ? (busyLabel ?? "Working…") : confirmLabel}
          </Button>
        </div>
      </div>
    </div>
  );
}