import { useT } from '@app/i18n'
import { type Icon, IconExternalLink as SquareArrowOutUpRight, IconX as X } from '@tabler/icons-react'
import { Fragment, type ReactNode, useEffect, useRef, useState } from 'react'
import { Link } from 'react-router-dom'

export interface SettingsSection {
  id: string
  label: string
  /** Row glyph, mirroring the reference settings dialog. */
  icon?: Icon
  /** Rows sharing a group sit under one small caption. */
  group?: string
  /** Rows that leave the dialog for a full page instead of switching panes. */
  href?: string
}

export interface SettingsModalShellProps {
  /** Nav heading, e.g. 用户设置 / 社区设置. Also the dialog's accessible name. */
  title: string
  sections: SettingsSection[]
  active: string
  onSelect: (id: string) => void
  onClose: () => void
  children: ReactNode
  /** Replaces the section list while a section runs its own sub-navigation. */
  navOverride?: ReactNode
  /** Swap key for the content pane (defaults to the active section id). */
  contentToken?: string
}

/**
 * The large two-column settings overlay shared by every settings surface, so a
 * community's settings cannot drift away from the user's own in size or spacing.
 *
 * The backdrop deliberately does NOT close: these forms hold unsaved edits
 * across many sections, and click-away is far too lossy to be the dismiss path.
 */
export function SettingsModalShell({
  title,
  sections,
  active,
  onSelect,
  onClose,
  children,
  navOverride,
  contentToken,
}: SettingsModalShellProps) {
  const { t } = useT()
  useEffect(() => {
    const onKey = (event: KeyboardEvent) => {
      if (event.key === 'Escape') onClose()
    }
    window.addEventListener('keydown', onKey)
    return () => window.removeEventListener('keydown', onKey)
  }, [onClose])

  const activeSection =
    sections.find((item) => item.id === active && !item.href) ?? sections.find((item) => !item.href) ?? sections[0]

  return (
    <div className="workspace-overlay fixed inset-0 z-50 flex items-center justify-center p-6">
      <div role="dialog" aria-modal aria-label={title} className="settings-dialog text-shell-ink">
        <nav className="settings-nav" aria-label={t('ui.settingsCategories', { title })}>
          <FadeSwap token={navOverride ? 'sub' : 'sections'} className="settings-nav-body">
            {navOverride ?? (
              <>
                <p className="settings-nav-title">{title}</p>
                {sections.map((item, index) => {
                  const Icon = item.icon
                  const opensGroup = Boolean(item.group) && item.group !== sections[index - 1]?.group
                  return (
                    <Fragment key={item.id}>
                      {opensGroup ? <p className="settings-nav-caption">{item.group}</p> : null}
                      {item.href ? (
                        <Link
                          to={item.href}
                          onClick={onClose}
                          className={`settings-nav-item ${item.id === 'danger' ? 'settings-nav-danger' : ''}`}
                        >
                          {Icon ? <Icon className="h-4 w-4 shrink-0" aria-hidden /> : null}
                          <span className="truncate">{item.label}</span>
                          <SquareArrowOutUpRight
                            className="ml-auto h-3.5 w-3.5 shrink-0 text-shell-ink-muted"
                            aria-hidden
                          />
                        </Link>
                      ) : (
                        <button
                          type="button"
                          aria-current={active === item.id ? 'page' : undefined}
                          onClick={() => onSelect(item.id)}
                          className={`settings-nav-item ${item.id === 'danger' ? 'settings-nav-danger' : ''}`}
                        >
                          {Icon ? <Icon className="h-4 w-4 shrink-0" aria-hidden /> : null}
                          <span className="truncate">{item.label}</span>
                        </button>
                      )}
                    </Fragment>
                  )
                })}
              </>
            )}
          </FadeSwap>
        </nav>
        <div className="settings-pane">
          <header className="settings-pane-header">
            <h2
              key={activeSection?.id}
              className={`settings-swap-in ${activeSection?.id === 'danger' ? 'text-[#f23f43]' : ''}`}
            >
              {activeSection?.label ?? title}
            </h2>
            <button
              type="button"
              aria-label={t('ui.closeSettings')}
              onClick={onClose}
              className="settings-close workspace-icon-button"
            >
              <X className="h-5 w-5" />
            </button>
          </header>
          <FadeSwap token={contentToken ?? active} className="settings-content">
            {children}
          </FadeSwap>
        </div>
      </div>
    </div>
  )
}

/**
 * Cross-fades a swapped subtree: the outgoing tree is parked on top while the
 * replacement fades in, so the pane never flashes empty and never shifts.
 */
function FadeSwap({ token, className, children }: { token: string; className?: string; children: ReactNode }) {
  const [current, setCurrent] = useState<{ token: string; node: ReactNode }>({ token, node: children })
  const [outgoing, setOutgoing] = useState<{ token: string; node: ReactNode } | null>(null)
  const frame = useRef<HTMLDivElement>(null)
  const shown = useRef({ token, node: children })
  const exitTimer = useRef<number | undefined>(undefined)

  useEffect(() => {
    const previous = shown.current
    shown.current = { token, node: children }
    setCurrent(shown.current)
    // Same view: only refresh the children (async data, edits) — no fade.
    if (token === previous.token) return
    setOutgoing(previous)
    frame.current?.scrollTo({ top: 0 })
    window.clearTimeout(exitTimer.current)
    exitTimer.current = window.setTimeout(() => setOutgoing(null), 220)
  }, [token, children])

  useEffect(() => () => window.clearTimeout(exitTimer.current), [])

  return (
    <div ref={frame} className={`settings-swap ${className ?? ''}`}>
      {outgoing ? (
        <div key={outgoing.token} className="settings-swap-out" aria-hidden>
          {outgoing.node}
        </div>
      ) : null}
      <div key={current.token} className="settings-swap-in">
        {current.node}
      </div>
    </div>
  )
}