"use client"

/**
 * ListPageTemplate — reusable template for any list-based page.
 *
 * Scroll: table / list / board tabs grow with `[data-page-scroll]` (see
 * `.cursor/rules/exxat-list-page-hub-scroll.mdc`). Folder / panel / tree / dashboard
 * tabs fill the viewport and scroll internally.
 *
 * Provides: page header slot, optional key metrics, tabbed views
 * (table/list/board/dashboard) with add/remove/configure per-tab,
 * and an export drawer.
 *
 * Usage:
 *   <ListPageTemplate
 *     header={<MyPageHeader />}
 *     metrics={<KeyMetrics ... />}
 *     defaultTabs={DEFAULT_TABS}
 *     renderContent={(tab) => <MyTable members={MOCK_ROWS} view={tab.viewType} />}
 *   />
 *
 * Connected views (table | list | board | dashboard) must share one `useTableState`
 * and pass `tableState.rows` into non-table surfaces — see `docs/data-views-pattern.md`
 * and `AGENTS.md` §4.
 *
 * View chrome is shared with `ViewSegmentedControl` / `viewSegmentedToolbarClass` in
 * `@/components/ui/view-segmented-control` and re-exported from `@/components/data-views`.
 */

import * as React from "react"
import { cn }    from "../../lib/utils"
import {
  horizontalPadding,
  measureRowLabels,
  naturalRowWidth,
  useRowFitLadder,
  type RowFitMeasurement,
} from "../../hooks/use-row-fit-ladder"
import { useRememberedPageScroll } from "../../hooks/use-remembered-page-scroll"
import { Tip }   from "../ui/tip"
import { Button } from "../ui/button"
import { HorizontalScrollRegion } from "../ui/horizontal-scroll-region"
import { Input } from "../ui/input"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../ui/dialog"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  Shortcut,
} from "../ui/dropdown-menu"
import type { DataListViewType } from "../../lib/data-list-view"
import { DATA_LIST_VIEW_TILES, dataListViewAddShortcut } from "../../lib/data-list-view"
import {
  createListPageEditViewHandler,
  type OpenTablePropertiesHandle,
} from "../../lib/list-page-table-properties"
import { TABLE_ONLY_HUB_SUPPORTED_VIEWS } from "../../lib/data-list-view-registry"
import {
  viewSegmentedToolbarClass,
  viewSegmentedButtonClass,
} from "../ui/view-segmented-control"
import { usePersistedState } from "../../lib/persisted-state"
import type { RowHeight } from "../../lib/row-height"

const ExportDrawer = React.lazy(() =>
  import("../ui/export-drawer").then((m) => ({ default: m.ExportDrawer })),
)

// ─────────────────────────────────────────────────────────────────────────────
// Types
// ─────────────────────────────────────────────────────────────────────────────

export type ViewType = DataListViewType

/**
 * Opt-in viewport-fill tab bodies. Empty by default so every hub view
 * (including folder / panel / tree) grows with `[data-page-scroll]` like table.
 */
const LIST_PAGE_VIEWPORT_FILL_VIEWS = new Set<ViewType>([])

/** Same labels/icons as Properties drawer `SelectionTileGrid` — single source in `DATA_LIST_VIEW_TILES`. */
export const VIEW_TYPES: { type: ViewType; label: string; icon: string }[] = DATA_LIST_VIEW_TILES.map(t => ({
  type: t.value,
  label: t.label,
  icon: t.icon,
}))

export interface FilterOption {
  id: string
  label: string
}

export interface ViewTab {
  id: string
  label: string
  viewType: ViewType
  icon: string
  /** Optional filter key for lifecycle or category-based filtering */
  filterId: string
  /**
   * Per-view row density preference captured at creation time (or later via
   * Properties). Consumers that render tables/boards can read this to set the
   * initial `rowHeight` for that specific view tab.
   */
  rowHeight?: RowHeight
}

