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'

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

async function getSiteConfigs() {
  const baseUrl = process.env.NEXTAUTH_URL || 'http://localhost:3000';
  const siteConfigs = await fetch(`${baseUrl}/api/site`);
  const data = await siteConfigs.json();
  return data;
}

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">
      <AppSidebar />
      <WSProvider>
        <div className="flex-1 relative min-h-0">
          <MapComponent />
          <div className="absolute top-0 left-0 right-0 z-10">
            <StatusBar />
          </div>
          <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>
  )
}