import { Gauge, KeyRound, Landmark, MonitorSmartphone, PackageOpen, ShieldCheck } from 'lucide-react'
import { Link, NavLink, Outlet } from 'react-router-dom'
import { usePlatformAuth } from '../../auth/platform-auth'
import { brandConfig } from '../../site-config'
import { buildSupportPath } from '../../site-routes'
import { HyperTwistButton } from '../ui/HyperTwistButton'

const appLinks = [
  { to: '/app', label: 'Overview', icon: Gauge, end: true },
  { to: '/app/launch-status', label: 'Launch Status', icon: Landmark },
  { to: '/app/downloads', label: 'Downloads', icon: MonitorSmartphone },
  { to: '/app/browser-access', label: 'Browser Access', icon: PackageOpen },
  { to: '/app/account', label: 'Account', icon: KeyRound },
  { to: '/app/notices', label: 'Notices', icon: ShieldCheck },
] as const

export function AppShell() {
  const { user, logout, colorMode, toggleColorMode } = usePlatformAuth()

  return (
    <div className="app-shell">
      <aside className="app-sidebar">
        <div className="app-sidebar__brand">
          <img
            src="/branding/hypertwist-3d-symbol.png"
            alt="HyperTwist"
            className="app-sidebar__brand-image"
          />
          <div>
            <strong>{brandConfig.brandName}</strong>
            <p>Browser operator shell</p>
          </div>
        </div>
        <nav className="app-nav" aria-label="Operator routes">
          {appLinks.map((link) => {
            const Icon = link.icon
            return (
              <NavLink
                key={link.to}
                to={link.to}
                end={link.to === '/app'}
                className={({ isActive }) => `app-nav__link${isActive ? ' is-active' : ''}`}
              >
                <Icon size={18} />
                <span>{link.label}</span>
              </NavLink>
            )
          })}
        </nav>
        <div className="app-sidebar__footer">
          <div className="callout app-sidebar__status">
            <p className="status-pill status-pill--info">Desktop-first operator lane</p>
            <p>
              Use this protected shell for account, release, notices, and desktop-link pairing.
              Use the native Unreal runtime for actual simulator execution.
            </p>
            <ul className="list top-gap">
              <li><Link to="/app/launch-status">Protected launch status</Link></li>
              <li><Link to="/download">Public download guidance</Link></li>
              <li><Link to="/open-source-notices">Public notices</Link></li>
              <li><Link to={buildSupportPath('operator-access')}>Operator access support</Link></li>
            </ul>
          </div>
          <HyperTwistButton type="button" tone="ghost" className="button--full" onClick={toggleColorMode}>
            Switch to {colorMode === 'dark' ? 'light' : 'dark'} mode
          </HyperTwistButton>
          <HyperTwistButton type="button" tone="ghost" className="button--full" onClick={() => void logout()}>
            Log out
          </HyperTwistButton>
        </div>
      </aside>

      <div className="app-main-shell">
        <header className="app-topbar">
          <div>
            <p className="eyebrow">Operator access</p>
            <h1>HyperTwist dashboard</h1>
          </div>
          <div className="app-topbar__user">
            <strong>{user?.name || 'Operator'}</strong>
            <span>{user?.plan || 'free'} plan</span>
          </div>
        </header>
        <main className="app-main">
          <Outlet />
        </main>
      </div>
    </div>
  )
}
