"use client";

import { ArrowUpDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
import type { ReactNode } from "react";

import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { TableHead } from "@/components/ui/table";
import { cn } from "@/lib/utils";

/** Matches All Transactions table header cell chrome. */
export function ReportTableHead({
  children,
  className,
}: {
  children?: ReactNode;
  className?: string;
}) {
  return <TableHead className={cn("h-10 whitespace-nowrap px-2", className)}>{children}</TableHead>;
}

/** Sortable header button matching All Transactions (`CustomerSortableHeader`). */
export function ReportSortableHeaderButton({
  label,
  onClick,
  className,
}: {
  label: ReactNode;
  onClick: () => void;
  className?: string;
}) {
  return (
    <Button
      type="button"
      variant="ghost"
      size="sm"
      className={cn("-ml-2 h-auto min-h-8 px-2 py-1 font-medium", className)}
      onClick={onClick}
    >
      {label}
      <ArrowUpDown className="size-3.5 shrink-0 text-muted-foreground" />
    </Button>
  );
}

export function ReportSortableHead({
  label,
  onSort,
  className,
  align = "left",
}: {
  label: ReactNode;
  onSort: () => void;
  className?: string;
  align?: "left" | "right";
}) {
  return (
    <ReportTableHead className={cn(align === "right" && "text-right", className)}>
      <ReportSortableHeaderButton
        label={label}
        onClick={onSort}
        className={align === "right" ? "ml-auto" : undefined}
      />
    </ReportTableHead>
  );
}

export function ReportRecordsPerPage({
  id,
  pageSize,
  options,
  onPageSizeChange,
}: {
  id: string;
  pageSize: number;
  options: readonly number[];
  onPageSizeChange: (size: number) => void;
}) {
  return (
    <div className="flex items-center gap-2">
      <Label htmlFor={id} className="font-medium text-sm whitespace-nowrap">
        Records per page
      </Label>
      <Select
        value={`${pageSize}`}
        onValueChange={(value) => onPageSizeChange(Number(value))}
      >
        <SelectTrigger className="h-9 w-20" id={id}>
          <SelectValue placeholder={pageSize} />
        </SelectTrigger>
        <SelectContent side="bottom">
          <SelectGroup>
            {options.map((size) => (
              <SelectItem key={size} value={`${size}`}>
                {size}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}

export function ReportPageNavigation({
  page,
  pageCount,
  onPageChange,
  disabled = false,
}: {
  /** 1-based page index */
  page: number;
  pageCount: number;
  onPageChange: (page: number) => void;
  disabled?: boolean;
}) {
  const safePageCount = Math.max(0, pageCount);
  const safePage = safePageCount === 0 ? 0 : Math.min(Math.max(1, page), safePageCount);
  const canPrevious = safePage > 1;
  const canNext = safePage > 0 && safePage < safePageCount;

  return (
    <div className="mb-[15px] flex items-center justify-end gap-4">
      <div className="font-medium text-sm">
        Page {safePageCount === 0 ? 0 : safePage} of {safePageCount}
      </div>
      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          className="hidden size-8 sm:flex"
          size="icon"
          onClick={() => onPageChange(1)}
          disabled={disabled || !canPrevious}
        >
          <span className="sr-only">Go to first page</span>
          <ChevronsLeft className="size-4" />
        </Button>
        <Button
          variant="outline"
          className="size-8"
          size="icon"
          onClick={() => onPageChange(safePage - 1)}
          disabled={disabled || !canPrevious}
        >
          <span className="sr-only">Go to previous page</span>
          <ChevronLeft className="size-4" />
        </Button>
        <Button
          variant="outline"
          className="size-8"
          size="icon"
          onClick={() => onPageChange(safePage + 1)}
          disabled={disabled || !canNext}
        >
          <span className="sr-only">Go to next page</span>
          <ChevronRight className="size-4" />
        </Button>
        <Button
          variant="outline"
          className="hidden size-8 sm:flex"
          size="icon"
          onClick={() => onPageChange(safePageCount)}
          disabled={disabled || !canNext}
        >
          <span className="sr-only">Go to last page</span>
          <ChevronsRight className="size-4" />
        </Button>
      </div>
    </div>
  );
}