// @design-system: overlays/ActionDrawer

'use client';

/**
 * ActionDrawer — side panel for inline admin actions (vendor/user approve, suspend, etc.).
 *
 * Composed from the existing Drawer primitive (which wraps Radix Dialog).
 * Radix Dialog provides:
 *   - Focus trap on open.
 *   - Esc to close.
 *   - aria-labelledby wired between DrawerContent and DrawerTitle.
 *   - Portal rendering.
 *
 * CSRF: pass `csrfToken` to ActionDrawerContent — it renders a hidden
 * `<input name="_csrf">` inside the panel so forms within the slot
 * inherit the token without extra plumbing.
 *
 * @example
 * ```tsx
 * <ActionDrawer>
 *   <ActionDrawerTrigger asChild>
 *     <button>Suspend vendor</button>
 *   </ActionDrawerTrigger>
 *   <ActionDrawerContent
 *     title={t('suspend_vendor')}
 *     description={t('suspend_vendor_description')}
 *     csrfToken={csrfToken}
 *   >
 *     <ActionDrawerTitle>{t('suspend_vendor')}</ActionDrawerTitle>
 *     <form method="POST" action="/api/admin/vendors/123/suspend">
 *       <button type="submit">{t('confirm')}</button>
 *     </form>
 *   </ActionDrawerContent>
 * </ActionDrawer>
 * ```
 */

import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
} from '@/components/ui/overlays/Drawer';
import type { DrawerRootProps, DrawerSide } from '@/components/ui/overlays/Drawer';

// ─── Root + Trigger ───────────────────────────────────────────────────────────

/**
 * Root controller for admin action side panels.
 * Defaults side to 'end' (inline-end — left in RTL, right in LTR).
 * Passes side to the underlying Drawer so Root + Content use the same library.
 */
export function ActionDrawer({ side = 'end', ...props }: DrawerRootProps) {
  return <Drawer side={side} {...props} />;
}

/** Trigger element. Typically wraps an admin action button. */
export const ActionDrawerTrigger = DrawerTrigger;

/** Re-exported title for aria-labelledby wiring (Radix Dialog.Title). */
export const ActionDrawerTitle = DrawerTitle;

/** Close element — can wrap any button/icon. */
export const ActionDrawerClose = DrawerClose;

// ─── Content ─────────────────────────────────────────────────────────────────

export interface ActionDrawerContentProps {
  /**
   * Accessible title string — used for aria-labelledby wiring.
   * Should match the visible ActionDrawerTitle text.
   */
  title: string;
  /** Accessible description announced after the title. */
  description: string;
  /**
   * Which edge to slide from.
   * @default 'end' (inline-end — right in LTR, left in RTL)
   */
  side?: DrawerSide;
  /**
   * CSRF token. When provided, a hidden `<input name="_csrf">` is injected
   * so forms within the panel inherit the token automatically.
   */
  csrfToken?: string;
  /** Panel body: forms, confirm blocks, action lists. */
  children: ReactNode;
  /** Extra className on the panel surface. */
  className?: string;
  /** Extra className on the backdrop overlay. */
  overlayClassName?: string;
}

/**
 * ActionDrawerContent renders a side panel with:
 *   - CSRF hidden input (when token provided).
 *   - Structured body slot via children.
 *   - Focus trap + Esc close from Radix Dialog (via DrawerContent).
 */
export function ActionDrawerContent({
  title: _title,
  description,
  side = 'end',
  csrfToken,
  children,
  className,
  overlayClassName,
}: ActionDrawerContentProps) {
  return (
    <DrawerContent
      side={side}
      overlayClassName={overlayClassName}
      className={cn(
        'flex flex-col gap-0',
        'max-w-120 min-w-80',
        'bg-[var(--color-surface-card)]',
        'border-s border-[var(--color-border-default)]',
        className,
      )}
    >
      <DrawerDescription className="sr-only">{description}</DrawerDescription>
      {csrfToken && <input type="hidden" name="_csrf" value={csrfToken} />}
      <div className="flex flex-1 flex-col gap-4 overflow-y-auto p-6">{children}</div>
    </DrawerContent>
  );
}