// ============================================================
// StageTabs — 阶段切换标签栏
//
// 六个阶段：Storyboard / Keyframe / Video / Audio / LipSync / Assets
// 点击切换 store.currentStage，触发 useDirectoryScan 重新扫描
// ============================================================

import { useTheme } from '@/components/providers/ThemeProvider';
import { useCanvasStore, type StageType } from '../store/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);

    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: 12,
                            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>
    );
}
