first commit

app/admin/movies/[id]/EpisodeSelector.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { Season } from '@/lib/api';
+import { useMemo, useState, useEffect } from 'react';
+
+interface EpisodeSelectorProps {
+    seasons: Season[];
+    currentSeason: number;
+    currentEpisode: number;
+}
+
+export function EpisodeSelector({ seasons, currentSeason, currentEpisode }: EpisodeSelectorProps) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+
+    // Default to first season if currentSeason is 0
+    const [selectedSeason, setSelectedSeason] = useState<string>(
+        currentSeason > 0 ? currentSeason.toString() : (seasons[0]?.se.toString() || '1')
+    );
+
+    const activeSeason = useMemo(() =>
+        seasons.find(s => s.se.toString() === selectedSeason),
+        [seasons, selectedSeason]
+    );
+
+    const episodes = useMemo(() => {
+        if (!activeSeason) return [];
+        return Array.from({ length: activeSeason.maxEp }, (_, i) => i + 1);
+    }, [activeSeason]);
+
+    const handleSeasonChange = (val: string) => {
+        setSelectedSeason(val);
+        // When season changes, we don't necessarily update URL until episode is picked?
+        // Or we can just reset episode logic. 
+        // Let's just update local state, user must pick episode.
+    };
+
+    const handleEpisodeChange = (val: string) => {
+        const params = new URLSearchParams(searchParams);
+        params.set('season', selectedSeason);
+        params.set('episode', val);
+        router.push(`${pathname}?${params.toString()}`);
+    };
+
+    // Update local state if prop changes (e.g. navigation)
+    useEffect(() => {
+        if (currentSeason > 0) {
+            setSelectedSeason(currentSeason.toString());
+        }
+    }, [currentSeason]);
+
+    return (
+        <div className="flex flex-wrap gap-4 p-4 bg-gray-900/50 rounded-lg border border-gray-800">
+            <div className="flex flex-col gap-2">
+                <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">Season</span>
+                <Select value={selectedSeason} onValueChange={handleSeasonChange}>
+                    <SelectTrigger className="w-[140px] bg-gray-950 border-gray-700">
+                        <SelectValue placeholder="Select Season" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {seasons.map((season) => (
+                            <SelectItem key={season.se} value={season.se.toString()}>
+                                Season {season.se}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <div className="flex flex-col gap-2">
+                <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">Episode</span>
+                <Select
+                    value={currentEpisode > 0 && currentSeason.toString() === selectedSeason ? currentEpisode.toString() : ''}
+                    onValueChange={handleEpisodeChange}
+                    disabled={!activeSeason}
+                >
+                    <SelectTrigger className="w-[140px] bg-gray-950 border-gray-700">
+                        <SelectValue placeholder="Select Episode" />
+                    </SelectTrigger>
+                    <SelectContent className="max-h-[300px]">
+                        {episodes.map((ep) => (
+                            <SelectItem key={ep} value={ep.toString()}>
+                                Episode {ep}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    );
+}