export interface ListPageTemplateProps {
  /** Page header — rendered above metrics */
  header: React.ReactNode
  /** Optional metrics strip — rendered below header */
  metrics?: React.ReactNode
  /**
   * Default visibility for the metrics strip when not controlled.
   * Persisted under `<persistKey>:listpage:show-metrics:v1` when `persistKey` is set.
   * @default true
   */
  defaultShowMetrics?: boolean
  /** Whether to show metrics (controlled externally) */
  showMetrics?: boolean
  /** Called when metrics visibility changes (controlled mode) */
  onShowMetricsChange?: (show: boolean) => void
  /** Initial tabs (uncontrolled mode) */
  defaultTabs: ViewTab[]
  /**
   * Controlled tabs — when all four are provided, tab state is owned by the parent
   * (e.g. for localStorage). Otherwise `defaultTabs` + internal state are used.
   */
  tabs?: ViewTab[]
  onTabsChange?: (tabs: ViewTab[]) => void
  activeTabId?: string
  onActiveTabChange?: (id: string) => void
  /** Filter options per tab (e.g. All, Upcoming, Ongoing, Completed) */
  filterOptions?: FilterOption[]
  /** Label for the filter sub-menu (default: "Filter") */
  filterLabel?: string
  /** Get count for a tab's filter (for badge) */
  getTabCount?: (filterId: string) => number
  /** Render the content for the active tab */
  renderContent: (tab: ViewTab, updateTab: (patch: Partial<ViewTab>) => void) => React.ReactNode
  /** Export drawer props */
  exportOpen?: boolean
  onExportOpenChange?: (open: boolean) => void
  /** Row count for export; if omitted, uses `getTabCount(activeTab.filterId)` when provided */
  exportTotalRows?: number
  /**
   * Tab menu — “Edit” (e.g. open table properties). Parent can switch to table view first, then call ref.
   * Overrides `tablePropertiesRef` when both are set.
   */
  onEditView?: (tab: ViewTab, helpers: { updateTab: (patch: Partial<ViewTab>) => void }) => void
  /**
   * Ref to the active tab’s table surface (`openPropertiesDrawer`). Wires “View → Edit” to
   * `TablePropertiesDrawer` when `onEditView` is omitted.
   */
  tablePropertiesRef?: React.RefObject<OpenTablePropertiesHandle | null>
  /** When true, hide the views tab strip (tabs + add view) — e.g. search landing with a single table surface. */
  hideViewsToolbar?: boolean
  /**
   * Subset of view types the hub actually implements (e.g. List hub omits Dashboard/Folder).
   * When set, the Add view menu and ⌘1–9 shortcuts are filtered so users cannot add a view the
   * hub cannot render. When omitted, defaults to {@link TABLE_ONLY_HUB_SUPPORTED_VIEWS}
   * (table only). Pass {@link FULL_HUB_SUPPORTED_VIEWS} when the product asks for Add view parity.
   * (table, list, board, dashboard). Pass an explicit allowlist for specialized hubs
   * (e.g. tokens table-only, library with folder/calendar).
   *
   * Pair with `TablePropertiesDrawerButton.supportedViewTypes` to keep Properties consistent.
   */
  supportedViewTypes?: readonly DataListViewType[]
  /**
   * **Opt-in localStorage persistence** for the page-level state: the
   * user's view tabs (their labels, view types, icons, filterIds) and the
   * currently active tab. When set, returning to the hub restores the
   * tab arrangement.
   *
   * Storage keys: `exxat-ds:<persistKey>:listpage:tabs:v1` and
   * `exxat-ds:<persistKey>:listpage:active-tab:v1`. **Use the same key
   * across renders** of the same hub or persistence will reset.
   *
   * When `tabs` / `activeTabId` are also passed in controlled mode, the
   * controlled props win — `persistKey` is ignored. Most hubs SHOULD pick
   * one or the other.
   *
   * @see `apps/web/docs/persisted-state-pattern.md`
   * @see `.cursor/rules/exxat-persisted-state.mdc`
   */
  persistKey?: string

  /**
   * Whether count badges should be shown in the view tab bar.
   * This is a **hub-level** preference (affects all tabs).
   * When `persistKey` is provided and the prop is not controlled, the value
   * is persisted under `<persistKey>:listpage:show-view-counts:v1`.
   */
  showViewCounts?: boolean
  onShowViewCountsChange?: (show: boolean) => void

  /**
   * Called when the user selects a view type from the "Add view" picker.
   * The parent (HubTable / LibraryTable) is expected to open
   * `TablePropertiesDrawer` in creation mode (`isCreatingNewView`) for that type,
   * allowing the user to set name + relevant initial view settings before the
   * tab is actually created.
   */
  onRequestCreateView?: (type: ViewType) => void
}

/** Collision-proof id for a dynamically-added tab. Module-level counters reset
 *  on HMR while React state survives, so we derive from a timestamp + random. */
function makeTabId(type: string): string {
  const rand = Math.random().toString(36).slice(2, 8)
  return `${type}-${Date.now().toString(36)}-${rand}`
}

/**
 * Wraps a control in a `Tip` only when there is something the control is not
 * already saying. A tab showing its label does not need a tooltip repeating it.
 */
function withTip(control: React.ReactElement, label: string | null) {
  if (!label) return control
  return (
    <Tip label={label} side="bottom">
      {control}
    </Tip>
  )
}

