"use client"

/**
 * FinderPanelView — Miller-style 3-column split for list-page hubs.
 *
 * Visual shell matches Library panel (`ListPageTreeColumnHeader`, `LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS`,
 * shared resizable handles) — see `list-page-split-hub-tokens.ts`.
 */

import * as React from "react"
import { cn } from "../../lib/utils"
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "../ui/resizable"
import { useIsMobile } from "../../hooks/use-mobile"
import { useSidebarReflowZoom } from "../../hooks/use-sidebar-reflow-zoom"
import { ListPageTreeColumnHeader } from "./list-page-tree-column-header"
import { ListPageSplitDetailsPlaceholder } from "./list-page-split-details-placeholder"
import {
  LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
  LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,
  LIST_PAGE_SPLIT_MILLER_SCROLL_BODY_CLASS,
  LIST_PAGE_SPLIT_RESIZABLE_GROUP_CLASS,
  LIST_PAGE_SPLIT_RESIZABLE_GROUP_STYLE,
  LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS,
  LIST_PAGE_SPLIT_RESIZABLE_PANEL_STYLE,
} from "./list-page-split-hub-tokens"

export interface FinderGroup {
  id: string
  label: string
  icon?: string
  accent?: string
  count: number
}

export interface FinderPanelViewProps<T> {
  groups: FinderGroup[]
  rows: T[]
  getRowId: (row: T) => string | number
  getRowGroupId: (row: T) => string
  renderListRow: (row: T, isSelected: boolean) => React.ReactNode
  renderDetail: (row: T) => React.ReactNode
  emptyDetail?: React.ReactNode
  emptyList?: React.ReactNode
  defaultGroupId?: string
  ariaLabel?: string
  autoSaveId?: string
  className?: string
  style?: React.CSSProperties
  onAddItem?: () => void
  /**
   * When true, omit outer margin, border, and card fill so the grid fits inside
   * `ListPageSplitHubChrome` (shared split surface across hubs).
   */
  embedded?: boolean
  /** Left column title (Library: “Categories”). */
  groupsColumnTitle?: string
  /** Middle column title; defaults from the active group label. */
  getListColumnTitle?: (activeGroup: FinderGroup | undefined) => string
}

/**
 * Roving tabindex for a `role="listbox"` column — one tab stop for the whole list,
 * Arrow / Home / End move focus. Same keyboard model as `ViewSegmentedControl`,
 * except focus does not change selection (selection stays on click / Enter / Space).
 */
function useListboxRovingFocus(count: number, selectedIndex: number) {
  const optionRefs = React.useRef<(HTMLButtonElement | null)[]>([])
  const [focusedIndex, setFocusedIndex] = React.useState<number | null>(null)

  const activeIndex = Math.min(
    Math.max(focusedIndex ?? selectedIndex, 0),
    Math.max(count - 1, 0),
  )

  const moveActiveOption = React.useCallback(
    (index: number) => {
      if (count === 0) return
      const i = ((index % count) + count) % count
      setFocusedIndex(i)
      requestAnimationFrame(() => {
        optionRefs.current[i]?.focus()
      })
    },
    [count],
  )

  const onOptionKeyDown = React.useCallback(
    (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
      if (e.key === "ArrowDown") {
        e.preventDefault()
        moveActiveOption(index + 1)
      } else if (e.key === "ArrowUp") {
        e.preventDefault()
        moveActiveOption(index - 1)
      } else if (e.key === "Home") {
        e.preventDefault()
        moveActiveOption(0)
      } else if (e.key === "End") {
        e.preventDefault()
        moveActiveOption(count - 1)
      }
    },
    [count, moveActiveOption],
  )

  return { optionRefs, activeIndex, onOptionKeyDown }
}

