"use client"

import { LayoutList, List } from "lucide-react"
import { cn } from "@/lib/utils"
import { MAX_VIEW_ALL_ITEMS } from "@/lib/dashboard-table-view"
import type { DashboardTableSortOption } from "@/hooks/useDashboardTableViewControls"

const selectClass =
  "h-9 min-w-[7.5rem] rounded-xl border border-border bg-card px-2.5 text-xs font-semibold text-foreground font-sans outline-none transition-colors focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"

const labelClass = "text-[10px] font-bold text-muted-foreground font-sans uppercase tracking-wider shrink-0"

export interface DashboardTableViewControlsProps {
  sortOptions: DashboardTableSortOption[]
  sortKey: string
  onSortChange: (key: string) => void
  pageSizeOptions: readonly number[]
  itemsPerPage: number
  onItemsPerPageChange: (size: number) => void
  viewAll: boolean
  onViewAllToggle: () => void
  displayedCount: number
  totalCount: number
  itemLabel: string
  viewAllCapped?: boolean
  maxViewAllItems?: number
  disabled?: boolean
  className?: string
}

export function DashboardTableViewControls({
  sortOptions,
  sortKey,
  onSortChange,
  pageSizeOptions,
  itemsPerPage,
  onItemsPerPageChange,
  viewAll,
  onViewAllToggle,
  displayedCount,
  totalCount,
  itemLabel,
  viewAllCapped = false,
  maxViewAllItems = MAX_VIEW_ALL_ITEMS,
  disabled = false,
  className,
}: DashboardTableViewControlsProps) {
  const countLabel =
    totalCount === 0
      ? `No ${itemLabel}`
      : viewAll
        ? viewAllCapped
          ? `Showing ${displayedCount} of ${totalCount} ${itemLabel} (max ${maxViewAllItems})`
          : `Showing all ${totalCount} ${itemLabel}`
        : `Showing ${displayedCount} of ${totalCount} ${itemLabel}`

  return (
    <div
      className={cn(
        "flex flex-wrap items-center gap-x-4 gap-y-3 w-full pt-3 border-t border-border/80",
        className,
      )}
      role="group"
      aria-label="Table display options"
    >
      <p className="text-xs text-muted-foreground font-sans mr-auto min-w-[12rem]" aria-live="polite">
        {countLabel}
      </p>

      <div className="flex items-center gap-2">
        <label htmlFor="dashboard-table-sort" className={labelClass}>
          Sort by
        </label>
        <select
          id="dashboard-table-sort"
          value={sortKey}
          disabled={disabled}
          onChange={(e) => onSortChange(e.target.value)}
          className={selectClass}
          aria-label="Sort table rows"
        >
          {sortOptions.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </div>

      <div className="flex items-center gap-2">
        <label htmlFor="dashboard-table-page-size" className={labelClass}>
          Per page
        </label>
        <select
          id="dashboard-table-page-size"
          value={viewAll ? "" : String(itemsPerPage)}
          disabled={disabled || viewAll}
          onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
          className={selectClass}
          aria-label="Items per page"
        >
          {viewAll ? (
            <option value="">All</option>
          ) : null}
          {pageSizeOptions.map((size) => (
            <option key={size} value={String(size)}>
              {size}
            </option>
          ))}
        </select>
      </div>

      <button
        type="button"
        onClick={onViewAllToggle}
        disabled={disabled || (totalCount === 0 && !viewAll)}
        className={cn(
          "flex items-center gap-1.5 h-9 px-3 rounded-xl text-xs font-semibold font-sans border transition-all cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
          viewAll
            ? "text-white border-transparent"
            : "border-border text-muted-foreground hover:text-foreground hover:bg-muted bg-card",
        )}
        style={
          viewAll
            ? { background: "var(--brand-navy)", boxShadow: "0 1px 4px rgba(29,45,104,0.2)" }
            : undefined
        }
        aria-pressed={viewAll}
        aria-label={viewAll ? "Return to paginated view" : "View all items on one page"}
      >
        {viewAll ? (
          <>
            <List className="w-3.5 h-3.5 shrink-0" aria-hidden="true" />
            Paginated view
          </>
        ) : (
          <>
            <LayoutList className="w-3.5 h-3.5 shrink-0" aria-hidden="true" />
            View all
          </>
        )}
      </button>
    </div>
  )
}