import { useState, useEffect, useRef, useCallback } from 'react';
import {
    createCompileJob, getCompileJobs, deleteCompileJob, exportCompileJob,
    createPipeline, startPipeline,
} from '../../../api';

const fmtDuration = (sec) => {
    if (!sec) return '';
    const m = Math.floor(sec / 60);
    const s = Math.round(sec % 60);
    return `${m}분 ${s}초`;
};

export default function CompileTab({ library, onSwitchToPipeline }) {
    const [jobs,         setJobs]         = useState([]);
    const [selected,     setSelected]     = useState([]); // [{id, title, audio_url}] in order
    const [crossfade,    setCrossfade]    = useState(3);
    const [title,        setTitle]        = useState('');
    const [creating,     setCreating]     = useState(false);
    const [exportData,   setExportData]   = useState(null); // {mp4_url, duration_sec, title}
    const [exportingId,  setExportingId]  = useState(null);
    const pollRef = useRef(null);

    const loadJobs = useCallback(async () => {
        const res = await getCompileJobs().catch(() => ({ jobs: [] }));
        setJobs(Array.isArray(res.jobs) ? res.jobs : []);
    }, []);

    useEffect(() => { loadJobs(); }, [loadJobs]);

    // Poll while any job is rendering
    useEffect(() => {
        const hasRendering = jobs.some(j => j.status === 'rendering');
        if (hasRendering && !pollRef.current) {
            pollRef.current = setInterval(loadJobs, 5000);
        } else if (!hasRendering && pollRef.current) {
            clearInterval(pollRef.current);
            pollRef.current = null;
        }
        return () => { clearInterval(pollRef.current); pollRef.current = null; };
    }, [jobs, loadJobs]);

    const toggleTrack = (track) => {
        setSelected(prev => {
            const exists = prev.find(t => t.id === track.id);
            if (exists) return prev.filter(t => t.id !== track.id);
            return [...prev, { id: track.id, title: track.title, audio_url: track.audio_url }];
        });
    };

    const moveUp   = (idx) => setSelected(prev => { const a = [...prev]; [a[idx-1], a[idx]] = [a[idx], a[idx-1]]; return a; });
    const moveDown = (idx) => setSelected(prev => { const a = [...prev]; [a[idx], a[idx+1]] = [a[idx+1], a[idx]]; return a; });
    const remove   = (idx) => setSelected(prev => prev.filter((_, i) => i !== idx));

    const handleCreate = async () => {
        if (selected.length < 2 || creating) return;
        setCreating(true);
        try {
            await createCompileJob({
                title: title.trim() || `컴파일 ${new Date().toLocaleDateString('ko-KR')}`,
                track_ids: selected.map(t => t.id),
                crossfade_sec: crossfade,
            });
            setSelected([]);
            setTitle('');
            await loadJobs();
        } catch (e) {
            console.error('createCompileJob:', e);
        } finally {
            setCreating(false);
        }
    };

    const handleExport = async (jobId) => {
        setExportingId(jobId);
        try {
            const data = await exportCompileJob(jobId);
            setExportData(data);
        } catch (e) {
            console.error('exportCompileJob:', e);
        } finally {
            setExportingId(null);
        }
    };

    const handleDelete = async (jobId) => {
        if (!window.confirm('컴파일 영상을 삭제할까요?')) return;
        await deleteCompileJob(jobId).catch(() => {});
        setJobs(prev => prev.filter(j => j.id !== jobId));
        if (exportData && exportData.id === jobId) setExportData(null);
    };

    const handleVideoFromCompile = async (jobId) => {
        if (!window.confirm('이 mix로 영상 파이프라인을 시작할까요?')) return;
        try {
            const p = await createPipeline({ compile_job_id: jobId });
            await startPipeline(p.id);
            if (onSwitchToPipeline) {
                onSwitchToPipeline(p.id);
            }
        } catch (e) {
            alert(`파이프라인 시작 실패: ${e.message || e}`);
        }
    };

    const totalMin = selected.length > 0
        ? Math.round(selected.reduce((acc, t) => {
            const match = library.find(l => l.id === t.id);
            return acc + (match?.duration_sec ?? 180);
          }, 0) / 60)
        : 0;

    return (
        <div className="yt-content">
            {/* 트랙 선택 패널 */}
            <div className="yt-card yt-card--create">
                <h3 className="yt-card__title">🎵 트랙 선택 (2개 이상)</h3>
                {library.length === 0 ? (
                    <p className="yt-empty">라이브러리에 트랙이 없습니다</p>
                ) : (
                    <div className="yt-compile-tracklist">
                        {library.map(t => {
                            const isSelected = !!selected.find(s => s.id === t.id);
                            return (
                                <div
                                    key={t.id}
                                    className={`yt-compile-track ${isSelected ? 'is-selected' : ''}`}
                                    onClick={() => toggleTrack(t)}
                                >
                                    <span className="yt-compile-track__check">{isSelected ? '✓' : ''}</span>
                                    <span className="yt-compile-track__title">{t.title}</span>
                                    {t.duration_sec && (
                                        <span className="yt-compile-track__dur">{fmtDuration(t.duration_sec)}</span>
                                    )}
                                </div>
                            );
                        })}
                    </div>
                )}
            </div>

            {/* 순서 조정 + 설정 */}
            {selected.length > 0 && (
                <div className="yt-card">
                    <h3 className="yt-card__title">
                        📋 선택된 트랙 순서 ({selected.length}개
                        {totalMin > 0 ? ` · 약 ${totalMin}분` : ''})
                    </h3>
                    <div className="yt-compile-order">
                        {selected.map((t, i) => (
                            <div key={t.id} className="yt-compile-order__row">
                                <span className="yt-compile-order__num">{i + 1}</span>
                                <span className="yt-compile-order__title">{t.title}</span>
                                <div className="yt-compile-order__btns">
                                    <button type="button" className="ms-btn ms-btn--ghost ms-btn--sm"
                                        onClick={() => moveUp(i)} disabled={i === 0}>↑</button>
                                    <button type="button" className="ms-btn ms-btn--ghost ms-btn--sm"
                                        onClick={() => moveDown(i)} disabled={i === selected.length - 1}>↓</button>
                                    <button type="button" className="ms-btn ms-btn--ghost ms-btn--sm"
                                        onClick={() => remove(i)}>✕</button>
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* 설정 */}
                    <div className="yt-compile-settings">
                        <div className="yt-field">
                            <label className="yt-field__label">크로스페이드 {crossfade}초</label>
                            <input type="range" min="1" max="10" step="0.5"
                                value={crossfade}
                                onChange={e => setCrossfade(Number(e.target.value))}
                                className="yt-compile-slider"
                            />
                        </div>
                        <div className="yt-field">
                            <label className="yt-field__label">컴파일 제목 (선택)</label>
                            <input type="text" className="yt-input"
                                placeholder={`컴파일 ${new Date().toLocaleDateString('ko-KR')}`}
                                value={title}
                                onChange={e => setTitle(e.target.value)}
                                maxLength={80}
                            />
                        </div>
                    </div>

                    <button
                        type="button"
                        className="ms-btn ms-btn--primary yt-create-btn"
                        onClick={handleCreate}
                        disabled={selected.length < 2 || creating}
                    >
                        {creating ? '생성 중...' : `🎬 컴파일 생성 (${selected.length}곡)`}
                    </button>
                </div>
            )}

            {/* 컴파일 작업 목록 */}
            {jobs.length > 0 && (
                <div className="yt-card">
                    <h3 className="yt-card__title">컴파일 작업</h3>
                    <div className="yt-project-list">
                        {jobs.map(j => (
                            <div key={j.id} className="yt-project-card">
                                <div className="yt-project-card__icon">🎵</div>
                                <div className="yt-project-card__info">
                                    <div className="yt-project-card__title">{j.title || `컴파일 #${j.id}`}</div>
                                    <div className="yt-project-card__meta">
                                        {j.track_ids?.length ?? 0}곡
                                        {j.duration_sec ? ` · ${fmtDuration(j.duration_sec)}` : ''}
                                        {' · '}크로스페이드 {j.crossfade_sec}초
                                    </div>
                                </div>
                                {j.status === 'rendering' && (
                                    <>
                                        <span className="yt-status yt-status--rendering">처리중</span>
                                        <div className="yt-progress-bar" style={{position:'absolute',bottom:0,left:0,right:0}}>
                                            <div className="yt-progress-bar__fill" />
                                        </div>
                                    </>
                                )}
                                {j.status === 'done' && (
                                    <>
                                        <span className="yt-status yt-status--done">✓ 완료</span>
                                        <button type="button"
                                            className="ms-btn ms-btn--ghost ms-btn--sm"
                                            onClick={() => handleExport(j.id)}
                                            disabled={exportingId === j.id}
                                        >
                                            {exportingId === j.id ? '...' : '↓ 내보내기'}
                                        </button>
                                        <button type="button"
                                            className="cmp-btn-video"
                                            onClick={() => handleVideoFromCompile(j.id)}
                                        >
                                            🎬 영상 만들기
                                        </button>
                                    </>
                                )}
                                {j.status === 'failed' && (
                                    <span className="yt-status yt-status--failed">실패</span>
                                )}
                                {j.status === 'pending' && (
                                    <span className="yt-status yt-status--pending">대기</span>
                                )}
                                <button type="button"
                                    className="ms-btn ms-btn--ghost ms-btn--sm"
                                    onClick={() => handleDelete(j.id)}
                                    style={{marginLeft: 4}}
                                >🗑</button>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* 내보내기 패키지 */}
            {exportData && (
                <div className="yt-card yt-card--export">
                    <h3 className="yt-card__title">↓ 내보내기</h3>
                    <div className="yt-export-links">
                        <a href={exportData.mp4_url} download
                            className="ms-btn ms-btn--primary ms-btn--sm">
                            ↓ MP4 다운로드
                        </a>
                    </div>
                    <div className="yt-meta-preview">
                        <div className="yt-meta-preview__label">파일 정보</div>
                        <pre className="yt-meta-preview__content">
{JSON.stringify({
    title:    exportData.title,
    duration: fmtDuration(exportData.duration_sec),
    mp4_url:  exportData.mp4_url,
}, null, 2)}
                        </pre>
                    </div>
                </div>
            )}
        </div>
    );
}