import { useState, useEffect } from 'react';
import VideoProjectsTab from './VideoProjectsTab';
import RevenueTab from './RevenueTab';
import TrendsTab from './TrendsTab';
import CompileTab from './CompileTab';
import PipelineTab from './PipelineTab';
import SetupTab from './SetupTab';

export default function YoutubeTab({ library, initialTrackId, onClearInitialTrack, openPipelineFor }) {
    const [subtab, setSubtab] = useState('pipeline');

    useEffect(() => {
        if (initialTrackId) setSubtab('video');
    }, [initialTrackId]);

    useEffect(() => {
        if (openPipelineFor) setSubtab('pipeline');
    }, [openPipelineFor]);

    const tabs = [
        ['pipeline', '🚀 진행'],
        ['video', '🎬 영상 제작'],
        ['compile', '🎵 컴파일'],
        ['trends', '📊 시장 트렌드'],
        ['revenue', '💰 수익 추적'],
        ['setup', '⚙️ 구성'],
    ];

    return (
        <div className="yt-container">
            <nav className="yt-subtabs">
                {tabs.map(([key, label]) => (
                    <button
                        key={key}
                        type="button"
                        className={`yt-subtab ${subtab === key ? 'is-active' : ''}`}
                        onClick={() => setSubtab(key)}
                    >
                        {label}
                    </button>
                ))}
            </nav>

            {subtab === 'pipeline' && <PipelineTab library={library} initialTrackId={openPipelineFor} />}
            {subtab === 'video' && (
                <VideoProjectsTab
                    library={library}
                    initialTrackId={initialTrackId}
                    onClearInitialTrack={onClearInitialTrack}
                />
            )}
            {subtab === 'compile' && (
                <CompileTab
                    library={library}
                    onSwitchToPipeline={() => setSubtab('pipeline')}
                />
            )}
            {subtab === 'trends' && <TrendsTab />}
            {subtab === 'revenue' && <RevenueTab />}
            {subtab === 'setup' && <SetupTab />}
        </div>
    );
}