/**
 * Accordion — WealthX DS overrides (shadcn base)
 *
 * Changes from shadcn default:
 *   - AccordionItem:    removed `last:border-b-0` — consistent separator on every item
 *   - AccordionTrigger: `rounded-md` → `rounded-none` — WealthX sharp corners
 *   - AccordionTrigger: `items-start` → `items-center` — single-line trigger alignment
 *   - AccordionTrigger: `transition-all` → `transition-[color,opacity]` — scoped animation
 *   - AccordionTrigger: focus ring uses `foreground/30` instead of `ring/50` — no brand color
 *   - AccordionContent: inner wrapper uses `pb-4 text-muted-foreground`
 */
import { type ReactElement } from "react";
import * as React from "react";
import { ChevronDownIcon } from "lucide-react";
import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
import { cn } from "@/lib/utils";

export type AccordionProps<Value = string> =
  AccordionPrimitive.Root.Props<Value>;

function Accordion<Value = string>(
  props: AccordionProps<Value>,
): ReactElement {
  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
}

export type AccordionItemProps = React.ComponentProps<
  typeof AccordionPrimitive.Item
>;

function AccordionItem({
  className,
  ...props
}: AccordionItemProps): ReactElement {
  return (
    <AccordionPrimitive.Item
      className={cn("border-b", className)}
      data-slot="accordion-item"
      {...props}
    />
  );
}

export type AccordionTriggerProps = React.ComponentProps<
  typeof AccordionPrimitive.Trigger
>;

function AccordionTrigger({
  className,
  children,
  ...props
}: AccordionTriggerProps): ReactElement {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        className={cn(
          // layout
          "flex flex-1 items-center justify-between gap-4 py-4 text-left",
          // typography
          "text-label-medium",
          // base
          "rounded-none outline-none transition-[color,opacity]",
          // interactive states
          "hover:underline",
          "focus-visible:ring-2 focus-visible:ring-foreground/30",
          "disabled:pointer-events-none disabled:opacity-50",
          // chevron rotation when open
          "[&[data-panel-open]>svg]:rotate-180",
          className,
        )}
        data-slot="accordion-trigger"
        {...props}
      >
        {children}
        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  );
}

export type AccordionContentProps = React.ComponentProps<
  typeof AccordionPrimitive.Panel
>;

function AccordionContent({
  className,
  children,
  ...props
}: AccordionContentProps): ReactElement {
  return (
    <AccordionPrimitive.Panel
      className="overflow-hidden text-body-small h-(--accordion-panel-height) transition-[height] duration-200 ease-out data-starting-style:h-0 data-ending-style:h-0"
      data-slot="accordion-content"
      {...props}
    >
      <div className={cn("pb-4 text-muted-foreground", className)}>
        {children}
      </div>
    </AccordionPrimitive.Panel>
  );
}

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };