"use client"

import * as React from "react"

import { cn } from "../../lib/utils"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "./dropdown-menu"
import { Label } from "./label"
import { RadioGroup, RadioGroupItem, type RadioGroupProps } from "./radio-group"
import {
  HorizontalScrollControls,
  HorizontalScrollViewport,
  useHorizontalScrollAffordances,
} from "./horizontal-scroll-region"

export interface SelectionTileOption<T extends string = string> {
  value: T
  label: string
  /** Font Awesome icon class without prefix (e.g. `fa-table`); rendered with `fa-light`. Ignored when `leading` is set. */
  icon?: string
  /** Custom graphic (SVG, swatch, etc.) instead of `icon`. */
  leading?: React.ReactNode
  /** Optional helper copy — shown by {@link SelectionTileShowcase} (docs / marketing). */
  description?: string
}

/** Selected preview well — brand wash; dark uses elevated tint (not pale light-mode wash). */
const TILE_SELECTED_PREVIEW =
  "border-brand bg-brand-tint shadow-none dark:border-brand-color-light dark:bg-brand-tint-light dark:shadow-sm"

/** Icon inside selected preview well — always foreground on tinted well (brand-deep fails on dark tint). */
const TILE_SELECTED_ICON_ON_WELL = "text-foreground"

/** Caption below preview (page canvas) — never mid-tone brand on dark bg. */
const TILE_SELECTED_CAPTION =
  "font-medium text-brand-deep dark:text-foreground"

/** Shared surface classes for icon+label tiles (Properties view type, Export format, etc.).
 *
 * `aspect-square` + horizontal padding keeps every tile a uniform square regardless of how
 * many tiles are in the row — without it, the last row of a `grid-cols-N` grid (e.g. 3 tiles
 * in a 4-col grid for the Properties view selector) renders the same width per cell but the
 * eye reads them as inconsistent when the row's empty trailing cell shifts visual rhythm.
 * Two-line labels (e.g. "List & details", "Tree & details") still fit because the icon
 * column is only ~18px and the square grows with the cell. */
export function selectionTileClassNames(selected: boolean) {
  return cn(
    "flex aspect-square flex-col items-center justify-center gap-1.5 rounded-lg border px-2 py-3 text-xs leading-tight transition-colors",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
    selected
      ? cn(TILE_SELECTED_PREVIEW, TILE_SELECTED_CAPTION, "shadow-sm")
      : "border-border bg-background text-muted-foreground hover:border-border/80 hover:text-interactive-hover-foreground",
  )
}

/** Icon well size for compact + label-below (Properties view type, Export format). */
export const SELECTION_TILE_COMPACT_ICON_SIZE = "2.5rem"

/** Fixed preview for caption-below + default density (Settings theme/contrast/text size). */
export const SELECTION_TILE_BELOW_DEFAULT_PREVIEW_SIZE = "6rem"

const COMPACT_BELOW_COLUMN_CLASS: Record<2 | 3 | 4 | 5 | 6 | 7, string> = {
  2: "grid-cols-2",
  3: "grid-cols-3",
  4: "grid-cols-4",
  5: "grid-cols-5",
  6: "grid-cols-6",
  7: "grid-cols-7",
}

/** Preview box only — label rendered below the graphic (Settings, Properties). */
export function selectionTilePreviewClassNames(
  selected: boolean,
  density: "default" | "compact" = "default",
  labelPlacement: "inside" | "below" = "inside",
) {
  if (density === "compact" && labelPlacement === "below") {
    return cn(
      "relative box-border flex shrink-0 items-center justify-center rounded-lg border transition-colors",
      "size-10",
      selected ? TILE_SELECTED_PREVIEW : "border-transparent bg-transparent",
    )
  }

  if (labelPlacement === "below") {
    return cn(
      "relative box-border flex size-24 shrink-0 items-center justify-center overflow-hidden rounded-lg border p-1.5 transition-colors",
      selected ? TILE_SELECTED_PREVIEW : "border-border bg-background hover:border-border/80",
    )
  }

  return cn(
    "relative box-border flex flex-col rounded-lg border transition-colors",
    "aspect-square w-full max-w-full p-1",
    selected ? TILE_SELECTED_PREVIEW : "border-border bg-background hover:border-border/80",
  )
}

