import type { ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { Moon, Sun } from 'lucide-react'
import { getRegion, toggleTheme, useTheme } from '@/shared/lib'
import { KernelMark } from './kernel-mark'

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 edgeLabel =
  'pointer-events-none absolute top-1/2 hidden rotate-90 font-mono text-[10px] tracking-[1.6px] text-muted-foreground xl:block'
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 theme = useTheme()
  const region = getRegion()
  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`} />

      <div aria-hidden className={`${edgeLabel} left-10 -translate-y-1/2`}>
        AUTH · v4.2.0
      </div>
      <div aria-hidden className={`${edgeLabel} right-10 -translate-y-1/2`}>
        TLS 1.3 · TOTP-SHA1
      </div>

      <nav
        aria-label="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="/app/@me" 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' ? 'Switch to light theme' : 'Switch to dark theme'}
        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 className="size-[7px] shrink-0 rounded-full bg-success-foreground" aria-hidden />
          <span>ALL SYSTEMS OPERATIONAL</span>
          <span className="hidden text-border sm:inline">·</span>
          <span className="hidden sm:inline">REGION {region}</span>
          <span className="text-border">·</span>
          <span>© 2026 GitDataAI</span>
        </p>
      </div>
    </main>
  )
}