/** Count pill on the views toolbar — color by lifecycle/status filter (WCAG: dark text on light inactive; light text on solid active). */
function viewToolbarCountBadgeClass(filterId: string, isActive: boolean): string {
  const palettes: Record<string, { active: string; inactive: string }> = {
    all: {
      active: "bg-slate-600 text-white dark:bg-slate-500",
      inactive: "bg-slate-100 text-slate-800 dark:bg-slate-800/70 dark:text-slate-100",
    },
    upcoming: {
      active: "bg-amber-600 text-white",
      inactive: "bg-amber-100 text-amber-950 dark:bg-amber-950/45 dark:text-amber-100",
    },
    ongoing: {
      active: "bg-blue-600 text-white",
      inactive: "bg-blue-100 text-blue-950 dark:bg-blue-950/45 dark:text-blue-100",
    },
    completed: {
      active: "bg-emerald-600 text-white",
      inactive: "bg-emerald-100 text-emerald-950 dark:bg-emerald-950/45 dark:text-emerald-100",
    },
  }
  const p = palettes[filterId] ?? palettes.all
  return isActive ? p.active : p.inactive
}

// ─────────────────────────────────────────────────────────────────────────────
// Component
// ─────────────────────────────────────────────────────────────────────────────

function ListPageTabBody({
  tab,
  renderContent,
  updateTab,
}: {
  tab: ViewTab
  renderContent: (tab: ViewTab, updateTab: (patch: Partial<ViewTab>) => void) => React.ReactNode
  updateTab: (id: string, patch: Partial<ViewTab>) => void
}) {
  return <>{renderContent(tab, patch => updateTab(tab.id, patch))}</>
}

