'use client';

import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { type CustomModule, deleteCustomModule } from '@/lib/custom-modules-api';
import { customModuleErrorText } from './custom-module-form-modal';

interface DeleteCustomModuleDialogProps {
  mod: CustomModule;
  /** Gemeinsamer Eintrag (verschwindet fuer alle) oder persoenlicher (nur fuer den Besitzer). */
  shared?: boolean;
  onClose: () => void;
  onDeleted: () => void;
}

/**
 * Rueckfrage vor dem Loeschen eines eigenen Moduls (quick-260929-9wc,
 * Vorbild `DeleteGroupDialog`). Bleibt bei einem Fehler offen und zeigt ihn —
 * ein stilles Scheitern wuerde ein Loeschen vortaeuschen. Der Text nennt, fuer
 * wen der Eintrag verschwindet (quick-260929-dzu: gemeinsam = alle, persoenlich
 * = nur der Besitzer).
 */
export function DeleteCustomModuleDialog({
  mod,
  shared = false,
  onClose,
  onDeleted,
}: DeleteCustomModuleDialogProps) {
  const t = useTranslations('customModules.form');
  const tCommon = useTranslations('common');
  const [deleting, setDeleting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleDelete = async () => {
    setDeleting(true);
    setError(null);
    try {
      await deleteCustomModule(mod.id);
      onDeleted();
      onClose();
    } catch (err) {
      setError(customModuleErrorText(err, t, 'deleteError'));
    } finally {
      setDeleting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby="delete-custom-module-title"
        className="w-full max-w-sm rounded-lg bg-card p-6 shadow-lg dark:border dark:border-border"
      >
        <h2 id="delete-custom-module-title" className="mb-4 text-lg font-semibold text-foreground">
          {t('deleteConfirm.title')}
        </h2>
        <p className="mb-4 text-sm text-foreground">
          {t(shared ? 'deleteConfirm.bodyShared' : 'deleteConfirm.bodyPersonal', {
            name: mod.name,
          })}
        </p>

        {error && (
          <div
            role="alert"
            className="mb-4 rounded-md border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive"
          >
            {error}
          </div>
        )}

        <div className="flex justify-end gap-3">
          <button type="button" onClick={onClose} className="btn btn-secondary">
            {tCommon('cancel')}
          </button>
          <button
            type="button"
            onClick={handleDelete}
            disabled={deleting}
            className="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-opacity hover:opacity-90 disabled:opacity-50"
          >
            {deleting ? tCommon('loading') : tCommon('delete')}
          </button>
        </div>
      </div>
    </div>
  );
}