// ============================================================
// StageTabs — 阶段切换标签栏 + 无限画布按钮
//
// 六个阶段标签：Assets / Storyboard / Keyframe / Video / Audio / LipSync
// 点击切换 store.currentStage，触发 useDirectoryScan 重新扫描。
//
// "无限画布"按钮：通过 IPC 打开独立的画布 BrowserWindow，
// 关闭其他页面不影响该窗口。
// ============================================================

import { useCallback } from 'react';
import { logger } from '@/shared/utils/bus';
import { Button } from 'antd';
import { ExpandOutlined } from '@ant-design/icons';
import { useTheme } from '@/app/providers/ThemeProvider';
import { useCanvasStore, type StageType } from '../../stores/useCanvasStore';
import { STAGE_CONFIGS } from '../../utils/constants';

export function StageTabs() {
    const { isDark } = useTheme();
    const currentStage = useCanvasStore((s) => s.currentStage);
    const setStage = useCanvasStore((s) => s.setStage);
    const getProjectPath = useCanvasStore((s) => s.getProjectPath);

    /** 打开独立的无限画布窗口 */
    const handleOpenCanvasWindow = useCallback(() => {
        try {
            const projectPath = getProjectPath();
            window.canvas?.openWindow(projectPath ?? undefined);
        } catch (err) {
            logger.warn('canvas', '打开无限画布窗口失败', err instanceof Error ? err : new Error(String(err)));
        }
    }, [getProjectPath]);

    return (
        <div style={{ display: 'flex', gap: 2, alignItems: 'center' }}>
            {STAGE_CONFIGS.map((cfg) => {
                const isActive = currentStage === cfg.key;
                return (
                    <button
                        key={cfg.key}
                        type="button"
                        onClick={() => setStage(cfg.key as StageType)}
                        title={cfg.label}
                        style={{
                            padding: '4px 10px',
                            border: 'none',
                            borderRadius: 4,
                            cursor: 'pointer',
                            fontSize: 13,
                            fontWeight: isActive ? 600 : 400,
                            background: isActive
                                ? isDark
                                    ? '#3E3A6A'
                                    : '#E0E7FF'
                                : 'transparent',
                            color: isActive
                                ? isDark
                                    ? '#C4B5FD'
                                    : '#4338CA'
                                : isDark
                                    ? '#6E6B90'
                                    : '#9CA3AF',
                            transition: 'all 0.15s',
                            whiteSpace: 'nowrap',
                        }}
                    >
                        <span style={{ marginRight: 4 }}>{cfg.icon}</span>
                        {cfg.label}
                    </button>
                );
            })}

            {/* 分隔线 */}
            <div
                style={{
                    width: 1,
                    height: 18,
                    background: isDark ? '#3E3A6A' : '#D1D5DB',
                    margin: '0 4px',
                }}
            />

            {/* 无限画布按钮 */}
            <Button
                size="small"
                icon={<ExpandOutlined />}
                onClick={() => void handleOpenCanvasWindow()}
                title="在新窗口中打开无限画布（关闭其他页面不影响此窗口）"
                style={{
                    fontSize: 12,
                    fontWeight: 500,
                    borderRadius: 4,
                    border: `1px solid ${isDark ? '#3E3A6A' : '#C7D2FE'}`,
                    background: isDark
                        ? 'rgba(62, 58, 106, 0.4)'
                        : 'rgba(224, 231, 255, 0.6)',
                    color: isDark ? '#C4B5FD' : '#4338CA',
                    padding: '2px 10px',
                    transition: 'all 0.15s',
                }}
            >
                无限画布
            </Button>
        </div>
    );
}
