'use client';

import * as React from 'react';
import { cva, type VariantProps } from '@/lib/cva';
import { ChevronDownIcon } from '@/icons';
import * as AccordionPrimitive from 'radix-ui/accordion';

import { cn } from '@/lib/utils';
import { colorPalettes, disabledState, focusRing } from '@/lib/cva-presets';

const accordionVariants = cva('group/accordion flex flex-col', {
  variants: {
    variant: {
      /**
       * CBAR's shape: each section is its own bordered card with space between
       * them, rather than rows sharing a rule.
       */
      card: 'gap-4',
      /** The kit's pre-CBAR shape — flush rows separated by a divider. */
      list: '',
    },
    colorPalette: colorPalettes,
  },
  defaultVariants: {
    variant: 'card',
    /* Only the chevron carries palette colour, and CBAR draws it turquoise. */
    colorPalette: 'secondary',
  },
});

/*
 * An intersection rather than an `interface … extends`: Radix's Root props are
 * a discriminated union (`type="single"` carries `collapsible`, `type="multiple"`
 * does not), and extending a union in an interface flattens it into one object
 * that demands every member's required keys.
 */
export type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> &
  VariantProps<typeof accordionVariants>;
export type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;

/**
 * Vertically stacked sections that expand one at a time (`type="single"`) or
 * independently (`type="multiple"`).
 *
 * Collapsed content is removed from the accessibility tree, so never hide
 * something a user might search the page for.
 */
function Accordion({ className, variant = 'card', colorPalette, ...props }: AccordionProps) {
  return (
    <AccordionPrimitive.Root
      data-slot="accordion"
      data-variant={variant}
      className={cn(accordionVariants({ variant, colorPalette }), className)}
      {...props}
    />
  );
}

function AccordionItem({ className, ...props }: AccordionItemProps) {
  return (
    <AccordionPrimitive.Item
      data-slot="accordion-item"
      className={cn(
        /* `bg-background`, not `bg-card`: CBAR draws an accordion section flat
           white and reserves the tinted card surface for actual cards. */
        'group-data-[variant=card]/accordion:rounded-md group-data-[variant=card]/accordion:border group-data-[variant=card]/accordion:bg-background group-data-[variant=card]/accordion:px-4',
        'group-data-[variant=list]/accordion:border-b group-data-[variant=list]/accordion:last:border-b-0',
        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-2 rounded-md py-4 text-left text-base leading-7 font-semibold',
          /* Only the focus ring and the disabled fade change on the trigger
             itself. The rotation and the colour below belong to the chevron,
             which has its own transition. */
          'transition-[border-color,box-shadow,opacity] duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
          /*
           * CBAR swaps between two icons — a caret down and a caret up — and
           * recolours as it goes. The kit keeps one chevron and rotates it,
           * which animates rather than cutting, but the colour change is kept
           * because it is what marks the open section at a glance.
           */
          '[&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg]:text-(--ctl-fg)',
          focusRing,
          disabledState,
          className
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="pointer-events-none size-5 shrink-0 translate-y-1 text-(--ctl-border) transition-[transform,color] duration-(--ui-duration-base) ease-(--ui-ease-standard)" />
      </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-base leading-7 data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
      {...props}
    >
      {/* CBAR sets 8px between the title and the body, and 16px below it. */}
      <div className={cn('pt-2 pb-4', className)}>{children}</div>
    </AccordionPrimitive.Content>
  );
}

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