"use client";

import { useState, useMemo } from "react";
import { useAppStore } from "@/lib/store";
import { useApi } from "@/lib/api";
import { VideoPlayer, type VideoSource } from "../video-player";
import { Spinner, EmptyState } from "../skeleton";
import { ChevronLeft, ListVideo, Star, Clock, Film } from "lucide-react";
import { toPersianDigits } from "@/lib/poster";
import { cn } from "@/lib/utils";

interface Episode { id: string; number: number; title: string; duration: number; videoUrl?: string | null; }
interface Season { id: string; number: number; episodes: Episode[]; }

interface WatchData {
  id: string; slug: string; type: "movie" | "series";
  title: string; persianTitle: string;
  poster: string | null; backdrop: string | null;
  gradient: [string, string];
  imdbRating: number; releaseYear: number; quality: string;
  sources: VideoSource[];
  seasons?: Season[];
  description?: string;
}

export function WatchView() {
  const { contentType, contentSlug } = useAppStore();
  const navigate = useAppStore((s) => s.navigate);
  const apiPath = contentType && contentSlug ? `/api/${contentType}/${contentSlug}` : null;
  const { data, loading } = useApi<WatchData>(apiPath);

  const [seasonIdx, setSeasonIdx] = useState(0);
  const [epIdx, setEpIdx] = useState(0);

  // For series: build sources for selected episode (episode.videoUrl) + a 720p fallback
  const activeSources: VideoSource[] = useMemo(() => {
    if (!data) return [];
    if (data.type === "movie") return data.sources;
    const ep = data.seasons?.[seasonIdx]?.episodes[epIdx];
    if (!ep) return data.sources;
    if (ep.videoUrl) {
      const isHls = ep.videoUrl.includes(".m3u8");
      return [
        { quality: "1080p", url: ep.videoUrl, isHls },
        ...data.sources.filter((s) => s.quality !== "1080p"),
      ];
    }
    return data.sources;
  }, [data, seasonIdx, epIdx]);

  if (loading || !data) {
    return (
      <div className="h-[80vh] flex items-center justify-center">
        <Spinner />
      </div>
    );
  }

  const currentEp = data.type === "series" ? data.seasons?.[seasonIdx]?.episodes[epIdx] : null;
  const title = data.type === "series" && currentEp
    ? `${data.persianTitle} — فصل ${toPersianDigits(seasonIdx + 1)} قسمت ${toPersianDigits(currentEp.number)}: ${currentEp.title}`
    : data.persianTitle;

  const onNext = data.type === "series" ? (() => {
    const eps = data.seasons?.[seasonIdx]?.episodes ?? [];
    if (epIdx + 1 < eps.length) setEpIdx(epIdx + 1);
  }) : undefined;

  return (
    <div className="px-4 md:px-8 py-4">
      <button onClick={() => navigate("detail", { contentType: data.type, contentSlug: data.slug })} className="flex items-center gap-1 text-sm text-muted-foreground hover:text-accent mb-3">
        <ChevronLeft className="h-4 w-4 rotate-180" /> بازگشت به جزئیات
      </button>

      <div className="grid lg:grid-cols-[1fr_320px] gap-4">
        {/* Player */}
        <div className="aspect-video lg:aspect-auto lg:h-[70vh] rounded-2xl overflow-hidden bg-black">
          <VideoPlayer
            sources={activeSources}
            title={title}
            poster={data.backdrop ?? data.poster}
            gradient={data.gradient}
            onNext={onNext}
            nextLabel="قسمت بعد"
          />
        </div>

        {/* Sidebar */}
        <aside className="space-y-4">
          <div className="glass rounded-2xl p-4">
            <h2 className="font-bold text-lg mb-1">{data.persianTitle}</h2>
            <div className="flex items-center gap-3 text-xs text-muted-foreground mb-3">
              <span className="flex items-center gap-1 text-warning"><Star className="h-3.5 w-3.5 fill-warning" /> {toPersianDigits(data.imdbRating.toFixed(1))}</span>
              <span>{toPersianDigits(data.releaseYear)}</span>
              <span className="rounded bg-white/10 px-1.5 py-0.5">{data.quality === "2160p" ? "4K" : data.quality}</span>
            </div>
            {data.description && <p className="text-sm text-muted-foreground leading-relaxed line-clamp-4">{data.description}</p>}
          </div>

          {data.type === "series" && data.seasons && (
            <div className="glass rounded-2xl p-4 max-h-[50vh] overflow-y-auto peepbox-scroll">
              <div className="flex items-center gap-2 mb-3">
                <ListVideo className="h-4 w-4 text-accent" />
                <h3 className="font-bold text-sm">فهرست قسمت‌ها</h3>
              </div>
              <div className="flex gap-1.5 mb-3 flex-wrap">
                {data.seasons.map((s, i) => (
                  <button
                    key={s.id}
                    onClick={() => { setSeasonIdx(i); setEpIdx(0); }}
                    className={cn("rounded-lg px-2.5 py-1 text-xs font-medium transition", i === seasonIdx ? "bg-primary text-white" : "glass text-muted-foreground hover:text-white")}
                  >
                    فصل {toPersianDigits(s.number)}
                  </button>
                ))}
              </div>
              <div className="space-y-1">
                {data.seasons[seasonIdx]?.episodes.map((ep, i) => (
                  <button
                    key={ep.id}
                    onClick={() => setEpIdx(i)}
                    className={cn("w-full flex items-center gap-2 rounded-lg p-2 text-right transition", i === epIdx ? "bg-primary/20" : "hover:bg-white/5")}
                  >
                    <span className="shrink-0 flex h-8 w-8 items-center justify-center rounded-md bg-black/30 text-xs font-bold">{toPersianDigits(ep.number)}</span>
                    <div className="flex-1 min-w-0">
                      <div className="text-xs font-medium truncate">{ep.title}</div>
                      <div className="text-[10px] text-muted-foreground flex items-center gap-1"><Clock className="h-2.5 w-2.5" /> {toPersianDigits(ep.duration)} دقیقه</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="glass rounded-2xl p-4">
            <h3 className="font-bold text-sm mb-2 flex items-center gap-2"><Film className="h-4 w-4 text-accent" /> کیفیت‌های موجود</h3>
            <div className="flex flex-wrap gap-1.5">
              {data.sources.map((s) => (
                <span key={s.quality + (s.isHls ? "-hls" : "")} className="rounded-md bg-black/30 px-2 py-1 text-xs">
                  {s.quality === "2160p" ? "4K" : s.quality} {s.isHls ? "HLS" : "MP4"}
                </span>
              ))}
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}