/**
 * Collapse is a slide plus crossfade: content freezes at its expanded
 * width (inline style) and fades out in place while the sliding column
 * (AppFrame grid tracks) clips it — nothing reflows mid-slide. At settle
 * the wide-only content (brand, labels, input, tree) unmounts, dropping
 * the sessions subscription, and the control rows snap to the 56px rail
 * (one icon each, same top-down order) fading in as the slide ends. Rail
 * search expands and focuses the search box.
 */
import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
import clsx from 'clsx'
import {
  BrandWordmark, FishLogo,
  IconCloseFill14, IconNewChatOutline16, IconPanelLeftOutline16, IconPersonalizationOutline16,
  IconProjectAddOutline16, IconSearchOutline16, IconSettingsOutline14,
  Menu, Tooltip,
} from '@deepseek-ai/dsh-client-ui-primitives'
import type { SidebarRootComponentProps } from './contract/slots.ts'
import { deriveRows } from './tree.ts'
import { ProjectRowItem, SessionRowItem } from './Rows.tsx'
import css from './SidebarRoot.module.css'

/** Wide-content unmount delay; matches the 150ms wide-content fade-out. */
const COLLAPSE_SETTLE_MS = 150

/** Column slide length (--ds-transition-duration-slow): rail-search focus waits it out — focus() forces a synchronous layout and would jank the slide. */
const EXPAND_SLIDE_MS = 300

const GROUP_BY_ITEMS = [
  { id: 'workspace', label: 'WorkSpace' },
  // Only workspace grouping is implemented.
  { id: 'update', label: 'Update', disabled: true },
  { id: 'status', label: 'Status', disabled: true },
]

/** Immutable membership toggle for the local expansion arrays. */
function toggled(list: readonly string[], key: string): string[] {
  return list.includes(key) ? list.filter((k) => k !== key) : [...list, key]
}

/** Group-by strategy menu; own open state so it resets with the wide chrome. */
function GroupByMenu() {
  const [open, setOpen] = useState(false)
  return (
    <Menu
      open={open}
      onClose={() => { setOpen(false) }}
      items={GROUP_BY_ITEMS}
      selectedId="workspace"
      onSelect={() => { setOpen(false) }}
      align="end"
      anchor={(
        <button
          type="button"
          className={clsx(css.iconButton, css.wide)}
          aria-label="Group by"
          onClick={() => { setOpen((v) => !v) }}
        >
          <IconPersonalizationOutline16 />
        </button>
      )}
    />
  )
}

type SessionTreeProps = Pick<SidebarRootComponentProps, 'useSessions' | 'onOpen' | 'onCreate'> & {
  /** Live search filter owned by the root (the query outlives the tree). */
  query: string
}

/** The scrolling session tree; unmounting at collapse settle drops the sessions subscription and expansion state. */
function SessionTree({ useSessions, onOpen, onCreate, query }: SessionTreeProps) {
  const list = useSessions((s) => s)
  // Selection belongs to the sessions snapshot, not layout state.
  const current = useSessions((s) => s.current)
  const [expandedProjects, setExpandedProjects] = useState<string[]>([])
  const [expandedSessions, setExpandedSessions] = useState<string[]>([])
  const rows = useMemo(
    () => deriveRows(list, { expandedProjects, expandedSessions, query }),
    [list, expandedProjects, expandedSessions, query],
  )
  const now = Date.now()

  // Presentational lookup (not tree derivation): the group holding the
  // selected session gets the active folder; only expanded groups can show it.
  let activeGroup: string | undefined
  if (current !== undefined) {
    for (const row of rows) {
      if (row.type === 'session' && row.id === current) { activeGroup = row.groupKey; break }
    }
  }

  return (
    <div className={clsx(css.treeBody, css.wide)}>
      <div className={css.list} role="tree" aria-label="Sessions">
        {rows.length === 0 && (
          <div className={css.empty}>{query === '' ? 'No sessions yet' : 'No matches'}</div>
        )}
        {rows.map((row, i) => row.type === 'project'
          ? (
              <Fragment key={`p:${row.key}`}>
                {/* Batch separator: a project row closing an expanded session run (figma 133:7661). */}
                {i > 0 && rows[i - 1]!.type === 'session' && <span className={css.batchGap} />}
                <ProjectRowItem
                  row={row}
                  active={row.key === activeGroup}
                  onToggle={() => { setExpandedProjects((l) => toggled(l, row.key)) }}
                  onCreate={() => { onCreate(row.cwd) }}
                />
              </Fragment>
            )
          : (
              <SessionRowItem
                key={row.id}
                row={row}
                selected={row.id === current}
                now={now}
                onOpen={() => { onOpen(row.id) }}
                onToggle={() => { setExpandedSessions((l) => toggled(l, row.id)) }}
              />
            ))}
      </div>
      <span className={css.fade} />
    </div>
  )
}

/**
 * Render the sidebar column.
 * @param props - composed slot props (runtime share + injected callbacks, contract/slots.ts).
 * @returns the sidebar element tree.
 */