export function GroupsColumn({
  groups,
  selectedGroupId,
  onSelect,
  columnTitle,
}: {
  groups: FinderGroup[]
  selectedGroupId: string
  onSelect: (id: string) => void
  columnTitle: string
}) {
  const { optionRefs, activeIndex, onOptionKeyDown } = useListboxRovingFocus(
    groups.length,
    groups.findIndex(g => g.id === selectedGroupId),
  )

  return (
    <div className="flex flex-col">
      <ListPageTreeColumnHeader title={columnTitle} />
      <div
        className={cn(LIST_PAGE_SPLIT_MILLER_SCROLL_BODY_CLASS, "py-1")}
        role="listbox"
        aria-label="Group navigation"
      >
        {groups.map((group, index) => {
          const isSelected = group.id === selectedGroupId
          return (
            <button
              key={group.id}
              ref={el => {
                optionRefs.current[index] = el
              }}
              type="button"
              role="option"
              aria-selected={isSelected}
              tabIndex={index === activeIndex ? 0 : -1}
              onKeyDown={e => onOptionKeyDown(e, index)}
              onClick={() => onSelect(group.id)}
              className={cn(
                "group flex w-full items-center gap-2 px-3 py-2 text-start text-sm transition-colors duration-75",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
                isSelected
                  ? "bg-accent font-medium text-accent-foreground"
                  : "text-foreground hover:bg-muted/50",
              )}
            >
              {group.accent ? (
                <span className={cn("size-2 shrink-0 rounded-full", group.accent)} aria-hidden="true" />
              ) : group.icon ? (
                <i
                  className={cn(
                    "fa-light shrink-0 text-xs",
                    group.icon,
                    isSelected ? "text-accent-foreground" : "text-muted-foreground",
                  )}
                  aria-hidden="true"
                />
              ) : null}
              <span className="min-w-0 flex-1 truncate leading-tight">{group.label}</span>
              <span
                className={cn(
                  "shrink-0 tabular-nums text-xs",
                  isSelected ? "text-accent-foreground/80" : "text-muted-foreground",
                )}
              >
                {group.count}
              </span>
            </button>
          )
        })}
      </div>
    </div>
  )
}

/**
 * Horizontal scope strip (toolbar toggles). Optional: place above a hub body when you need
 * status scope without consuming a Finder column.
 */
export function FinderGroupStrip({
  groups,
  selectedGroupId,
  onSelect,
  ariaLabel = "Scope",
}: {
  groups: FinderGroup[]
  selectedGroupId: string
  onSelect: (id: string) => void
  ariaLabel?: string
}) {
  return (
    <div
      role="toolbar"
      aria-label={ariaLabel}
      className="flex min-h-10 flex-wrap items-center gap-1.5 border-b border-border bg-card p-2"
    >
      {groups.map(group => {
        const isSelected = group.id === selectedGroupId
        return (
          <button
            key={group.id}
            type="button"
            aria-pressed={isSelected}
            onClick={() => onSelect(group.id)}
            className={cn(
              "inline-flex h-8 max-w-full min-w-0 shrink-0 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-colors",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
              isSelected
                ? "border-brand/40 bg-accent text-accent-foreground"
                : "border-transparent bg-background/80 text-foreground hover:bg-muted",
            )}
          >
            {group.accent ? (
              <span className={cn("size-2 shrink-0 rounded-full", group.accent)} aria-hidden="true" />
            ) : group.icon ? (
              <i
                className={cn(
                  "fa-light shrink-0 text-xs",
                  group.icon,
                  isSelected ? "text-accent-foreground" : "text-muted-foreground",
                )}
                aria-hidden="true"
              />
            ) : null}
            <span className="min-w-0 truncate">{group.label}</span>
            <span
              className={cn(
                "shrink-0 tabular-nums text-xs",
                isSelected ? "text-accent-foreground/85" : "text-muted-foreground",
              )}
            >
              {group.count}
            </span>
          </button>
        )
      })}
    </div>
  )
}

function FinderListRowContent<T>({
  row,
  isSelected,
  renderListRow,
}: {
  row: T
  isSelected: boolean
  renderListRow: (row: T, isSelected: boolean) => React.ReactNode
}) {
  return <>{renderListRow(row, isSelected)}</>
}

