Glass textareas

"use client"

import type * as React from "react"

import { cn } from "@/lib/utils"
import { glassDepth } from "@/components/ui/glass"

/* Glass textarea family: 5 frosted/translucent multi-line fields. The glass SURFACE
   comes from the glassDepth scale in @ai2/glass (NO hand-made backdrop-blur,
   AGENTS.md 4.5); the step gives the surface and the variant gives the character.
   The step mapping is byte-for-byte the same as inputs-glass - same family, same
   language. The effects are pure CSS, so motion/react is not needed. Color comes
   ONLY from tokens, NEVER a raw var(--x)/0.25. Each one wraps a real <textarea>;
   the glass is on the wrapper and the control stays transparent.
   Size = min-height.

   TRAP: glassDepth carries a [box-shadow:...]; because cn() is tailwind-merge, a
   second shadow-* silently deletes the signature. Extra depth is given with a
   border. */

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"

/* Focus is given with OUTLINE, NOT a ring. The reason was measured (2026-07-15):
   because the glassDepth signature is the arbitrary property `[box-shadow:...]` it
   writes box-shadow directly and overrides Tailwind's ring chain
   (--tw-ring-shadow); the ring was never drawn on the glass at all. outline is a
   separate CSS property and does not collide. */
const wrapBase =
  "relative flex w-72 max-w-full flex-col rounded-xl border px-3 py-2 transition-colors focus-within:outline-[3px] focus-within:outline-offset-0 focus-within:outline-ring/50"

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

/* Frost: en hafif cam. sm (4px) -> ailenin taban cizgisi; arkasi hala okunur.
   Karakter: notr kenarlik. */
export function FrostTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        glassDepth.sm,
        "border-border/60 focus-within:border-ring",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Tint: info-toned glass. md (8px) -> the default step; because the colour carries the character the surface stays neutral. The tint fill takes over the step's bg (the supports-[] variant is overridden too), so it owns the translucency itself. */
export function TintTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        glassDepth.md,
        "border-info/25 bg-info/15 supports-[backdrop-filter]:bg-info/10 focus-within:border-primary focus-within:outline-info/40",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Smoke: dark, smoky glass. lg (16px) -> "what is behind becomes texture, not text". Character: a foreground scrim. */
export function SmokeTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        glassDepth.lg,
        "border-foreground/15 bg-foreground/15 supports-[backdrop-filter]:bg-foreground/10 focus-within:border-foreground/40",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Crystal: clear glass with a sharp edge. md (8px) -> the same step as Tint, a
   different character: a surface-3 fill + a thin border instead of color. The
   hand-written top/bottom inset highlight lines were REMOVED - the glassDepth
   signature already carries that inset highlight and a second [box-shadow:] would
   have deleted it. */
export function CrystalTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        glassDepth.md,
        "border-border/50 bg-surface-3/55 supports-[backdrop-filter]:bg-surface-3/55 focus-within:border-ring",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}

/* Depth: the deepest glass. xl (24px) -> the "detached from the page" feel that the
   old shadow-xl + blur-lg was after now comes from the maximum diffusion step. NO
   extra shadow is added (it would have deleted the signature); the extra weight comes
   from a pronounced border instead. */
export function DepthTextarea({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-textarea"
      className={cn(
        wrapBase,
        glassDepth.xl,
        "border-border focus-within:border-ring",
        height[size],
        className
      )}
    >
      <textarea aria-label="Message" {...props} className={cn(fieldBase, "flex-1", height[size])} />
    </span>
  )
}