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

import { useState } from 'react';
import api from '../lib/api.js';
import { useQuery } from '@tanstack/react-query';
import ConfirmDialog from './ConfirmDialog.jsx';
import { useNotify } from './NotifyProvider.jsx';
import { IconHistory, IconRefresh, IconInfoCircle, IconRotate2, IconClock } from '@tabler/icons-react';
import { formatDateTimeWithRelative } from '../lib/datetime.js';

/**
 * HistoryModal - модальное окно истории версий
 * Простой подход со встроенным backdrop
 */
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;
    },
  });

  const [confirmState, setConfirmState] = useState({ open: false, onConfirm: null });
  
  const rollback = async (versionId) => {
    if (!versionId) return;
    setConfirmState({
      open: true,
      onConfirm: async () => {
        setConfirmState({ open: false, onConfirm: null });
        setLoading(true);
        try {
          const res = await api.post(`/history/${resource}/rollback`, { versionId });
          notify.success('Откат выполнен успешно');
          onRolledBack?.(res.data || {});
          onClose?.();
        } catch (_e) {
          notify.error('Не удалось выполнить откат');
        } finally {
          setLoading(false);
        }
      }
    });
  };

  if (!show) return null;

  if (show && items.length === 0) {
    refetch().catch(() => notify.error('Не удалось загрузить историю версий'));
  }

  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose?.();
    }
  };

  return (
    <>
      {/* Modal Backdrop */}
      <div className="modal-backdrop show" onClick={handleBackdropClick} />
      
      {/* Modal */}
      <div 
        className="modal show d-block" 
        role="dialog" 
        aria-modal="true"
        tabIndex={-1}
        onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
      >
        <div className="modal-dialog modal-xl modal-dialog-centered" role="document">
          <div 
            className="modal-content"
            tabIndex={-1}
            onKeyDown={(e) => {
              if (e.key === 'Tab') {
                const c = e.currentTarget;
                const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
                if (!focusable || focusable.length === 0) return;
                const first = focusable[0];
                const last = focusable[focusable.length - 1];
                if (e.shiftKey && document.activeElement === first) {
                  e.preventDefault();
                  last.focus();
                } else if (!e.shiftKey && document.activeElement === last) {
                  e.preventDefault();
                  first.focus();
                }
              }
            }}
          >
            <div className="modal-header">
              <h5 className="modal-title d-flex align-items-center">
                <IconHistory className="me-2" size={24} />
                История версий
              </h5>
              <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
            </div>
            
            <div className="modal-body">
              {/* Info bar */}
              <div className="d-flex justify-content-between align-items-center mb-3 p-2 bg-blue-lt rounded">
                <div className="text-muted small d-flex align-items-center">
                  <IconInfoCircle size={16} className="me-2" />
                  Ресурс: <code className="ms-1">{resource}</code>
                </div>
                <button 
                  className="btn btn-outline-primary btn-sm" 
                  onClick={() => refetch()} 
                  disabled={loading}
                >
                  <IconRefresh size={16} className={loading ? 'spin' : ''} />
                  <span className="ms-1">Обновить</span>
                </button>
              </div>

              {/* Table */}
              <div className="table-responsive">
                <table className="table card-table table-vcenter table-hover">
                  <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-5">
                          <div className="empty">
                            <div className="empty-icon">
                              <IconClock size={48} className="text-muted" />
                            </div>
                            <p className="empty-title">Нет данных</p>
                            <p className="empty-subtitle text-muted">
                              Версионирование бакета может быть отключено
                            </p>
                          </div>
                        </td>
                      </tr>
                    ) : (
                      items.map((v) => (
                        <tr key={v.versionId} className={v.isLatest ? 'table-active' : ''}>
                          <td>
                            <code className="text-muted small">{v.versionId}</code>
                            {v.isLatest && (
                              <span className="badge bg-green-lt text-green ms-2">Текущая</span>
                            )}
                          </td>
                          <td className="text-nowrap">
                            {v.lastModified ? formatDateTimeWithRelative(v.lastModified) : '—'}
                          </td>
                          <td>{typeof v.size === 'number' ? `${v.size} байт` : '—'}</td>
                          <td><code className="text-muted small">{v.etag || '—'}</code></td>
                          <td className="text-end">
                            {!v.isLatest && (
                              <button 
                                className="btn btn-primary btn-sm" 
                                onClick={() => rollback(v.versionId)} 
                                disabled={loading}
                                title="Восстановить содержимое файла до этой версии"
                              >
                                <IconRotate2 size={16} className="me-1" />
                                Восстановить
                              </button>
                            )}
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </div>
            
            <div className="modal-footer">
              <button className="btn" onClick={onClose}>Закрыть</button>
            </div>
          </div>
        </div>
      </div>

      <ConfirmDialog
        open={confirmState.open}
        title="Восстановить версию файла?"
        message="Текущее содержимое будет заменено выбранной версией. Действие можно отменить, выбрав предыдущую версию."
        confirmText="Восстановить"
        destructive
        size="sm"
        loading={loading}
        onCancel={() => setConfirmState({ open: false, onConfirm: null })}
        onConfirm={confirmState.onConfirm}
      />
    </>
  );
}