Twitter

onClose()}>

e.stopPropagation()}>

{post ? t('aigc.scheduler.title') : t('aigc.scheduler.title')}

{`${t('for')} ${format(parseISO(date), 'MMMM d, yyyy', { locale: dateLocale })}`}

{video.title}

{t('aigc.scheduler.time')} setTime(e.target.value)} className="w-full bg-gray-100 dark:bg-gray-700 p-2 rounded-md border border-gray-300 dark:border-gray-600"/>

{t('aigc.scheduler.caption')}

setCaption(e.target.value)} className="w-full bg-gray-100 dark:bg-gray-700 p-2 rounded-md border border-gray-300 dark:border-gray-600" />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t('aigc.scheduler.post_to')}</label>
                        <div className="space-y-2">
                            {accounts.map(acc => (
                                <label key={acc.id} className="flex items-center gap-3 p-2 bg-gray-100 dark:bg-gray-700 rounded-md cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600">
                                    <input type="checkbox" className="h-4 w-4 rounded bg-gray-200 dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-brand-primary focus:ring-brand-secondary" checked={selectedAccounts.includes(acc.id)} onChange={() => handleAccountToggle(acc.id)} />
                                    {acc.icon}
                                    <span className="font-semibold">{acc.platform}</span>
                                    <span className="text-gray-500 dark:text-gray-400 text-sm ml-auto">@{acc.username}</span>
                                </label>
                            ))}
                        </div>
                    </div>
                </div>
                <div className={`p-4 bg-gray-50 dark:bg-gray-900/50 flex ${post ? 'justify-between' : 'justify-end'} gap-3`}>
                   {post && <button onClick={() => { onDelete(post.id); onClose(); }} className="px-4 py-2 rounded-md text-sm font-semibold text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50">{t('delete')}</button>}
                   <div className="flex gap-3">
                       <button onClick={onClose} className="px-4 py-2 rounded-md text-sm font-semibold text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">{t('cancel')}</button>
                       <button onClick={handleSubmit} className="px-4 py-2 rounded-md text-sm font-semibold text-white bg-brand-primary hover:bg-brand-secondary">{post ? t('update') : t('aigc.scheduler.schedule')}</button>
                   </div>
                </div>
            </div>
        </div>
    );
};

const VideoLibrarySidebar: React.FC<{
    videos: AIGCVideo[];
    onDragStart: (e: React.DragEvent, videoId: string) => void;
    activeFilter: 'all' | 'scheduled' | 'unscheduled';
    onFilterChange: (filter: 'all' | 'scheduled' | 'unscheduled') => void;
}> = ({ videos, onDragStart, activeFilter, onFilterChange }) => {
    const { t } = useTranslation();
    return (
        <aside className="w-80 bg-white dark:bg-gray-800 p-4 flex flex-col border-r border-gray-200 dark:border-gray-700">
            <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-4">{t('aigc.scheduler.video_library')}</h3>
            <div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-900 p-1 rounded-lg mb-4">
                {(['all', 'scheduled', 'unscheduled'] as const).map(filter => (
                    <button 
                        key={filter} 
                        onClick={() => onFilterChange(filter)}
                        className={`flex-1 px-3 py-1 text-sm rounded-md capitalize transition-colors ${activeFilter === filter ? 'bg-brand-primary text-white shadow' : 'hover:bg-gray-200 dark:hover:bg-gray-600'}`}>
                        {t(filter)}
                    </button>
                ))}
            </div>
            <div className="flex-1 overflow-y-auto pr-2 -mr-4 space-y-3">
                {videos.map(video => (
                    <div key={video.id} draggable onDragStart={e => onDragStart(e, video.id)} className="flex items-center gap-3 p-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg cursor-grab active:cursor-grabbing">
                        <img src={video.thumbnailUrl} alt={video.title} className="w-24 h-16 rounded object-cover" />
                        <p className="flex-1 font-semibold text-sm text-gray-900 dark:text-white truncate">{video.title}</p>
                    </div>
                ))}
                {videos.length === 0 && <p className="text-center text-sm text-gray-400 dark:text-gray-500 py-10">{t('aigc.scheduler.no_videos_filter')}</p>}
            </div>
        </aside>
    );
};

// --- CALENDAR COMPONENTS ---

const CalendarHeader: React.FC<{ view: string; currentDate: Date; onPrev: () => void; onNext: () => void; onViewChange: (view: 'month' | 'week' | 'day') => void; }> = ({ view, currentDate, onPrev, onNext, onViewChange }) => {
    const { dateLocale } = useTranslation();
    const formatString = view === 'month' ? 'MMMM yyyy' : (view === 'week' ? "MMM d, yyyy" : 'MMMM d, yyyy');
    return (
        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
            <div>
                <h2 className="text-xl font-bold text-gray-900 dark:text-white">{format(currentDate, formatString, { locale: dateLocale })}</h2>
                 {view === 'week' && <p className="text-sm text-gray-500 dark:text-gray-400">{`Week of ${format(startOfWeek(currentDate, { locale: dateLocale }), 'MMM d')} - ${format(endOfWeek(currentDate, { locale: dateLocale }), 'MMM d')}`}</p>}
            </div>
            <div className="flex items-center gap-4">
                <div className="flex items-center">
                    <button onClick={onPrev} className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"><Icon className="h-5 w-5"><path d="M15 19l-7-7 7-7" /></Icon></button>
                    <button onClick={onNext} className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"><Icon className="h-5 w-5"><path d="M9 5l7 7-7 7" /></Icon></button>
                </div>
                <div className="flex items-center gap-1 bg-gray-200 dark:bg-gray-700 p-1 rounded-lg">
                    {(['month', 'week', 'day'] as const).map(v => (
                        <button key={v} onClick={() => onViewChange(v)} className={`px-3 py-1 text-sm rounded-md capitalize ${view === v ? 'bg-brand-primary text-white' : 'hover:bg-gray-300 dark:hover:bg-gray-600'}`}>{v}</button>
                    ))}
                </div>
            </div>
        </div>
    );
};

