import { Dialog as ArkDialog } from '@ark-ui/solid/dialog'
import { X } from 'lucide-solid'
import { Portal } from 'solid-js/web'
import { splitProps, type JSX } from 'solid-js'
import { cn } from '@/utils/cn'

export const Dialog = ArkDialog

export const DialogTrigger = (props: JSX.HTMLAttributes<HTMLButtonElement>) => {
  const [local, rest] = splitProps(props, ['class', 'children'])
  return (
    <ArkDialog.Trigger class={cn(local.class)} {...rest}>
      {local.children}
    </ArkDialog.Trigger>
  )
}

export const DialogBackdrop = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <Portal>
      <ArkDialog.Backdrop
        class={cn(
          'fixed inset-0 z-50 bg-black/70 backdrop-blur-sm',
          'data-[state=open]:animate-in data-[state=closed]:animate-out',
          'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',
          'data-[state=open]:duration-200 data-[state=closed]:duration-150',
          local.class,
        )}
        {...rest}
      />
    </Portal>
  )
}

export const DialogPositioner = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class', 'children'])
  return (
    <Portal>
      <ArkDialog.Positioner
        class={cn('fixed inset-0 z-50 flex items-center justify-center p-4', local.class)}
        {...rest}
      >
        {local.children}
      </ArkDialog.Positioner>
    </Portal>
  )
}

export const DialogContent = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class', 'children'])
  return (
    <ArkDialog.Content
      class={cn(
        'relative w-full max-w-2xl max-h-[85vh] overflow-hidden',
        'rounded-2xl bg-surface-container shadow-panel',
        'border border-outline-variant/15',
        'data-[state=open]:animate-in data-[state=closed]:animate-out',
        'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',
        'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',
        'data-[state=open]:duration-200 data-[state=closed]:duration-150',
        'focus:outline-none',
        local.class,
      )}
      {...rest}
    >
      {local.children}
    </ArkDialog.Content>
  )
}

export const DialogCloseTrigger = (props: JSX.HTMLAttributes<HTMLButtonElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <ArkDialog.CloseTrigger
      class={cn(
        'absolute right-4 top-4 z-10',
        'flex h-8 w-8 items-center justify-center rounded-lg',
        'bg-surface-high text-muted-fg',
        'hover:bg-surface-highest hover:text-fg',
        'transition-all duration-200',
        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/30',
        local.class,
      )}
      {...rest}
    >
      <X class="h-4 w-4" />
    </ArkDialog.CloseTrigger>
  )
}

export const DialogTitle = (props: JSX.HTMLAttributes<HTMLHeadingElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <ArkDialog.Title
      class={cn('text-xl font-semibold text-fg pr-8', local.class)}
      {...rest}
    />
  )
}

export const DialogDescription = (props: JSX.HTMLAttributes<HTMLParagraphElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <ArkDialog.Description
      class={cn('text-sm text-muted-fg mt-1', local.class)}
      {...rest}
    />
  )
}

export const DialogHeader = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <div class={cn('flex flex-col space-y-1.5 px-6 pt-6', local.class)} {...rest} />
  )
}

export const DialogBody = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <div class={cn('flex-1 overflow-y-auto px-6 py-4', local.class)} {...rest} />
  )
}

export const DialogFooter = (props: JSX.HTMLAttributes<HTMLDivElement>) => {
  const [local, rest] = splitProps(props, ['class'])
  return (
    <div
      class={cn('flex items-center justify-end gap-3 border-t border-outline-variant/15 px-6 py-4', local.class)}
      {...rest}
    />
  )
}
