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

import type { Dashboard } from "@/components/Dashboard/DashboardView"
import {
  CanvasSurface,
  DashboardView,
} from "@/components/Dashboard/DashboardView"
import { dashboardQueryOptions } from "@/components/Dashboard/queries"
import { useFlowSocket } from "@/components/Flow/useFlowSocket"
import { isLoggedIn } from "@/hooks/useAuth"
import { useIsMobile } from "@/hooks/useMobile"

/**
 * What a wall panel is pointed at.
 *
 * 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.
 */
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))
  // A landscape arrangement scaled onto a phone comes out at about a fifth of
  // its size, which reads as nothing at all. Stack it instead.
  const stacked = useIsMobile()

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

  if (stacked) {
    return (
      <main className="h-svh w-full overflow-y-auto p-4">
        <DashboardView dashboard={dashboard as Dashboard} stacked />
      </main>
    )
  }

  return (
    <main className="h-svh w-full overflow-hidden p-4">
      {/* The panel's own surface, scaled to whatever screen it landed on. No
          dots: nothing is being arranged here. */}
      <CanvasSurface dashboard={dashboard as Dashboard}>
        {() => <DashboardView dashboard={dashboard as Dashboard} />}
      </CanvasSurface>
    </main>
  )
}