import { KernelMark } from '@app/components/brand'
import { useT } from '@app/i18n'
import { getRegion, toggleTheme, useTheme } from '@app/lib'
import { IconMoon as Moon, IconSun as Sun } from '@tabler/icons-react'
import { type ReactNode, useEffect } from 'react'
import { Link } from 'react-router-dom'

export interface AuthShellProps {
  /** Breadcrumb current segment, e.g. "SIGN IN". */
  current: string
  /** Mono caption above the status row, unique per screen. */
  hint: string
  children: ReactNode
}

const mark = 'pointer-events-none absolute size-[18px] border-border'
const markTL = 'left-4 top-4 sm:left-6 sm:top-6 lg:left-9 lg:top-9'
const markTR = 'right-4 top-4 sm:right-6 sm:top-6 lg:right-9 lg:top-9'
const markBL = 'bottom-4 left-4 sm:bottom-6 sm:left-6 lg:bottom-9 lg:left-9'
const markBR = 'bottom-4 right-4 sm:bottom-6 sm:right-6 lg:bottom-9 lg:right-9'
const crumbSep = 'font-mono text-[10px] text-border'

/** Full-viewport chrome shared by all auth screens. */
export function AuthShell({ current, hint, children }: AuthShellProps) {
  const { t } = useT()
  const theme = useTheme()
  const region = getRegion()

  // Each auth screen is a full document: keep the tab title in step with the
  // active step and the interface language (current is already localized).
  useEffect(() => {
    document.title = `${current} · ${t('common.app.name')}`
  }, [current, t])
  return (
    <main className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background px-4 py-10 sm:px-8 lg:p-6">
      <div
        aria-hidden
        className="pointer-events-none absolute left-1/2 top-1/2 h-[400px] w-[340px] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(closest-side,rgba(255,132,0,0.15),rgba(255,132,0,0))] sm:h-[480px] sm:w-[620px] lg:h-[600px] lg:w-[900px]"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent via-55% to-black/[0.04] dark:to-white/[0.05]"
      />

      <div aria-hidden className={`${mark} ${markTL} border-l border-t`} />
      <div aria-hidden className={`${mark} ${markTR} border-r border-t`} />
      <div aria-hidden className={`${mark} ${markBL} border-b border-l`} />
      <div aria-hidden className={`${mark} ${markBR} border-b border-r`} />

      <nav
        aria-label={t('auth.shell.breadcrumb')}
        className="absolute left-8 top-9 hidden items-center gap-2 font-mono text-[10px] tracking-[1.2px] sm:flex lg:left-[70px]"
      >
        <KernelMark size={14} radius={4} />
        <Link to="/" className="font-bold text-foreground">
          GitDataAI
        </Link>
        <span className={crumbSep}>/</span>
        <span className="text-muted-foreground">AUTH</span>
        <span className={crumbSep}>/</span>
        <span className="font-bold text-warning-foreground">{current}</span>
      </nav>

      <button
        type="button"
        onClick={toggleTheme}
        aria-label={theme === 'dark' ? t('auth.shell.switchToLight') : t('auth.shell.switchToDark')}
        className="absolute right-[40px] top-[16px] z-20 flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring sm:right-[52px] sm:top-[20px] lg:right-[60px] lg:top-[30px]"
      >
        {theme === 'dark' ? <Sun size={15} aria-hidden /> : <Moon size={15} aria-hidden />}
      </button>

      <div className="relative z-10 flex w-full justify-center">{children}</div>

      <div className="pointer-events-none absolute inset-x-0 bottom-[39px] flex flex-col items-center gap-[10px] px-4">
        <p className="text-center font-mono text-[10px] leading-relaxed tracking-[1.2px] text-muted-foreground">
          {hint}
        </p>
        <p className="flex items-center gap-2.5 font-mono text-[11px] tracking-[0.5px] text-muted-foreground">
          <span>{t('auth.shell.region', { region }).toUpperCase()}</span>
          <span className="text-border">·</span>
          <span>© 2026 GitDataAI</span>
        </p>
      </div>
    </main>
  )
}