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

'use client'

import { useRef, useState, useEffect, useCallback } from 'react'
import { cn } from '@/lib/utils'

interface SplitPaneProps {
  left: React.ReactNode
  right: React.ReactNode
  storageKey: string
  defaultSplit?: number // percentage for left pane, default 40
  minSize?: number      // minimum px per pane, default 200
}

export function SplitPane({
  left,
  right,
  storageKey,
  defaultSplit = 40,
  minSize = 200,
}: SplitPaneProps) {
  const containerRef = useRef<HTMLDivElement>(null)
  const [split, setSplit] = useState<number>(defaultSplit)
  const [isDragging, setIsDragging] = useState(false)
  const [isMobile, setIsMobile] = useState(false)
  const [activeTab, setActiveTab] = useState<'left' | 'right'>('left')

  // Load stored split on mount
  useEffect(() => {
    const stored = localStorage.getItem(`split-pane:${storageKey}`)
    if (stored) {
      const val = parseFloat(stored)
      if (!isNaN(val) && val > 0 && val < 100) setSplit(val)
    }
  }, [storageKey])

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

  const onMouseMove = useCallback((e: MouseEvent) => {
    if (!isDragging || !containerRef.current) return
    const rect = containerRef.current.getBoundingClientRect()
    const containerWidth = rect.width
    const offsetX = e.clientX - rect.left
    const minPct = (minSize / containerWidth) * 100
    const maxPct = 100 - minPct
    const newSplit = Math.min(maxPct, Math.max(minPct, (offsetX / containerWidth) * 100))
    setSplit(newSplit)
    localStorage.setItem(`split-pane:${storageKey}`, String(newSplit))
  }, [isDragging, minSize, storageKey])

  const onMouseUp = useCallback(() => setIsDragging(false), [])

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

  if (isMobile) {
    return (
      <div className="flex flex-col h-full">
        <div className="flex border-b border-border shrink-0">
          <button
            onClick={() => setActiveTab('left')}
            className={cn(
              'flex-1 py-2 text-sm font-medium transition-colors',
              activeTab === 'left'
                ? 'border-b-2 border-primary text-primary'
                : 'text-muted-foreground hover:text-foreground'
            )}
          >
            Backlog
          </button>
          <button
            onClick={() => setActiveTab('right')}
            className={cn(
              'flex-1 py-2 text-sm font-medium transition-colors',
              activeTab === 'right'
                ? 'border-b-2 border-primary text-primary'
                : 'text-muted-foreground hover:text-foreground'
            )}
          >
            Stories
          </button>
        </div>
        <div className="flex-1 overflow-auto">
          {activeTab === 'left' ? left : right}
        </div>
      </div>
    )
  }

  return (
    <div ref={containerRef} className="flex h-full overflow-hidden select-none">
      {/* Left pane */}
      <div className="flex flex-col overflow-hidden" style={{ width: `${split}%` }}>
        {left}
      </div>

      {/* Divider */}
      <div
        onMouseDown={() => setIsDragging(true)}
        className={cn(
          'w-1 shrink-0 bg-border hover:bg-primary transition-colors cursor-col-resize',
          isDragging && 'bg-primary'
        )}
      />

      {/* Right pane */}
      <div className="flex flex-col overflow-hidden flex-1">
        {right}
      </div>
    </div>
  )
}