import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
import {
  Overlay,
  OverlayClose,
  OverlayContent,
  OverlayDescription,
  OverlayFooter,
  OverlayHeader,
  OverlayTitle,
  OverlayTrigger,
} from './Overlay'

/* Dialog is a thin skin over the shared Overlay primitive — all behavior
   (focus trap, Escape, scroll lock, focus restore, aria wiring) lives there. */

export type DialogProps = {
  children: ReactNode
  open?: boolean
  defaultOpen?: boolean
  onOpenChange?: (open: boolean) => void
}

export function Dialog(props: DialogProps) {
  return <Overlay {...props} />
}

export function DialogTrigger(props: Parameters<typeof OverlayTrigger>[0]) {
  return <OverlayTrigger {...props} />
}

export function DialogContent({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <OverlayContent
      backdropClassName="dialog-backdrop"
      panelClassName="dialog-panel"
      closeButtonLabel="Close dialog"
      className={className}
    >
      {children}
    </OverlayContent>
  )
}

export function DialogHeader({ className, style, ...props }: HTMLAttributes<HTMLDivElement>) {
  const defaultStyle: CSSProperties = { marginBottom: 'var(--space-4)', ...style }
  return <OverlayHeader className={className} style={defaultStyle} {...props} />
}

export function DialogTitle({ className, style, ...props }: HTMLAttributes<HTMLHeadingElement>) {
  const defaultStyle: CSSProperties = {
    margin: 0,
    fontSize: 'var(--text-xl)',
    fontWeight: 700,
    color: 'var(--foreground)',
    letterSpacing: '-0.03em',
    ...style,
  }
  return <OverlayTitle className={className} style={defaultStyle} {...props} />
}

export function DialogDescription({ className, style, ...props }: HTMLAttributes<HTMLParagraphElement>) {
  const defaultStyle: CSSProperties = {
    margin: 0,
    fontSize: 'var(--text-sm)',
    color: 'var(--muted-foreground)',
    lineHeight: 1.5,
    ...style,
  }
  return <OverlayDescription className={className} style={defaultStyle} {...props} />
}

export function DialogFooter({ className, style, ...props }: HTMLAttributes<HTMLDivElement>) {
  const defaultStyle: CSSProperties = { marginTop: 'var(--space-6)', ...style }
  return <OverlayFooter className={className} style={defaultStyle} {...props} />
}

export function DialogClose(props: Parameters<typeof OverlayClose>[0]) {
  return <OverlayClose {...props} />
}