import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { QueryClientProvider } from '@tanstack/react-query'
import { queryClient } from '@/lib/query-client'
import { Sidebar } from '@/components/layout/Sidebar'
import { NoDeviceSelected } from '@/components/layout/NoDeviceSelected'
import { DevicePanel } from '@/features/devices/components/DevicePanel'
import { useActiveDevice } from '@/hooks/use-active-device'

function FeaturePlaceholder({ label }: { label: string }) {
  const { isMonitoring } = useActiveDevice()
  if (!isMonitoring) return <NoDeviceSelected />
  return (
    <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
      {label} — coming soon
    </div>
  )
}

function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-full dark">
      <Sidebar />
      <main className="flex-1 overflow-hidden">{children}</main>
    </div>
  )
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <Layout>
          <Routes>
            <Route path="/" element={<DevicePanel />} />
            <Route path="/logcat" element={<FeaturePlaceholder label="Logcat" />} />
            <Route path="/network" element={<FeaturePlaceholder label="Network Inspector" />} />
            <Route path="/storage" element={<FeaturePlaceholder label="Storage" />} />
            <Route path="/files" element={<FeaturePlaceholder label="File Browser" />} />
            <Route path="/runtime" element={<FeaturePlaceholder label="Runtime Config" />} />
            <Route path="/settings" element={
              <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
                Settings — coming soon
              </div>
            } />
          </Routes>
        </Layout>
      </BrowserRouter>
    </QueryClientProvider>
  )
}
