import { Component, For, onMount, Show } from 'solid-js'
import { Link, Outlet, useLocation } from '@tanstack/solid-router'
import { RadioTower } from 'lucide-solid'
import { refreshMe } from '../../lib/auth'
import { permissions } from '../../lib/permissions'
import { ThemeToggle } from '../../components/ui'

interface NavItem {
  to: string
  idx: string
  label: string
  activePaths?: string[]
  adminOnly?: boolean
}

const NAV: NavItem[] = [
  { to: '/', idx: '01', label: '概览' },
  { to: '/rooms', idx: '02', label: '房间' },
  { to: '/watch', idx: '03', label: '观看', activePaths: ['/watch', '/room'] },
  { to: '/publish', idx: '04', label: '推流' },
  { to: '/users', idx: '05', label: '用户', adminOnly: true },
]

export const Layout: Component = () => {
  const location = useLocation()

  onMount(async () => {
    await refreshMe()
    await permissions.refresh()
  })

  const isActive = (item: NavItem) => (item.activePaths ?? [item.to]).includes(location().pathname)

  const navLinks = (h: string) => (
    <>
      <For each={NAV}>
        {(item) => (
          <Show when={!item.adminOnly || permissions.can('user:manage')}>
            <Link
              to={item.to}
              class={`nav-link flex ${h} shrink-0 items-center gap-1.5 font-mono text-[11px] tracking-[0.16em] uppercase whitespace-nowrap transition-colors ${
                isActive(item)
                  ? 'is-active text-foreground dark:text-primary'
                  : 'text-muted-foreground hover:text-foreground'
              }`}
            >
              <span class="text-[9px] opacity-50">{item.idx}</span>
              {item.label}
            </Link>
          </Show>
        )}
      </For>
    </>
  )

  return (
    <div class="relative min-h-screen">
      <div class="atmo-grid" aria-hidden="true" />
      <div class="atmo-glow atmo-glow-a" aria-hidden="true" />
      <div class="atmo-glow atmo-glow-b" aria-hidden="true" />
      <div class="scanline-sweep" aria-hidden="true" />
      <div class="noise" aria-hidden="true" />

      <header class="sticky top-0 z-40 border-b border-line/80 bg-background/85 backdrop-blur-md">
        <div
          class="absolute inset-x-0 top-0 h-[3px]"
          style="background: linear-gradient(90deg, hsl(var(--acid-lime)), hsl(var(--acid-cyan)) 38%, hsl(var(--acid-violet)) 70%, hsl(var(--acid-magenta)))"
        />
        <div class="mx-auto flex h-12 max-w-[1400px] items-center gap-4 px-4 sm:px-6">
          <Link to="/" class="flex min-w-0 items-center gap-2.5" aria-label="首页">
            <span class="size-2 shrink-0 bg-acid-lime pulse-acid" />
            <span class="display text-base whitespace-nowrap">LIVE·SFU</span>
            <span class="micro-label hidden text-muted-foreground md:inline">fan-out console</span>
          </Link>

          <nav class="ml-auto hidden items-center gap-5 md:flex" aria-label="主导航">
            {navLinks('h-6')}
          </nav>

          <div class="ml-auto flex shrink-0 items-center gap-2 md:ml-0">
            <Show when={permissions.isAuthed()}>
              <span class="hidden items-center gap-1.5 border border-line bg-card/60 px-2 py-1 sm:flex">
                <span class="size-1.5 bg-acid-cyan" />
                <span class="font-mono text-[10px] tracking-[0.14em] uppercase text-muted-foreground">
                  {permissions.role()}
                </span>
              </span>
            </Show>
            <ThemeToggle />
            <Show when={!permissions.isAuthed()}>
              <Link to="/login" class="btn btn-primary btn-sm">
                登录
              </Link>
            </Show>
          </div>
        </div>

        <nav class="overflow-x-auto border-t border-line/60 [scrollbar-width:none] md:hidden [&::-webkit-scrollbar]:hidden" aria-label="主导航（移动端）">
          <div class="mx-auto flex max-w-[1400px] items-center gap-4 px-4">
            {navLinks('h-10')}
          </div>
        </nav>
      </header>

      <main class="relative z-10">
        <Outlet />
      </main>

      <footer class="relative z-10 mt-16 border-t border-line/80 bg-background/70 backdrop-blur-sm">
        <div class="mx-auto flex max-w-[1400px] flex-col gap-1.5 px-4 py-4 font-mono text-[10px] tracking-[0.18em] uppercase text-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:px-6">
          <span>Cloudflare Realtime · SRS · WHIP / WHEP / HLS / FLV</span>
          <span>live-sfu fan-out console — 一路推流 多端扇出</span>
        </div>
      </footer>
    </div>
  )
}