import { useT } from '@app/i18n'
import { IconX as X } from '@tabler/icons-react'
import { type ReactNode, useEffect, useId, useRef } from 'react'

/**
 * Feature-local dialog chrome (overlay + panel + Escape/outside-click close),
 * matching `shared/ui/form-modal`'s look. It exists because the issue forms need
 * multi-column pickers that the config-driven `FormModal` cannot lay out.
 */
export function Dialog({
  title,
  description,
  open,
  onClose,
  width = 'max-w-[560px]',
  panelClassName = '',
  header,
  children,
  footer,
}: {
  title: string
  description?: string
  open: boolean
  onClose: () => void
  width?: string
  /** Extra classes for the panel (feature-specific chrome). */
  panelClassName?: string
  /** Replaces the default title block; the close button and the a11y name stay. */
  header?: ReactNode
  children: ReactNode
  footer?: ReactNode
}) {
  const { t } = useT()
  const panel = useRef<HTMLDivElement>(null)
  const closeRef = useRef(onClose)
  const titleId = useId()
  const descriptionId = useId()

  useEffect(() => {
    closeRef.current = onClose
  }, [onClose])

  useEffect(() => {
    if (!open) return
    const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
    const previousOverflow = document.body.style.overflow
    document.body.style.overflow = 'hidden'
    const frame = requestAnimationFrame(() => {
      const firstField = panel.current?.querySelector<HTMLElement>(
        'input:not([disabled]), textarea:not([disabled]), select:not([disabled])',
      )
      ;(firstField ?? panel.current)?.focus()
    })
    const onKey = (event: KeyboardEvent) => {
      if (event.defaultPrevented) return
      if (event.key === 'Escape') {
        event.preventDefault()
        closeRef.current()
      }
      if (event.key !== 'Tab') return
      const controls = Array.from(
        panel.current?.querySelectorAll<HTMLElement>(
          'button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), a[href], [tabindex="0"]',
        ) ?? [],
      ).filter((element) => element.getClientRects().length > 0)
      const first = controls[0]
      const last = controls.at(-1)
      if (!first) {
        event.preventDefault()
        panel.current?.focus()
        return
      }
      if (event.shiftKey && (document.activeElement === first || document.activeElement === panel.current)) {
        event.preventDefault()
        last?.focus()
      } else if (!event.shiftKey && document.activeElement === last) {
        event.preventDefault()
        first.focus()
      }
    }
    window.addEventListener('keydown', onKey)
    return () => {
      cancelAnimationFrame(frame)
      document.body.style.overflow = previousOverflow
      window.removeEventListener('keydown', onKey)
      if (previousFocus?.isConnected) previousFocus.focus()
    }
  }, [open])

  if (!open) return null
  return (
    <div
      className="issue-dialog-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
      onClick={onClose}
    >
      <div
        ref={panel}
        tabIndex={-1}
        role="dialog"
        aria-modal
        aria-labelledby={titleId}
        aria-describedby={description ? descriptionId : undefined}
        onClick={(event) => event.stopPropagation()}
        className={`issue-dialog flex max-h-[86vh] w-full flex-col rounded-xl border-2 border-shell-hairline bg-shell-surface p-5 shadow-xl ${width} ${panelClassName}`}
      >
        <div className="issue-dialog-header mb-3 flex items-start justify-between gap-3">
          {header ? (
            <>
              <h2 id={titleId} className="sr-only">
                {title}
              </h2>
              {header}
            </>
          ) : (
            <div className="min-w-0">
              <h2 id={titleId} className="text-[16px] font-semibold">
                {title}
              </h2>
              {description ? (
                <p id={descriptionId} className="mt-1 text-[12.5px] leading-[1.5] text-shell-ink-muted">
                  {description}
                </p>
              ) : null}
            </div>
          )}
          <button
            type="button"
            aria-label={t('issue.board.closeDialog')}
            onClick={onClose}
            className="issue-dialog-close shrink-0 text-shell-ink-muted transition-colors hover:text-shell-ink"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        <div className="issue-dialog-content min-h-0 flex-1 space-y-4 overflow-y-auto pr-1">{children}</div>
        {footer ? (
          <div className="issue-dialog-footer mt-4 flex shrink-0 items-center justify-end gap-2">{footer}</div>
        ) : null}
      </div>
    </div>
  )
}

export const fieldLabelClass = 'issue-field-label text-[12px] font-medium text-shell-ink'
export const fieldInputClass =
  'issue-field-input h-10 w-full rounded-md border-2 border-shell-hairline bg-shell-field px-3 text-[13.5px] text-shell-ink outline-none transition-colors focus:border-shell-ink'
export const smallInputClass =
  'issue-field-input issue-field-small h-7 w-full rounded-md border-2 border-shell-hairline bg-shell-field px-2 text-[12.5px] outline-none focus-visible:border-shell-ink'