import { useQuery } from "@tanstack/react-query"
import { createFileRoute, redirect } from "@tanstack/react-router"

import type { Dashboard } from "@/components/Dashboard/DashboardView"
import { PanelSurface } from "@/components/Dashboard/PanelSurface"
import { dashboardQueryOptions } from "@/components/Dashboard/queries"
import { useDashboardTheme } from "@/components/Dashboard/settings"
import { useFlowSocket } from "@/components/Flow/useFlowSocket"
import { isLoggedIn } from "@/hooks/useAuth"
import { useIsMobile } from "@/hooks/useMobile"
import { cn } from "@/lib/utils"

/**
 * What a wall panel is pointed at when it shows one dashboard and nothing else.
 *
 * Deliberately outside both shells: no sidebar, no footer, no editing, and no
 * column cap — the widgets are the whole page. Route splitting means a panel
 * never downloads the editor or the grid library either.
 *
 * A device that was paired to a panel uses `/panel/{id}` instead, which is the
 * same surface with a rail for switching between the dashboards it was
 * assigned. This route stays for a browser tab pointed straight at one.
 */
export const Route = createFileRoute("/view/$name")({
  component: PanelView,
  beforeLoad: async () => {
    if (!isLoggedIn()) {
      throw redirect({ to: "/login" })
    }
  },
  head: ({ params }) => ({ meta: [{ title: `${params.name} - Fluksio` }] }),
})

function PanelView() {
  const { name } = Route.useParams()
  useFlowSocket()
  const { data: dashboard } = useQuery(dashboardQueryOptions(name))
  const stacked = useIsMobile()
  // A tab pointed at one dashboard is that dashboard, so its theme covers the
  // whole page rather than only the canvas inside it.
  const theme = useDashboardTheme(dashboard as Dashboard | undefined)

  if (!dashboard) return <main className="h-svh w-full" />

  return (
    <main
      className={cn(
        "h-svh w-full bg-background p-4 text-foreground",
        theme,
        stacked ? "overflow-y-auto" : "overflow-hidden",
      )}
    >
      <PanelSurface dashboard={dashboard as Dashboard} stacked={stacked} />
    </main>
  )
}