function ListColumn<T>({
  rows,
  getRowId,
  selectedId,
  renderListRow,
  onSelect,
  emptyList,
  groupLabel,
  columnTitle,
  onAddItem,
}: {
  rows: T[]
  getRowId: (row: T) => string | number
  selectedId: string | number | null
  renderListRow: (row: T, isSelected: boolean) => React.ReactNode
  onSelect: (id: string | number) => void
  emptyList?: React.ReactNode
  groupLabel: string
  columnTitle: string
  onAddItem?: () => void
}) {
  const { optionRefs, activeIndex, onOptionKeyDown } = useListboxRovingFocus(
    rows.length,
    rows.findIndex(r => getRowId(r) === selectedId),
  )

  return (
    <div className="flex flex-col">
      <ListPageTreeColumnHeader title={columnTitle} />
      <div className="flex flex-col">
        <div className={cn(LIST_PAGE_SPLIT_MILLER_SCROLL_BODY_CLASS, "py-1")}>
          {rows.length === 0 ? (
            <div className="flex flex-col items-center justify-center px-4 py-12 text-center text-sm text-muted-foreground">
              {emptyList ?? <p>No items in this group.</p>}
            </div>
          ) : (
            <div role="listbox" aria-label={`${groupLabel} items`}>
            {rows.map((row, index) => {
              const id = getRowId(row)
              const isSelected = id === selectedId
              return (
                <button
                  key={id}
                  ref={el => {
                    optionRefs.current[index] = el
                  }}
                  type="button"
                  role="option"
                  aria-selected={isSelected}
                  tabIndex={index === activeIndex ? 0 : -1}
                  onKeyDown={e => onOptionKeyDown(e, index)}
                  onClick={() => onSelect(id)}
                  className={cn(
                    "group flex w-full items-center gap-3 px-3 py-2 text-start text-sm transition-colors duration-75",
                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
                    isSelected
                      ? "bg-accent font-medium text-accent-foreground"
                      : "text-foreground hover:bg-muted/50",
                  )}
                >
                  <FinderListRowContent row={row} isSelected={isSelected} renderListRow={renderListRow} />
                </button>
              )
            })}
            </div>
          )}
        </div>
        {onAddItem ? (
          <div className="flex shrink-0 items-center justify-center border-t border-border/50 px-2 py-1.5">
            <button
              type="button"
              onClick={onAddItem}
              className="icon-button-chrome flex size-8 items-center justify-center rounded-md transition-colors hover:bg-interactive-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              aria-label={`Add item to ${groupLabel}`}
            >
              <i className="fa-light fa-plus text-xs" aria-hidden="true" />
            </button>
          </div>
        ) : null}
      </div>
    </div>
  )
}

function DetailColumn({ children }: { children: React.ReactNode }) {
  return (
    <div className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}>
      <ListPageTreeColumnHeader title="Details" />
      <div className={LIST_PAGE_SPLIT_MILLER_SCROLL_BODY_CLASS}>{children}</div>
    </div>
  )
}

function DefaultEmptyDetail() {
  return (
    <ListPageSplitDetailsPlaceholder title="Nothing selected" />
  )
}

