family_budget/frontend/src/components/DeleteImportModal.tsx

import { useState } from 'react';
import { deleteImport } from '../api/import';
import type { Import } from '@family-budget/shared';

interface Props {
  imp: Import;
  onClose: () => void;
  onDone: () => void;
}

export function DeleteImportModal({ imp, onClose, onDone }: Props) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const accountLabel =
    imp.accountAlias || imp.accountNumberMasked || `ID ${imp.accountId}`;

  const handleConfirm = async () => {
    setLoading(true);
    setError('');
    try {
      await deleteImport(imp.id);
      onDone();
    } catch (e) {
      setError(
        e instanceof Error ? e.message : 'Ошибка при удалении импорта',
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h2>Удалить импорт</h2>
          <button className="btn-close" onClick={onClose}>
            &times;
          </button>
        </div>

        <div className="modal-body">
          <p className="clear-history-warn">
            Будут удалены все операции этого импорта ({imp.importedCount}{' '}
            шт.): {imp.bank} / {accountLabel}
          </p>

          {error && <div className="alert alert-error">{error}</div>}

          <p>Действие необратимо.</p>
        </div>

        <div className="modal-footer">
          <button
            type="button"
            className="btn btn-danger"
            onClick={handleConfirm}
            disabled={loading}
          >
            {loading ? 'Удаление…' : 'Удалить'}
          </button>
          <button type="button" className="btn btn-secondary" onClick={onClose}>
            Отмена
          </button>
        </div>
      </div>
    </div>
  );
}