import * as Dialog from '@radix-ui/react-dialog';
import { Loader2, Trash2, X } from 'lucide-react';
import type { CronJob } from '../../../lib/cron-types';
import { useI18n } from '../../../i18n';

type CronDeleteDialogProps = {
  open: boolean;
  job: CronJob | null;
  busy: boolean;
  onClose: () => void;
  onConfirm: () => void;
};

export default function CronDeleteDialog({
  open,
  job,
  busy,
  onClose,
  onConfirm,
}: CronDeleteDialogProps) {
  const { t } = useI18n();
  const jobName = job?.name.trim() ? job.name : t('cron.common.unnamedJob');

  function handleOpenChange(nextOpen: boolean): void {
    if (!nextOpen && !busy) {
      onClose();
    }
  }

  return (
    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px]" />
        <Dialog.Content
          className="fixed left-1/2 top-1/2 z-60 w-[calc(100vw-32px)] max-w-[560px] -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-0 shadow-[0_30px_80px_rgba(15,23,42,0.18)] outline-none dark:bg-[#1f1f22]"
          onEscapeKeyDown={(event) => {
            if (busy) {
              event.preventDefault();
            }
          }}
          onPointerDownOutside={(event) => {
            if (busy) {
              event.preventDefault();
            }
          }}
        >
          <div className="flex items-start justify-between gap-4 border-b border-black/6 px-6 py-5 dark:border-white/6">
            <div className="flex min-w-0 items-start gap-4">
              <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border border-red-500/15 bg-red-500/10 text-red-600 dark:border-red-400/20 dark:bg-red-500/10 dark:text-red-300">
                <Trash2 className="h-5 w-5" />
              </div>

              <div className="min-w-0">
                <Dialog.Title
                  className="text-[26px] font-normal leading-none tracking-tight text-[#171717] dark:text-[#f3f4f6]"
                  style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
                >
                  {t('cron.deleteDialog.title')}
                </Dialog.Title>
                <Dialog.Description className="mt-3 text-[14px] leading-6 text-[#525866] dark:text-gray-400">
                  {t('cron.confirmDelete', { name: jobName })}
                </Dialog.Description>
              </div>
            </div>

            <button
              type="button"
              className="rounded-full p-1.5 text-[#99A0AE] transition-colors hover:text-[#171717] disabled:cursor-not-allowed disabled:opacity-50 dark:hover:text-[#f3f4f6]"
              onClick={onClose}
              disabled={busy}
              aria-label={t('dialog.close')}
            >
              <X className="h-5 w-5" />
            </button>
          </div>

          <div className="px-6 py-5">
            <div className="rounded-[18px] border border-black/6 bg-white/75 px-4 py-3 shadow-[0_10px_30px_rgba(15,23,42,0.04)] dark:border-white/8 dark:bg-[#202024]">
              <div className="text-[12px] uppercase tracking-[0.14em] text-[#99A0AE] dark:text-gray-500">
                {t('cron.deleteDialog.label')}
              </div>
              <div className="mt-2 truncate text-[15px] font-medium text-[#171717] dark:text-[#f3f4f6]">
                {jobName}
              </div>
            </div>

            <div className="mt-5 flex items-center justify-end gap-3">
              <button
                type="button"
                className="inline-flex h-10 items-center rounded-full border border-black/10 px-4 text-[13px] font-medium text-[#171717]/80 transition-colors hover:bg-black/5 hover:text-[#171717] disabled:cursor-not-allowed disabled:opacity-60 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-[#f3f4f6]"
                onClick={onClose}
                disabled={busy}
              >
                {t('dialog.cancel')}
              </button>
              <button
                type="button"
                className="inline-flex h-10 items-center rounded-full bg-red-600 px-4 text-[13px] font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-red-500 dark:hover:bg-red-400"
                onClick={onConfirm}
                disabled={busy}
              >
                {busy ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    {t('cron.deleteDialog.deleting')}
                  </>
                ) : (
                  t('cron.deleteDialog.confirm')
                )}
              </button>
            </div>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}