router-lists-ui/frontend/src/components/HistoryModal.jsx

import { useEffect, useState } from 'react';
import api from '../lib/api.js';
import { useQuery } from '@tanstack/react-query';
import { useNotify } from './NotifyProvider.jsx';
import { IconHistory, IconRefresh, IconDeviceFloppy } from '@tabler/icons-react';

export default function HistoryModal({ resource, show, onClose, onRolledBack }) {
  const [loading, setLoading] = useState(false);
  const [items, setItems] = useState([]);
  const notify = useNotify();

  const { refetch } = useQuery({
    queryKey: ['history', resource],
    enabled: false,
    queryFn: async () => {
      const res = await api.get(`/history/${resource}`)
      const data = Array.isArray(res.data?.items) ? res.data.items : []
      setItems(data)
      return data
    },
  })

  useEffect(() => { if (show) refetch().catch(() => notify.error('Не удалось загрузить историю версий')); }, [show, resource]);

  const rollback = async (versionId) => {
    if (!versionId) return;
    if (!confirm('Откатить к выбранной версии? Текущее содержимое будет перезаписано.')) return;
    setLoading(true);
    try {
      const res = await api.post(`/history/${resource}/rollback`, { versionId });
      notify.success('Откат выполнен');
      onRolledBack && onRolledBack(res.data || {});
      onClose && onClose();
    } catch (e) {
      notify.error('Не удалось выполнить откат');
    } finally {
      setLoading(false);
    }
  };

  if (!show) return null;

  return (
    <div className="modal show d-block" tabIndex="-1" style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
      <div className="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title d-flex align-items-center">
              <IconHistory className="me-2" /> История версий
            </h5>
            <button type="button" className="btn-close" onClick={onClose}></button>
          </div>
          <div className="modal-body">
            <div className="d-flex justify-content-between align-items-center mb-2">
              <div className="text-muted small">Ресурс: <code>{resource}</code></div>
              <button className="btn btn-outline-secondary btn-sm" onClick={() => refetch()} disabled={loading}>
                <IconRefresh className={loading ? 'spin' : ''} />
                <span className="ms-1">Обновить</span>
              </button>
            </div>
            <div className="table-responsive">
              <table className="table card-table table-vcenter table-nowrap mb-0">
                <thead>
                  <tr>
                    <th>Версия</th>
                    <th>Дата</th>
                    <th>Размер</th>
                    <th>ETag</th>
                    <th className="text-end">Действия</th>
                  </tr>
                </thead>
                <tbody>
                  {items.length === 0 ? (
                    <tr><td colSpan="5" className="text-muted text-center py-4">Нет данных (возможно, версионирование бакета отключено)</td></tr>
                  ) : items.map((v) => (
                    <tr key={v.versionId} className={v.isLatest ? 'table-info' : ''}>
                      <td><code>{v.versionId}</code></td>
                      <td>{v.lastModified ? new Date(v.lastModified).toLocaleString() : '—'}</td>
                      <td>{typeof v.size === 'number' ? `${v.size} байт` : '—'}</td>
                      <td><code>{v.etag || '—'}</code></td>
                      <td className="text-end">
                        {!v.isLatest && (
                          <button className="btn btn-outline-primary btn-sm" onClick={() => rollback(v.versionId)} disabled={loading}>
                            <IconDeviceFloppy className="me-1" /> Откатить к этой версии
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
          <div className="modal-footer">
            <button className="btn" onClick={onClose}>Закрыть</button>
          </div>
        </div>
      </div>
    </div>
  );
}