"use client";

export function MaterialDeletePrompt({
  title,
  deleting,
  error,
  onConfirm,
  onCancel,
}: {
  title: string;
  deleting: boolean;
  error: string | null;
  onConfirm: () => void;
  onCancel: () => void;
}) {
  const titleId = `delete-source-title-${title.replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`;
  const descriptionId = `${titleId}-description`;

  return (
    <div
      role="alertdialog"
      aria-labelledby={titleId}
      aria-describedby={descriptionId}
      className="rounded-xl border border-red-200 bg-red-50 px-3 py-3 dark:border-red-400/25 dark:bg-red-400/[0.06]"
    >
      <p
        id={titleId}
        className="text-[11px] font-bold leading-4 text-red-800 dark:text-red-200"
      >
        Delete “{title}”?
      </p>
      <p
        id={descriptionId}
        role={error ? "alert" : undefined}
        className="mt-1 text-[10px] leading-4 text-red-700 dark:text-red-300"
      >
        {error ??
          "This permanently removes the source, extracted text, linked chats, PYQ evidence, quizzes, flashcards, and generated notes. Finished videos remain saved."}
      </p>
      <div className="mt-2 flex items-center justify-end gap-1.5">
        <button
          type="button"
          onClick={onConfirm}
          disabled={deleting}
          className="h-11 shrink-0 rounded-lg bg-red-600 px-3.5 text-[11px] font-semibold text-white hover:bg-red-700 disabled:cursor-wait disabled:opacity-60"
        >
          {deleting
            ? error
              ? "Retrying…"
              : "Deleting…"
            : error
              ? "Retry"
              : "Delete"}
        </button>
        <button
          type="button"
          onClick={onCancel}
          disabled={deleting}
          className="h-11 shrink-0 rounded-lg px-3 text-[11px] font-semibold text-neutral-500 hover:text-neutral-950 disabled:opacity-60 dark:hover:text-white"
        >
          Keep source
        </button>
      </div>
    </div>
  );
}