"use client";

import { UnifiedErrorDisplay } from "@/components/UnifiedErrorDisplay";
import { useMeloloDetail } from "@/hooks/useMelolo";
import { Play, ChevronLeft, Loader2 } from "lucide-react";
import Link from "next/link";
import { useRouter, useParams } from "next/navigation";
import { Skeleton } from "@/components/ui/skeleton";
import Image from "next/image";
import { passthroughLoader } from "@/lib/imageLoader";

export default function MeloloDetailPage() {
  const params = useParams<{ bookId: string }>();
  const router = useRouter();
  const { data, isLoading, error } = useMeloloDetail(params.bookId || "");

  if (isLoading) {
    return <DetailSkeleton />;
  }

  if (error || !data?.data?.video_data) {
    return (
      <div className="min-h-screen pt-24 px-4">
        <UnifiedErrorDisplay 
          title="Drama tidak ditemukan"
          message="Tidak dapat memuat detail drama. Silakan coba lagi."
          onRetry={() => router.push('/')}
          retryLabel="Kembali ke Beranda"
        />
      </div>
    );
  }

  const drama = data.data.video_data;
  const firstEpisodeId = drama.video_list?.[0]?.vid;
  const coverSrc = drama.series_cover.includes(".heic")
    ? `https://wsrv.nl/?url=${encodeURIComponent(drama.series_cover)}&output=jpg`
    : drama.series_cover;

  return (
    <main className="min-h-screen pt-20">
      {/* Hero Section */}
      <div className="relative">
        {/* Background Blur */}
        <div className="absolute inset-0 overflow-hidden">
          <Image
            src={coverSrc}
            alt=""
            fill
            className="object-cover opacity-20 blur-3xl scale-110"
            sizes="100vw"
            referrerPolicy="no-referrer"
            loader={passthroughLoader}
            unoptimized
          />
          <div className="absolute inset-0 bg-gradient-to-b from-background/50 via-background/80 to-background" />
        </div>

        <div className="relative max-w-7xl mx-auto px-4 py-8">
          <button
            onClick={() => router.back()}
            className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors mb-6"
          >
            <ChevronLeft className="w-5 h-5" />
            <span>Kembali</span>
          </button>

          <div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8">
            <div className="relative group">
              <Image
                src={coverSrc}
                alt={drama.series_title}
                width={300}
                height={450}
                className="w-full max-w-[300px] h-auto mx-auto rounded-2xl shadow-2xl"
                referrerPolicy="no-referrer"
                loader={passthroughLoader}
                unoptimized
              />
              {firstEpisodeId && (
                <div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-background/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end justify-center pb-6">
                  <Link
                    href={`/watch/melolo/${params.bookId}/${firstEpisodeId}`}
                    className="px-8 py-3 rounded-full bg-primary text-primary-foreground font-semibold flex items-center gap-2 hover:scale-105 transition-transform shadow-lg"
                  >
                    <Play className="w-5 h-5 fill-current" />
                    Tonton Sekarang
                  </Link>
                </div>
              )}
            </div>

            {/* Info */}
            <div className="space-y-6">
              <div>
                <h1 className="text-3xl md:text-4xl font-bold font-display gradient-text mb-4">
                  {drama.series_title}
                </h1>
                
                <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
                   <div className="flex items-center gap-1.5">
                    <Play className="w-4 h-4" />
                    <span>{drama.episode_cnt} Episode</span>
                  </div>
                </div>
              </div>

               {/* Description */}
               <div className="glass rounded-xl p-4">
                <h3 className="font-semibold text-foreground mb-2">Sinopsis</h3>
                <p className="text-muted-foreground leading-relaxed">
                  {drama.series_intro}
                </p>
              </div>

              {/* Watch Button */}
              {firstEpisodeId && (
                <Link
                  href={`/watch/melolo/${params.bookId}/${firstEpisodeId}`}
                  className="inline-flex items-center gap-2 px-8 py-3 rounded-full font-semibold text-primary-foreground transition-all hover:scale-105 shadow-lg"
                  style={{ background: "var(--gradient-primary)" }}
                >
                  <Play className="w-5 h-5 fill-current" />
                  Mulai Menonton
                </Link>
              )}
            </div>
          </div>


        </div>
      </div>
    </main>
  );
}

function DetailSkeleton() {
  return (
    <main className="min-h-screen pt-24 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8">
          <Skeleton className="aspect-[2/3] w-full max-w-[300px] rounded-2xl" />
          <div className="space-y-4">
            <Skeleton className="h-10 w-3/4" />
            <Skeleton className="h-6 w-1/2" />
            <Skeleton className="h-32 w-full rounded-xl" />
            <Skeleton className="h-12 w-48 rounded-full" />
          </div>
        </div>
      </div>
    </main>
  );
}