import { useCallback, useEffect, useMemo, useState } from 'react';

import { Button, Dialog } from '#components';
import { useTranslation } from '#hooks';

import { useDestructiveActionStore } from '../../hooks/useDestructiveAction/useDestructiveActionStore.ts';

import type { DestructiveActionDef } from '../../hooks/useDestructiveAction/useDestructiveActionStore.ts';

export const DestructiveActionDialog = () => {
  const deletePendingDestructiveAction = useDestructiveActionStore((store) => store.deletePendingDestructiveAction);
  const pendingDestructiveActions = useDestructiveActionStore((store) => store.pendingDestructiveActions);
  const { resolvedLanguage, t } = useTranslation();

  const current = useMemo<DestructiveActionDef | null>(() => {
    if (pendingDestructiveActions[0]) {
      return pendingDestructiveActions[0];
    }
    return null;
  }, [pendingDestructiveActions]);

  const getDisplay = useCallback(
    (def: DestructiveActionDef | null) => {
      const defaultDescription = t({
        en: 'This action cannot be reversed. Please confirm that you would like to continue.',
        fr: 'Cette action ne peut être inversée. Veuillez confirmer que vous souhaitez poursuivre.'
      });
      const defaultTitle = t({
        en: 'Confirm Action',
        fr: "Confirmer l'action"
      });
      return {
        description: def?.description ?? defaultDescription,
        title: def?.title ?? defaultTitle
      };
    },
    [resolvedLanguage]
  );

  const [display, setDisplay] = useState<{ description: string; title: string }>(getDisplay(current));

  useEffect(() => {
    if (current) {
      setDisplay(getDisplay(current));
    }
  }, [current]);

  const handleConfirm = async () => {
    if (!current) {
      return;
    }
    try {
      await current.action();
    } finally {
      deletePendingDestructiveAction(current.id);
    }
  };

  const handleCancel = () => {
    if (current) {
      deletePendingDestructiveAction(current.id);
    }
  };

  const handleOpenChange = (isOpen: boolean) => {
    if (!isOpen && current) {
      deletePendingDestructiveAction(current.id);
    }
  };

  return (
    <Dialog open={current !== null} onOpenChange={handleOpenChange}>
      <Dialog.Content data-testid="destructive-action-dialog" onOpenAutoFocus={(event) => event.preventDefault()}>
        <Dialog.Header>
          <Dialog.Title>{display.title}</Dialog.Title>
          <Dialog.Description>{display.description}</Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
          <Button className="min-w-16" type="button" variant="danger" onClick={() => void handleConfirm()}>
            {t('libui.yes')}
          </Button>
          <Button className="min-w-16" type="button" variant="primary" onClick={handleCancel}>
            {t('libui.no')}
          </Button>
        </Dialog.Footer>
      </Dialog.Content>
    </Dialog>
  );
};