"use client"

/**
 * FolderGridView — generic icon-grid layout for any list-page hub.
 *
 * Handles the responsive CSS grid shell, empty state, and accessibility list role.
 * Pass a `renderTile` render-prop for domain-specific tile content
 * (Placements, Team, Rotations, etc.).
 *
 * Usage:
 * ```tsx
 * <FolderGridView
 *   rows={placements}
 *   getRowId={r => r.id}
 *   renderTile={row => <PlacementFolderTile row={row} onClick={…} />}
 *   ariaLabel="Placements folder view"
 * />
 * ```
 */

import * as React from "react"
import { cn } from "../../lib/utils"
import {
  ListPageViewFrame,
  LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID,
} from "../ui/list-page-view-frame"

export interface FolderGridViewProps<T> {
  rows: T[]
  getRowId: (row: T) => string | number
  /** Render one tile — receives the row, returns a React node (typically a `<button>`). */
  renderTile: (row: T) => React.ReactNode
  /** Shown when `rows` is empty. */
  emptyContent?: React.ReactNode
  /** `aria-label` on the grid list. */
  ariaLabel?: string
  className?: string
  /**
   * When true, constrains the grid to a centered max width so folder tiles don’t stretch
   * edge-to-edge on very wide viewports.
   */
  constrainWidth?: boolean
}

function FolderGridTile<T>({
  row,
  renderTile,
}: {
  row: T
  renderTile: (row: T) => React.ReactNode
}) {
  return <>{renderTile(row)}</>
}

export function FolderGridView<T>({
  rows,
  getRowId,
  renderTile,
  emptyContent,
  ariaLabel = "Folder view",
  className,
  constrainWidth = false,
}: FolderGridViewProps<T>) {
  if (rows.length === 0) {
    return (
      <ListPageViewFrame
        maxWidthClassName={constrainWidth ? LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID : undefined}
        className={cn(className)}
      >
        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border py-16 text-sm text-muted-foreground">
          <i className="fa-solid fa-grid-2 mb-3 text-3xl opacity-40" aria-hidden="true" />
          {emptyContent ?? <p>No records found.</p>}
        </div>
      </ListPageViewFrame>
    )
  }

  return (
    <ListPageViewFrame className={cn(className)}>
      <ul
        className={cn(
          "m-0 grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8",
          constrainWidth && "mx-auto max-w-6xl",
        )}
        aria-label={ariaLabel}
      >
        {rows.map(row => (
          <li key={getRowId(row)}>
            <FolderGridTile row={row} renderTile={renderTile} />
          </li>
        ))}
      </ul>
    </ListPageViewFrame>
  )
}