import type { ComponentType, CSSProperties } from 'react'
import { NavLink, Outlet, useLocation } from 'react-router-dom'
import {
  ClipboardList,
  Crosshair,
  Layers,
  LogOut,
  Radar,
  Scale,
  Settings as SettingsIcon,
  ShieldCheck,
  Users,
} from 'lucide-react'
import { useAuth } from '../lib/useAuth'

type Icon = ComponentType<{ size?: number; className?: string; style?: CSSProperties }>
type NavItem = { to: string; label: string; icon: Icon }
type Tool = {
  key: string
  name: string
  tagline: string
  accent: string
  basePath: string
  icon: Icon
  match: (path: string) => boolean
  nav: NavItem[]
}

// The three tools under the missionMATCH umbrella. The switcher routes between them; each owns its
// accent and its own nav. missionMATCH (gold) is the home tool and the default after login.
const TOOLS: Tool[] = [
  {
    key: 'mission',
    name: 'missionMATCH',
    tagline: 'Command Center',
    accent: 'var(--color-gold)',
    basePath: '/command',
    icon: Radar,
    match: (p) => p === '/' || p.startsWith('/command') || p.startsWith('/compliance'),
    nav: [
      { to: '/command', label: 'Command Center', icon: Radar },
      { to: '/command/candidates', label: 'Candidates', icon: Users },
      { to: '/compliance', label: 'Compliance', icon: Scale },
    ],
  },
  {
    key: 'screen',
    name: 'screenMATCH',
    tagline: 'Qualification',
    accent: 'var(--color-screen)',
    basePath: '/screen',
    icon: Crosshair,
    match: (p) => p.startsWith('/screen') || p.startsWith('/requirements') || p.startsWith('/evaluate'),
    nav: [
      { to: '/screen', label: 'Screen Candidate', icon: Crosshair },
      { to: '/requirements', label: 'Opportunities', icon: ClipboardList },
    ],
  },
  {
    key: 'slate',
    name: 'slateMATCH',
    tagline: 'Proposal Slates',
    accent: 'var(--color-slate-accent)',
    basePath: '/slate',
    icon: Layers,
    match: (p) => p.startsWith('/slate'),
    nav: [{ to: '/slate', label: 'Candidate Slate', icon: Layers }],
  },
]

function activeTool(path: string): Tool {
  return TOOLS.find((t) => t.match(path)) ?? TOOLS[0]
}

// Shared and legacy routes belong to no tool; give them their own header title so it never reads the
// fallback tool's first nav label (for example the Settings page must not show "Command Center").
const SHARED_TITLES: Record<string, string> = {
  '/settings': 'Settings',
  '/pipeline': 'Talent Pipeline',
  '/dashboard': 'Dashboard',
}

function isSharedPath(path: string): boolean {
  return path in SHARED_TITLES
}

function headerTitle(tool: Tool, path: string): string {
  if (SHARED_TITLES[path]) return SHARED_TITLES[path]
  const item = tool.nav.find((n) => (path === n.to ? true : path.startsWith(n.to) && n.to !== tool.basePath))
  return item?.label ?? tool.nav[0]?.label ?? tool.name
}

export function AppShell() {
  const { pathname } = useLocation()
  const { principal, logout } = useAuth()
  const tool = activeTool(pathname)
  // On a shared or legacy route no tool is truly active, so no tool chip lights and the header stays
  // neutral rather than borrowing the fallback tool's identity.
  const shared = isSharedPath(pathname)

  return (
    <div className="grid h-full grid-cols-[248px_1fr]">
      <aside className="flex flex-col border-r border-line/70 bg-navy-950/70 backdrop-blur">
        <div className="flex items-center gap-2.5 px-5 py-5">
          <span className="grid size-9 place-items-center rounded-lg bg-gradient-to-br from-blue to-navy-700 text-gold">
            <ShieldCheck size={20} />
          </span>
          <div className="leading-tight">
            <div className="text-[15px] font-extrabold tracking-tight">
              mission<span className="text-gold">MATCH</span>
              <span className="align-super text-[9px]">™</span>
            </div>
            <div className="text-[10px] uppercase tracking-[0.16em] text-faint">Mission Workforce</div>
          </div>
        </div>

        {/* Tool switcher: one chip per tool, the active tool wears its accent. */}
        <div className="mx-3 mb-2 space-y-1 rounded-xl border border-line/60 bg-navy-900/50 p-1.5">
          {TOOLS.map((t) => {
            const isActive = t.key === tool.key && !shared
            return (
              <NavLink
                key={t.key}
                to={t.basePath}
                className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-semibold transition-colors"
                style={{
                  background: isActive ? 'color-mix(in srgb, ' + t.accent + ' 16%, transparent)' : 'transparent',
                  color: isActive ? 'var(--color-ink)' : 'var(--color-muted)',
                  boxShadow: isActive ? 'inset 2px 0 0 0 ' + t.accent : 'none',
                }}
              >
                <t.icon size={16} style={{ color: t.accent }} />
                {t.name}
              </NavLink>
            )
          })}
        </div>

        <nav className="mt-1 flex-1 space-y-0.5 px-3">
          <div className="px-3 pb-1 pt-2 text-[10px] font-bold uppercase tracking-[0.16em] text-faint">
            {tool.tagline}
          </div>
          {tool.nav.map(({ to, label, icon: ItemIcon }) => (
            <NavLink
              key={to}
              to={to}
              end={to === tool.basePath}
              className={({ isActive }) =>
                `flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                  isActive ? 'text-ink' : 'text-muted hover:bg-navy-800/60 hover:text-ink'
                }`
              }
              style={({ isActive }) =>
                isActive
                  ? { background: 'color-mix(in srgb, ' + tool.accent + ' 15%, transparent)', boxShadow: 'inset 2px 0 0 0 ' + tool.accent }
                  : undefined
              }
            >
              <ItemIcon size={17} />
              {label}
            </NavLink>
          ))}
        </nav>

        <NavLink
          to="/settings"
          className={({ isActive }) =>
            `mx-3 mb-2 flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
              isActive ? 'bg-navy-800/60 text-ink' : 'text-muted hover:bg-navy-800/60 hover:text-ink'
            }`
          }
        >
          <SettingsIcon size={17} /> Settings
        </NavLink>
      </aside>

      <div className="flex min-w-0 flex-col">
        <header className="flex items-center justify-between border-b border-line/70 bg-navy-950/40 px-6 py-3.5 backdrop-blur">
          <div className="flex items-center gap-3">
            <span className="h-7 w-1.5 rounded-full" style={{ background: shared ? 'var(--color-line)' : tool.accent }} />
            <div>
              <h1 className="text-lg font-bold tracking-tight">{headerTitle(tool, pathname)}</h1>
              <p className="text-xs text-faint">{shared ? 'missionMATCH' : `${tool.name} · ${tool.tagline}`}</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <span className="rounded-full border border-line/70 px-3 py-1 text-[11px] font-semibold text-muted">
              FIPS 140-3 • RLS isolated
            </span>
            {principal && (
              <span className="rounded-full bg-blue/20 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-blue-soft">
                {principal.role}
              </span>
            )}
            <button
              onClick={() => void logout()}
              title="Sign out"
              className="grid size-8 place-items-center rounded-md border border-line/70 text-muted hover:border-risk/60 hover:text-risk"
            >
              <LogOut size={15} />
            </button>
          </div>
        </header>
        <main className="min-h-0 flex-1 overflow-y-auto p-6">
          <Outlet />
        </main>
      </div>
    </div>
  )
}