// ============================================================
// ShotList — 左侧镜头单选列表
//
// 列出 selectedProject/shots/selectedEpisode/ 下的子文件夹。
// Assets 阶段隐藏。
// ============================================================

import { useCallback } from 'react';
import { useCanvasStore } from '../../stores/useCanvasStore';
import { useTheme } from '@/app/providers/ThemeProvider';

const SHOT_LIST_WIDTH = 200;

export function ShotList() {
    const { isDark } = useTheme();
    const shots = useCanvasStore((s) => s.shots);
    const selectedShot = useCanvasStore((s) => s.selectedShot);
    const selectedEpisode = useCanvasStore((s) => s.selectedEpisode);
    const selectShot = useCanvasStore((s) => s.selectShot);
    const currentStage = useCanvasStore((s) => s.currentStage);

    const handleClick = useCallback(
        (shotName: string) => {
            selectShot(shotName);
        },
        [selectShot],
    );

    // Assets 阶段隐藏镜头列表
    if (currentStage === 'Assets') return null;

    const bg = isDark ? '#0F0D21' : '#F5F3FF';
    const borderColor = isDark ? '#2D2A4A' : '#E5E0F0';
    const textColor = isDark ? '#C8C4E0' : '#4A4570';
    const activeBg = isDark ? '#2D2A5A' : '#E8E4FF';
    const activeColor = isDark ? '#C4B5FD' : '#6D28D9';
    const hoverBg = isDark ? '#1E1B3B' : '#EDEAFA';

    return (
        <div
            style={{
                width: SHOT_LIST_WIDTH,
                flexShrink: 0,
                background: bg,
                borderRight: `1px solid ${borderColor}`,
                display: 'flex',
                flexDirection: 'column',
                overflow: 'hidden',
            }}
        >
            {/* 标题 */}
            <div
                style={{
                    padding: '8px 12px',
                    fontSize: 12,
                    fontWeight: 600,
                    color: textColor,
                    borderBottom: `1px solid ${borderColor}`,
                    flexShrink: 0,
                }}
            >
                镜头列表
                {shots.length > 0 && (
                    <span style={{ fontWeight: 400, marginLeft: 4 }}>({shots.length})</span>
                )}
            </div>

            {/* 列表 */}
            <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0' }}>
                {!selectedEpisode ? (
                    <div
                        style={{
                            padding: '16px 12px',
                            fontSize: 12,
                            color: textColor,
                            textAlign: 'center',
                        }}
                    >
                        请先选择集数
                    </div>
                ) : shots.length === 0 ? (
                    <div
                        style={{
                            padding: '16px 12px',
                            fontSize: 12,
                            color: textColor,
                            textAlign: 'center',
                        }}
                    >
                        该集数下无镜头
                    </div>
                ) : (
                    shots.map((shot) => {
                        const active = shot === selectedShot;
                        return (
                            <div
                                key={shot}
                                onClick={() => handleClick(shot)}
                                style={{
                                    padding: '6px 12px',
                                    cursor: 'pointer',
                                    fontSize: 13,
                                    color: active ? activeColor : textColor,
                                    background: active ? activeBg : 'transparent',
                                    transition: 'background 0.15s',
                                    userSelect: 'none',
                                }}
                                onMouseEnter={(e) => {
                                    if (!active)
                                        (e.currentTarget as HTMLElement).style.background = hoverBg;
                                }}
                                onMouseLeave={(e) => {
                                    if (!active)
                                        (e.currentTarget as HTMLElement).style.background =
                                            'transparent';
                                }}
                            >
                                {shot}
                            </div>
                        );
                    })
                )}
            </div>
        </div>
    );
}
