import { Metadata, ResolvingMetadata } from 'next'
import { AppSidebar } from '@/app/app-sidebar'
import { MapComponent } from '@/components/map-component';
import { Timeline } from '@/app/tl';
import { WSProvider } from './ws-context'
import StatusBar from './status-bar'
import { getSiteConfigs } from '@/lib/fetchers';

type Props = {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}



export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const siteConfigs = await getSiteConfigs();
  return {
    title: siteConfigs.find((config: any) => config.key === 'site.name')?.value ?? "LiDAR",
    description: siteConfigs.find((config: any) => config.key === 'site.description')?.value ?? "LiDAR for Radar",
  }
}


export default function Page() {
  return (
    <div className="flex flex-row h-full">
      {/* Sidebar - hidden on screens smaller than lg (1024px) */}
      <div className="hidden lg:block">
        <AppSidebar />
      </div>
      <WSProvider>
        <div className="flex-1 relative min-h-0">
          <MapComponent />
          <div className="absolute top-0 left-0 right-0 z-10">
            <StatusBar />
          </div>
          {/* Timeline with responsive layout - single row on desktop, double row on mobile */}
          <div className="absolute bottom-0 left-0 right-0 z-10 bg-black/20 backdrop-blur-xl m-3 border border-white/10 rounded-xl shadow-2xl overflow-hidden">
            <Timeline />
          </div>
        </div>
      </WSProvider>
    </div>
  )
}