"use client";

interface ExportModalProps {
  isOpen: boolean;
  onClose: () => void;
  evaluationId: string;
}

export function ExportModal({ isOpen, onClose, evaluationId }: ExportModalProps) {
  if (!isOpen) return null;

  const base = typeof window !== "undefined" ? window.location.origin : "";
  const csvUrl = `${base}/api/export/csv?id=${evaluationId}`;
  const pdfUrl = `${base}/api/export/pdf?id=${evaluationId}`;
  const confluenceUrl = `${base}/api/export/confluence?id=${evaluationId}`;

  return (
    <>
      <div className="fixed inset-0 z-40 bg-black/60" onClick={onClose} aria-hidden="true" />
      <div
        className="fixed left-1/2 top-1/2 z-50 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800 p-4 shadow-xl"
        role="dialog"
        aria-label="Export"
      >
        <h3 className="mb-4 font-mono text-sm font-medium text-zinc-800 dark:text-zinc-200">Export</h3>
        <div className="flex flex-col gap-2">
          <a
            href={csvUrl}
            download
            className="rounded border border-zinc-300 dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 px-4 py-2 text-center font-mono text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700"
          >
            csv
          </a>
          <a
            href={pdfUrl}
            download
            className="rounded border border-zinc-300 dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 px-4 py-2 text-center font-mono text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700"
          >
            pdf
          </a>
          <a
            href={confluenceUrl}
            download
            className="rounded border border-zinc-300 dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 px-4 py-2 text-center font-mono text-xs text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-700"
            title="Guide d'entretien (questions + grille) au format Confluence wiki markup"
          >
            confluence
          </a>
        </div>
        <button
          type="button"
          onClick={onClose}
          className="mt-4 w-full rounded border border-zinc-300 dark:border-zinc-700 py-2 font-mono text-xs text-zinc-600 dark:text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800"
        >
          fermer
        </button>
      </div>
    </>
  );
}
