IdeA/frontend/src/features/projects/RemoveProjectDialog.tsx

import { useEffect, useRef } from "react";

import type { Project } from "@/domain";
import { Button, zIndex } from "@/shared";
import { useI18n } from "@/i18n";

interface RemoveProjectDialogProps {
  project: Project;
  isOpen: boolean;
  pending: boolean;
  error: string | null;
  onCancel: () => void;
  onConfirm: () => void;
}

export function RemoveProjectDialog({
  project,
  isOpen,
  pending,
  error,
  onCancel,
  onConfirm,
}: RemoveProjectDialogProps) {
  const { tr } = useI18n();
  const cancelRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    cancelRef.current?.focus();
  }, []);

  useEffect(() => {
    function cancelOnEscape(event: KeyboardEvent) {
      if (event.key === "Escape" && !pending) onCancel();
    }
    document.addEventListener("keydown", cancelOnEscape);
    return () => document.removeEventListener("keydown", cancelOnEscape);
  }, [onCancel, pending]);

  return (
    <div
      className="fixed inset-0 flex items-center justify-center bg-black/55 p-4"
      style={{ zIndex: zIndex.floatingWindowNested }}
      onMouseDown={(event) => {
        if (!pending && event.target === event.currentTarget) onCancel();
      }}
    >
      <div
        role="alertdialog"
        aria-modal="true"
        aria-label={tr(`Retirer « ${project.name} » d’IdeA ?`, `Remove “${project.name}” from IdeA?`)}
        className="flex w-full max-w-md flex-col gap-3 rounded-lg border border-border bg-surface p-4 shadow-xl"
      >
        <h3 className="text-sm font-semibold text-content">
          {tr(`Retirer « ${project.name} » d’IdeA ?`, `Remove “${project.name}” from IdeA?`)}
        </h3>
        <code className="break-all rounded-md bg-raised px-3 py-2 text-xs text-muted">
          {project.root}
        </code>
        <p className="text-sm text-muted">
          {tr("Le dossier et les fichiers resteront sur le disque.", "The folder and files will remain on disk.")}
        </p>
        {isOpen && (
          <p className="text-sm text-muted">
            {tr("Les vues de ce projet seront fermées et les opérations IdeA en cours seront interrompues.", "This project's views will close and its active IdeA operations will be interrupted.")}
          </p>
        )}
        {error && (
          <p role="alert" className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger">
            {error}
          </p>
        )}
        <div className="flex justify-end gap-2">
          <Button
            ref={cancelRef}
            size="sm"
            variant="ghost"
            disabled={pending}
            onClick={onCancel}
          >
            {tr("Annuler", "Cancel")}
          </Button>
          <Button
            size="sm"
            variant="danger"
            loading={pending}
            aria-label={pending ? tr("Retrait…", "Removing…") : undefined}
            onClick={onConfirm}
          >
            {pending ? tr("Retrait…", "Removing…") : tr("Retirer d’IdeA", "Remove from IdeA")}
          </Button>
        </div>
      </div>
    </div>
  );
}