"use client";

import { UnifiedMediaCard } from "./UnifiedMediaCard";
import { UnifiedMediaCardSkeleton } from "./UnifiedMediaCardSkeleton";
import { UnifiedErrorDisplay } from "./UnifiedErrorDisplay";
import { useInfiniteReelShortDramas } from "@/hooks/useDramas";
import { Loader2 } from "lucide-react";

interface InfiniteReelShortSectionProps {
  title: string;
}

export function InfiniteReelShortSection({ title }: InfiniteReelShortSectionProps) {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isError,
    refetch,
  } = useInfiniteReelShortDramas();

  // Flatten pages into a single array of dramas
  const allDramas = data?.pages.flatMap((page) => page) || [];

  if (isError) {
    return (
      <section>
        <h2 className="font-display font-bold text-xl md:text-2xl text-foreground mb-4">
          {title}
        </h2>
        <UnifiedErrorDisplay
          title={`Gagal Memuat ${title}`}
          message="Tidak dapat mengambil data drama."
          onRetry={() => refetch()}
        />
      </section>
    );
  }

  if (isLoading || !data) {
    return (
      <section className="space-y-4">
        <div className="h-7 md:h-8 w-48 bg-white/10 rounded-lg animate-pulse mb-4" />
        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-3 md:gap-4">
          {Array.from({ length: 16 }).map((_, i) => (
            <UnifiedMediaCardSkeleton key={i} />
          ))}
        </div>
      </section>
    );
  }

  return (
    <section>
      <h2 className="font-display font-bold text-xl md:text-2xl text-foreground mb-4">
        {title}
      </h2>

      <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-3 md:gap-4">
        {allDramas.map((drama, index) => {
           // Normalize badge color: If text is "Terpopuler", force RED to match ReelShort/NetShort
           const isPopular = drama.corner?.name?.toLowerCase().includes("populer");
           const badgeColor = isPopular ? "#E52E2E" : (drama.corner?.color || "#e5a00d");

           return (
             <UnifiedMediaCard 
               key={`${drama.bookId}-${index}`} 
               index={index}
               title={drama.bookName}
               cover={drama.coverWap || drama.cover || ""}
               link={`/detail/reelshort/${drama.bookId}`}
               episodes={drama.chapterCount}
               topLeftBadge={drama.corner ? {
                 text: drama.corner.name,
                 color: badgeColor
               } : null}
               topRightBadge={drama.rankVo ? {
                 text: drama.rankVo.hotCode,
                 isTransparent: true
               } : null}
             />
           );
        })}
      </div>

      {/* Load More */}
      <div className="py-8 flex justify-center w-full">
        {hasNextPage ? (
          <button
            type="button"
            onClick={() => fetchNextPage()}
            disabled={isFetchingNextPage}
            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-primary text-primary-foreground font-semibold shadow-md hover:opacity-90 disabled:opacity-60"
          >
            {isFetchingNextPage && <Loader2 className="w-4 h-4 animate-spin" />}
            {isFetchingNextPage ? "Memuat..." : "Muat lebih banyak"}
          </button>
        ) : (
          <p className="text-muted-foreground text-sm">Sudah mencapai akhir daftar</p>
        )}
      </div>
    </section>
  );
}