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

type Item = { to: string; label: string; icon: ComponentType<{ size?: number; className?: string }> }

const NAV: Item[] = [
  { to: '/', label: 'Dashboard', icon: LayoutDashboard },
  { to: '/screen', label: 'Screen Candidate', icon: Crosshair },
  { to: '/requirements', label: 'Opportunities', icon: ClipboardList },
  { to: '/candidates', label: 'Candidates', icon: Users },
  { to: '/slate', label: 'Candidate Slate', icon: Layers },
  { to: '/pipeline', label: 'Talent Pipeline', icon: GitBranch },
  { to: '/compliance', label: 'Compliance', icon: Scale },
  { to: '/command-center', label: 'Command Center', icon: Radar },
  { to: '/settings', label: 'Settings', icon: Settings },
]

function title(path: string): string {
  const m = NAV.find((n) => (n.to === '/' ? path === '/' : path.startsWith(n.to)))
  return m?.label ?? 'missionMATCH'
}

export function AppShell() {
  const { pathname } = useLocation()
  const { principal, logout } = useAuth()
  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>

        <nav className="mt-2 flex-1 space-y-0.5 px-3">
          {NAV.map(({ to, label, icon: Icon }) => (
            <NavLink
              key={to}
              to={to}
              end={to === '/'}
              className={({ isActive }) =>
                `flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                  isActive
                    ? 'bg-blue/15 text-ink shadow-[inset_2px_0_0_0_var(--color-gold)]'
                    : 'text-muted hover:bg-navy-800/60 hover:text-ink'
                }`
              }
            >
              <Icon size={17} />
              {label}
            </NavLink>
          ))}
        </nav>

        <div className="m-3 rounded-xl border border-line/60 bg-gradient-to-br from-navy-800/80 to-navy-950 p-3.5">
          <div className="flex items-center gap-2 text-[11px] font-bold uppercase tracking-widest text-gold">
            <Radar size={14} /> Mission Readiness™
          </div>
          <p className="mt-1.5 text-xs leading-relaxed text-muted">
            “Intelligence that connects people to missions they can execute.”
          </p>
        </div>
      </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>
            <h1 className="text-lg font-bold tracking-tight">{title(pathname)}</h1>
            <p className="text-xs text-faint">Workforce and Proposal Staffing Intelligence</p>
          </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>
  )
}