function SelectionTileGraphic<T extends string>({
  option,
  selected,
  density = "default",
}: {
  option: SelectionTileOption<T>
  selected: boolean
  density?: "default" | "compact"
}) {
  if (option.leading != null) {
    return (
      <span className="flex h-full min-h-0 w-full min-w-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:block [&_svg]:h-full [&_svg]:w-auto [&_svg]:max-h-full [&_svg]:max-w-full [&_svg]:object-contain [&_svg]:object-center">
        {option.leading}
      </span>
    )
  }
  if (option.icon) {
    return (
      <i
        className={cn(
          "fa-light shrink-0 leading-none",
          density === "compact" ? "text-base" : "text-lg",
          option.icon,
          selected
            ? TILE_SELECTED_ICON_ON_WELL
            : density === "compact"
              ? "text-muted-foreground"
              : "",
        )}
        aria-hidden="true"
      />
    )
  }
  return null
}

function SelectionTileLabelText<T extends string>({
  option,
}: {
  option: SelectionTileOption<T>
}) {
  return <span className="text-center leading-tight">{option.label}</span>
}

export interface SelectionTileGridProps<T extends string> {
  /** Section caption above the grid (e.g. “View type”). */
  sectionLabel?: string
  options: readonly SelectionTileOption<T>[]
  columns?: 2 | 3 | 4 | 5 | 6 | 7
  value: T
  onValueChange: (value: T) => void
  /** `radio` — Form / RadioGroup; `button` — toggle buttons with aria-pressed. */
  interaction: "radio" | "button"
  /** Prefix for radio ids (`${idPrefix}-${value}`). */
  idPrefix?: string
  /** Forwarded to `RadioGroup` when `interaction="radio"` (sr-only inputs; affects focus ring / state tokens). */
  itemVariant?: RadioGroupProps["itemVariant"]
  itemSize?: RadioGroupProps["itemSize"]
  itemMotion?: RadioGroupProps["itemMotion"]
  className?: string
  /**
   * `inside` — label in the bordered tile (default). `below` — label under the preview
   * (matches system settings: preview box + caption outside).
   */
  labelPlacement?: "inside" | "below"
  /**
   * `compact` — smaller preview wells (Properties sheet). `default` + `labelPlacement="below"`
   * uses fixed `size-24` previews (Settings appearance), not full-width squares.
   */
  density?: "default" | "compact"
  /**
   * Cap inline tiles (e.g. 4 primary view types); additional options move to a **More** menu
   * in the next grid slot. Ignored when `options.length` ≤ this count.
   */
  inlineVisibleCount?: number
  /** Caption under the overflow **More** trigger (default **More**). */
  moreMenuLabel?: string
  /** Optional class on overflow menu content (e.g. Properties sheet portal z-index). */
  overflowMenuClassName?: string
  /**
   * `grid` — responsive column grid (default).
   * `horizontalScroll` — single left-aligned row with horizontal scroll (e.g. question format).
   */
  layout?: "grid" | "horizontalScroll"
}

/**
 * Icon tile grid for single selection — matches Properties “View type” and Export “File format” patterns.
 */
function SelectionTileCaptionBelow<T extends string>({
  option,
  selected,
  density = "default",
  ariaHidden = false,
}: {
  option: SelectionTileOption<T>
  selected: boolean
  density?: "default" | "compact"
  /** When the parent `button` already has `aria-label` (avoids duplicate SR output). */
  ariaHidden?: boolean
}) {
  return (
    <span
      className={cn(
        "w-full px-0.5 text-center leading-tight",
        density === "compact" ? "line-clamp-2 text-xs" : "text-xs",
        selected ? TILE_SELECTED_CAPTION : "text-muted-foreground",
      )}
      {...(ariaHidden ? { "aria-hidden": true as const } : {})}
    >
      {option.label}
    </span>
  )
}

