import { History } from 'lucide-react';
import type { PageType } from '../../components/Sidebar';
import type { ViewMode } from './GeneralQA.types';

/**
 * 顶部栏 Props。
 *
 * `setViewMode` 和 `onNavigate` 由父组件传入，父组件会在生成中切换时做确认拦截；
 * Header 本身不直接感知 loading，保持纯展示和事件转发。
 */
type Props = {
  isDark: boolean; // 当前是否为暗黑主题，用于样式适配
  viewMode: ViewMode; // 当前视图模式：'single' 单一模式 或 'compare' 对比模式
  chatHeadTitle?: string;
  chatDesign?: string;
  compareShow?: boolean;
  setViewMode: (mode: ViewMode) => void; // 设置视图模式回调函数
  onNavigate: (page: PageType) => void; // 页面导航回调函数，用于跳转到其他页面（如历史记录）
};

/**
 * 通用问答页面顶部栏。
 *
 * 该组件只负责页面标题、模式切换和历史记录入口，所有业务状态仍由父组件维护。
 * 这样拆分后，顶部导航的样式和交互不会和中间问答流处理逻辑混在一起，后续如果要新增
 * “保存模板”“导出记录”等入口，也可以只改这个文件。
 */
export default function GeneralQAHeader({ isDark, viewMode, chatHeadTitle = '通用问答', chatDesign = '支持单轮RAG、多轮RAG、深度检索及结果对比', compareShow = true, setViewMode, onNavigate }: Props): JSX.Element {
  return (
    <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
      <div className="flex items-center gap-4">
        <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
          {chatHeadTitle}
        </h1>
        <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
          {chatDesign}
        </span>
      </div>
      {
        compareShow && <div className="flex items-center gap-2">
          <div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
            <button
              onClick={() => setViewMode('single')}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${viewMode === 'single'
                  ? isDark
                    ? 'bg-blue-600 text-white'
                    : 'bg-red-500 text-white'
                  : isDark
                    ? 'text-slate-400 hover:text-white'
                    : 'text-gray-600 hover:text-red-600'
                }`}
            >
              单一模式
            </button>
            <button
              onClick={() => setViewMode('compare')}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${viewMode === 'compare'
                  ? isDark
                    ? 'bg-blue-600 text-white'
                    : 'bg-red-500 text-white'
                  : isDark
                    ? 'text-slate-400 hover:text-white'
                    : 'text-gray-600 hover:text-red-600'
                }`}
            >
              对比模式
            </button>
          </div>

          {/* <button
          onClick={() => onNavigate('qa-records')}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
            isDark
              ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
              : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
          }`}
        >
          <History className="w-4 h-4" />
          历史记录
        </button> */}
        </div>
      }
    </div>
  );
}