// ============================================================
// CanvasToolbar — 顶部工具栏包装器
//
// 包含：工作区选择 + 项目选择 + 集数选择 + StageTabs + FilterBar
// ============================================================

import { Button, message } from 'antd';
import { FolderOpenOutlined } from '@ant-design/icons';
import { useTheme } from '@/components/providers/ThemeProvider';
import { useCanvasStore } from '../store/useCanvasStore';
import { StageTabs } from './StageTabs';
import { CanvasFilterBar } from './CanvasFilterBar';
import { ProjectSelector } from '../navigation/ProjectSelector';
import { EpisodeSelector } from '../navigation/EpisodeSelector';

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

    const handleOpenWorkspace = async () => {
        try {
            const dataSource = getDataSource();
            const dir = await dataSource.openDirectoryDialog();
            if (dir) {
                setWorkspace(dir);
                // 异步加载项目列表
                try {
                    const projects = await dataSource.listSubdirs(dir);
                    setProjects(projects);
                } catch (err) {
                    console.error('[CanvasToolbar] 加载项目列表失败:', err);
                }
            }
        } catch (err) {
            void message.error((err as Error).message || '打开目录失败');
        }
    };

    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',
                    gap: 8,
                    height: 40,
                }}
            >
                <Button
                    type="text"
                    size="small"
                    icon={<FolderOpenOutlined />}
                    onClick={() => void handleOpenWorkspace()}
                    style={{
                        color: isDark ? '#C4B5FD' : '#4338CA',
                        fontWeight: 500,
                        fontSize: 12,
                    }}
                >
                    {workspaceRoot ? '切换' : '打开'}
                </Button>

                {workspaceRoot && <ProjectSelector />}
                {workspaceRoot && <EpisodeSelector />}

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

                <StageTabs />

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

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

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