Scrum4Me/components/split-pane/split-pane.tsx

'use client'

import { Fragment, useRef, useState, useEffect, useCallback } from 'react'
import { cn } from '@/lib/utils'
import { debugProps } from '@/lib/debug'
import { useUserSettingsStore } from '@/stores/user-settings/store'

function isValidPositions(value: unknown, n: number): value is number[] {
  return (
    Array.isArray(value) &&
    value.length === n &&
    value.every((v) => typeof v === 'number') &&
    Math.abs((value as number[]).reduce((a, b) => a + b, 0) - 100) <= 1
  )
}

export interface SplitPaneProps {
  panes: React.ReactNode[]
  defaultSplit: number[]     // length n, values sum to 100
  cookieKey: string
  tabLabels?: string[]       // mobile tab labels, defaults to "Pane N"
  minSize?: number           // minimum px per pane, default 200
  mobileBreakpoint?: number  // default 1024
  activeTab?: number         // controlled: parent manages which tab is active
  onActiveTabChange?: (index: number) => void
}

export function SplitPane({
  panes,
  defaultSplit,
  cookieKey,
  tabLabels,
  minSize = 200,
  mobileBreakpoint = 1024,
  activeTab: activeTabProp,
  onActiveTabChange,
}: SplitPaneProps) {
  const isControlled = activeTabProp !== undefined
  const n = panes.length
  const containerRef = useRef<HTMLDivElement>(null)
  const splitsRef = useRef<number[]>(defaultSplit)

  const persisted = useUserSettingsStore(
    (s) => s.entities.settings.layout?.splitPanePositions?.[cookieKey],
  )
  const setPref = useUserSettingsStore((s) => s.setPref)

  // While dragging we keep splits in local state to avoid round-tripping every
  // mousemove through the store. Outside of a drag, the store is the source of
  // truth so cross-tab updates flow in automatically.
  const [dragSplits, setDragSplits] = useState<number[] | null>(null)
  const splits = dragSplits ?? (isValidPositions(persisted, n) ? persisted : defaultSplit)
  const [dragging, setDragging] = useState<number | null>(null) // divider index (0..n-2)
  const [isMobile, setIsMobile] = useState(false)
  const [internalTab, setInternalTab] = useState(0)
  const activeTab = isControlled ? activeTabProp : internalTab

  const handleTabChange = (i: number) => {
    if (!isControlled) setInternalTab(i)
    onActiveTabChange?.(i)
  }

  useEffect(() => { splitsRef.current = splits }, [splits])

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < mobileBreakpoint)
    check()
    window.addEventListener('resize', check)
    return () => window.removeEventListener('resize', check)
  }, [mobileBreakpoint])

  const onMouseMove = useCallback((e: MouseEvent) => {
    if (dragging === null || !containerRef.current) return
    const rect = containerRef.current.getBoundingClientRect()
    const containerWidth = rect.width
    const minPct = (minSize / containerWidth) * 100

    const cursorPct = ((e.clientX - rect.left) / containerWidth) * 100
    const current = splitsRef.current
    // Left edge of pane[dragging] in percentage
    const leftEdge = current.slice(0, dragging).reduce((a, b) => a + b, 0)
    const combinedWidth = current[dragging] + current[dragging + 1]

    const newLeft = Math.min(Math.max(cursorPct - leftEdge, minPct), combinedWidth - minPct)
    const newRight = combinedWidth - newLeft

    const base = splitsRef.current
    const next = [...base]
    next[dragging] = newLeft
    next[dragging + 1] = newRight
    setDragSplits(next)
  }, [dragging, minSize])

  const onMouseUp = useCallback(() => {
    if (dragging !== null) {
      void setPref(['layout', 'splitPanePositions', cookieKey], splitsRef.current)
      setDragSplits(null)
      setDragging(null)
    }
  }, [dragging, cookieKey, setPref])

  useEffect(() => {
    if (dragging !== null) {
      window.addEventListener('mousemove', onMouseMove)
      window.addEventListener('mouseup', onMouseUp)
    }
    return () => {
      window.removeEventListener('mousemove', onMouseMove)
      window.removeEventListener('mouseup', onMouseUp)
    }
  }, [dragging, onMouseMove, onMouseUp])

  if (isMobile) {
    return (
      <div className="flex flex-col h-full" {...debugProps('split-pane', 'SplitPane', 'components/split-pane/split-pane.tsx')}>
        <div className="flex items-center border-b border-border shrink-0">
          {activeTab > 0 && (
            <button
              onClick={() => handleTabChange(activeTab - 1)}
              className="px-3 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors shrink-0"
              aria-label="Terug"
            >
              ←
            </button>
          )}
          {panes.map((_, i) => (
            <button
              key={i}
              onClick={() => handleTabChange(i)}
              className={cn(
                'flex-1 py-2 text-sm font-medium transition-colors',
                activeTab === i
                  ? 'border-b-2 border-primary text-primary'
                  : 'text-muted-foreground hover:text-foreground'
              )}
            >
              {tabLabels?.[i] ?? `Pane ${i + 1}`}
            </button>
          ))}
        </div>
        <div className="flex-1 overflow-auto">
          {panes[activeTab]}
        </div>
      </div>
    )
  }

  return (
    <div ref={containerRef} className="flex h-full overflow-hidden select-none" {...debugProps('split-pane', 'SplitPane', 'components/split-pane/split-pane.tsx')}>
      {panes.map((pane, i) => (
        <Fragment key={i}>
          {i > 0 && (
            <div
              data-debug-id="split-pane__divider"
              onMouseDown={() => setDragging(i - 1)}
              className={cn(
                'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
                dragging === i - 1 && 'bg-primary'
              )}
            />
          )}
          <div
            className="flex flex-col overflow-hidden"
            style={i === n - 1 ? { flex: 1 } : { width: `${splits[i]}%` }}
            data-debug-id={i === 0 ? 'split-pane__left' : i === n - 1 ? 'split-pane__right' : undefined}
          >
            {pane}
          </div>
        </Fragment>
      ))}
    </div>
  )
}