// frontend-react/src/components/SideBarRight/tabs/WorldBookActive/WorldBookActive.jsx
import React from 'react';
import './WorldBookActive.css';
import useWorldBookActiveStore from '../../../../Store/SideBarRight/WorldBookActiveSlice';

const WorldBookActive = () => {
  const { activeEntries, clearEntries } = useWorldBookActiveStore();

  if (activeEntries.length === 0) {
    return (
      <div className="worldbook-active-content">
        <div className="tab-header">
          <span className="title-text">世界书激活</span>
          <span className="entry-count">0</span>
        </div>
        <div className="empty-state">
          <p>暂无激活的世界书条目</p>
        </div>
      </div>
    );
  }

  // 按位置分组显示
  const groupedEntries = activeEntries.reduce((acc, entry) => {
    const pos = entry.position || 0;
    if (!acc[pos]) {
      acc[pos] = [];
    }
    acc[pos].push(entry);
    return acc;
  }, {});

  // 位置标签映射
  const positionLabels = {
    0: '世界书之前',
    1: '世界书之后',
    2: '示例对话之前',
    3: '示例对话之后',
    4: '作者注释(顶部)',
    5: '作者注释(底部)',
    6: '深度插入',
    7: '宏替换'
  };

  return (
    <div className="worldbook-active-content">
      {/* 标题栏 */}
      <div className="tab-header">
        <span className="title-text">世界书激活</span>
        <span className="entry-count">{activeEntries.length}</span>
        <button 
          className="btn-clear"
          onClick={clearEntries}
          title="清空显示"
        >
          🗑️
        </button>
      </div>

      {/* 激活条目列表 */}
      <div className="active-entries-list">
        {Object.entries(groupedEntries).map(([position, entries]) => (
          <div key={position} className="position-group">
            <div className="position-label">
              <span className="position-number">Pos {position}</span>
              <span className="position-name">{positionLabels[position] || `位置 ${position}`}</span>
              <span className="position-count">{entries.length} 条</span>
            </div>
            
            {entries.map((entry, index) => (
              <div key={`${entry.uid}-${index}`} className="active-entry-item">
                <div className="entry-header">
                  <span className="entry-uid">UID: {entry.uid}</span>
                  <span className="entry-depth">Depth: {entry.depth || 0}</span>
                </div>
                <div className="entry-keywords">
                  {entry.triggerKeywords && entry.triggerKeywords.length > 0 ? (
                    <span className="keyword-tag">
                      🔑 {entry.triggerKeywords.join(', ')}
                    </span>
                  ) : (
                    <span className="trigger-type">
                      {entry.triggerType === 'constant' ? '📌 常驻' : 
                       entry.triggerType === 'condition' ? '⚙️ 条件' : '❓ 未知'}
                    </span>
                  )}
                </div>
                <div className="entry-preview">
                  {entry.contentPreview || entry.content?.substring(0, 100) || '(无内容)'}
                  {entry.content?.length > 100 ? '...' : ''}
                </div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};

export default WorldBookActive;
