// ============================================================
// CanvasToolbar — 画布内容区顶部工具栏（简化版）
//
// 包含两行：
//   第一行：StageTabs（阶段标签 + 无限画布按钮）
//   第二行：CategoryTabs（资产分类标签） + CanvasFilterBar（搜索 + 审核）
//
// 注：项目/集数选择器已移至 CanvasSidebar。
// ============================================================

import { useTheme } from '@/app/providers/ThemeProvider';
import { useCanvasStore } from '../../stores/useCanvasStore';
import { StageTabs } from './StageTabs';
import { CategoryTabs } from './CategoryTabs';
import { CanvasFilterBar } from './CanvasFilterBar';

export function CanvasToolbar() {
    const { isDark } = useTheme();
    const workspaceRoot = useCanvasStore((s) => s.workspaceRoot);
    const isScanning = useCanvasStore((s) => s.isScanning);
    const totalCount = useCanvasStore((s) => s.totalCount);

    const barBg = isDark
        ? 'linear-gradient(180deg, #1E1B4B 0%, #15132E 100%)'
        : 'linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%)';

    const borderColor = isDark ? '#2E2A5A' : '#E5E7EB';

    return (
        <div
            style={{
                flexShrink: 0,
                borderBottom: `1px solid ${borderColor}`,
                background: barBg,
            }}
        >
            {/* 第一行：阶段标签 + 无限画布 + 扫描状态 */}
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    padding: '6px 12px',
                    height: 36,
                }}
            >
                <StageTabs />

                <div style={{ flex: 1 }} />

                {isScanning && (
                    <span
                        style={{
                            fontSize: 12,
                            color: isDark ? '#C4B5FD' : '#6366F1',
                            whiteSpace: 'nowrap',
                        }}
                    >
                        扫描中…
                    </span>
                )}

                {totalCount > 0 && (
                    <span
                        style={{
                            fontSize: 12,
                            color: isDark ? '#6E6B90' : '#9CA3AF',
                            whiteSpace: 'nowrap',
                            marginLeft: 8,
                        }}
                    >
                        {totalCount} 个文件
                    </span>
                )}
            </div>

            {/* 第二行：分类标签 + 筛选栏 */}
            {workspaceRoot && (
                <div
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                        padding: '4px 12px 6px',
                        borderTop: `1px solid ${borderColor}`,
                        gap: 12,
                    }}
                >
                    <CategoryTabs />
                    <div style={{ flex: 1 }} />
                    <CanvasFilterBar />
                </div>
            )}
        </div>
    );
}
