"use client";

import { useState } from "react";
import { LayoutGrid, FolderOpen } from "lucide-react";
import { useLibrarySearch, type LibrarySearchParams } from "@/hooks/use-library-search";
import { LibrarySidebar } from "./components/library-sidebar";
import { LibraryGrid } from "./components/library-grid";
import { SyncStatusBar } from "./components/sync-status-bar";
import { Button } from "@/components/ui/button";
import type { LibraryItemFull, ShowSummary } from "@/lib/types";

const PAGE_SIZE = 50;

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

export default function LibraryPage() {
  const [filter, setFilter] = useState<LibrarySearchParams>({ limit: PAGE_SIZE, offset: 0 });
  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [page, setPage] = useState(0);
  const [viewMode, setViewMode] = useState<"grouped" | "flat">("grouped");
  const [drilldown, setDrilldown] = useState<Drilldown>(null);
  const [selectedShowMap, setSelectedShowMap] = useState<Map<string, ShowSummary>>(new Map());

  const { data, isLoading } = useLibrarySearch({ ...filter, offset: page * PAGE_SIZE });

  function handleFilterChange(next: Partial<LibrarySearchParams>) {
    setFilter(f => ({ ...f, ...next, offset: 0 }));
    setPage(0);
    setSelected(new Set());
  }

  function toggleSelect(id: string) {
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  function toggleSelectShow(show: ShowSummary) {
    setSelectedShowMap(prev => {
      const next = new Map(prev);
      if (next.has(show.series_name)) next.delete(show.series_name);
      else next.set(show.series_name, show);
      return next;
    });
  }

  function handleDrilldown(next: Drilldown) {
    setDrilldown(next);
    setSelected(new Set());
    setSelectedShowMap(new Map());
    setPage(0);
  }

  function handleBack() {
    if (!drilldown) return;
    if ("season" in drilldown) {
      // From episode level → go back to season level
      setDrilldown({ series: drilldown.series });
    } else {
      // From season level → go back to root
      setDrilldown(null);
    }
    setSelected(new Set());
    setPage(0);
  }

  function handleViewModeToggle() {
    const next = viewMode === "grouped" ? "flat" : "grouped";
    setViewMode(next);
    if (next === "flat") setDrilldown(null);
    setSelected(new Set());
    setSelectedShowMap(new Map());
  }

  const selectedItems = data?.items.filter(i => selected.has(i.id)) ?? [];
  const selectedShows = Array.from(selectedShowMap.values());
  const selectedShowNames = new Set(selectedShowMap.keys());

  return (
    <div className="flex flex-1 flex-col">
      <SyncStatusBar />
      <div className="flex items-center justify-end gap-2 border-b border-zinc-800 bg-zinc-950 px-4 py-2">
        <Button
          size="sm"
          variant="ghost"
          className="gap-1.5 text-xs"
          onClick={handleViewModeToggle}
        >
          {viewMode === "grouped" ? (
            <>
              <LayoutGrid className="h-3.5 w-3.5" />
              Flat view
            </>
          ) : (
            <>
              <FolderOpen className="h-3.5 w-3.5" />
              Grouped view
            </>
          )}
        </Button>
      </div>
      <div className="flex flex-1">
        <LibrarySidebar
          filter={filter}
          onFilterChange={handleFilterChange}
          viewMode={viewMode}
          drilldown={drilldown}
          onBack={handleBack}
        />
        <LibraryGrid
          items={data?.items ?? []}
          total={data?.total ?? 0}
          page={page}
          pageSize={PAGE_SIZE}
          isLoading={isLoading}
          selected={selected}
          onToggleSelect={toggleSelect}
          onPageChange={setPage}
          selectedItems={selectedItems}
          viewMode={viewMode}
          drilldown={drilldown}
          onDrilldown={handleDrilldown}
          filter={filter}
          selectedShows={selectedShows}
          selectedShowNames={selectedShowNames}
          onToggleSelectShow={toggleSelectShow}
        />
      </div>
    </div>
  );
}