"use client"

import * as React from "react"
import { ChevronDownIcon } from "lucide-react"
import { Collapsible as CollapsiblePrimitive } from "radix-ui"

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

/**
 * `Panel` and `PanelBody` replace `@wordpress/components`' `Panel` / `PanelBody` - **1 import**,
 * four usages in `QuestionnairePage`.
 *
 * BUILT ON COLLAPSIBLE RATHER THAN `ui/accordion`, AND THE DIFFERENCE IS BEHAVIOURAL. An accordion
 * item needs a `value` and a Root that decides how many can be open at once. WordPress's PanelBody
 * owns its own open state - several can be open together, and each starts from its own
 * `initialOpen`. One Collapsible per body is that, exactly, and it keeps the swap mechanical: the
 * call sites already pass `key`, `title` and `initialOpen` and nothing else.
 *
 * `Panel` is the bordered box around them, with WP's optional `header`.
 */

export interface PanelProps extends React.ComponentProps<"div"> {
  header?: React.ReactNode
}

function Panel({ header, className, children, ...props }: PanelProps) {
  return (
    <div
      data-slot="panel"
      className={cn("border-border bg-card rounded-md border", className)}
      {...props}
    >
      {header && (
        <h2 className="border-border text-ink border-b px-4 py-3 text-sm font-medium">
          {header}
        </h2>
      )}
      {children}
    </div>
  )
}

export interface PanelBodyProps extends Omit<React.ComponentProps<"div">, "title"> {
  title?: React.ReactNode
  /** WP's default is open. Both call sites pass `false`. */
  initialOpen?: boolean
}

function PanelBody({
  title,
  initialOpen = true,
  className,
  children,
  ...props
}: PanelBodyProps) {
  // No title means no toggle in WordPress either - the body is simply always shown.
  if (!title) {
    return (
      <div
        data-slot="panel-body"
        className={cn("border-border border-b px-4 py-3 last:border-b-0", className)}
        {...props}
      >
        {children}
      </div>
    )
  }

  return (
    <CollapsiblePrimitive.Root
      defaultOpen={initialOpen}
      data-slot="panel-body"
      className={cn("border-border border-b last:border-b-0", className)}
    >
      <CollapsiblePrimitive.Trigger className="text-ink hover:bg-accent focus-visible:ring-ring flex w-full items-center justify-between gap-2 px-4 py-3 text-left text-sm font-medium focus-visible:outline-none focus-visible:ring-2 [&[data-state=open]>svg]:rotate-180">
        {title}
        <ChevronDownIcon
          aria-hidden="true"
          className="text-ink-muted size-4 shrink-0 transition-transform duration-200"
        />
      </CollapsiblePrimitive.Trigger>
      <CollapsiblePrimitive.Content className="overflow-hidden">
        <div className="px-4 pb-4">{children}</div>
      </CollapsiblePrimitive.Content>
    </CollapsiblePrimitive.Root>
  )
}

export { Panel, PanelBody }