Inset resizables

"use client"

import * as React from "react"

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

/* Inset resizable family: 5 self-contained split panels (NO panel library, NO
   radix). The theme idea: the panes have an inner shadow (inset shadow) and a pill
   handle floats over the seam. Each export holds an internal percentage (pct) state;
   the pill handle is dragged with the pointer and adjusted with the arrow keys.
   Deterministic (no Date.now / Math.random). The handle uses role="separator" +
   aria-orientation + aria-valuenow/min/max, tabIndex=0. Color comes ONLY from
   semantic tokens; alpha via color-mix or the Tailwind /NN. There is no motion in
   this family (only color transitions). */

export type StyledSize = "sm" | "md" | "lg" | "xl"
type Orientation = "horizontal" | "vertical"

const height: Record<StyledSize, string> = {
  sm: "h-40",
  md: "h-56",
  lg: "h-72",
  xl: "h-96",
}

const MIN = 12
const MAX = 88
const clamp = (n: number) => Math.min(MAX, Math.max(MIN, n))

const focusRing =
  "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"

/* Ortak bolme mantigi: pct state + pointer/klavye tutamac handler'lari.
   horizontal = sol/sag panel, dikey ayirici (yatay suruklenir).
   vertical   = ust/alt panel, yatay ayirici (dikey suruklenir). */
function useResizable(orientation: Orientation, initial = 50) {
  const [pct, setPct] = React.useState(initial)
  const containerRef = React.useRef<HTMLDivElement>(null)
  const [dragging, setDragging] = React.useState(false)

  const applyFromPoint = React.useCallback(
    (clientX: number, clientY: number) => {
      const el = containerRef.current
      if (!el) return
      const rect = el.getBoundingClientRect()
      const raw =
        orientation === "horizontal"
          ? ((clientX - rect.left) / rect.width) * 100
          : ((clientY - rect.top) / rect.height) * 100
      setPct(clamp(raw))
    },
    [orientation]
  )

  const onPointerDown = React.useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      e.preventDefault()
      e.currentTarget.setPointerCapture(e.pointerId)
      setDragging(true)
    },
    []
  )

  const onPointerMove = React.useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return
      applyFromPoint(e.clientX, e.clientY)
    },
    [applyFromPoint]
  )

  const onPointerUp = React.useCallback(
    (e: React.PointerEvent<HTMLDivElement>) => {
      if (e.currentTarget.hasPointerCapture(e.pointerId))
        e.currentTarget.releasePointerCapture(e.pointerId)
      setDragging(false)
    },
    []
  )

  const onKeyDown = React.useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      const dec = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp"
      const inc = orientation === "horizontal" ? "ArrowRight" : "ArrowDown"
      if (e.key === dec) {
        e.preventDefault()
        setPct((p) => clamp(p - (e.shiftKey ? 10 : 2)))
      } else if (e.key === inc) {
        e.preventDefault()
        setPct((p) => clamp(p + (e.shiftKey ? 10 : 2)))
      } else if (e.key === "Home") {
        e.preventDefault()
        setPct(MIN)
      } else if (e.key === "End") {
        e.preventDefault()
        setPct(MAX)
      }
    },
    [orientation]
  )

  const separatorProps = {
    role: "separator" as const,
    "aria-orientation": (orientation === "horizontal" ? "vertical" : "horizontal") as
      | "vertical"
      | "horizontal",
    "aria-valuenow": Math.round(pct),
    "aria-valuemin": MIN,
    "aria-valuemax": MAX,
    tabIndex: 0,
    onPointerDown,
    onPointerMove,
    onPointerUp,
    onKeyDown,
  }

  return { pct, containerRef, dragging, separatorProps }
}

interface ResizableProps {
  className?: string
  size?: StyledSize
  start?: React.ReactNode
  end?: React.ReactNode
}

/* Ic golgeli bolme: token yuzey + inset shadow (varyanta gore) + ortalanmis etiket. */
function InsetPane({
  label,
  tone = "bg-surface-2",
  insetClass,
  children,
}: {
  label?: string
  tone?: string
  insetClass: string
  children?: React.ReactNode
}) {
  return (
    <div
      className={cn(
        "flex h-full w-full items-center justify-center overflow-hidden p-4 text-sm font-medium text-foreground",
        tone,
        insetClass
      )}
    >
      {children ?? <span className="text-muted-foreground">{label}</span>}
    </div>
  )
}

