'use client';

import * as Dialog from '@radix-ui/react-dialog';
import { useTranslations } from 'next-intl';
import { useParams, useRouter } from 'next/navigation';
import { useBookingDraft } from '@/lib/store/booking-draft';

interface HoldExpiredModalProps {
  open: boolean;
}

export function HoldExpiredModal({ open }: HoldExpiredModalProps) {
  const t = useTranslations('checkout.summary');
  const tCart = useTranslations('cart');
  const params = useParams<{ locale: string }>();
  const locale = params?.locale ?? 'en';
  const router = useRouter();
  const clear = useBookingDraft((s) => s.clear);

  const handleRestart = () => {
    clear();
    router.push(`/${locale}/checkout/event`);
  };

  return (
    <Dialog.Root open={open} onOpenChange={() => {}}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm" />
        <Dialog.Content
          role="alertdialog"
          aria-modal="true"
          onPointerDownOutside={(e) => e.preventDefault()}
          onEscapeKeyDown={(e) => e.preventDefault()}
          className="fixed start-1/2 top-1/2 z-50 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-6 shadow-xl focus:outline-none"
        >
          <Dialog.Title className="mb-2 text-base font-semibold text-neutral-900">
            {t('hold_expired_title')}
          </Dialog.Title>
          <Dialog.Description className="mb-6 text-sm text-neutral-500 leading-relaxed">
            {t('hold_expired_body')}
          </Dialog.Description>
          <button
            type="button"
            onClick={handleRestart}
            // eslint-disable-next-line jsx-a11y/no-autofocus
            autoFocus
            className="btn-primary w-full"
          >
            {tCart('start_new_booking')}
          </button>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}