"use client";

import { Egg, Film, Loader2, PlusCircle, Search, Tv } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { api } from "@/lib/api";

export function SearchRequestModal({
	open,
	onOpenChange,
	costs,
}: {
	open: boolean;
	onOpenChange: (open: boolean) => void;
	costs: { movie: number; tv: number; scarcityMultiplier?: number };
}) {
	const [query, setQuery] = useState("");
	const [results, setResults] = useState<any[]>([]);
	const [loading, setLoading] = useState(false);

	const getTVCost = (item: any) => {
		const base = costs.tv;
		const eps = item.numberOfEpisodes || 0;
		if (eps <= 50) return base;
		if (eps <= 100) return Math.round(base * 1.3);
		if (eps <= 200) return Math.round(base * 1.6);
		if (eps <= 400) return Math.round(base * 2.0);
		return Math.round(base * 2.5);
	};

	const search = async () => {
		if (!query) return;
		setLoading(true);
		try {
			const res = await api.get(
				`/overseer/search?query=${encodeURIComponent(query)}`,
			);
			setResults(res.data?.results || res.data || []);
		} catch {
			toast.error("Chickens lost the trail! Search failed.");
		} finally {
			setLoading(false);
		}
	};

	const request = async (item: any, mediaType: string) => {
		try {
			const cost = mediaType === "movie" ? costs.movie : getTVCost(item);
			await api.post("/overseer/request", {
				mediaType,
				mediaId: item.id || item.tmdbId,
				title: item.title || item.name,
				seasons: item.seasons,
				numberOfEpisodes: item.numberOfEpisodes || 0,
			});
			toast.success(`Golden egg sent! ${cost} $COOP deducted.`);
			onOpenChange(false);
		} catch (e: any) {
			toast.error(e?.response?.data?.error || "Request flew the coop!");
		}
	};

	return (
		<Dialog open={open} onOpenChange={onOpenChange}>
			<DialogContent className="max-w-2xl rounded-[2.5rem] border-4 border-foreground bg-background p-0 overflow-hidden shadow-[15px_15px_0px_0px_rgba(0,0,0,1)]">
				<DialogHeader className="p-6 bg-primary border-b-4 border-foreground text-primary-foreground">
					<div className="flex items-center justify-between">
						<DialogTitle className="font-display text-3xl uppercase italic tracking-tighter flex items-center gap-2">
							<Search className="h-6 w-6" /> PECK FOR FEED
						</DialogTitle>
					</div>
					<DialogDescription className="text-primary-foreground/90 font-bold italic">
						{costs.scarcityMultiplier && costs.scarcityMultiplier > 1
							? `Market scarcity: x${costs.scarcityMultiplier}`
							: ""}
					</DialogDescription>
				</DialogHeader>

				<div className="p-6 space-y-6 font-sans">
					<div className="flex gap-2">
						<div className="relative flex-1">
							<Input
								value={query}
								onChange={(e) => setQuery(e.target.value)}
								onKeyDown={(e) => e.key === "Enter" && search()}
								placeholder="Type movie or show name..."
								className="rounded-full border-4 border-foreground h-14 pl-6 pr-12 font-bold text-lg focus-visible:ring-primary shadow-sm"
							/>
							<Search className="absolute right-4 top-1/2 -translate-y-1/2 h-6 w-6 text-muted-foreground" />
						</div>
						<Button
							onClick={search}
							disabled={loading || !query}
							className="rounded-full h-14 px-8 border-4 border-foreground shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all font-black text-lg"
						>
							{loading ? <Loader2 className="animate-spin" /> : "SEARCH"}
						</Button>
					</div>

					<div className="max-h-[50vh] overflow-y-auto pr-2 space-y-4 scrollbar-hide">
						{results.map((r) => {
							const itemCost =
								r.mediaType === "movie" ? costs.movie : getTVCost(r);
							return (
								<div
									key={r.id || r.tmdbId}
									className="group flex gap-4 border-4 border-foreground bg-card p-3 rounded-3xl hover:bg-accent/5 transition-all shadow-[4px_4px_0px_0px_rgba(0,0,0,0.1)] hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,0.1)]"
								>
									<div className="relative h-28 w-20 flex-shrink-0 overflow-hidden rounded-xl border-2 border-foreground bg-muted shadow-sm">
										{r.posterPath ? (
											<img
												src={`https://image.tmdb.org/t/p/w200${r.posterPath}`}
												alt={r.title || r.name}
												className="h-full w-full object-cover group-hover:scale-110 transition-transform duration-300"
											/>
										) : (
											<div className="flex h-full w-full items-center justify-center bg-secondary/20">
												<Film className="h-8 w-8 text-muted-foreground/30" />
											</div>
										)}
									</div>

									<div className="flex flex-1 flex-col justify-between py-1">
										<div>
											<div className="font-black text-xl leading-tight line-clamp-1">
												{r.title || r.name}
											</div>
											<div className="flex items-center gap-2 mt-1 flex-wrap">
												<span className="inline-flex items-center gap-1 rounded-full bg-secondary/30 px-2 py-0.5 text-[10px] font-black uppercase text-secondary-foreground border border-foreground/10">
													{r.mediaType === "movie" ? (
														<Film className="h-3 w-3" />
													) : (
														<Tv className="h-3 w-3" />
													)}
													{r.mediaType || "unknown"}
												</span>
												{r.releaseDate && (
													<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
														{new Date(r.releaseDate).getFullYear()}
													</span>
												)}
												{r.numberOfEpisodes > 0 && (
													<span className="text-[10px] font-bold text-muted-foreground">
														{r.numberOfEpisodes} eps
													</span>
												)}
											</div>
										</div>

										<div className="flex items-center justify-between gap-4 mt-2">
											<div className="text-xs font-bold text-muted-foreground italic flex items-center gap-1">
												<Egg className="h-3 w-3" /> {itemCost} $COOP
											</div>
											<Button
												size="sm"
												onClick={() => request(r, r.mediaType || "movie")}
												className="rounded-full border-2 border-foreground font-black text-xs hover:bg-primary hover:text-white transition-colors"
											>
												REQUEST <PlusCircle className="ml-1 h-3 w-3" />
											</Button>
										</div>
									</div>
								</div>
							);
						})}

						{results.length === 0 && !loading && query && (
							<div className="text-center py-10 opacity-40">
								<div className="text-6xl mb-4">🏜️</div>
								<div className="font-black uppercase tracking-widest">
									Nothing found in the yard.
								</div>
							</div>
						)}
					</div>
				</div>
			</DialogContent>
		</Dialog>
	);
}