const STATUS_LABELS = {
    queued: '대기 중',
    generating: '음악 생성 중',
    generated: '음악 완료, 컴파일 대기',
    compiling: '컴파일 중',
    piped: '영상 파이프라인 시작됨 — YouTube 탭 진행 탭에서 확인',
    failed: '실패',
    cancelled: '취소',
};

export default function BatchProgress({ batch }) {
    if (!batch) return null;
    const trackList = Array.from({ length: batch.count }, (_, i) => i + 1);
    return (
        <div className="ms-batch-progress">
            <div className="ms-batch-header">
                배치 #{batch.id} — <strong>{batch.genre}</strong> ·{' '}
                {batch.completed}/{batch.count} 완료 ·{' '}
                상태: <strong className={`ms-batch-status ms-batch-status--${batch.status}`}>
                    {STATUS_LABELS[batch.status] || batch.status}
                </strong>
            </div>
            {batch.error && <div className="ms-error">에러: {batch.error}</div>}
            <ol className="ms-batch-tracks">
                {trackList.map(n => {
                    const completed = n <= batch.completed;
                    const current = n === batch.current_track_index && batch.status === 'generating';
                    const tr = (batch.tracks || [])[n - 1];
                    return (
                        <li key={n} className={completed ? 'done' : current ? 'current' : 'pending'}>
                            {completed ? '✓' : current ? '⏳' : '○'}
                            {' '}Track {n}: {tr?.title || (current ? '생성 중...' : '대기')}
                        </li>
                    );
                })}
            </ol>
            {batch.compile_job_id && (
                <div className="ms-batch-link">📀 컴파일 #{batch.compile_job_id}</div>
            )}
            {batch.pipeline_id && (
                <div className="ms-batch-link">
                    🎬 영상 파이프라인 #{batch.pipeline_id} —{' '}
                    <em>YouTube 탭 → 진행 탭에서 확인</em>
                </div>
            )}
        </div>
    );
}