"use client";

import { useState } from "react";
import Image from "next/image";
import { useAppStore } from "@/lib/store";
import { useApi } from "@/lib/api";
import { ContentRow } from "../content-row";
import { Spinner, EmptyState } from "../skeleton";
import { Poster } from "../poster";
import { cn } from "@/lib/utils";
import { toPersianDigits, formatDuration } from "@/lib/poster";
import {
  Play, Plus, Star, Clock, Calendar, Globe, Crown, Mic2, Subtitles,
  ChevronLeft, Share2, Download, Film,
} from "lucide-react";

interface CastMember { id: string; name: string; persianName: string; slug: string; role: string; photo?: string | null; gradient: [string, string]; }
interface Source { id: string; quality: string; url: string; isHls: boolean; }
interface Episode { id: string; number: number; title: string; description?: string | null; duration: number; thumbnail?: string | null; videoUrl?: string | null; views: number; }
interface Season { id: string; number: number; title?: string | null; year?: number | null; episodes: Episode[]; }
interface Director { id: string; name: string; persianName: string; slug: string; }

interface DetailData {
  id: string; slug: string; type: "movie" | "series";
  title: string; persianTitle: string; originalTitle?: string | null;
  description: string; shortDesc?: string | null;
  poster: string | null; backdrop: string | null;
  gradient: [string, string];
  imdbRating: number; releaseYear: number; endYear?: number | null;
  quality: string; isDubbed: boolean; hasSubtitle: boolean;
  isPremium: boolean; duration?: number; totalSeasons?: number;
  ageRating: string; language: string; views: number;
  genres: { id: string; name: string; persianName: string; slug: string }[];
  country?: { name: string; persianName: string } | null;
  cast: CastMember[];
  directors: Director[];
  sources: Source[];
  seasons?: Season[];
  similar: any[];
}