export function ListPageTemplate({
  header,
  metrics,
  defaultShowMetrics = true,
  showMetrics: showMetricsProp,
  onShowMetricsChange,
  defaultTabs,
  tabs: tabsProp,
  onTabsChange,
  activeTabId: activeTabIdProp,
  onActiveTabChange,
  getTabCount,
  renderContent,
  exportOpen = false,
  onExportOpenChange,
  exportTotalRows = 0,
  onEditView,
  tablePropertiesRef,
  hideViewsToolbar = false,
  supportedViewTypes,
  persistKey,
  showViewCounts: showViewCountsProp,
  onShowViewCountsChange,
  onRequestCreateView,
}: ListPageTemplateProps) {
  const [exportMounted, setExportMounted] = React.useState(false)
  if (exportOpen && !exportMounted) setExportMounted(true)
  // When a hub declares the views it implements, both the Add view menu and ⌘1–9 shortcut
  // bindings are filtered to that subset so unsupported views are never offered. Without
  // this, a user could ⌘1 → Dashboard into a hub that cannot render it (would show the
  // not-configured empty state). Memoized because it filters on every render path.
  const addableViewTypes = React.useMemo(() => {
    const allowlist =
      supportedViewTypes && supportedViewTypes.length > 0
        ? supportedViewTypes
        : TABLE_ONLY_HUB_SUPPORTED_VIEWS
    const allowed = new Set(allowlist)
    return VIEW_TYPES.filter(v => allowed.has(v.type))
  }, [supportedViewTypes])
  const controlled =
    tabsProp !== undefined &&
    onTabsChange !== undefined &&
    activeTabIdProp !== undefined &&
    onActiveTabChange !== undefined

  // Internal tabs/active-tab state, optionally backed by `localStorage` when
  // `persistKey` is set AND the consumer is NOT in controlled mode.
  // - `usePersistedState` accepts an empty key as "disabled, behave like
  //   useState", so we always call it once (rules of hooks) and toggle
  //   storage by toggling the key string.
  // - The keys are `<persistKey>:listpage:tabs:v1` and
  //   `<persistKey>:listpage:active-tab:v1`. Hubs that move forward between
  //   versions of `defaultTabs` should bump `persistKey`.
  const tabsStorageKey = persistKey && !controlled ? `${persistKey}:listpage:tabs:v1` : ""
  const activeStorageKey =
    persistKey && !controlled ? `${persistKey}:listpage:active-tab:v1` : ""
  const showCountsStorageKey =
    persistKey && showViewCountsProp === undefined && onShowViewCountsChange === undefined
      ? `${persistKey}:listpage:show-view-counts:v1`
      : ""
  const metricsStorageKey =
    persistKey && showMetricsProp === undefined && onShowMetricsChange === undefined
      ? `${persistKey}:listpage:show-metrics:v1`
      : ""
  const [internalTabs, setInternalTabs] = usePersistedState<ViewTab[]>(
    tabsStorageKey,
    defaultTabs,
  )
  const [internalActiveId, setInternalActiveId] = usePersistedState<string>(
    activeStorageKey,
    defaultTabs[0]?.id ?? "",
  )
  // Hub-level "show counts in the tab bar" — persisted when a persistKey is
  // present and the consumer does not control it explicitly.
  const [internalShowViewCounts] = usePersistedState<boolean>(
    showCountsStorageKey,
    true, // default: show counts
  )
  const [internalShowMetrics] = usePersistedState<boolean>(
    metricsStorageKey,
    defaultShowMetrics,
  )

  const tabs               = controlled ? tabsProp : internalTabs
  const setTabsState = React.useCallback(
    (action: React.SetStateAction<ViewTab[]>) => {
      if (controlled) {
        const next = typeof action === "function" ? action(tabsProp!) : action
        onTabsChange!(next)
      } else {
        setInternalTabs(action)
      }
    },
    [controlled, onTabsChange, tabsProp, setInternalTabs],
  )
  const activeTabId        = controlled ? activeTabIdProp : internalActiveId
  const setActiveTabId     = controlled ? onActiveTabChange : setInternalActiveId

  const showViewCounts =
    showViewCountsProp !== undefined
      ? showViewCountsProp
      : showCountsStorageKey
        ? internalShowViewCounts
        : true
  const showMetrics =
    showMetricsProp !== undefined
      ? showMetricsProp
      : metricsStorageKey
        ? internalShowMetrics
        : defaultShowMetrics
  const [renameOpen, setRenameOpen]   = React.useState(false)
  const [renameValue, setRenameValue] = React.useState("")
  const renameTabIdRef = React.useRef<string | null>(null)
  const [reviewOpen, setReviewOpen]   = React.useState(false)
  const [reviewTab, setReviewTab]     = React.useState<ViewTab | null>(null)

  const activeTab = tabs.find(t => t.id === activeTabId) ?? tabs[0]

  /**
   * Views share the page scrollport and have wildly different lengths — a table
   * of 400 rows, a dashboard of four charts — so each keeps its own place rather
   * than inheriting an offset that means nothing in the view being opened.
   */
  const [root, setRoot] = React.useState<HTMLDivElement | null>(null)
  useRememberedPageScroll(activeTab?.id, {
    node: root,
    panelSelector: '[data-slot="list-page-view-body"]',
  })

  const tabBodyFillsViewport = activeTab
    ? LIST_PAGE_VIEWPORT_FILL_VIEWS.has(activeTab.viewType)
    : false

  const resolvedSupportedViews =
    supportedViewTypes && supportedViewTypes.length > 0
      ? supportedViewTypes
      : TABLE_ONLY_HUB_SUPPORTED_VIEWS

  /** Hide lifecycle/Add-view toolbar when table-only + single tab (opt-in multi-view). */
  const showViewsToolbar =
    !hideViewsToolbar &&
    (tabs.length > 1 || resolvedSupportedViews.length > 1)

  const viewsViewportRef = React.useRef<HTMLDivElement>(null)
  const canShedViews = showViewsToolbar && tabs.length > 1

  /**
   * Prices rung 1 for the views row, the same way `Tabs` does for a tablist.
   * Without this the row only knows how to trade *every* inactive label for its
   * icon at once, so a row a few pixels short read as a row of glyphs — and,
   * because the all-or-nothing rung records the width it failed at, it stayed
   * that way even after the row had room again.
   */
  const measureViewsRow = React.useCallback((): RowFitMeasurement | null => {
    const viewport = viewsViewportRef.current
    const content = viewport?.firstElementChild as HTMLElement | null
    if (!viewport || !content) return null
    return {
      available: viewport.clientWidth - horizontalPadding(viewport),
      // The toolbar clamps the same way the row does, so sum it rather than
      // measure it.
      content: naturalRowWidth(content, "[data-slot='view-segmented-toolbar']"),
      labels: measureRowLabels(
        content,
        label => label.dataset.viewTabPinned === "true",
      ),
    }
  }, [])

  const { openLabels: openViewLabels, visible: visibleViewCount } =
    useRowFitLadder({
      viewportRef: viewsViewportRef,
      count: tabs.length,
      // A lone view has nothing to compare its glyph against, and it is the
      // selected one anyway — never worth reducing to an icon.
      canCollapse: tabs.length > 1,
      enabled: showViewsToolbar,
      measure: measureViewsRow,
    })

  let shownViews = tabs
  let hiddenViews: typeof tabs = []
  if (canShedViews && visibleViewCount < tabs.length) {
    shownViews = tabs.slice(0, visibleViewCount)
    hiddenViews = tabs.slice(visibleViewCount)
    if (activeTabId && !shownViews.some(t => t.id === activeTabId)) {
      const activeView = hiddenViews.find(t => t.id === activeTabId)
      if (activeView) {
        shownViews = [...shownViews.slice(0, -1), activeView]
        const onRow = new Set(shownViews.map(t => t.id))
        hiddenViews = tabs.filter(t => !onRow.has(t.id))
      }
    }
  }

  const editViewFromRef = React.useMemo(
    () => (tablePropertiesRef ? createListPageEditViewHandler(tablePropertiesRef) : undefined),
    [tablePropertiesRef]
  )
  const resolvedOnEditView = onEditView ?? editViewFromRef

  function addView(type: ViewType) {
    const def = VIEW_TYPES.find(d => d.type === type)!
    const count = tabs.filter(t => t.viewType === type).length
    const id = makeTabId(type)
    const label = count === 0 ? def.label : `${def.label} ${count + 1}`
    const newTab: ViewTab = { id, label, viewType: type, icon: def.icon, filterId: "all" }
    setTabsState(prev => [...prev, newTab])
    setActiveTabId(id)
  }

  function removeTab(id: string, e: React.MouseEvent | React.KeyboardEvent) {
    e.stopPropagation()
    setTabsState(prev => {
      const next = prev.filter(t => t.id !== id)
      if (activeTabId === id && next.length > 0) {
        const idx = Math.max(0, prev.findIndex(t => t.id === id) - 1)
        setActiveTabId(next[Math.min(idx, next.length - 1)].id)
      }
      return next
    })
  }

  function updateTab(id: string, patch: Partial<ViewTab>) {
    setTabsState(prev => prev.map(t => t.id === id ? { ...t, ...patch } : t))
  }

  function duplicateTab(tab: ViewTab) {
    const id = makeTabId(tab.viewType)
    const newTab: ViewTab = {
      id,
      label: `Copy of ${tab.label}`,
      viewType: tab.viewType,
      icon: tab.icon,
      filterId: tab.filterId,
      rowHeight: tab.rowHeight,
    }
    setTabsState(prev => [...prev, newTab])
    setActiveTabId(id)
  }

  function openRename(tab: ViewTab) {
    renameTabIdRef.current = tab.id
    setRenameValue(tab.label)
    setRenameOpen(true)
  }

  function commitRename() {
    const tabId = renameTabIdRef.current
    if (!tabId) return
    const v = renameValue.trim()
    if (v) updateTab(tabId, { label: v })
    setRenameOpen(false)
    renameTabIdRef.current = null
  }

  return (
    <>
      {showViewsToolbar && addableViewTypes.slice(0, 9).map((v, i) => {
        const keys = dataListViewAddShortcut(i)
        return keys ? (
          <Shortcut
            key={v.type}
            keys={keys}
            onInvoke={() => addView(v.type)}
          />
        ) : null
      })}
      {activeTab && showViewsToolbar && (
        <>
          <Shortcut keys="F2" onInvoke={() => openRename(activeTab)} />
          <Shortcut
            keys="⌘E"
            disabled={!resolvedOnEditView}
            onInvoke={() => resolvedOnEditView?.(activeTab, { updateTab: p => updateTab(activeTab.id, p) })}
          />
          <Shortcut keys="⌘D" onInvoke={() => duplicateTab(activeTab)} />
          <Shortcut keys="⌘I" onInvoke={() => { setReviewTab(activeTab); setReviewOpen(true) }} />
          <Shortcut
            keys="⌘⌫"
            disabled={tabs.length <= 1}
            onInvoke={(e) => removeTab(activeTab.id, e as unknown as React.KeyboardEvent)}
          />
        </>
      )}
      {/*
        Block wrapper (not a flex column): sticky view tabs must not be flex
        items of `PrimaryPageTemplate`'s content column — stretch/overflow
        interactions made Tokens and other hubs lose sticky while Library looked fine.
      */}
      <div
        ref={setRoot}
        data-slot="list-page"
        className={cn(
          "relative w-full",
          // Viewport-fill views need a flex column so split chrome can claim height.
          tabBodyFillsViewport && "flex min-h-0 flex-1 flex-col",
        )}
      >
      {header ? <div className="relative z-0 shrink-0">{header}</div> : null}

      {showMetrics && metrics ? (
        /* Above the views toolbar so KPI chart tooltips are not covered while metrics are on-screen. */
        <div className="relative z-20 mb-1 shrink-0 lg:mb-0">{metrics}</div>
      ) : null}

      {/* ── Views toolbar (not tablist: settings/close are not tabs — WCAG 1.3.1 / ARIA) ── */}
      {showViewsToolbar && (
      <>
      {/*
        Sticky layer 2 under the utility bar (layer 1 sits outside `[data-page-scroll]`).
        Table column headers (layer 3) pin to the bottom of this strip via
        `getStickyTableHeaderOffset`. Height matches `--shell-utility-bar-height`.
        Gap above the strip is a scrolling spacer — never `mt-*` on the sticky
        node (Chrome leaves `rect.top` below the pin line and the table head
        offset skips this strip, so the floating thead parks mid-canvas).
      */}
      <div className="h-3 shrink-0" aria-hidden="true" />
      <div
        data-slot="list-views-sticky-subheader"
        className={cn(
          // Sit the row on the full-width rule (same as line `TabsList` sticky)
          // so the active 2px indicator meets the strip border — not a gap from
          // vertical centering inside `--shell-utility-bar-height`.
          // z-40 beats DataTable pinned cells (z-20) and inline thead (z-30)
          // so scrolling rows cannot paint through the strip. Floating thead
          // portals to `document.body` at z-50 and pins *below* this strip via
          // `getStickyTableHeaderOffset`.
          // `self-start` — if an ancestor is flex/grid, avoid stretch height that
          // cancels sticky (Library vs Tokens inconsistency).
          "sticky top-0 z-40 isolate self-start flex shrink-0 items-end bg-background",
          "h-(--shell-utility-bar-height) min-h-(--shell-utility-bar-height)",
          "w-full border-b border-border px-4 lg:px-6",
        )}
      >
        <HorizontalScrollRegion
          ariaLabel="Views"
          controlsLayout="group-end"
          className="h-full w-full min-h-0 items-end"
          viewportRef={viewsViewportRef}
          // Same as `TabsList`: arrows only after the overflow menu has nothing
          // left to shed (one view on the row). Until then the menu is enough.
          controls={!canShedViews || visibleViewCount <= 1}
        >
          <div className="flex h-full w-max items-end gap-1 py-0">
          <div
            role="toolbar"
            aria-label="Views"
            data-slot="view-segmented-toolbar"
            className={cn(viewSegmentedToolbarClass(), "h-full items-end")}
          >
          {shownViews.map((tab, viewIndex) => {
            const isActive = tab.id === activeTabId
            const isOnly   = tabs.length === 1
            const count    = getTabCount?.(tab.filterId)
            // Labels close from the end of the row and only as far as they have
            // to; the selected view is pinned and never closes.
            const iconOnly = !isActive && viewIndex >= openViewLabels
            const tabInner = (
              <>
                <i className={cn("fa-light shrink-0 text-xs", tab.icon)} aria-hidden="true" />
                {/*
                  The text stays in the DOM rather than going `sr-only`, for two
                  reasons: the tab keeps its accessible name, and the ladder can
                  still read `scrollWidth` off it to price re-opening. What goes
                  away is the column it sits in — a grid track from `1fr` to
                  `0fr`, which unlike `display: none` is a length, and so can be
                  crossed rather than jumped.
                */}
                <span
                  data-slot="view-tab-label"
                  data-collapsible=""
                  data-view-tab-pinned={isActive ? "true" : undefined}
                  className={cn(
                    "grid grid-cols-[1fr]",
                    "motion-safe:transition-[grid-template-columns,opacity,margin-inline-start] motion-safe:duration-150 motion-safe:ease-out",
                    iconOnly && [
                      "grid-cols-[0fr]",
                      "opacity-0",
                      // The button's own `gap-1.5` outlives a zero-width label,
                      // so hand it back: a collapsed tab is its icon, not its
                      // icon and a gap.
                      "-ms-1.5",
                    ],
                  )}
                >
                  <span className="flex items-center gap-1.5 overflow-hidden whitespace-nowrap">
                    {tab.label}
                    {/* Count badge is hub-level (showViewCounts) and only appears when
                        the consumer supplied a getTabCount function and the setting is on.
                        It rides inside the collapsible track so the ladder prices
                        the label and its count as the one thing they look like. */}
                    {showViewCounts && count !== undefined ? (
                      <span
                        data-slot="view-toolbar-count"
                        className={cn(
                          "inline-flex shrink-0 items-center justify-center text-2xs tabular-nums leading-none rounded-full px-1.5 py-0.5 min-w-[1.125rem] min-h-[1.125rem] text-center font-semibold",
                          viewToolbarCountBadgeClass(tab.filterId, isActive),
                        )}
                      >
                        {count}
                      </span>
                    ) : null}
                  </span>
                </span>
              </>
            )
            const viewSettingsMenu = (
              <DropdownMenu>
                <Tip label="View settings" side="bottom">
                  <DropdownMenuTrigger asChild>
                    <button
                      type="button"
                      className={cn(
                        "inline-flex aspect-square size-8 shrink-0 items-center justify-center rounded-e-md rounded-s-none",
                        "icon-button-chrome hover:bg-foreground/[0.04]",
                        "transition-colors",
                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:z-10",
                      )}
                      aria-label="View settings"
                    >
                      <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
                    </button>
                  </DropdownMenuTrigger>
                </Tip>
                <DropdownMenuContent align="start">
                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                    View: {VIEW_TYPES.find(v => v.type === tab.viewType)?.label}
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />

                  <DropdownMenuItem
                    shortcut="F2"
                    onSelect={() => openRename(tab)}
                  >
                    <i className="fa-light fa-pen text-xs" aria-hidden="true" />
                    Rename
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    disabled={!resolvedOnEditView}
                    shortcut="⌘E"
                    onSelect={() =>
                      resolvedOnEditView?.(tab, { updateTab: patch => updateTab(tab.id, patch) })
                    }
                  >
                    <i className="fa-light fa-sliders text-xs" aria-hidden="true" />
                    Edit
                  </DropdownMenuItem>
                  <DropdownMenuItem shortcut="⌘D" onSelect={() => duplicateTab(tab)}>
                    <i className="fa-light fa-copy text-xs" aria-hidden="true" />
                    Duplicate
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    shortcut="⌘I"
                    onSelect={() => { setReviewTab(tab); setReviewOpen(true) }}
                  >
                    <i className="fa-light fa-clipboard-list text-xs" aria-hidden="true" />
                    Review view
                  </DropdownMenuItem>

                  <DropdownMenuSeparator />
                  {!isOnly && (
                    <DropdownMenuItem
                      shortcut="⌘⌫"
                      onSelect={(e) => removeTab(tab.id, e as unknown as React.KeyboardEvent)}
                      className="text-destructive-ink focus:text-destructive-ink"
                    >
                      <i className="fa-light fa-trash text-xs" aria-hidden="true" />
                      Remove view
                    </DropdownMenuItem>
                  )}
                </DropdownMenuContent>
              </DropdownMenu>
            )
            return (
              <div key={tab.id} className="group relative inline-flex items-center">
                {isActive ? (
                  <div
                    // HC mode fills the whole composed shell (label button + chevron disclosure)
                    // so the chevron stays attached to the active highlight. The HC rules in
                    // `globals.css` target this `data-slot` and cascade `accent-foreground`
                    // to all descendants — see "Composed view-tab active shell" there.
                    data-slot="view-segmented-item-shell"
                    className={cn(
                      viewSegmentedButtonClass(true),
                      "gap-0 p-0 inline-flex items-stretch",
                    )}
                  >
                    <button
                      type="button"
                      aria-pressed={true}
                      data-slot="view-segmented-item"
                      onClick={() => setActiveTabId(tab.id)}
                      className={cn(
                        "inline-flex items-center gap-1.5 ps-2.5 pe-0.5 py-1 text-xs min-h-8",
                        "rounded-s-md rounded-e-none",
                        "bg-transparent text-foreground font-medium",
                        "hover:bg-foreground/[0.04]",
                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:z-10",
                      )}
                    >
                      {tabInner}
                    </button>
                    {viewSettingsMenu}
                  </div>
                ) : (
                  /*
                    One button either way. The collapsed tab keeps the open
                    tab's padding and lets the label track carry the width
                    change, so closing a label is a transition rather than a
                    swap to a differently-shaped control.
                  */
                  withTip(
                    <button
                      type="button"
                      aria-pressed={false}
                      data-slot="view-segmented-item"
                      onClick={() => setActiveTabId(tab.id)}
                      className={cn(
                        viewSegmentedButtonClass(false),
                        /* Tighter trailing edge when remove control follows */
                        !isOnly && "pe-1.5",
                      )}
                    >
                      {tabInner}
                    </button>,
                    iconOnly ? tab.label : null,
                  )
                )}

                {/* Close on inactive tabs — native button + 24px min target (WCAG 2.5.8) */}
                {!isActive && !isOnly && (
                  <Tip side="bottom" label={`Remove ${tab.label} view`}>
                    <button
                      type="button"
                      aria-label={`Remove ${tab.label} view`}
                      data-compact-touch
                      onClick={e => removeTab(tab.id, e)}
                      className="inline-flex aspect-square size-6 shrink-0 items-center justify-center rounded transition-opacity opacity-0 group-hover:opacity-60 hover:!opacity-100 hover:text-destructive-ink focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                    >
                      <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
                    </button>
                  </Tip>
                )}
              </div>
            )
          })}
          {hiddenViews.length > 0 ? (
            <DropdownMenu>
              <Tip label="More views" side="bottom">
                <DropdownMenuTrigger
                  data-slot="views-overflow-trigger"
                  aria-label="More views"
                  className={cn(
                    "inline-flex size-8 shrink-0 items-center justify-center rounded-md border border-transparent",
                    "text-muted-foreground hover:text-interactive-hover-foreground",
                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
                  )}
                >
                  <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
                </DropdownMenuTrigger>
              </Tip>
              <DropdownMenuContent align="end" side="bottom" sideOffset={6}>
                <DropdownMenuRadioGroup
                  value={activeTabId}
                  onValueChange={setActiveTabId}
                >
                  {hiddenViews.map(tab => (
                    <DropdownMenuRadioItem
                      key={tab.id}
                      value={tab.id}
                      className="gap-2"
                    >
                      <i className={cn("fa-light text-xs", tab.icon)} aria-hidden="true" />
                      {tab.label}
                    </DropdownMenuRadioItem>
                  ))}
                </DropdownMenuRadioGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : null}
          </div>

          {/* Add view — always a glyph. It sits at the end of a rail of named
              views, where a labelled button competes with them for the eye and
              reads like one more view rather than the way to make one. The
              plus is unambiguous in that position, and the Tip carries the
              name for anyone who needs it. */}
          <DropdownMenu>
            <Tip label="Add view" side="bottom">
              <DropdownMenuTrigger asChild>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon-sm"
                  className="secondary-action-chrome size-8 shrink-0"
                  aria-label="Add view"
                >
                  <i className="fa-light fa-plus text-sm" aria-hidden="true" />
                </Button>
              </DropdownMenuTrigger>
            </Tip>
            <DropdownMenuContent align="start">
              <DropdownMenuLabel className="text-xs">Add a view</DropdownMenuLabel>
              <DropdownMenuSeparator />
              {addableViewTypes.map((v, i) => (
                <DropdownMenuItem
                  key={v.type}
                  shortcut={dataListViewAddShortcut(i)}
                  onSelect={() => {
                    if (onRequestCreateView) {
                      onRequestCreateView(v.type)
                    } else {
                      // Backward-compat: immediate create if parent not wired yet
                      addView(v.type)
                    }
                  }}
                >
                  <i className={`fa-light ${v.icon}`} aria-hidden="true" />
                  {v.label}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        </HorizontalScrollRegion>
      </div>
      </>
      )}

      {/* ── Content — keyed by tab so each view tab owns its height (no stale min-height).
          Page-scroll views (table / list / board) grow with `[data-page-scroll]`.
          Viewport-fill views (folder / panel / tree / dashboard) use flex-1 + internal pane scroll. ── */}
      {activeTab ? (
        <div
          key={activeTab.id}
          // Named so `useRememberedPageScroll` can find where this view starts.
          data-slot="list-page-view-body"
          className={cn(
            "flex flex-col",
            tabBodyFillsViewport ? "min-h-0 flex-1" : "min-h-min",
          )}
        >
          <ListPageTabBody
            tab={activeTab}
            renderContent={renderContent}
            updateTab={updateTab}
          />
        </div>
      ) : null}

      {/* ── Export ──────────────────────────────────────────────── */}
      {onExportOpenChange && exportMounted ? (
        <React.Suspense fallback={null}>
          <ExportDrawer
            open={exportOpen}
            onOpenChange={onExportOpenChange}
            totalRows={exportTotalRows ?? getTabCount?.(activeTab.filterId) ?? 0}
          />
        </React.Suspense>
      ) : null}

      <Dialog open={renameOpen} onOpenChange={setRenameOpen}>
        <DialogContent className="max-w-sm">
          <DialogHeader>
            <DialogTitle>Rename view</DialogTitle>
            <DialogDescription>Enter a new name for this view.</DialogDescription>
          </DialogHeader>
          <Input
            className="mt-3 h-9 text-sm"
            value={renameValue}
            onChange={e => setRenameValue(e.target.value)}
            onKeyDown={e => { if (e.key === "Enter") commitRename() }}
            autoFocus
            aria-label="View name"
          />
          <DialogFooter>
            <Button type="button" variant="outline" size="sm" onClick={() => setRenameOpen(false)}>
              Cancel
            </Button>
            <Button type="button" size="sm" onClick={commitRename}>
              Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog
        open={reviewOpen && !!reviewTab}
        onOpenChange={(open) => {
          setReviewOpen(open)
          if (!open) setReviewTab(null)
        }}
      >
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Review view</DialogTitle>
            <DialogDescription>Summary of this view’s configuration.</DialogDescription>
          </DialogHeader>
          {reviewTab && (
            <dl className="mt-2 space-y-3 text-sm">
              <div className="flex justify-between gap-4 border-b border-border pb-2">
                <dt className="text-muted-foreground">Name</dt>
                <dd className="font-medium text-foreground text-end">{reviewTab.label}</dd>
              </div>
              <div className="flex justify-between gap-4 border-b border-border pb-2">
                <dt className="text-muted-foreground">View type</dt>
                <dd className="text-foreground text-end">{VIEW_TYPES.find(v => v.type === reviewTab.viewType)?.label}</dd>
              </div>
              <div className="flex justify-between gap-4 border-b border-border pb-2">
                <dt className="text-muted-foreground">Lifecycle filter</dt>
                <dd className="text-foreground text-end capitalize">{reviewTab.filterId}</dd>
              </div>
              {getTabCount != null ? (
                <div className="flex justify-between gap-4">
                  <dt className="text-muted-foreground">Row count</dt>
                  <dd className="tabular-nums text-foreground text-end">{getTabCount(reviewTab.filterId)}</dd>
                </div>
              ) : null}
            </dl>
          )}
          <DialogFooter>
            <Button type="button" size="sm" onClick={() => setReviewOpen(false)}>
              Close
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
      </div>
    </>
  )
}