import { useState } from 'react'
import { Routes, Route, useLocation } from 'react-router-dom'
import Sidebar from './components/Sidebar'
import TopBar from './components/TopBar'
import Glance from './pages/Glance'
import Infrastructure from './pages/Infrastructure'
import BookNest from './pages/BookNest'
import Terminal from './pages/Terminal'
import Tunnels from './pages/Tunnels'
import Files from './pages/Files'
import Containers from './pages/Containers'
import RemoteDesktop from './pages/RemoteDesktop'
import HostMetrics from './pages/HostMetrics'
import Settings from './pages/Settings'
import Help from './pages/Help'
import Login from './pages/Login'
import Enrollment from './pages/Enrollment'
import MeshGate from './pages/MeshGate'
import { useAuth } from './lib/AuthContext'

function App() {
  const { status } = useAuth()

  if (status === 'loading') {
    return (
      <div className="flex h-screen w-screen items-center justify-center bg-page">
        <p style={{ color: '#7A7D85', fontSize: '13px' }}>Loading…</p>
      </div>
    )
  }
  if (status === 'needs-setup' || status === 'enrolling') return <Enrollment />
  if (status === 'logged-out') return <Login />
  if (status === 'needs-mesh') return <MeshGate />

  return <Dashboard />
}

function Dashboard() {
  const { user, meshStatus } = useAuth()
  const showMeshNotice = !!meshStatus && meshStatus.required && !meshStatus.verified && !meshStatus.overridden && user?.role !== 'admin'
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const sidebarWidth = sidebarCollapsed ? 64 : 200
  const location = useLocation()
  const showHero = location.pathname === '/infrastructure' || location.pathname === '/booknest'
  const heroPaddingTop = location.pathname === '/booknest' ? '70px' : '72px'
  const heroObjectPosition = location.pathname === '/booknest' ? '54% 8%' : 'center 5%'
  const topBarHeight = location.pathname === '/booknest' ? 72 : 56

  return (
    <div className="min-h-screen w-screen overflow-hidden bg-page">
      <Sidebar
        collapsed={sidebarCollapsed}
        onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
      />

      <main
        className="relative h-screen overflow-hidden"
        style={{ marginLeft: `${sidebarWidth}px`, width: `calc(100vw - ${sidebarWidth}px)` }}
      >
        {showHero && (
          <div className="pointer-events-none absolute left-0 right-0 top-0" style={{ height: '300px', zIndex: 0 }}>
            <img
              src="/archnest-hero-banner.png"
              alt=""
              className="absolute inset-0 h-full w-full"
              style={{
                objectFit: 'cover',
                objectPosition: heroObjectPosition,
                maskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
                WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
              }}
            />
            <div
              className="absolute inset-0"
              style={{
                background: 'radial-gradient(ellipse 70% 100% at center, transparent 40%, var(--color-page) 100%)',
              }}
            />
          </div>
        )}

        <div className="relative" style={{ zIndex: 20 }}>
          <TopBar />
        </div>

        {showMeshNotice && (
          <div
            className="relative flex items-center justify-center"
            style={{
              zIndex: 20,
              padding: '6px 16px',
              backgroundColor: 'rgba(230,126,34,0.1)',
              borderBottom: '1px solid rgba(230,126,34,0.2)',
              fontSize: '11px',
              color: '#E67E22',
            }}
          >
            Mesh setup is still in progress — an admin needs to finish verifying the network. Some features may be limited.
          </div>
        )}

        <section
          className="relative flex w-full flex-col overflow-hidden"
          style={{ height: `calc(100vh - ${topBarHeight}px)`, scrollbarWidth: 'none', padding: showHero ? `${heroPaddingTop} 24px 24px 24px` : '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
        >
          <Routes>
            <Route path="/" element={<Glance />} />
            <Route path="/infrastructure" element={<Infrastructure />} />
            <Route path="/booknest" element={<BookNest />} />
            <Route path="/terminal" element={<Terminal />} />
            <Route path="/tunnels" element={<Tunnels />} />
            <Route path="/files" element={<Files />} />
            <Route path="/containers" element={<Containers />} />
            <Route path="/remote-desktop" element={<RemoteDesktop />} />
            <Route path="/host-metrics" element={<HostMetrics />} />
            <Route path="/settings" element={<Settings />} />
            <Route path="/help" element={<Help />} />
          </Routes>
        </section>
      </main>
    </div>
  )
}

export default App