export function DetailView() {
  const { contentType, contentSlug } = useAppStore();
  const apiPath = contentType && contentSlug ? `/api/${contentType}/${contentSlug}` : null;
  const { data, loading } = useApi<DetailData>(apiPath);
  const navigate = useAppStore((s) => s.navigate);
  const [activeSeason, setActiveSeason] = useState(0);

  if (loading || !data) {
    return (
      <div className="pt-4">
        <div className="h-[50vh] shimmer" />
        <div className="px-4 md:px-8 pt-8">
          <Spinner />
        </div>
      </div>
    );
  }

  const gradient = `linear-gradient(135deg, ${data.gradient[0]}, ${data.gradient[1]})`;
  const seasons = data.seasons ?? [];
  const currentSeason = seasons[activeSeason];

  return (
    <div>
      {/* Hero */}
      <div className="relative h-[42vh] min-h-[300px] max-h-[460px]">
        {data.backdrop ? (
          <Image src={data.backdrop} alt={data.persianTitle} fill unoptimized priority sizes="100vw" className="object-cover" />
        ) : (
          <div className="absolute inset-0" style={{ background: gradient }} />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-l from-transparent via-transparent to-background/60" />
      </div>

      <div className="px-4 md:px-8 -mt-24 relative">
        <button onClick={() => navigate("home")} className="flex items-center gap-1 text-sm text-muted-foreground hover:text-accent mb-4">
          <ChevronLeft className="h-4 w-4 rotate-180" /> بازگشت
        </button>

        <div className="flex flex-col md:flex-row gap-6">
          {/* Poster card */}
          <div className="shrink-0 w-32 md:w-48 mx-auto md:mx-0">
            <div className="relative aspect-[2/3] rounded-xl overflow-hidden shadow-2xl">
              {data.poster ? (
                <Image src={data.poster} alt={data.persianTitle} fill unoptimized sizes="200px" className="object-cover" />
              ) : (
                <div className="absolute inset-0 flex items-center justify-center p-2 text-center" style={{ background: gradient }}>
                  <span className="font-black text-white text-lg">{data.persianTitle}</span>
                </div>
              )}
            </div>
          </div>

          {/* Info */}
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2 flex-wrap">
              {data.isPremium && (
                <span className="inline-flex items-center gap-1 rounded-md bg-gradient-brand px-2 py-0.5 text-[10px] font-bold text-white">
                  <Crown className="h-3 w-3" /> VIP
                </span>
              )}
              <span className="rounded-md bg-black/60 px-2 py-0.5 text-[10px] font-bold text-white">
                {data.quality === "2160p" ? "4K UHD" : data.quality}
              </span>
              {data.isDubbed && <span className="rounded-md bg-black/60 px-2 py-0.5 text-[10px] font-bold text-white">دوبله فارسی</span>}
              {data.hasSubtitle && <span className="rounded-md bg-black/60 px-2 py-0.5 text-[10px] font-bold text-white">زیرنویس</span>}
              <span className="rounded-md border border-white/30 px-2 py-0.5 text-[10px] text-white/80">{data.ageRating}</span>
            </div>

            <h1 className="text-3xl md:text-5xl font-black text-white mb-1">{data.persianTitle}</h1>
            {data.originalTitle && <p className="text-sm text-muted-foreground mb-3">{data.originalTitle}</p>}

            <div className="flex items-center gap-4 mb-4 flex-wrap text-sm">
              <span className="flex items-center gap-1 font-bold text-warning">
                <Star className="h-4 w-4 fill-warning" /> {toPersianDigits(data.imdbRating.toFixed(1))}
              </span>
              <span className="flex items-center gap-1 text-white/70"><Calendar className="h-4 w-4" /> {toPersianDigits(data.releaseYear)}{data.endYear ? `-${toPersianDigits(data.endYear)}` : ""}</span>
              {data.duration && <span className="flex items-center gap-1 text-white/70"><Clock className="h-4 w-4" /> {formatDuration(data.duration)}</span>}
              {data.totalSeasons && <span className="flex items-center gap-1 text-white/70"><Film className="h-4 w-4" /> {toPersianDigits(data.totalSeasons)} فصل</span>}
              {data.country && <span className="flex items-center gap-1 text-white/70"><Globe className="h-4 w-4" /> {data.country.persianName}</span>}
            </div>

            <div className="flex items-center gap-2 mb-4 flex-wrap">
              {data.genres.map((g) => (
                <button key={g.id} className="rounded-full glass px-3 py-1 text-xs text-white/80 hover:bg-primary/20 transition">
                  {g.persianName}
                </button>
              ))}
            </div>

            <p className="text-sm md:text-base text-white/80 leading-relaxed mb-5 max-w-3xl">{data.description}</p>

            <div className="flex items-center gap-3 flex-wrap mb-6">
              <button
                onClick={() => navigate("watch", { contentType: data.type, contentSlug: data.slug })}
                className="inline-flex items-center gap-2 rounded-xl bg-primary hover:bg-primary/90 px-6 py-3 font-bold text-white shadow-glow transition"
              >
                <Play className="h-5 w-5 fill-white" /> {data.type === "series" ? "تماشای قسمت اول" : "پخش فیلم"}
              </button>
              <button className="inline-flex items-center gap-2 rounded-xl glass-strong hover:bg-white/10 px-5 py-3 font-bold text-white transition">
                <Plus className="h-5 w-5" /> لیست من
              </button>
              <button className="inline-flex items-center justify-center h-12 w-12 rounded-xl glass-strong hover:bg-white/10 text-white transition" aria-label="اشتراک‌گذاری">
                <Share2 className="h-5 w-5" />
              </button>
              <button className="inline-flex items-center justify-center h-12 w-12 rounded-xl glass-strong hover:bg-white/10 text-white transition" aria-label="دانلود">
                <Download className="h-5 w-5" />
              </button>
            </div>

            {/* Quick facts */}
            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
              {data.isDubbed && <Fact icon={Mic2} label="صدا" value="دوبله فارسی" />}
              {data.hasSubtitle && <Fact icon={Subtitles} label="زیرنویس" value="فارسی" />}
              <Fact icon={Star} label="امتیاز IMDb" value={toPersianDigits(data.imdbRating.toFixed(1))} />
              <Fact icon={Play} label="بازدید" value={toPersianDigits(data.views.toLocaleString("en-US"))} />
            </div>

            {/* Directors */}
            {data.directors.length > 0 && (
              <div className="mb-4 text-sm text-muted-foreground">
                <span className="font-bold text-white/80">کارگردان: </span>
                {data.directors.map((d) => d.persianName).join("، ")}
              </div>
            )}
          </div>
        </div>

        {/* Cast */}
        {data.cast.length > 0 && (
          <section className="mt-8">
            <h2 className="text-lg md:text-xl font-bold mb-4 flex items-center gap-2">
              <span className="h-5 w-1 rounded-full bg-gradient-brand" /> بازیگران
            </h2>
            <div className="flex gap-3 md:gap-4 overflow-x-auto hide-scrollbar pb-2">
              {data.cast.map((c) => (
                <div key={c.id} className="shrink-0 w-20 md:w-24 text-center">
                  <div className="relative aspect-square rounded-full overflow-hidden mx-auto mb-2" style={{ background: `linear-gradient(135deg, ${c.gradient[0]}, ${c.gradient[1]})` }}>
                    {c.photo && <Image src={c.photo} alt={c.persianName} fill unoptimized sizes="80px" className="object-cover" />}
                    <div className="absolute inset-0 flex items-center justify-center text-2xl font-black text-white/80">
                      {c.persianName.charAt(0)}
                    </div>
                  </div>
                  <div className="text-xs font-bold truncate">{c.persianName}</div>
                  <div className="text-[10px] text-muted-foreground truncate">{c.role}</div>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Episodes (series) */}
        {data.type === "series" && seasons.length > 0 && (
          <section className="mt-8">
            <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
              <h2 className="text-lg md:text-xl font-bold flex items-center gap-2">
                <span className="h-5 w-1 rounded-full bg-gradient-brand" /> قسمت‌ها
              </h2>
              <div className="flex gap-2">
                {seasons.map((s, i) => (
                  <button
                    key={s.id}
                    onClick={() => setActiveSeason(i)}
                    className={cn(
                      "rounded-lg px-3 py-1.5 text-sm font-medium transition",
                      i === activeSeason ? "bg-primary text-white" : "glass text-muted-foreground hover:text-white",
                    )}
                  >
                    فصل {toPersianDigits(s.number)}
                  </button>
                ))}
              </div>
            </div>
            <div className="space-y-2">
              {currentSeason?.episodes.map((ep) => (
                <button
                  key={ep.id}
                  onClick={() => navigate("watch", { contentType: "series", contentSlug: data.slug })}
                  className="w-full flex items-center gap-3 md:gap-4 rounded-xl glass hover:bg-primary/10 p-3 transition text-right group"
                >
                  <div className="shrink-0 relative h-16 w-24 md:h-20 md:w-36 rounded-lg overflow-hidden" style={{ background: `linear-gradient(135deg, ${data.gradient[0]}, ${data.gradient[1]})` }}>
                    <div className="absolute inset-0 flex items-center justify-center">
                      <span className="text-2xl font-black text-white/80">{toPersianDigits(ep.number)}</span>
                    </div>
                    <div className="absolute inset-0 bg-black/40 group-hover:bg-primary/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                      <Play className="h-8 w-8 text-white fill-white" />
                    </div>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-xs text-muted-foreground">قسمت {toPersianDigits(ep.number)}</span>
                    </div>
                    <div className="font-bold text-sm truncate">{ep.title}</div>
                    {ep.description && <div className="text-xs text-muted-foreground line-clamp-1 mt-0.5">{ep.description}</div>}
                    <div className="flex items-center gap-3 mt-1 text-[10px] text-muted-foreground">
                      <span className="flex items-center gap-1"><Clock className="h-3 w-3" /> {toPersianDigits(ep.duration)} دقیقه</span>
                      <span className="flex items-center gap-1"><Play className="h-3 w-3" /> {toPersianDigits(ep.views.toLocaleString("en-US"))}</span>
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </section>
        )}

        {/* Similar */}
        {data.similar.length > 0 && (
          <div className="mt-8">
            <ContentRow title="پیشنهادهای مشابه" items={data.similar} />
          </div>
        )}
      </div>
    </div>
  );
}

function Fact({ icon: Icon, label, value }: { icon: any; label: string; value: string }) {
  return (
    <div className="glass rounded-xl p-3">
      <div className="flex items-center gap-1.5 text-muted-foreground text-xs mb-1">
        <Icon className="h-3.5 w-3.5" /> {label}
      </div>
      <div className="font-bold text-sm truncate">{value}</div>
    </div>
  );
}