import * as React from 'react'
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { cn } from '@/lib/utils'
import { ArrowDownSLine } from './icons-inline'

const Collapse = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Root
    ref={ref}
    className={cn('w-full font-sans', className)}
    data-slot="collapse"
    {...props}
  />
))
Collapse.displayName = 'Collapse'

const CollapseItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item
    ref={ref}
    className={cn(
      'border-b border-border-tertiary last:border-b-0 data-[orientation=horizontal]:border-b-0 data-[orientation=horizontal]:border-r data-[orientation=horizontal]:border-border-tertiary data-[orientation=horizontal]:last:border-r-0',
      className
    )}
    data-slot="collapse-item"
    {...props}
  />
))
CollapseItem.displayName = 'CollapseItem'

export interface CollapseTriggerProps
  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
  chevronIcon?: React.ReactNode
}

const CollapseTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  CollapseTriggerProps
>(({ className, children, chevronIcon, ...rest }, ref) => (
  <AccordionPrimitive.Header className="flex font-sans">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        'group flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium text-text font-sans transition-colors outline-none',
        'hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-primary-border focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
        'disabled:pointer-events-none disabled:opacity-50',
        'data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:justify-between data-[orientation=horizontal]:py-4 data-[orientation=horizontal]:text-left',
        className
      )}
      data-slot="collapse-trigger"
      {...rest}
    >
      {children}
      <span
        className="shrink-0 inline-flex transition-transform duration-200 group-data-[state=open]:rotate-180"
        aria-hidden
      >
        {chevronIcon ?? <ArrowDownSLine className="size-4 text-text-secondary" />}
      </span>
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
CollapseTrigger.displayName = 'CollapseTrigger'

const CollapseContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className={cn(
      'overflow-hidden text-sm text-text-secondary font-sans data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
      'data-[orientation=horizontal]:data-[state=closed]:animate-accordion-left data-[orientation=horizontal]:data-[state=open]:animate-accordion-right',
      className
    )}
    data-slot="collapse-content"
    {...props}
  >
    <div className="pb-3 pt-0 data-[orientation=horizontal]:pb-0 data-[orientation=horizontal]:pl-0 data-[orientation=horizontal]:pr-3">
      {children}
    </div>
  </AccordionPrimitive.Content>
))
CollapseContent.displayName = 'CollapseContent'

export type CollapseProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
export type CollapseItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
export type CollapseContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>

export { Collapse, CollapseItem, CollapseTrigger, CollapseContent }