Glass inputs

"use client"

import type * as React from "react"

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

/* Glass input family: 5 frosted/translucent text inputs. The glass SURFACE now
   comes from the glassDepth scale in @ai2/glass (NO hand-made backdrop-blur,
   AGENTS.md 4.5). The step gives the surface (blur + translucency + the ai2 inset
   signature) and the variant gives the CHARACTER (tint, border, focus color). The
   effects are pure CSS, so motion/react is not needed. Color comes ONLY from
   tokens; transparency uses either a Tailwind alpha utility or color-mix, NEVER a
   raw var(--x)/0.25. Each one wraps a real <input>; the glass is on the wrapper and
   the control stays transparent.

   TRAP: glassDepth carries a [box-shadow:...] and cn() is tailwind-merge, so a
   second shadow-* / [box-shadow:...] silently deletes the signature. Extra depth is
   therefore expressed with a border, not a shadow. */

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

const height: Record<StyledSize, string> = {
  sm: "h-8 text-sm",
  md: "h-9 text-sm",
  lg: "h-10 text-base",
  xl: "h-12 text-base",
}

const fieldBase =
  "w-full 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):
   the glassDepth signature is an arbitrary property `[box-shadow:...]`, meaning it
   writes box-shadow DIRECTLY and overrides Tailwind's ring chain
   (--tw-ring-shadow) entirely. ring-[3px] was drawing nothing on the glass;
   :focus-within matched, but the boxShadow stayed byte-for-byte identical to its
   unfocused state. Since outline is a separate CSS property it does not collide
   with the signature, and it follows the border-radius. */
const wrapBase =
  "relative inline-flex w-56 max-w-full items-center rounded-xl border px-3 transition-colors focus-within:outline-[3px] focus-within:outline-offset-0 focus-within:outline-ring/50"

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

/* Frost: the lightest glass. sm (4px) -> the intent "frosted but still readable
   behind" is exactly the shallowest step on the scale; the family's baseline. The
   character: a neutral border. */
export function FrostInput({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-input"
      className={cn(
        wrapBase,
        glassDepth.sm,
        "border-border/60 focus-within:border-ring",
        height[size],
        className
      )}
    >
      <input {...props} className={cn(fieldBase, "h-full")} />
    </span>
  )
}

/* Tint: info-toned glass. md (8px) -> the default step; since the colour already carries the character it is enough for the surface to stay neutral. The tint fill TAKES OVER the step's bg-background/60 value, so it owns the translucency itself (the supports-[] variant has to be overridden too, otherwise the step's variant paints over the tint). */
export function TintInput({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-input"
      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
      )}
    >
      <input {...props} className={cn(fieldBase, "h-full")} />
    </span>
  )
}

/* Crystal: clear glass with a sharp edge. md (8px) -> the same step as Tint but a different character: a surface-3 fill plus a thin border instead of colour. The old hand-written top and bottom inset highlight lines were REMOVED: the glassDepth signature already carries exactly that inset highlight, and adding a second [box-shadow:] would erase it. */
export function CrystalInput({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-input"
      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
      )}
    >
      <input {...props} className={cn(fieldBase, "h-full")} />
    </span>
  )
}

/* Smoke: dark, smoky glass. lg (16px) -> the intent of "what is behind becomes texture, not text" is exactly the description of the lg step. Character: a foreground scrim. */
export function SmokeInput({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-input"
      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
      )}
    >
      <input {...props} className={cn(fieldBase, "h-full")} />
    </span>
  )
}

/* DepthGlass: 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: a second shadow-* would have deleted the signature, so
   the extra weight comes from a pronounced border instead. */
export function DepthGlassInput({ className, size = "md", ...props }: Props) {
  return (
    <span
      data-slot="styled-input"
      className={cn(
        wrapBase,
        glassDepth.xl,
        "border-border focus-within:border-ring",
        height[size],
        className
      )}
    >
      <input {...props} className={cn(fieldBase, "h-full")} />
    </span>
  )
}