import { type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'

import { cn } from '@/lib/utils'

interface StatusRowProps {
  children: ReactNode
  className?: string
  /** Leading glyph slot (spinner / status dot / selection circle). */
  leading?: ReactNode
  /** Makes the whole row activatable (adds `cursor-pointer` + keyboard a11y).
   *  Receives the originating event so consumers can branch on modifier keys
   *  (e.g. ⌘/Ctrl-click). Trailing-slot buttons should `stopPropagation` so
   *  they don't also fire it. */
  onActivate?: (event: KeyboardEvent | MouseEvent) => void
  /** Right-aligned actions. Revealed on row hover/focus unless `trailingVisible`. */
  trailing?: ReactNode
  trailingVisible?: boolean
}

/**
 * Shared row chrome for everything in the composer status stack — status items
 * (subagents, background) AND queued prompts. Fixed height, a leading glyph
 * slot, flexible content, and a trailing actions slot that reveals on hover.
 * Hover background matches the session sidebar. Consumers fill the three slots;
 * they never re-implement the row container.
 */
export function StatusRow({
  children,
  className,
  leading,
  onActivate,
  trailing,
  trailingVisible = false
}: StatusRowProps) {
  return (
    <div
      className={cn(
        'group/status-row flex min-h-6 items-center gap-2 rounded-md px-1.5 py-1',
        // row-hover bundles cursor:pointer — only when the row actually activates.
        onActivate ? 'row-hover' : 'hover:bg-(--ui-row-hover-background)',
        className
      )}
      onClick={onActivate}
      onKeyDown={
        onActivate
          ? event => {
              if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault()
                onActivate(event)
              }
            }
          : undefined
      }
      role={onActivate ? 'button' : undefined}
      tabIndex={onActivate ? 0 : undefined}
    >
      {leading !== undefined && <span className="flex size-3.5 shrink-0 items-center justify-center">{leading}</span>}
      <div className="flex min-w-0 flex-1 items-center gap-2">{children}</div>
      {trailing && (
        <div
          className={cn(
            'flex shrink-0 items-center gap-0.5',
            !trailingVisible && 'opacity-0 group-hover/status-row:opacity-100 group-focus-within/status-row:opacity-100'
          )}
        >
          {trailing}
        </div>
      )}
    </div>
  )
}