"use client";

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

interface InfiniteNetShortSectionProps {
  title: string;
}

export function InfiniteNetShortSection({ title }: InfiniteNetShortSectionProps) {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isError,
    refetch,
  } = useInfiniteNetShortDramas();

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

  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) => (
          <UnifiedMediaCard 
            key={`${drama.shortPlayId}-${index}`} 
            index={index}
            title={drama.title}
            cover={drama.cover}
            link={`/detail/netshort/${drama.shortPlayId}`}
            episodes={drama.totalEpisodes}
            topLeftBadge={drama.scriptName ? {
              text: drama.scriptName,
              color: "#E52E2E"
            } : null}
            topRightBadge={drama.heatScore ? {
              text: drama.heatScore,
              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>
  );
}