const shell =
  "flex w-full select-none overflow-hidden rounded-xl border border-border"

/* Shared inset divider: two panels with inner shadows plus a pill handle floating over them. insetClass carries the inner shadow depth of the panels, pillClass the pill shape and seamClass the colour of the thin seam underneath. The pill handle is grabbed through separatorProps. */
function InsetSplit({
  className,
  size = "md",
  start,
  end,
  insetClass,
  pillClass,
  seamClass = "bg-border",
}: ResizableProps & { insetClass: string; pillClass: string; seamClass?: string }) {
  const { pct, containerRef, dragging, separatorProps } = useResizable("horizontal")
  return (
    <div data-slot="styled-resizable" ref={containerRef} className={cn(shell, height[size], className)}>
      <div style={{ width: `${pct}%` }} className="h-full">
        {start ?? <InsetPane label="Panel bir" tone="bg-surface-2" insetClass={insetClass} />}
      </div>
      <div className={cn("relative h-full w-px shrink-0", seamClass)}>
        <div
          {...separatorProps}
          className={cn(
            "absolute left-1/2 top-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 cursor-col-resize items-center justify-center border bg-background transition-colors",
            focusRing,
            "after:absolute after:inset-y-0 after:-inset-x-2 after:content-['']",
            pillClass,
            dragging ? "border-primary" : "border-border hover:border-primary/60"
          )}
        >
          <span
            aria-hidden="true"
            className={cn(
              "h-4 w-0.5 rounded-full transition-colors",
              dragging ? "bg-primary" : "bg-muted-foreground"
            )}
          />
        </div>
      </div>
      <div style={{ width: `${100 - pct}%` }} className="h-full">
        {end ?? <InsetPane label="Panel iki" tone="bg-surface-3" insetClass={insetClass} />}
      </div>
    </div>
  )
}

/* SoftResizable: hafif ic golge + yuvarlak yuzen hap. */
export function SoftResizable(props: ResizableProps) {
  return (
    <InsetSplit
      {...props}
      insetClass="shadow-[inset_0_1px_6px_color-mix(in_oklab,var(--color-foreground)_8%,transparent)]"
      pillClass="h-10 w-5 rounded-full shadow-sm"
    />
  )
}

/* DeepResizable: belirgin, derin ic golge + yuvarlak yuzen hap. */
export function DeepResizable(props: ResizableProps) {
  return (
    <InsetSplit
      {...props}
      insetClass="shadow-[inset_0_2px_12px_color-mix(in_oklab,var(--color-foreground)_20%,transparent)]"
      pillClass="h-10 w-5 rounded-full shadow-md"
    />
  )
}

/* GrooveResizable: her iki panelde de oyuk hissi veren ic golge + koyu dikis + ince hap. */
export function GrooveResizable(props: ResizableProps) {
  return (
    <InsetSplit
      {...props}
      insetClass="shadow-[inset_0_0_10px_color-mix(in_oklab,var(--color-foreground)_14%,transparent)]"
      seamClass="bg-[color-mix(in_oklab,var(--color-foreground)_18%,transparent)]"
      pillClass="h-8 w-4 rounded-full shadow-sm"
    />
  )
}

/* FrameResizable: ic golge + ic cerceve halkasi + kare koseli hap. */
export function FrameResizable(props: ResizableProps) {
  return (
    <InsetSplit
      {...props}
      insetClass="shadow-[inset_0_1px_6px_color-mix(in_oklab,var(--color-foreground)_10%,transparent)] ring-1 ring-inset ring-border/60"
      pillClass="h-9 w-6 rounded-md shadow-sm"
    />
  )
}

/* FloatResizable: hafif ic golge + belirgin bicimde yukselen, gucluce yuzen hap. */
export function FloatResizable(props: ResizableProps) {
  return (
    <InsetSplit
      {...props}
      insetClass="shadow-[inset_0_1px_4px_color-mix(in_oklab,var(--color-foreground)_8%,transparent)]"
      seamClass="bg-transparent"
      pillClass="h-12 w-6 rounded-full shadow-lg"
    />
  )
}