import { useId, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { FormError } from '../components/forms';
import { apiDelete } from '../lib/api';
import { useDismissable } from '../lib/use-dismissable';
import { useModalFocus } from '../lib/use-modal-focus';

/**
 * The per-case delete decision for a page with subpages (issue #107/#109):
 * promote the children to the page's parent, or trash the whole subtree.
 * Childless pages keep the plain confirm in the overflow menu — this dialog
 * only mounts when there is actually something to decide.
 */
export function DeletePageDialog({
  pageId,
  title,
  childCount,
  onDeleted,
  onClose,
  returnFocusRef,
}: {
  pageId: string;
  title: string;
  childCount: number;
  onDeleted: () => void;
  onClose: () => void;
  /** Where focus goes after closing when the opening control unmounted. */
  returnFocusRef?: React.RefObject<HTMLElement | null>;
}): React.JSX.Element {
  const { t } = useTranslation('editor');
  const [error, setError] = useState<unknown>(null);
  const [busy, setBusy] = useState(false);
  const dialogRef = useRef<HTMLDivElement>(null);
  const titleId = useId();
  useDismissable(dialogRef, true, onClose);
  useModalFocus(dialogRef, returnFocusRef);

  async function remove(mode: 'promote' | 'subtree'): Promise<void> {
    setError(null);
    setBusy(true);
    try {
      await apiDelete(`/pages/${pageId}?mode=${mode}`);
      onDeleted();
    } catch (err) {
      setError(err);
      setBusy(false);
    }
  }

  return (
    <div className="modal-overlay">
      <div
        className="modal delete-page-dialog"
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        tabIndex={-1}
        ref={dialogRef}
      >
        <h2 className="modal__title" id={titleId}>
          {t('page.deleteChildrenTitle')}
        </h2>
        <FormError error={error} />
        <p>{t('page.deleteChildrenHint', { title, count: childCount })}</p>
        <div className="modal__actions modal__actions--stacked">
          <button
            type="button"
            className="button delete-page-dialog__promote"
            disabled={busy}
            onClick={() => void remove('promote')}
          >
            {t('page.deletePromote')}
          </button>
          <button
            type="button"
            className="button button--danger delete-page-dialog__subtree"
            disabled={busy}
            onClick={() => void remove('subtree')}
          >
            {t('page.deleteSubtree', { count: childCount })}
          </button>
          <button type="button" className="linklike" onClick={onClose}>
            {t('page.deleteCancel')}
          </button>
        </div>
      </div>
    </div>
  );
}