"use client";

import { useCallback, useState } from "react";
import { api, type AdminCollection } from "@/lib/api";
import { usePagedList } from "@/lib/use-paged-list";
import { ListShell, EmptyRow } from "@/components/list-shell";
import { Table, THead, TR, TH, TD } from "@/components/ui/table";
import { fmtDate } from "@/lib/utils";
import { Clamp } from "@/components/ui/clamp";

export default function CollectionsPage() {
  const [q, setQ] = useState("");
  const fetcher = useCallback(
    (limit: number, offset: number) => api.collections(q, limit, offset),
    [q],
  );
  const list = usePagedList<AdminCollection>(fetcher, [q]);

  return (
    <ListShell
      title="Collections"
      total={list.total}
      searchPlaceholder="Search title, description, or owner…"
      onQueryChange={setQ}
      list={list}
    >
      <Table>
        <THead>
          <TR>
            <TH>Collection</TH>
            <TH>Owner</TH>
            <TH>Items</TH>
            <TH>Visibility</TH>
            <TH>Created</TH>
          </TR>
        </THead>
        <tbody>
          {list.items.length === 0 && !list.loading ? (
            <EmptyRow cols={5} label="No collections found." />
          ) : (
            list.items.map((c) => (
              <TR key={c.id}>
                <TD className="max-w-md">
                  <Clamp lines={2} className="font-medium">
                    {c.title}
                  </Clamp>
                  {c.description ? (
                    <Clamp className="mt-0.5 text-xs text-muted-foreground">
                      {c.description}
                    </Clamp>
                  ) : null}
                </TD>
                <TD className="max-w-[14rem]">
                  <Clamp className="font-medium">{c.owner_name}</Clamp>
                  <Clamp className="text-xs text-muted-foreground">
                    {`@${c.owner_handle}`}
                  </Clamp>
                </TD>
                <TD>{c.item_count}</TD>
                <TD>
                  <span
                    className={
                      c.is_public ? "text-foreground" : "text-muted-foreground"
                    }
                  >
                    {c.is_public ? "Public" : "Private"}
                  </span>
                </TD>
                <TD className="whitespace-nowrap">{fmtDate(c.created_at)}</TD>
              </TR>
            ))
          )}
        </tbody>
      </Table>
    </ListShell>
  );
}