/* tdd-guard:skip — UI primitive, integration-tested via gstack-smoke + Vercel-Preview */
'use client'

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { Slot } from "radix-ui"

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

/**
 * Button System — DCT-aligned (Constitution v1.1, KAR-521 Stage 5)
 *
 * Variants:
 *   default      Primary Petrol Button (Haupt-CTA)
 *   primary      Alias zu default — explizit fuer DCT-Pattern-Matching
 *   secondary    Petrol-Soft BG (Selected-State / Sekundaer-CTA)
 *   outline      Border-Subtle + Petrol-Text — DCT Filter-Buttons
 *   ghost        Transparent, Primary-Text on Hover
 *   ghost-muted  Transparent, Muted-Text — Icon-Toolbar
 *   destructive  Status-Destructive
 *   link         Underline-on-Hover
 *
 * Sizes (Brand-Verbesserung vs DCT-32px Tap-Targets):
 *   default = md = 40px height (Apple HIG-konform, A11y +)
 *   sm  = 32px (Toolbar-Buttons)
 *   xs  = 24px (Inline-Mini)
 *   lg  = 48px
 *   cta = 56px (Full-CTA, z.B. Mobile Sticky-Bar)
 *
 * Disabled: opacity-50 + cursor-not-allowed (Brand-Verbesserung vs DCT-Wischi-Waschi)
 * Focus-Visible: 2px Ring in --ring (Petrol) — A11y +
 *
 * Brand-Verbesserung-Tracker: lib/customers/<name>/branding/ + Brain Stage-Plan
 */
const buttonVariants = cva(
  [
    "group/button inline-flex shrink-0 items-center justify-center",
    "border font-sans font-semibold text-[13px] whitespace-nowrap",
    "transition-colors outline-none select-none rounded-sm",
    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
    // Visible press feedback on touch (KAR-704): iOS has no :hover, and tap-highlight
    // is disabled globally, so without an :active style taps feel dead. The 1px shift
    // alone is nearly invisible — add a brief opacity dip.
    "active:not-aria-[haspopup]:translate-y-px active:opacity-80",
    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  ].join(" "),
  {
    variants: {
      variant: {
        default:
          "bg-primary text-primary-foreground border-primary hover:bg-primary-dark hover:border-primary-dark",
        primary:
          "bg-primary text-primary-foreground border-primary hover:bg-primary-dark hover:border-primary-dark",
        secondary:
          "bg-secondary text-secondary-foreground border-secondary hover:bg-primary-tint hover:border-primary-tint",
        outline:
          "bg-card text-primary border-border hover:bg-primary-tint hover:border-primary",
        ghost:
          "bg-transparent text-primary border-transparent hover:bg-primary-tint",
        "ghost-muted":
          "bg-transparent text-muted-foreground border-transparent hover:bg-muted hover:text-foreground",
        destructive:
          "bg-destructive text-white border-destructive hover:opacity-90",
        link:
          "bg-transparent text-primary border-transparent underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 gap-1.5 px-4",
        md: "h-10 gap-1.5 px-4",
        xs: "h-6 gap-1 px-2 text-[11px] [&_svg:not([class*='size-'])]:size-3",
        sm: "h-8 gap-1 px-3 text-[12px] [&_svg:not([class*='size-'])]:size-3.5",
        lg: "h-12 gap-2 px-5",
        cta: "h-14 gap-2 px-6 text-[14px]",
        icon: "size-10",
        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
        "icon-sm": "size-8 [&_svg:not([class*='size-'])]:size-3.5",
        "icon-lg": "size-12",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }