"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "lucide-react"
import { cva, type VariantProps } from "class-variance-authority"

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

const accordionVariants = cva("w-full", {
  variants: {
    variant: {
      default:
        "[&>[data-slot=accordion-item]]:border-b-[var(--bh-space-xxxs-1)] [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]:last-child]:border-b-0",
      bordered:
        "rounded-[var(--bh-radius-md-6)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] [&>[data-slot=accordion-item]]:border-b-[var(--bh-space-xxxs-1)] [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]:last-child]:border-b-0 [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-3xl-16)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-3xl-16)]",
      cards:
        "flex flex-col gap-[var(--bh-space-md-8)] [&>[data-slot=accordion-item]]:rounded-[var(--bh-radius-md-6)] [&>[data-slot=accordion-item]]:border [&>[data-slot=accordion-item]]:border-[var(--bh-border-subtle)] [&>[data-slot=accordion-item]]:bg-[var(--bh-bg-raised)] [&>[data-slot=accordion-item]]:shadow-[var(--shadow-accordion-item)] [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-3xl-16)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-3xl-16)]",
      soft: "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-neutral-subtle)] p-[var(--bh-space-xs-4)] [&>[data-slot=accordion-item]]:rounded-[var(--bh-radius-xs-2)] [&_[data-slot=accordion-content]>div]:px-[var(--bh-space-xl-12)] [&_[data-slot=accordion-trigger]]:px-[var(--bh-space-xl-12)]",
    },
    size: {
      sm: "[&_[data-slot=accordion-content]>div]:pb-[var(--bh-space-xl-12)] [&_[data-slot=accordion-content]]:text-[length:var(--bh-text-body-xs-regular-font-size)] [&_[data-slot=accordion-content]]:leading-[var(--bh-text-body-xs-regular-line-height)] [&_[data-slot=accordion-trigger]]:py-[var(--bh-space-xl-12)] [&_[data-slot=accordion-trigger]]:text-[length:var(--bh-text-body-xs-medium-font-size)] [&_[data-slot=accordion-trigger]]:leading-[var(--bh-text-body-xs-medium-line-height)]",
      default: "",
      lg: "[&_[data-slot=accordion-content]>div]:pb-[var(--bh-space-4xl-20)] [&_[data-slot=accordion-content]]:text-[length:var(--bh-text-body-md-regular-font-size)] [&_[data-slot=accordion-content]]:leading-[var(--bh-text-body-md-regular-line-height)] [&_[data-slot=accordion-trigger]]:py-[var(--bh-space-4xl-20)] [&_[data-slot=accordion-trigger]]:text-[length:var(--bh-text-body-md-medium-font-size)] [&_[data-slot=accordion-trigger]]:leading-[var(--bh-text-body-md-medium-line-height)]",
    },
  },
  defaultVariants: {
    variant: "default",
    size: "default",
  },
})

function Accordion({
  className,
  variant,
  size,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Root> &
  VariantProps<typeof accordionVariants>) {
  return (
    <AccordionPrimitive.Root
      data-slot="accordion"
      data-size={size ?? "default"}
      data-variant={variant ?? "default"}
      className={cn(accordionVariants({ variant, size }), className)}
      {...props}
    />
  )
}

function AccordionItem({
  className,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn(
        "overflow-hidden transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-50)]",
        className
      )}
      {...props}
    />
  )
}

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "flex flex-1 items-start justify-between gap-[var(--bh-space-3xl-16)] rounded-[var(--bh-radius-md-6)] py-[var(--bh-space-3xl-16)] text-start text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)] outline-none transition-[background-color,color,box-shadow] hover:text-[var(--bh-content-default)] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:opacity-[var(--bh-opacity-50)] data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--bh-opacity-50)] [&[data-state=open]>svg]:rotate-180 [&_svg]:size-[var(--bh-space-3xl-16)]",
          className
        )}
        {...props}
      >
        <span dir="auto" className="min-w-0">
          {children}
        </span>
        <ChevronDownIcon
          aria-hidden="true"
          data-slot="accordion-chevron"
          className="pointer-events-none mt-[var(--bh-space-xxs-2)] shrink-0 text-[var(--bh-content-muted)] transition-transform duration-[var(--bh-duration-default)]"
        />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}

function AccordionContent({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
  return (
    <AccordionPrimitive.Content
      data-slot="accordion-content"
      className="overflow-hidden text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)] data-[state=closed]:animate-[accordion-up_var(--bh-duration-accordion)_var(--bh-easing-out)] data-[state=open]:animate-[accordion-down_var(--bh-duration-accordion)_var(--bh-easing-out)]"
      {...props}
    >
      <div dir="auto" className={cn("pt-0 pb-[var(--bh-space-3xl-16)]", className)}>
        {children}
      </div>
    </AccordionPrimitive.Content>
  )
}

export {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
  accordionVariants,
}
