'use client'

import { useCallback, useEffect, useRef, useState } from 'react'

const STORAGE_KEY = 'memento-sidebar-width'
const MIN = 280
const MAX = 560

export function useSidebarResize() {
  const [width, setWidth] = useState(320)
  const [isDragging, setIsDragging] = useState(false)
  const startXRef = useRef(0)
  const startWidthRef = useRef(320)

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_KEY)
    if (stored) {
      const parsed = parseInt(stored, 10)
      if (!isNaN(parsed) && parsed >= MIN && parsed <= MAX) {
        setWidth(parsed)
      }
    }
  }, [])

  const onPointerDown = useCallback((e: React.PointerEvent) => {
    e.preventDefault()
    setIsDragging(true)
    startXRef.current = e.clientX
    startWidthRef.current = width
    document.body.style.cursor = 'col-resize'
    document.body.style.userSelect = 'none'
  }, [width])

  useEffect(() => {
    if (!isDragging) return

    const onPointerMove = (e: PointerEvent) => {
      const delta = e.clientX - startXRef.current
      const newWidth = Math.max(MIN, Math.min(MAX, startWidthRef.current + delta))
      setWidth(newWidth)
    }

    const onPointerUp = () => {
      setIsDragging(false)
      document.body.style.cursor = ''
      document.body.style.userSelect = ''
      setWidth(prev => {
        localStorage.setItem(STORAGE_KEY, String(prev))
        return prev
      })
    }

    document.addEventListener('pointermove', onPointerMove)
    document.addEventListener('pointerup', onPointerUp)
    return () => {
      document.removeEventListener('pointermove', onPointerMove)
      document.removeEventListener('pointerup', onPointerUp)
    }
  }, [isDragging])

  return { width, isDragging, onPointerDown }
}

export function SidebarResizeHandle({ onPointerDown, isDragging }: { onPointerDown: (e: React.PointerEvent) => void; isDragging: boolean }) {
  return (
    <div
      onPointerDown={onPointerDown}
      className={`hidden md:flex items-center justify-center w-1 shrink-0 cursor-col-resize transition-colors z-50 ${
        isDragging
          ? 'bg-brand-accent w-[3px]'
          : 'bg-border/40 hover:bg-brand-accent/50 hover:w-[3px]'
      }`}
      style={{ touchAction: 'none' }}
      aria-hidden="true"
    >
      <div className={`w-[2px] h-12 rounded-full transition-colors ${isDragging ? 'bg-brand-accent' : 'bg-border/60'}`} />
    </div>
  )
}

export { MIN as SIDEBAR_MIN_WIDTH, MAX as SIDEBAR_MAX_WIDTH }