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'

const COOKIE_PREFIX = 'sp:'
const COOKIE_MAX_AGE = 60 * 60 * 24 * 365

function readSplits(cookieKey: string, n: number): number[] | null {
  if (typeof document === 'undefined') return null
  const match = document.cookie.match(
    new RegExp(`(?:^|; )${COOKIE_PREFIX}${cookieKey}=([^;]+)`)
  )
  if (!match) return null
  try {
    const parsed: unknown = JSON.parse(decodeURIComponent(match[1]))
    if (
      !Array.isArray(parsed) ||
      parsed.length !== n ||
      parsed.some((v) => typeof v !== 'number') ||
      Math.abs((parsed as number[]).reduce((a, b) => a + b, 0) - 100) > 1
    ) return null
    return parsed as number[]
  } catch {
    return null
  }
}

function writeSplits(cookieKey: string, splits: number[]) {
  document.cookie = `${COOKIE_PREFIX}${cookieKey}=${encodeURIComponent(
    JSON.stringify(splits)
  )}; max-age=${COOKIE_MAX_AGE}; path=/; samesite=lax`
}

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 [splits, setSplits] = useState<number[]>(() => {
    return readSplits(cookieKey, n) ?? 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

    setSplits((prev) => {
      const next = [...prev]
      next[dragging] = newLeft
      next[dragging + 1] = newRight
      return next
    })
  }, [dragging, minSize])

  const onMouseUp = useCallback(() => {
    if (dragging !== null) {
      writeSplits(cookieKey, splitsRef.current)
      setDragging(null)
    }
  }, [dragging, cookieKey])

  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>
  )
}