Styled textarea

"use client"

import * as React from "react"

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

/* Textarea family: 5 decorative multi-line text fields. Color comes ONLY from
   tokens. Size = min-height. The focus effects are CSS (focus-within / peer) +
   token transitions; the transform-based ones are protected with motion-reduce.
   Each one wraps a real <textarea> and passes through all the native props. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const height: Record<StyledSize, string> = {
  sm: "min-h-16 text-sm",
  md: "min-h-20 text-sm",
  lg: "min-h-24 text-base",
  xl: "min-h-28 text-base",
}

const fieldBase =
  "w-full resize-y bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"

type Props = React.ComponentProps<"textarea"> & { size?: StyledSize }

/* Underline: no frame, with a token line growing from the center along the bottom
   on focus. */
export function UnderlineTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span data-slot="styled-textarea" className={cn("relative flex w-72 max-w-full flex-col border-b border-border", height[size], className)}>
      <textarea {...props} className={cn(fieldBase, "peer flex-1 px-1 py-1.5", height[size])} />
      <span className="pointer-events-none absolute inset-x-0 bottom-[-1px] h-0.5 origin-center scale-x-0 bg-primary transition-transform duration-(--motion-base) ease-(--motion-ease) peer-focus:scale-x-100 motion-reduce:transition-none" />
    </span>
  )
}

/* Float: odakta / dolu iken yukari suzulen etiket (placeholder=" " + peer). */
export function FloatTextarea({ className, size = "md", id, ...props }: Props) {
  const autoId = React.useId()
  const areaId = id ?? autoId
  return (
    <span data-slot="styled-textarea" className={cn("relative flex w-72 max-w-full flex-col rounded-lg border border-border px-3 pt-5 pb-2", height[size], className)}>
      <textarea id={areaId} placeholder=" " {...props} className={cn(fieldBase, "peer flex-1", height[size])} />
      <label
        htmlFor={areaId}
        className="pointer-events-none absolute left-3 top-4 bg-background px-1 text-muted-foreground transition-all duration-(--motion-base) peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:text-xs peer-focus:text-primary peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:-translate-y-1/2 peer-[:not(:placeholder-shown)]:text-xs motion-reduce:transition-none"
      >
        Label
      </label>
    </span>
  )
}

/* Glow: odakta token isima halkasi (focus-within box-shadow). */
export function GlowTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        "relative flex w-72 max-w-full flex-col rounded-lg border border-border px-3 py-2 transition-shadow duration-(--motion-base) focus-within:border-info focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--color-info)_25%,transparent)]",
        height[size],
        className
      )}
    >
      <textarea {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Filled: dolu yuzey + odakta alttan token vurgu cizgisi. */
export function FilledTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span data-slot="styled-textarea" className={cn("relative flex w-72 max-w-full flex-col overflow-hidden rounded-t-lg border-b border-border bg-surface-2 px-3 py-2", height[size], className)}>
      <textarea {...props} className={cn(fieldBase, "peer flex-1", height[size])} />
      <span className="pointer-events-none absolute inset-x-0 bottom-[-1px] h-0.5 origin-center scale-x-0 bg-primary transition-transform duration-(--motion-base) ease-(--motion-ease) peer-focus:scale-x-100 motion-reduce:transition-none" />
    </span>
  )
}

/* Count: kosede canli karakter sayaci; value uzunlugunu okur, maxLength alir. */
export function CountTextarea({ className, size = "md", value, defaultValue, maxLength, onChange, ...props }: Props) {
  const initial = String(value ?? defaultValue ?? "").length
  const [count, setCount] = React.useState(initial)

  React.useEffect(() => {
    if (value !== undefined) setCount(String(value).length)
  }, [value])

  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
    setCount(event.target.value.length)
    onChange?.(event)
  }

  return (
    <span data-slot="styled-textarea" className={cn("relative flex w-72 max-w-full flex-col rounded-lg border border-border px-3 pt-2 pb-6 transition-colors focus-within:border-primary", height[size], className)}>
      <textarea
        value={value}
        defaultValue={defaultValue}
        maxLength={maxLength}
        onChange={handleChange}
        {...props}
        className={cn(fieldBase, "flex-1", height[size])}
      />
      <span className="pointer-events-none absolute bottom-1.5 right-3 text-xs tabular-nums text-muted-foreground">
        {maxLength ? `${count}/${maxLength}` : count}
      </span>
    </span>
  )
}