import { useState, type ComponentType } from 'react'
import { NavLink, Outlet } from 'react-router'
import {
  IconActivityHeartbeat,
  IconBooks,
  IconDownload,
  IconExternalLink,
  IconInfoCircle,
  IconLayoutDashboard,
  IconMap2,
  IconMenu2,
  IconRobot,
  IconWifiOff,
  IconX,
  type IconProps,
} from '@tabler/icons-react'
import { useLang } from '../i18n/LanguageContext'
import type { TranslationKey } from '../i18n/translations'
import { LanguageSwitcher } from './LanguageSwitcher'

const TCP_URL = 'https://thecyberprepper.com/'

interface NavItem {
  to: string
  labelKey: TranslationKey
  icon: ComponentType<IconProps>
}

const NAV: NavItem[] = [
  { to: '/', labelKey: 'nav.dashboard', icon: IconLayoutDashboard },
  { to: '/knowledge', labelKey: 'nav.knowledge', icon: IconBooks },
  { to: '/assistant', labelKey: 'nav.assistant', icon: IconRobot },
  { to: '/downloads', labelKey: 'nav.downloads', icon: IconDownload },
  { to: '/maps', labelKey: 'nav.maps', icon: IconMap2 },
  { to: '/about', labelKey: 'nav.about', icon: IconInfoCircle },
]

export function Layout() {
  const { t, lang } = useLang()
  const [menuOpen, setMenuOpen] = useState(false)
  const localLabel = lang === 'lt' ? 'Tik vietiniame tinkle' : 'Local network only'

  return (
    <div className="min-h-screen bg-arka-bg text-arka-text">
      {menuOpen && (
        <button
          type="button"
          className="fixed inset-0 z-40 bg-black/70 backdrop-blur-sm md:hidden"
          aria-label={lang === 'lt' ? 'Uždaryti navigaciją' : 'Close navigation'}
          onClick={() => setMenuOpen(false)}
        />
      )}

      <aside
        className={`sidebar-grid fixed inset-y-0 left-0 z-50 flex w-[17.5rem] flex-col border-r border-arka-border bg-arka-surface/95 backdrop-blur-xl transition-transform duration-300 md:translate-x-0 ${
          menuOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
        aria-label={lang === 'lt' ? 'Pagrindinė navigacija' : 'Primary navigation'}
      >
        <div className="relative flex items-center gap-3 border-b border-arka-border px-5 py-5">
          <div className="relative flex h-11 w-11 items-center justify-center rounded-xl border border-arka-accent/30 bg-arka-accent/10 shadow-[0_0_30px_rgba(190,242,100,0.08)]">
            <img src="/arka.svg" alt="" className="h-8 w-8" />
            <span className="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full border-2 border-arka-surface bg-arka-online" />
          </div>
          <div className="min-w-0 leading-tight">
            <div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-arka-accent">
              The Cyber Prepper
            </div>
            <div className="mt-1 text-lg font-bold tracking-[0.08em] text-white">A.R.K.A.</div>
          </div>
          <button
            type="button"
            data-testid="mobile-menu-close"
            className="ml-auto flex h-9 w-9 items-center justify-center rounded-lg text-arka-muted hover:bg-arka-surface-2 hover:text-white md:hidden"
            aria-label={lang === 'lt' ? 'Uždaryti meniu' : 'Close menu'}
            onClick={() => setMenuOpen(false)}
          >
            <IconX size={20} />
          </button>
        </div>

        <div className="mx-4 mt-4 flex items-center gap-2 rounded-xl border border-arka-online/20 bg-arka-online/8 px-3 py-2.5 text-xs text-arka-online">
          <IconWifiOff size={16} />
          <span className="font-medium">{localLabel}</span>
          <span className="ml-auto h-1.5 w-1.5 animate-pulse rounded-full bg-arka-online" />
        </div>

        <nav className="flex flex-1 flex-col gap-1.5 overflow-y-auto p-4">
          <div className="mb-1 px-3 text-[10px] font-semibold uppercase tracking-[0.2em] text-arka-muted/70">
            {lang === 'lt' ? 'Komandų centras' : 'Command center'}
          </div>
          {NAV.map(({ to, labelKey, icon: Icon }) => (
            <NavLink
              key={to}
              to={to}
              end={to === '/'}
              onClick={() => setMenuOpen(false)}
              className={({ isActive }) =>
                `group flex items-center gap-3 rounded-xl border px-3 py-2.5 text-sm font-medium transition-all ${
                  isActive
                    ? 'border-arka-accent/25 bg-arka-accent/10 text-white shadow-[inset_3px_0_0_var(--color-arka-accent)]'
                    : 'border-transparent text-arka-muted hover:border-arka-border hover:bg-arka-surface-2/70 hover:text-white'
                }`
              }
            >
              <Icon size={19} stroke={1.7} className="transition-colors group-hover:text-arka-accent" />
              {t(labelKey)}
            </NavLink>
          ))}
        </nav>

        <div className="border-t border-arka-border p-4">
          <a
            href={TCP_URL}
            target="_blank"
            rel="noreferrer"
            className="flex items-center justify-between rounded-xl border border-arka-border bg-arka-bg/60 px-3 py-2.5 text-xs text-arka-muted transition-colors hover:border-arka-accent/40 hover:text-white"
          >
            <span>
              <span className="block font-medium text-arka-text">The Cyber Prepper</span>
              <span className="mt-0.5 block text-[10px]">thecyberprepper.com</span>
            </span>
            <IconExternalLink size={15} />
          </a>
          <div className="mt-3 flex items-center gap-2 px-1 text-[10px] uppercase tracking-[0.16em] text-arka-muted/60">
            <IconActivityHeartbeat size={13} />
            A.R.K.A. node v0.2.0
          </div>
        </div>
      </aside>

      <div className="min-h-screen md:pl-[17.5rem]">
        <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-arka-border bg-arka-bg/82 px-4 backdrop-blur-xl sm:px-6 lg:px-8">
          <div className="flex min-w-0 items-center gap-3">
            <button
              type="button"
              data-testid="mobile-menu-open"
              className="flex h-9 w-9 flex-none items-center justify-center rounded-lg border border-arka-border bg-arka-surface text-arka-muted hover:text-white md:hidden"
              aria-label={lang === 'lt' ? 'Atidaryti meniu' : 'Open menu'}
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(true)}
            >
              <IconMenu2 size={20} />
            </button>
            <div className="min-w-0">
              <div className="truncate text-xs font-medium text-arka-text sm:text-sm">{t('app.tagline')}</div>
              <div className="mt-0.5 hidden items-center gap-1.5 text-[10px] uppercase tracking-[0.15em] text-arka-muted sm:flex">
                <span className="h-1.5 w-1.5 rounded-full bg-arka-online" />
                {lang === 'lt' ? 'Privatus autonominis mazgas' : 'Private autonomous node'}
              </div>
            </div>
          </div>
          <LanguageSwitcher />
        </header>

        <main className="mx-auto w-full max-w-[1500px] px-4 py-5 sm:px-6 sm:py-7 lg:px-8 lg:py-8">
          <Outlet />
        </main>
      </div>
    </div>
  )
}
