// shadcn Dialog — uses the native HTML <dialog> element. Honest V1:
// no Radix focus-trap, no portal magic. <dialog> handles modal stacking
// + ESC dismissal + backdrop click natively in modern browsers; we
// add the shadcn styling on top.
//
// Caller controls open state via the ref or via `open` prop. The
// imperative API (`dialogRef.current?.showModal()`) is the native
// path; we surface it as a uncontrolled wrapper for now.

import type { DialogHTMLAttributes, HTMLAttributes, ReactNode } from 'react'
import { cn } from '../cn'

export const Dialog = ({ className, children, ...props }: DialogHTMLAttributes<HTMLDialogElement>): ReactNode => (
  <dialog
    data-slot="dialog"
    className={cn(
      'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
      'w-full max-w-lg rounded-lg border bg-background text-foreground p-6 shadow-lg',
      'backdrop:bg-black/50 backdrop:backdrop-blur-sm',
      'open:animate-in open:fade-in-0 open:zoom-in-95',
      className,
    )}
    {...props}
  >
    {children}
  </dialog>
)

export const DialogHeader = ({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
  <div data-slot="dialog-header" className={cn('flex flex-col gap-1.5 text-left mb-4', className)} {...props} />
)

export const DialogTitle = ({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): ReactNode => (
  <h2 data-slot="dialog-title" className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
)

export const DialogDescription = ({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): ReactNode => (
  <p data-slot="dialog-description" className={cn('text-sm text-muted-foreground', className)} {...props} />
)

export const DialogFooter = ({ className, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
  <div data-slot="dialog-footer" className={cn('mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
)