import { AppShell } from "@/components/app-shell"
import { DashboardBuilder } from "@/components/dashboards/dashboard-builder"
import { SiteHeader } from "@/components/site-header"
import { requireStaffSession } from "@/lib/auth-server"

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

export const dynamic = "force-dynamic"

export default async function DashboardDetailPage({ params, searchParams }: PageProps) {
  if (!params) {
    throw new Error("Dashboard id not provided")
  }

  const { id } = await params
  const resolvedSearchParams =
    (searchParams ? await searchParams : {}) as Record<string, string | string[] | undefined>

  await requireStaffSession()
  const tvMode = resolvedSearchParams?.tv === "1"

  return (
    <AppShell
      header={
        <SiteHeader
          title="Construtor de dashboards"
          lead="Monte relatórios interativos com filtros globais, exportação e modo TV."
        />
      }
    >
      <div className="mx-auto w-full max-w-7xl px-4 pb-12 lg:px-6">
        <DashboardBuilder
          dashboardId={id}
          editable={!tvMode}
          mode={tvMode ? "tv" : "edit"}
        />
      </div>
    </AppShell>
  )
}