export function SidebarRoot({ collapsed, width, useSessions, onOpen, onCreate, onToggleSidebar }: SidebarRootComponentProps) {
  // The query outlives the tree and the input (both wide-only) so collapsing
  // does not silently drop an in-progress filter.
  const [query, setQuery] = useState('')
  const searchInput = useRef<HTMLInputElement | null>(null)

  // Wide content stays mounted while the collapse animates (fading via
  // .collapsed .wide), unmounts at settle, and remounts right away on expand.
  const [settled, setSettled] = useState(collapsed)
  useEffect(() => {
    if (!collapsed) { setSettled(false); return }
    const timer = window.setTimeout(() => { setSettled(true) }, COLLAPSE_SETTLE_MS)
    return () => { window.clearTimeout(timer) }
  }, [collapsed])
  const wide = !collapsed || !settled

  // Freeze the content at its expanded width while it fades out (collapsed
  // && wide): the sliding column then clips it instead of reflowing it. The
  // rail layout (.collapsed styles) only applies once the fade settles.
  const lastWideWidth = useRef(width)
  if (!collapsed) lastWideWidth.current = width

  // Rail-in only crossfades a live collapse: a refresh straight into the
  // collapsed state renders the rail statically (no delay-hidden icons).
  const everWide = useRef(!collapsed)
  if (!collapsed) everWide.current = true

  // Rail search = expand + land in the search box: the flag arms before the
  // expand toggle; once expanded the input is mounted and takes focus.
  const [searchOnExpand, setSearchOnExpand] = useState(false)
  useEffect(() => {
    if (!collapsed && searchOnExpand) {
      const timer = window.setTimeout(() => {
        searchInput.current?.focus({ preventScroll: true })
        setSearchOnExpand(false)
      }, EXPAND_SLIDE_MS)
      return () => { window.clearTimeout(timer) }
    }
  }, [collapsed, searchOnExpand])

  return (
    <div
      className={clsx(css.root, !wide && css.collapsed, !wide && everWide.current && css.railIn, collapsed && wide && css.fading)}
      style={wide ? { width: collapsed ? lastWideWidth.current : width } : undefined}
    >
      <div className={css.logoRow}>
        {wide && (
          <span className={clsx(css.brand, css.wide)}>
            <BrandWordmark />
          </span>
        )}
        {/* Rail resting state is the whale mark; hovering swaps in the panel
            icon (the expand affordance, figma sidebar-hover flow). */}
        <Tooltip label="Open sidebar" disabled={wide}>
          <button
            type="button"
            className={clsx(css.iconButton, css.toggle)}
            aria-label={collapsed ? 'Open sidebar' : 'Collapse sidebar'}
            onClick={() => { onToggleSidebar() }}
          >
            {!wide && <FishLogo className={css.railFish} size={24} />}
            {/* Rail icons render at 18 (figma rail spec); expanded keeps the glyph-native sizes. */}
            <IconPanelLeftOutline16 className={css.panelIcon} size={wide ? 16 : 18} />
          </button>
        </Tooltip>
      </div>

      <Tooltip label="New session" disabled={wide}>
        <button
          type="button"
          className={css.newSession}
          aria-label="New session"
          onClick={() => { onCreate() }}
        >
          <IconNewChatOutline16 size={wide ? 14 : 18} />
          {wide && <span className={clsx(css.newSessionLabel, css.wide)}>New Session</span>}
        </button>
      </Tooltip>

      <div className={css.sectionHeader}>
        {wide && <span className={clsx(css.sectionLabel, css.wide)}>WorkSpace</span>}
        {wide && <GroupByMenu />}
        <Tooltip label="New Workspace" disabled={wide}>
          <button
            type="button"
            className={css.iconButton}
            aria-label="New workspace"
            onClick={() => { onCreate() }}
          >
            <IconProjectAddOutline16 size={wide ? 16 : 18} />
          </button>
        </Tooltip>
      </div>

      {/* Expanded: the row is a click-to-focus field (the leading icon is
          decorative). Collapsed: the icon is the rail's search control. */}
      <div className={css.search} onClick={() => { if (!collapsed) searchInput.current?.focus() }}>
        <Tooltip label="Search" disabled={wide}>
          <button
            type="button"
            className={css.searchButton}
            aria-label="Search sessions"
            tabIndex={collapsed ? 0 : -1}
            onClick={() => { if (collapsed) { setSearchOnExpand(true); onToggleSidebar() } }}
          >
            <IconSearchOutline16 size={wide ? 14 : 18} />
          </button>
        </Tooltip>
        {wide && (
          <input
            ref={searchInput}
            className={clsx(css.searchInput, css.wide)}
            type="text"
            placeholder="Search name, keywords..."
            value={query}
            onChange={(e) => { setQuery(e.target.value) }}
          />
        )}
        {wide && query !== '' && (
          <button
            type="button"
            className={clsx(css.clearButton, css.wide)}
            aria-label="Clear search"
            onClick={() => { setQuery('') }}
          >
            <IconCloseFill14 />
          </button>
        )}
      </div>

      {/* Always-mounted seat: its flex slot pins the foot to the bottom in
          both states while the tree itself is wide-only. */}
      <div className={css.listArea}>
        {wide && <SessionTree useSessions={useSessions} onOpen={onOpen} onCreate={onCreate} query={query} />}
      </div>

      <div className={css.foot} role="button" tabIndex={0} aria-label="Settings">
        <IconSettingsOutline14 size={wide ? 14 : 18} />
        {wide && <span className={clsx(css.footLabel, css.wide)}>Settings</span>}
      </div>
    </div>
  )
}