function CompactBelowTile<T extends string>({
  option,
  selected,
  density,
  onSelect,
  ariaHiddenLabel = false,
  tileClassName,
}: {
  option: SelectionTileOption<T>
  selected: boolean
  density: "default" | "compact"
  onSelect: () => void
  ariaHiddenLabel?: boolean
  tileClassName?: string
}) {
  return (
    <button
      type="button"
      aria-label={option.label}
      aria-pressed={selected}
      onClick={onSelect}
      className={cn(
        "flex cursor-pointer flex-col items-center gap-1.5 rounded-lg border-0 bg-transparent p-0 text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
        tileClassName ?? "min-w-0 w-full",
      )}
    >
      <span className={selectionTilePreviewClassNames(selected, density, "below")}>
        <SelectionTileGraphic option={option} selected={selected} density={density} />
      </span>
      <SelectionTileCaptionBelow
        option={option}
        selected={selected}
        density={density}
        ariaHidden={ariaHiddenLabel}
      />
    </button>
  )
}

function SelectionTileOverflowMore<T extends string>({
  options,
  value,
  onValueChange,
  density,
  moreMenuLabel = "More",
  overflowMenuClassName,
}: {
  options: readonly SelectionTileOption<T>[]
  value: T
  onValueChange: (value: T) => void
  density: "default" | "compact"
  moreMenuLabel?: string
  overflowMenuClassName?: string
}) {
  const selectedOverflow = options.find(opt => opt.value === value)
  const moreSelected = selectedOverflow != null
  const moreOption: SelectionTileOption<T> = {
    value: "__more__" as T,
    label: moreMenuLabel,
    icon: "fa-ellipsis",
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          aria-label={
            moreSelected && selectedOverflow
              ? `${moreMenuLabel}, ${selectedOverflow.label} selected`
              : moreMenuLabel
          }
          aria-haspopup="menu"
          aria-pressed={moreSelected}
          className="flex min-w-0 w-full cursor-pointer flex-col items-center gap-1.5 rounded-lg border-0 bg-transparent p-0 text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        >
          <span className={selectionTilePreviewClassNames(moreSelected, density, "below")}>
            <SelectionTileGraphic option={moreOption} selected={moreSelected} density={density} />
          </span>
          <SelectionTileCaptionBelow
            option={moreOption}
            selected={moreSelected}
            density={density}
            ariaHidden
          />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="center" className={overflowMenuClassName}>
        {options.map(opt => (
          <DropdownMenuItem
            key={opt.value}
            onSelect={() => onValueChange(opt.value)}
            className={cn(value === opt.value && "bg-accent text-accent-foreground")}
          >
            {opt.icon ? (
              <i className={cn("fa-light", opt.icon)} aria-hidden="true" />
            ) : null}
            {opt.label}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

/** Question-format row — scroll chevrons live in the section header, not beside tiles. */
function SelectionTileHorizontalScrollShell({
  sectionLabel,
  ariaLabel,
  className,
  children,
}: {
  sectionLabel?: string
  ariaLabel: string
  className?: string
  children: React.ReactNode
}) {
  const scrollRef = React.useRef<HTMLDivElement>(null)
  const { canScrollLeft, canScrollRight, overflowing, scrollPrev, scrollNext } =
    useHorizontalScrollAffordances(scrollRef)

  return (
    <div className={cn("min-w-0 w-full", className)}>
      <div className="mb-3 flex min-h-8 min-w-0 items-center justify-between gap-3">
        {sectionLabel ? (
          <p className="min-w-0 text-start text-xs font-medium text-muted-foreground">
            {sectionLabel}
          </p>
        ) : (
          <span className="sr-only">{ariaLabel}</span>
        )}
        {overflowing ? (
          <HorizontalScrollControls
            ariaLabel={ariaLabel}
            canScrollLeft={canScrollLeft}
            canScrollRight={canScrollRight}
            onScrollPrev={scrollPrev}
            onScrollNext={scrollNext}
            layout="group"
            className="shrink-0"
          />
        ) : null}
      </div>
      <HorizontalScrollViewport
        ref={scrollRef}
        label={ariaLabel}
        className="snap-x snap-mandatory"
      >
        {children}
      </HorizontalScrollViewport>
    </div>
  )
}

export interface SelectionTileShowcaseProps<T extends string = string> {
  /** Section caption above the grid */
  sectionLabel?: string
  /** Font Awesome icon for the section label (e.g. `fa-table-columns`) */
  sectionIcon?: string
  options: readonly SelectionTileOption<T>[]
  columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7
  density?: "default" | "compact"
  /** `start` — icon left, copy left (docs). `center` — stacked icon tiles. */
  align?: "start" | "center"
  className?: string
}

/**
 * Read-only icon tile grid — same chrome as {@link SelectionTileGrid} for docs and feature lists.
 * Pair each option with `icon` + optional `description` helper copy below the label.
 */
export function SelectionTileShowcase<T extends string = string>({
  sectionLabel,
  sectionIcon,
  options,
  columns = 3,
  density = "compact",
  align = "start",
  className,
}: SelectionTileShowcaseProps<T>) {
  const gridColumns = Math.min(7, Math.max(1, Math.min(columns, options.length))) as
    | 1
    | 2
    | 3
    | 4
    | 5
    | 6
    | 7
  const centered = align === "center"

  return (
    <div className={cn("flex flex-col gap-3", className)}>
      {sectionLabel ? (
        <div className="flex items-center gap-2">
          {sectionIcon ? (
            <i
              className={cn("fa-light text-sm text-muted-foreground", sectionIcon)}
              aria-hidden="true"
            />
          ) : null}
          <Label className="text-sm font-medium text-foreground">{sectionLabel}</Label>
        </div>
      ) : null}
      <ul
        className={cn(
          "grid gap-3",
          gridColumns === 1 && "grid-cols-1",
          gridColumns === 2 && "grid-cols-1 sm:grid-cols-2",
          gridColumns === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
          gridColumns === 4 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
          gridColumns === 5 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-5",
          gridColumns === 6 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6",
          gridColumns === 7 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-7",
        )}
      >
        {options.map((option) => (
          <li
            key={option.value}
            className={cn(
              "flex min-w-0 gap-3 rounded-lg border border-border/70 bg-background p-3",
              centered ? "flex-col items-center gap-1.5 p-2" : "flex-row items-start",
            )}
          >
            <span
              className={cn(
                selectionTilePreviewClassNames(false, density, "below"),
                centered ? undefined : "shrink-0",
              )}
            >
              <SelectionTileGraphic option={option} selected={false} density={density} />
            </span>
            <div
              className={cn(
                "flex min-w-0 flex-col gap-0.5",
                centered ? "items-center text-center" : "flex-1 text-left",
              )}
            >
              <span className="text-sm font-medium leading-tight text-foreground">{option.label}</span>
              {option.description ? (
                <p className="text-sm leading-snug text-muted-foreground">{option.description}</p>
              ) : null}
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}

export function SelectionTileGrid<T extends string>({
  sectionLabel,
  options,
  columns = 4,
  value,
  onValueChange,
  interaction,
  idPrefix = "tile",
  className,
  labelPlacement = "inside",
  density = "default",
  itemVariant,
  itemSize,
  itemMotion,
  inlineVisibleCount,
  moreMenuLabel = "More",
  overflowMenuClassName,
  layout = "grid",
}: SelectionTileGridProps<T>) {
  const captionBelow = labelPlacement === "below"
  const horizontalScroll = layout === "horizontalScroll" && captionBelow
  const overflowActive =
    inlineVisibleCount != null && options.length > inlineVisibleCount
  const primaryOptions = overflowActive ? options.slice(0, inlineVisibleCount) : options
  const overflowOptions = overflowActive ? options.slice(inlineVisibleCount) : []
  const resolvedColumns = overflowActive ? inlineVisibleCount + 1 : columns
  const belowGridColumns = Math.min(
    7,
    Math.max(
      2,
      overflowActive ? resolvedColumns : Math.min(columns, primaryOptions.length),
    ),
  ) as 2 | 3 | 4 | 5 | 6 | 7

  const gridClass = cn(
    captionBelow
      ? cn(
          "grid min-w-0 justify-items-center",
          density === "compact"
            ? "w-full gap-x-1 gap-y-2.5"
            : "w-fit max-w-full gap-x-2 gap-y-2",
          COMPACT_BELOW_COLUMN_CLASS[belowGridColumns],
        )
      : "gap-2",
    !captionBelow && resolvedColumns === 2 && "grid grid-cols-2",
    !captionBelow && resolvedColumns === 3 && "grid grid-cols-3",
    !captionBelow && resolvedColumns === 4 && "grid grid-cols-4",
    !captionBelow && resolvedColumns === 5 && "grid grid-cols-5",
    !captionBelow && resolvedColumns === 6 && "grid grid-cols-6",
    !captionBelow && resolvedColumns === 7 && "grid grid-cols-7",
  )

  const belowLabelClass = cn(
    "flex w-full min-w-0 cursor-pointer flex-col items-center gap-1.5 rounded-lg focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background",
  )

  if (interaction === "radio") {
    return (
      <div className={cn("min-w-0", captionBelow && "w-full", className)}>
        {sectionLabel ? (
          <p className="mb-2 text-xs font-medium text-muted-foreground">{sectionLabel}</p>
        ) : null}
        <RadioGroup
          value={value}
          onValueChange={v => onValueChange(v as T)}
          className={gridClass}
          itemVariant={itemVariant}
          itemSize={itemSize}
          itemMotion={itemMotion}
        >
          {options.map(opt => {
            const selected = value === opt.value
            const id = `${idPrefix}-${opt.value}`
            if (labelPlacement === "below") {
            return (
              <Label
                key={opt.value}
                htmlFor={id}
                className={belowLabelClass}
              >
                  <span className={selectionTilePreviewClassNames(selected, density, "below")}>
                    <RadioGroupItem value={opt.value} id={id} className="sr-only" />
                    <SelectionTileGraphic option={opt} selected={selected} density={density} />
                  </span>
                  <SelectionTileCaptionBelow option={opt} selected={selected} density={density} />
                </Label>
              )
            }
            return (
              <Label
                key={opt.value}
                htmlFor={id}
                className={cn(
                  "flex w-full min-w-0 cursor-pointer rounded-lg focus-within:rounded-lg focus-within:ring-2 focus-within:ring-ring focus-within:outline-none",
                  selectionTileClassNames(selected),
                )}
              >
                <RadioGroupItem value={opt.value} id={id} className="sr-only" />
                <SelectionTileGraphic option={opt} selected={selected} density={density} />
                <SelectionTileLabelText option={opt} />
              </Label>
            )
          })}
        </RadioGroup>
      </div>
    )
  }

  const tileRow = (
    <>
      {primaryOptions.map(opt => {
        const selected = value === opt.value
        if (labelPlacement === "below") {
          return (
            <CompactBelowTile
              key={opt.value}
              option={opt}
              selected={selected}
              density={density}
              onSelect={() => onValueChange(opt.value)}
              ariaHiddenLabel
              tileClassName={
                horizontalScroll ? "w-[4.75rem] shrink-0 snap-start" : undefined
              }
            />
          )
        }
        return (
          <button
            key={opt.value}
            type="button"
            aria-label={opt.label}
            aria-pressed={selected}
            onClick={() => onValueChange(opt.value)}
            className={cn(
              horizontalScroll ? "w-[4.75rem] shrink-0 snap-start" : "w-full min-w-0",
              selectionTileClassNames(selected),
            )}
          >
            <SelectionTileGraphic option={opt} selected={selected} density={density} />
            <SelectionTileLabelText option={opt} />
          </button>
        )
      })}
      {overflowActive ? (
        <SelectionTileOverflowMore
          options={overflowOptions}
          value={value}
          onValueChange={onValueChange}
          density={density}
          moreMenuLabel={moreMenuLabel}
          overflowMenuClassName={overflowMenuClassName}
        />
      ) : null}
    </>
  )

  if (horizontalScroll) {
    const scrollAria = sectionLabel ?? "Question format options"
    return (
      <SelectionTileHorizontalScrollShell
        sectionLabel={sectionLabel}
        ariaLabel={scrollAria}
        className={className}
      >
        <div className="flex w-max flex-nowrap items-start justify-start gap-x-1.5 py-1.5">
          {tileRow}
        </div>
      </SelectionTileHorizontalScrollShell>
    )
  }

  return (
    <div className={cn("min-w-0 w-full", className)}>
      {sectionLabel ? (
        <p className="mb-2 text-start text-xs font-medium text-muted-foreground">
          {sectionLabel}
        </p>
      ) : null}
      <div className={gridClass}>{tileRow}</div>
    </div>
  )
}