family_budget/frontend/src/components/ClearHistoryModal.tsx

import { useState } from 'react';
import { clearAllTransactions } from '../api/transactions';

const CONFIRM_WORD = 'УДАЛИТЬ';

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

export function ClearHistoryModal({ onClose, onDone }: Props) {
  const [check1, setCheck1] = useState(false);
  const [confirmInput, setConfirmInput] = useState('');
  const [check2, setCheck2] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const canConfirm =
    check1 &&
    confirmInput.trim().toUpperCase() === CONFIRM_WORD &&
    check2;

  const handleConfirm = async () => {
    if (!canConfirm || loading) return;
    setLoading(true);
    setError('');
    try {
      await clearAllTransactions();
      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">
            Все транзакции будут безвозвратно удалены. Счета и категории
            сохранятся.
          </p>

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

          <div className="form-group form-group-checkbox clear-history-check">
            <label>
              <input
                type="checkbox"
                checked={check1}
                onChange={(e) => setCheck1(e.target.checked)}
              />
              Я хочу очистить историю операций
            </label>
          </div>

          <div className="form-group">
            <label>
              Введите <strong>{CONFIRM_WORD}</strong> для подтверждения
            </label>
            <input
              type="text"
              value={confirmInput}
              onChange={(e) => setConfirmInput(e.target.value)}
              placeholder={CONFIRM_WORD}
              className={confirmInput && confirmInput.trim().toUpperCase() !== CONFIRM_WORD ? 'input-error' : ''}
              autoComplete="off"
            />
          </div>

          <div className="form-group form-group-checkbox clear-history-check">
            <label>
              <input
                type="checkbox"
                checked={check2}
                onChange={(e) => setCheck2(e.target.checked)}
              />
              Я понимаю, что действие необратимо и все данные об операциях
              будут потеряны навсегда
            </label>
          </div>
        </div>

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