import './processing.css';
import { useHistory } from './processing.js';

// SVG 图标组件
const LoopIcon = ({ active = false }) => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" opacity={active ? 1 : 0.5}></path>
  </svg>
);

const PlayIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polygon points="5 3 19 12 5 21 5 3"></polygon>
  </svg>
);

const PauseIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="6" y="4" width="4" height="16"></rect>
    <rect x="14" y="4" width="4" height="16"></rect>
  </svg>
);

const DeleteIcon = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="3 6 5 6 21 6"></polyline>
    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
    <line x1="10" y1="11" x2="10" y2="17"></line>
    <line x1="14" y1="11" x2="14" y2="17"></line>
  </svg>
);

function History() {
  const { 
    folders, 
    handlePlayPause, 
    handleLoop, 
    handleDelete,
    handleKeyDown,
    getLoopButtonClassName,
    getLoopButtonTitle,
    getPlayButtonTitle,
    isPlaying,
    isLooping,
    formatCreatedAt,
  } = useHistory();

  const createKeyDownHandler = (handler) => (e) => handleKeyDown(e, handler);

  return (
    <div className="History-container">
      <div className="History-list">
        {folders.map((folder, index) => (
          <div key={index} className="History-item">
            <div className="History-item-content">
              <div className="History-item-buttons">
                <div 
                  className={getLoopButtonClassName(index)}
                  onClick={(e) => handleLoop(index, e)}
                  role="button"
                  tabIndex={0}
                  onKeyDown={createKeyDownHandler((e) => handleLoop(index, e))}
                  title={getLoopButtonTitle(index)}
                >
                  <LoopIcon active={isLooping(index)} />
                </div>
                <div 
                  className="History-item-button"
                  onClick={(e) => handlePlayPause(index, e)}
                  role="button"
                  tabIndex={0}
                  onKeyDown={createKeyDownHandler((e) => handlePlayPause(index, e))}
                  title={getPlayButtonTitle(index)}
                >
                  {isPlaying(index) ? <PauseIcon /> : <PlayIcon />}
                </div>
                <div 
                  className="History-item-button"
                  onClick={(e) => handleDelete(index, e)}
                  role="button"
                  tabIndex={0}
                  onKeyDown={createKeyDownHandler((e) => handleDelete(index, e))}
                  title="删除"
                >
                  <DeleteIcon />
                </div>
              </div>
              <div 
                className="History-item-info"
                onClick={(e) => {
                  // 如果点击的是按钮区域，不触发
                  if (e.target.closest('.History-item-buttons')) {
                    return;
                  }
                  // 触发打开蓝图编辑器事件
                  window.dispatchEvent(new CustomEvent('open-blueprint', {
                    detail: { workflowName: folder.name }
                  }));
                }}
                style={{ cursor: 'pointer' }}
                title="点击进入可视化编程界面"
              >
                <div className="History-item-name">{folder.name}</div>
                {folder.createdAt && (
                  <div className="History-item-time">{formatCreatedAt(folder.createdAt)}</div>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default History;