import { useState } from 'react'
import Sidebar from './components/Sidebar'
import TopBar from './components/TopBar'
import StatusCards from './components/StatusCards'
import MiddleRow from './components/MiddleRow'
import BottomRow from './components/BottomRow'

function App() {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const sidebarWidth = sidebarCollapsed ? 64 : 200

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

      <main
        className="h-screen overflow-hidden"
        style={{ marginLeft: `${sidebarWidth}px`, width: `calc(100vw - ${sidebarWidth}px)` }}
      >
        <TopBar />

        <section
          className="w-full overflow-y-auto"
          style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 32px 24px' }}
        >
          <div className="flex w-full max-w-none flex-col gap-0">
            {/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
            <div className="relative w-full overflow-hidden" style={{ height: '260px' }}>
              <img
                src="/archnest-hero-banner.png"
                alt="ArchNest Banner"
                className="absolute inset-0 h-full w-full"
                style={{
                  objectFit: 'cover',
                  objectPosition: 'center 35%',
                  maskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
                  WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
                }}
                onError={(e) => {
                  const target = e.currentTarget
                  target.style.display = 'none'
                  target.parentElement!.classList.add('bg-card')
                }}
              />
              {/* Side vignette so the rectangular image blends into the page edges */}
              <div
                className="pointer-events-none absolute inset-0"
                style={{
                  background:
                    'radial-gradient(ellipse 75% 100% at center, transparent 55%, var(--color-page) 100%)',
                }}
              />
              {/* KPI cards positioned so their bottom edge aligns with banner bottom */}
              <div className="absolute bottom-0 left-0 right-0 z-10 px-4">
                <StatusCards />
              </div>
            </div>

            {/* 24px breathing room between KPI row and middle row */}
            <div style={{ height: '24px' }} />

            {/* Middle Row */}
            <MiddleRow />

            {/* Gap */}
            <div style={{ height: '24px' }} />

            {/* Bottom Row */}
            <BottomRow />
          </div>
        </section>
      </main>
    </div>
  )
}

export default App