"use client";

import Link from "next/link";
import { MessageSquare } from "lucide-react";
import { PlatformSelector } from "@/components/PlatformSelector";
import { DramaSection } from "@/components/DramaSection";
import { ReelShortSection } from "@/components/ReelShortSection";
import { NetShortHome } from "@/components/NetShortHome";
import { MeloloHome } from "@/components/MeloloHome";
import { FlickReelsHome } from "@/components/FlickReelsHome";
import { FreeReelsHome } from "@/components/FreeReelsHome";
import { useLatestDramas, useTrendingDramas, useDubindoDramas } from "@/hooks/useDramas";
import { usePlatform } from "@/hooks/usePlatform";
import { InfiniteDramaSection } from "@/components/InfiniteDramaSection";
import { LazyMount } from "@/components/LazyMount";

export default function HomeContent() {
  const {
    isDramaBox,
    isReelShort,
    isNetShort,
    isMelolo,
    isFlickReels,
    isFreeReels,
  } = usePlatform();

  // Fetch data for all DramaBox sections
  // const { data: popularDramas, isLoading: loadingPopular, error: errorPopular, refetch: refetchPopular } = useForYouDramas(); // REMOVED as requested (replaced by infinite scroll)
  const { data: latestDramas, isLoading: loadingLatest, error: errorLatest, refetch: refetchLatest } = useLatestDramas();
  const { data: trendingDramas, isLoading: loadingTrending, error: errorTrending, refetch: refetchTrending } = useTrendingDramas();
  const { data: dubindoDramas, isLoading: loadingDubindo, error: errorDubindo, refetch: refetchDubindo } = useDubindoDramas();

  return (
    <main className="min-h-screen pt-16">
      {/* Platform Selector */}
      <div className="glass-strong sticky top-16 z-40">
        <div className="container mx-auto px-4">
          <div className="flex items-center gap-3">
            <div className="flex-1 min-w-0">
              <PlatformSelector />
            </div>
            <Link
              href="/community-chat"
              className="inline-flex items-center gap-2 shrink-0 rounded-full border border-border/60 bg-card/70 px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-colors"
            >
              <MessageSquare className="h-4 w-4" />
              Community Chat
            </Link>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 pt-5">
        <div className="glass-strong rounded-2xl p-4 md:p-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
          <div>
            <h2 className="font-display text-base md:text-lg font-semibold">Dukung ZUI Tetap Menyala</h2>
            <p className="text-xs md:text-sm text-muted-foreground">
              Donasi digunakan untuk menjaga server tetap menyala dan pengembangan penyediaan konten film dari berbagai platform.
            </p>
          </div>
          <Link
            href="/donate"
            className="inline-flex items-center justify-center rounded-full bg-primary text-black px-4 py-2 text-xs md:text-sm font-semibold hover:opacity-90 transition-opacity"
          >
            Dukung ZUI
          </Link>
        </div>
      </div>

      {/* DramaBox Content - Multiple Sections */}
      {isDramaBox && (
        <div className="container mx-auto px-4 py-6 space-y-8">
          <DramaSection
            title="Terbaru"
            dramas={latestDramas}
            isLoading={loadingLatest}
            error={!!errorLatest}
            onRetry={() => refetchLatest()}
          />
          <DramaSection
            title="Terpopuler"
            dramas={trendingDramas}
            isLoading={loadingTrending}
            error={!!errorTrending}
            onRetry={() => refetchTrending()}
          />
          <DramaSection
            title="Dubindo"
            dramas={dubindoDramas}
            isLoading={loadingDubindo}
            error={!!errorDubindo}
            onRetry={() => refetchDubindo()}
          />

          {/* Infinite Scroll Section */}
          <LazyMount fallback={<div className="h-10" />}>
            <InfiniteDramaSection title="Lainnya" />
          </LazyMount>
        </div>
      )}

      {/* ReelShort Content - Multiple Sections */}
      {isReelShort && (
        <div className="container mx-auto px-4 py-6 space-y-8">
          <ReelShortSection />
        </div>
      )}

      {/* NetShort Content */}
      {isNetShort && (
        <div className="container mx-auto px-4 py-6 space-y-8">
          <NetShortHome />
        </div>
      )}

      {/* Melolo Content */}
      {isMelolo && (
        <div className="container mx-auto px-4 py-6 space-y-8">
          <MeloloHome />
        </div>
      )}

      {/* FlickReels Content */}
      {isFlickReels && (
        <div className="container mx-auto px-4 py-6 space-y-8">
          <FlickReelsHome />
        </div>
      )}

      {/* FreeReels Content */}
      {isFreeReels && (
        <div className="container mx-auto px-4 py-6 space-y-8">
          <FreeReelsHome />
        </div>
      )}
    </main>
  );
}