"use client";

import { useState } from "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 type { LibraryItemFull } from "@/lib/types";

const PAGE_SIZE = 50;

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 { 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;
    });
  }

  const selectedItems = data?.items.filter(i => selected.has(i.id)) ?? [];

  return (
    <div className="flex flex-1 flex-col">
      <SyncStatusBar />
      <div className="flex flex-1">
        <LibrarySidebar filter={filter} onFilterChange={handleFilterChange} />
        <LibraryGrid
          items={data?.items ?? []}
          total={data?.total ?? 0}
          page={page}
          pageSize={PAGE_SIZE}
          isLoading={isLoading}
          selected={selected}
          onToggleSelect={toggleSelect}
          onPageChange={setPage}
          selectedItems={selectedItems}
        />
      </div>
    </div>
  );
}