import * as React from 'react';
import VideoCreator from './VideoCreator';
import { ContentScheduler } from './ContentScheduler';
import { Tabs } from './ui/Tabs';
import { AIGCSettings, AIGCVideo, ScheduledPost } from '../types';
import { useTranslation } from '../hooks/useI18n';

interface AIGCProps {
    aigcSettings: AIGCSettings;
    onVideosGenerated: (videos: AIGCVideo[]) => void;
    onScheduleUpdate: (schedule: ScheduledPost[]) => void;
    // FIX: Add onUpdateAIGCSettings to props to be passed down to VideoCreator.
    onUpdateAIGCSettings: (newSettings: AIGCSettings) => void;
}

const AIGC: React.FC<AIGCProps> = ({ aigcSettings, onVideosGenerated, onScheduleUpdate, onUpdateAIGCSettings }) => {
    const { t } = useTranslation();
    const [activeTab, setActiveTab] = React.useState<'creator' | 'scheduler'>('creator');

    const renderContent = () => {
        switch (activeTab) {
            case 'creator':
                // FIX: Pass the correct props to VideoCreator as its interface has changed.
                return <VideoCreator
                    aigcSettings={aigcSettings}
                    onUpdateAIGCSettings={onUpdateAIGCSettings}
                    onVideosGenerated={onVideosGenerated}
                />
            case 'scheduler':
                return <ContentScheduler
                    videos={aigcSettings.videos}
                    schedule={aigcSettings.schedule}
                    onScheduleUpdate={onScheduleUpdate}
                />
            default:
                return null
        }
    };
    
    const tabLabels = {
        creator: t('nav.aigc.creator'),
        scheduler: t('nav.aigc.scheduler'),
    };

    return (
        <div className='h-full flex flex-col'>
            <div className='p-6 border-b border-gray-200 dark:border-gray-700'>
                 <Tabs
                    tabs={Object.keys(tabLabels) as Array<keyof typeof tabLabels>}
                    activeTab={activeTab}
                    labels={tabLabels}
                    onTabClick={(tab) => setActiveTab(tab)}
                />
            </div>
            <div className='flex-1 overflow-hidden'>
                {renderContent()}
            </div>
        </div>
    );
};

export default AIGC;