"use client";

import * as React from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

type ListLike = {
  loading: boolean;
  error: string | null;
  total: number;
  page: number;
  totalPages: number;
  setPage: (p: number) => void;
};

/**
 * Shared chrome for every admin list page: a title with a live total, an
 * optional debounced search box, an optional toolbar (filters/tabs), the
 * table (children), and a pagination footer. Keeps the resource pages tiny.
 */
export function ListShell({
  title,
  total,
  searchPlaceholder,
  onQueryChange,
  toolbar,
  list,
  children,
}: {
  title: string;
  total: number;
  searchPlaceholder?: string;
  onQueryChange?: (q: string) => void;
  toolbar?: React.ReactNode;
  list: ListLike;
  children: React.ReactNode;
}) {
  const [raw, setRaw] = React.useState("");

  // Debounce search input → parent query (300ms).
  React.useEffect(() => {
    if (!onQueryChange) return;
    const t = setTimeout(() => onQueryChange(raw.trim()), 300);
    return () => clearTimeout(t);
  }, [raw, onQueryChange]);

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <h1 className="text-xl font-semibold text-foreground sm:text-2xl">
          {title}
          <span className="ml-2 text-sm font-normal text-muted-foreground">
            {total.toLocaleString()}
          </span>
        </h1>
        {toolbar}
      </div>

      {onQueryChange ? (
        <div className="relative w-full sm:max-w-md">
          <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
          <Input
            value={raw}
            onChange={(e) => setRaw(e.target.value)}
            placeholder={searchPlaceholder ?? "Search…"}
            className="pl-9"
          />
        </div>
      ) : null}

      {list.error ? (
        <p className="text-sm text-destructive">{list.error}</p>
      ) : null}

      <div className={list.loading ? "opacity-60 transition-opacity" : ""}>
        {children}
      </div>

      <div className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted-foreground">
        <span>
          Page {list.page} of {list.totalPages}
          {list.loading ? " · loading…" : ""}
        </span>
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            disabled={list.page <= 1 || list.loading}
            onClick={() => list.setPage(list.page - 1)}
          >
            Previous
          </Button>
          <Button
            variant="outline"
            size="sm"
            disabled={list.page >= list.totalPages || list.loading}
            onClick={() => list.setPage(list.page + 1)}
          >
            Next
          </Button>
        </div>
      </div>
    </div>
  );
}

/** Centered empty-state row spanning the table. */
export function EmptyRow({ cols, label }: { cols: number; label: string }) {
  return (
    <tr>
      <td
        colSpan={cols}
        className="px-4 py-10 text-center text-sm text-muted-foreground"
      >
        {label}
      </td>
    </tr>
  );
}