// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — History Panel
// Slide-out timeline with thumbnails. Click to jump to any history state.
// ─────────────────────────────────────────────────────────────────────────────

import React from 'react';
import { useHistoryStore, useCanvasStore } from '@/store';
import { historyManager } from '@/engine/HistoryManager';

interface HistoryPanelProps {
  onClose: () => void;
}

export const HistoryPanel: React.FC<HistoryPanelProps> = ({ onClose }) => {
  const { entries, currentIndex, jumpTo } = useHistoryStore();

  const handleJump = (index: number) => {
    const entry = jumpTo(index);
    if (entry) {
      historyManager.restoreImageData(entry.imageData);
      useCanvasStore.getState().setCanvasDimensions(entry.imageData.width, entry.imageData.height);
      useCanvasStore.getState().restoreFromHistoryEntry(entry);
    }
  };

  const handleRevertToOriginal = () => {
    if (entries.length > 0) handleJump(0);
    onClose();
  };

  return (
    <div className="ultra-history-panel" role="region" aria-label="Edit History">
      <div className="ultra-history-panel__header">
        <span>History</span>
        <button
          className="ultra-icon-btn"
          onClick={onClose}
          aria-label="Close history panel"
        >
          ×
        </button>
      </div>

      <div className="ultra-history-panel__list">
        {entries.map((entry, index) => (
          <button
            key={entry.id}
            className={`ultra-history-item ${index === currentIndex ? 'ultra-history-item--active' : ''}`}
            onClick={() => handleJump(index)}
            title={new Date(entry.timestamp).toLocaleTimeString()}
          >
            {entry.thumbnail ? (
              <img
                src={entry.thumbnail}
                alt={entry.label}
                className="ultra-history-thumb"
              />
            ) : (
              <div className="ultra-history-thumb-placeholder" />
            )}
            <span className="ultra-history-label">{entry.label}</span>
            {index === currentIndex && (
              <span className="ultra-history-current-badge">current</span>
            )}
          </button>
        ))}

        {entries.length === 0 && (
          <p className="ultra-history-empty">No history yet</p>
        )}
      </div>

      <div className="ultra-history-panel__footer">
        <button
          className="ultra-btn ultra-btn--secondary ultra-btn--sm"
          onClick={handleRevertToOriginal}
          disabled={entries.length === 0}
        >
          Revert to Original
        </button>
      </div>
    </div>
  );
};