"use client";

import { useLibraryShows } from "@/hooks/use-library-shows";
import { useLibrarySeasons } from "@/hooks/use-library-seasons";
import { LibraryItemCard } from "./library-item-card";
import { ShowTile } from "./show-tile";
import { SeasonTile } from "./season-tile";
import { BreadcrumbNav } from "./breadcrumb-nav";
import { ScheduleFromLibraryDialog } from "./schedule-from-library-dialog";
import { AddToBlockDialog } from "./add-to-block-dialog";
import { Button } from "@/components/ui/button";
import type { LibraryItemFull, ShowSummary } from "@/lib/types";
import type { LibrarySearchParams } from "@/hooks/use-library-search";

type Drilldown = null | { series: string } | { series: string; season: number };

interface Props {
  items: LibraryItemFull[];
  total: number;
  page: number;
  pageSize: number;
  isLoading: boolean;
  selected: Set<string>;
  onToggleSelect: (id: string) => void;
  onPageChange: (page: number) => void;
  selectedItems: LibraryItemFull[];
  viewMode: "grouped" | "flat";
  drilldown: Drilldown;
  onDrilldown: (next: Drilldown) => void;
  filter: LibrarySearchParams;
  selectedShows: ShowSummary[];
  selectedShowNames: Set<string>;
  onToggleSelectShow: (show: ShowSummary) => void;
}

export function LibraryGrid({
  items, total, page, pageSize, isLoading,
  selected, onToggleSelect, onPageChange, selectedItems,
  viewMode, drilldown, onDrilldown, filter,
  selectedShows, selectedShowNames, onToggleSelectShow,
}: Props) {
  const totalPages = Math.ceil(total / pageSize);

  // Hooks for grouped mode (called unconditionally per React rules)
  const showsFilter = {
    q: filter.q,
    genres: filter.genres,
    provider: filter.provider,
  };
  const { data: showsData, isLoading: showsLoading } = useLibraryShows(showsFilter);
  const seasonsSeries = (viewMode === "grouped" && drilldown !== null && !("season" in drilldown))
    ? drilldown.series
    : null;
  const { data: seasonsData, isLoading: seasonsLoading } = useLibrarySeasons(
    seasonsSeries,
    filter.provider,
  );

  const isGroupedTopLevel = viewMode === "grouped" && drilldown === null;
  const isSeasonLevel = viewMode === "grouped" && drilldown !== null && !("season" in drilldown);
  const isEpisodeLevel = viewMode === "flat" || (viewMode === "grouped" && drilldown !== null && "season" in drilldown);

  function renderContent() {
    if (isGroupedTopLevel) {
      // Only show TV show tiles when no type filter is active — "Movies"/"Shorts" should not include shows
      const shows = !filter.type ? (showsData ?? []) : [];
      const nonEpisodes = items.filter(i => i.content_type !== "episode");
      const loading = showsLoading;

      if (loading && shows.length === 0 && nonEpisodes.length === 0) {
        return <p className="text-sm text-zinc-500">Loading…</p>;
      }
      if (shows.length === 0 && nonEpisodes.length === 0) {
        return <p className="text-sm text-zinc-500">No items found. Run a library sync to populate the library.</p>;
      }
      return (
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
          {shows.map(show => (
            <ShowTile
              key={show.series_name}
              show={show}
              selected={selectedShowNames.has(show.series_name)}
              onToggle={() => onToggleSelectShow(show)}
              onClick={() => onDrilldown({ series: show.series_name })}
            />
          ))}
          {nonEpisodes.map(item => (
            <LibraryItemCard
              key={item.id}
              item={item}
              selected={selected.has(item.id)}
              onToggle={() => onToggleSelect(item.id)}
            />
          ))}
        </div>
      );
    }

    if (isSeasonLevel && drilldown) {
      const seasons = seasonsData ?? [];
      if (seasonsLoading && seasons.length === 0) {
        return <p className="text-sm text-zinc-500">Loading…</p>;
      }
      if (seasons.length === 0) {
        return <p className="text-sm text-zinc-500">No seasons found.</p>;
      }
      return (
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
          {seasons.map(season => (
            <SeasonTile
              key={season.season_number}
              season={season}
              selected={false}
              onToggle={() => {}}
              onClick={() => onDrilldown({ series: drilldown.series, season: season.season_number })}
            />
          ))}
        </div>
      );
    }

    // Flat mode or episode-level drilldown
    if (isLoading) {
      return <p className="text-sm text-zinc-500">Loading…</p>;
    }
    if (items.length === 0) {
      return <p className="text-sm text-zinc-500">No items found. Run a library sync to populate the library.</p>;
    }
    return (
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
        {items.map(item => (
          <LibraryItemCard
            key={item.id}
            item={item}
            selected={selected.has(item.id)}
            onToggle={() => onToggleSelect(item.id)}
          />
        ))}
      </div>
    );
  }

  const showPagination = isEpisodeLevel && totalPages > 1;
  const totalSelected = selected.size + selectedShows.length;

  return (
    <div className="flex flex-1 flex-col min-h-0">
      <div className="flex-1 overflow-y-auto p-6">
        {drilldown && (
          <BreadcrumbNav
            series={"series" in drilldown ? drilldown.series : undefined}
            season={"season" in drilldown ? drilldown.season : undefined}
            onNavigate={target => {
              if (target === "root") onDrilldown(null);
              else if (target === "series" && drilldown && "series" in drilldown)
                onDrilldown({ series: drilldown.series });
            }}
          />
        )}
        {renderContent()}
      </div>

      {showPagination && (
        <div className="flex items-center justify-between border-t border-zinc-800 px-6 py-3">
          <p className="text-xs text-zinc-500">{total.toLocaleString()} items total</p>
          <div className="flex gap-2">
            <Button size="sm" variant="outline" disabled={page === 0} onClick={() => onPageChange(page - 1)}>Prev</Button>
            <span className="flex items-center text-xs text-zinc-400">{page + 1} / {totalPages}</span>
            <Button size="sm" variant="outline" disabled={page >= totalPages - 1} onClick={() => onPageChange(page + 1)}>Next</Button>
          </div>
        </div>
      )}

      {totalSelected > 0 && (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 rounded-full border border-zinc-700 bg-zinc-900 px-6 py-3 shadow-2xl">
          <span className="text-sm text-zinc-300">{totalSelected} selected</span>
          <ScheduleFromLibraryDialog selectedItems={selectedItems} selectedShows={selectedShows} />
          {selected.size > 0 && <AddToBlockDialog selectedItems={selectedItems} />}
        </div>
      )}
    </div>
  );
}