const ScheduledPostItem: React.FC<{ post: ScheduledPost; video: AIGCVideo | undefined; onClick: (e: React.MouseEvent) => void; }> = ({ post, video, onClick }) => {
    if (!video) return null;
    const postDate = parseISO(`${post.date}T${post.time}`);
    const isDistributed = post.status === 'distributed' || isPast(postDate);
    return (
        <button onClick={onClick} className={`w-full text-left p-2 rounded-md mb-1 ${isDistributed ? 'bg-green-500/10 hover:bg-green-500/20' : 'bg-blue-500/10 hover:bg-blue-500/20'}`}>
            <div className="flex items-center gap-2">
                {isDistributed ? <CheckCircleIcon className="h-4 w-4 text-green-400" /> : <div className="h-4 w-4" />}
                <p className={`text-xs font-semibold ${isDistributed ? 'text-green-600 dark:text-green-400' : 'text-blue-600 dark:text-blue-400'}`}>{post.time}</p>
            </div>
            <p className="text-sm font-semibold truncate mt-1 text-gray-800 dark:text-gray-200">{video.title}</p>
        </button>
    );
};

const Calendar: React.FC<{ 
    view: 'month' | 'week' | 'day'; 
    currentDate: Date;
    schedule: ScheduledPost[];
    videos: AIGCVideo[];
    onDateSelect: (date: string) => void;
    onPostSelect: (post: ScheduledPost) => void;
    onDrop: (e: React.DragEvent, date: string) => void;
}> = ({ view, currentDate, schedule, videos, onDateSelect, onPostSelect, onDrop }) => {
    const { dateLocale } = useTranslation();
    const [dragOverDate, setDragOverDate] = React.useState<string | null>(null);
    
    const renderMonthView = () => {
        const monthStart = startOfMonth(currentDate);
        const monthEnd = endOfMonth(monthStart);
        const days = eachDayOfInterval({ start: startOfWeek(monthStart, { locale: dateLocale }), end: endOfWeek(monthEnd, { locale: dateLocale }) });

const weekdays = eachDayOfInterval({
            start: startOfWeek(currentDate, { locale: dateLocale }),
            end: endOfWeek(currentDate, { locale: dateLocale }),
        });

return (
            <>
                <div className="grid grid-cols-7 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
                    {weekdays.map(day => <div key={day.toString()} className="py-2">{format(day, 'E', { locale: dateLocale })}</div>)}
                </div>
                <div className="grid grid-cols-7 flex-1">
                    {days.map(day => {
                        const dayStr = format(day, 'yyyy-MM-dd');
                        const isDragOver = dragOverDate === dayStr;
                        const postsForDay = schedule.filter(p => isSameDay(parseISO(p.date), day)).sort((a,b) => a.time.localeCompare(b.time));
                        return (
                            <div 
                                key={day.toString()} 
                                onDragEnter={(e) => { e.preventDefault(); setDragOverDate(dayStr); }}
                                onDragLeave={(e) => { e.preventDefault(); setDragOverDate(null); }}
                                onDragOver={e => e.preventDefault()} 
                                onDrop={e => { onDrop(e, dayStr); setDragOverDate(null); }}
                                onClick={() => onDateSelect(dayStr)}
                                className={`relative border-r border-b border-gray-200 dark:border-gray-700 p-2 transition-all duration-200 ${!isSameMonth(day, currentDate) ? 'bg-gray-50 dark:bg-gray-900/50' : ''} ${isDragOver ? 'bg-brand-primary/20 border-2 border-brand-primary' : ''}`}
                            >
                                <time dateTime={dayStr} className={`text-sm font-semibold ${isToday(day) ? 'bg-brand-primary text-white rounded-full h-6 w-6 flex items-center justify-center' : ''}`}>{format(day, 'd')}</time>
                                <div className="mt-2">{postsForDay.map(post => <ScheduledPostItem key={post.id} post={post} video={videos.find(v => v.id === post.videoId)} onClick={e => { e.stopPropagation(); onPostSelect(post); }} />)}</div>
                            </div>
                        );
                    })}
                </div>
            </>
        );
    };
    
    // Day and Week views could be implemented similarly if needed
    
    return (
        <div className="flex-1 flex flex-col overflow-y-auto">
            {renderMonthView()}
        </div>
    );
};

// --- MAIN COMPONENT ---
interface ContentSchedulerProps {
    videos: AIGCVideo[];
    schedule: ScheduledPost[];
    onScheduleUpdate: (newSchedule: ScheduledPost[]) => void;
}

export const ContentScheduler: React.FC<ContentSchedulerProps> = ({ videos, schedule, onScheduleUpdate }) => {
    const [currentDate, setCurrentDate] = React.useState(new Date());
    const [view, setView] = React.useState<'month' | 'week' | 'day'>('month');
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    const [modalData, setModalData] = React.useState<{ videoId: string | null; postId: string | null; date: string }>({ videoId: null, postId: null, date: '' });
    const [videoFilter, setVideoFilter] = React.useState<'all' | 'scheduled' | 'unscheduled'>('all');

const scheduledVideoIds = React.useMemo(() => new Set(schedule.map(p => p.videoId)), [schedule]);

const handleUpdate = (updatedPost: ScheduledPost) => onScheduleUpdate(schedule.map(p => p.id === updatedPost.id ? updatedPost : p));
    const handleDelete = (postId: string) => onScheduleUpdate(schedule.filter(p => p.id !== postId));