"use client";

import { ChevronDown } from "lucide-react";
import { useState, type ReactNode } from "react";
import { fmtInt } from "@/lib/format";
import { cn } from "./cn";

/** Rows kept visible while collapsed (matches `.dci-collapse` nth-child rule in globals.css). */
export const COLLAPSE_ROWS = 10;

/**
 * Mobile-only "Show all N" for long server-rendered lists (tables, <ol>/<ul>): under 640 px only the
 * first COLLAPSE_ROWS rows are shown until the user expands. Purely CSS-driven (data attribute), so the
 * children stay server components and nothing but serialisable props crosses the boundary.
 * On ≥ 640 px every row is visible and the toggle is hidden.
 */
export function CollapsibleRows({ total, label = "rows", children, className }: { total: number; label?: string; children: ReactNode; className?: string }) {
  const [open, setOpen] = useState(false);
  const collapsible = total > COLLAPSE_ROWS + 2;
  const collapsed = collapsible && !open;
  return (
    <div className={cn("dci-collapse", className)} data-collapsed={collapsed ? "" : undefined}>
      {children}
      {collapsible && (
        <button
          type="button"
          onClick={() => setOpen((o) => !o)}
          aria-expanded={!collapsed}
          className="mt-1 flex h-11 w-full items-center justify-center gap-1.5 rounded-sm border border-hair bg-surface text-[12.5px] font-medium text-ink-2 hover:text-ink sm:hidden"
        >
          {collapsed ? `Show all ${fmtInt(total)} ${label}` : "Show fewer"}
          <ChevronDown className={cn("size-3.5 transition-transform", !collapsed && "rotate-180")} strokeWidth={1.75} aria-hidden />
        </button>
      )}
    </div>
  );
}