"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { PageHeader } from "@/components/layouts/page-header";
import { ItemFilters } from "@/components/items/item-filters";
import { ItemTable } from "@/components/items/item-table";
import { useItems } from "@/lib/hooks/use-items";
import { trpc } from "@/trpc/client";
import { Package } from "lucide-react";
import { StateWrapper } from "@/components/shared/state-wrapper";
import type { SortBy } from "@/components/items/item-table";

export default function ItemsPage() {
  const router = useRouter();
  const {
    items,
    isLoading,
    error,
    refetch,
    filters,
    page,
    totalPages,
    total,
    setPage,
    updateFilter,
    sortBy,
    sortOrder,
    setSort,
  } = useItems();

  const { data: categoriesData } = trpc.category.getAll.useQuery();

  const handleSort = (column: SortBy) => {
    if (sortBy === column) {
      setSort(sortBy, sortOrder === "asc" ? "desc" : "asc");
    } else {
      setSort(column, "asc");
    }
  };

  return (
    <div className="space-y-6">
      <PageHeader title="Items">
        <Link href="/items/import">
          <Button variant="outline">Bulk Import</Button>
        </Link>
        <Link href="/items/new">
          <Button>Add Item</Button>
        </Link>
      </PageHeader>

      <ItemFilters
        search={filters.search ?? ""}
        onSearchChange={(value) => updateFilter("search", value || undefined)}
        categoryFilter={filters.categoryId ?? ""}
        onCategoryFilterChange={(value) =>
          updateFilter("categoryId", value || undefined)
        }
        categories={categoriesData ?? []}
        statusFilter={filters.status ?? ""}
        onStatusFilterChange={(value) =>
          updateFilter(
            "status",
            (value || undefined) as
              | "ACTIVE"
              | "DISCONTINUED"
              | "UNDER_REVIEW"
              | undefined,
          )
        }
      />

      <StateWrapper
        data={items}
        isLoading={isLoading}
        error={error ?? null}
        onRetry={refetch}
        loadingMessage="Loading items..."
        empty={{
          icon: Package,
          title: "No items yet",
          description: "Add your first item to get started",
        }}
      >
        {() => (
          <ItemTable
            items={items}
            sortBy={sortBy}
            sortOrder={sortOrder}
            onSort={handleSort}
            page={page}
            totalPages={totalPages}
            total={total}
            onPageChange={setPage}
            isLoading={isLoading}
            onRowClick={(id) => router.push(`/items/${id}`)}
          />
        )}
      </StateWrapper>
    </div>
  );
}