import { createFileRoute } from "@tanstack/react-router";
import { z } from "zod";
import { HLSPlayer } from "@/components/player/HLSPlayer";

// Search params schema for audio and subtitle stream indices
const watchSearchSchema = z.object({
	asi: z.number().optional(), // audioStreamIndex
	ssi: z.number().optional(), // subtitleStreamIndex
});

export const Route = createFileRoute("/watch/$id")({
	component: WatchPage,
	validateSearch: watchSearchSchema,
	ssr: true,
});

function WatchPage() {
	const { id } = Route.useParams();
	const { asi, ssi } = Route.useSearch();

	// Build selected tracks from search params
	const selectedTracks = {
		audio: asi,
		subtitle: ssi,
	};
	console.log("Rendering watch page...");
	return (
		<div className="min-h-screen w-full bg-black">
			<HLSPlayer titleId={id} selectedTracks={selectedTracks} />
		</div>
	);
}