export function FinderPanelView<T>({
  groups,
  rows,
  getRowId,
  getRowGroupId,
  renderListRow,
  renderDetail,
  emptyDetail,
  emptyList,
  defaultGroupId,
  ariaLabel = "List and details",
  autoSaveId = "finder-panel-view",
  className,
  style,
  onAddItem,
  embedded = false,
  groupsColumnTitle = "Categories",
  getListColumnTitle = g => g?.label ?? "Items",
}: FinderPanelViewProps<T>) {
  /**
   * WCAG 1.4.10 — three inline panes cannot hold a usable width on a phone or at
   * 200% zoom, and the surface is `overflow-hidden` so there is no scroll to
   * recover them. Stack on the block axis instead.
   */
  const isMobileViewport = useIsMobile()
  const isReflowViewport = useSidebarReflowZoom()
  const stacked = isMobileViewport || isReflowViewport

  const mergedStyle = React.useMemo<React.CSSProperties>(() => {
    if (embedded) {
      return { height: "100%", minHeight: 0, ...style }
    }
    return {
      height: "calc(100dvh - 280px)",
      minHeight: stacked ? 560 : 420,
      ...style,
    }
  }, [embedded, stacked, style])
  const firstGroupId = defaultGroupId ?? groups[0]?.id ?? "all"
  const [selectedGroupId, setSelectedGroupId] = React.useState(firstGroupId)
  const [selectedRowId, setSelectedRowId] = React.useState<string | number | null>(null)

  const visibleRows = React.useMemo(() => {
    if (selectedGroupId === "all") return rows
    return rows.filter(r => getRowGroupId(r) === selectedGroupId)
  }, [rows, selectedGroupId, getRowGroupId])

  const resolvedRowId = React.useMemo(() => {
    if (
      selectedRowId !== null
      && visibleRows.some(r => getRowId(r) === selectedRowId)
    ) {
      return selectedRowId
    }
    return visibleRows[0] ? getRowId(visibleRows[0]) : null
  }, [selectedRowId, visibleRows, getRowId])

  const handleSelectGroup = React.useCallback(
    (id: string) => {
      setSelectedGroupId(id)
      const nextRows =
        id === "all" ? rows : rows.filter(r => getRowGroupId(r) === id)
      setSelectedRowId(nextRows[0] ? getRowId(nextRows[0]) : null)
    },
    [rows, getRowGroupId, getRowId],
  )

  const selectedRow =
    resolvedRowId !== null
      ? (visibleRows.find(r => getRowId(r) === resolvedRowId) ?? null)
      : null

  const selectedGroup = groups.find(g => g.id === selectedGroupId)
  const listColumnTitle = getListColumnTitle(selectedGroup)

  return (
    <div
      className={cn(
        embedded
          ? "flex w-full flex-col"
          : "mx-4 mb-6 flex w-full flex-col rounded-xl border border-border bg-card lg:mx-6",
        className,
      )}
      style={mergedStyle}
      aria-label={ariaLabel}
    >
      <ResizablePanelGroup
        id={String(autoSaveId)}
        orientation={stacked ? "vertical" : "horizontal"}
        className={LIST_PAGE_SPLIT_RESIZABLE_GROUP_CLASS}
        style={LIST_PAGE_SPLIT_RESIZABLE_GROUP_STYLE}
      >
        <ResizablePanel
          id="groups"
          defaultSize={stacked ? "24%" : "22%"}
          minSize={stacked ? "14%" : "16%"}
          maxSize={stacked ? "45%" : "32%"}
          className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}
          style={LIST_PAGE_SPLIT_RESIZABLE_PANEL_STYLE}
        >
          <GroupsColumn
            columnTitle={groupsColumnTitle}
            groups={groups}
            selectedGroupId={selectedGroupId}
            onSelect={handleSelectGroup}
          />
        </ResizablePanel>

        <ResizableHandle withHandle stickyGrip className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />

        <ResizablePanel
          id="list"
          defaultSize={stacked ? "30%" : "34%"}
          minSize={stacked ? "18%" : "22%"}
          maxSize={stacked ? "55%" : "48%"}
          className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}
          style={LIST_PAGE_SPLIT_RESIZABLE_PANEL_STYLE}
        >
          <ListColumn
            columnTitle={listColumnTitle}
            rows={visibleRows}
            getRowId={getRowId}
            selectedId={resolvedRowId}
            renderListRow={renderListRow}
            onSelect={setSelectedRowId}
            emptyList={emptyList}
            groupLabel={selectedGroup?.label ?? "All"}
            onAddItem={onAddItem}
          />
        </ResizablePanel>

        <ResizableHandle withHandle stickyGrip className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />

        <ResizablePanel
          id="detail"
          defaultSize={stacked ? "46%" : "44%"}
          minSize={stacked ? "25%" : "30%"}
          className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}
          style={LIST_PAGE_SPLIT_RESIZABLE_PANEL_STYLE}
        >
          <DetailColumn>
            {selectedRow
              ? renderDetail(selectedRow)
              : (emptyDetail ?? <DefaultEmptyDetail />)}
          </DetailColumn>
        </ResizablePanel>
      </ResizablePanelGroup>
    </div>
  )
}