import { Lock } from "lucide-react"

import type { Dashboard } from "@/components/Dashboard/DashboardView"
import {
  CanvasSurface,
  DashboardView,
} from "@/components/Dashboard/DashboardView"
import { useDashboardLocked } from "@/components/Dashboard/settings"

/**
 * One dashboard filling whatever screen it landed on.
 *
 * The whole of what a wall panel draws, shared by the single-dashboard route
 * (`/view/{name}`) and the paired-panel one (`/panel/{id}`) so a device shows
 * the same thing either way — the second merely has a rail beside it.
 *
 * The dashboard's theme is stated by the route rather than here: on these two
 * the screen *is* the dashboard, so it has to cover the letterbox and the rail
 * as well as the canvas.
 */
export function PanelSurface({
  dashboard,
  stacked,
}: {
  dashboard: Dashboard
  /** 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. */
  stacked?: boolean
}) {
  return (
    <div className="relative size-full">
      {stacked ? (
        <DashboardView dashboard={dashboard} stacked />
      ) : (
        // The panel's own surface, scaled to fit. No dots: nothing is being
        // arranged here.
        <CanvasSurface dashboard={dashboard}>
          {() => <DashboardView dashboard={dashboard} />}
        </CanvasSurface>
      )}
      <LockNotice dashboard={dashboard} />
    </div>
  )
}

/**
 * What a locked dashboard looks like, beyond controls that read as disabled.
 *
 * Without it a read-only panel is a panel whose buttons do nothing, which
 * reads as broken rather than as locked. Frosted chrome over content, like
 * every other floating surface, and it says the state in words — a glyph on
 * its own is not a label.
 *
 * Live, because `locked` may be driven by a flow: the notice appears and goes
 * with the lock rather than with the page load.
 */
function LockNotice({ dashboard }: { dashboard: Dashboard }) {
  // Read straight from the document rather than through `useLocked`: that
  // provider sits inside the grid, and this notice is beside it.
  const locked = useDashboardLocked(dashboard)
  if (!locked) return null
  return (
    <div
      // Announced rather than merely drawn: `locked` may be driven by a flow,
      // so the state can change under someone already looking at the page.
      aria-live="polite"
      data-testid="dashboard-locked"
      className="pointer-events-none absolute bottom-0 right-0 flex items-center gap-1.5 rounded-full border border-border bg-card/80 px-3 py-1.5 text-sm text-muted-foreground shadow-e2 backdrop-blur-md"
    >
      <Lock className="size-4" aria-hidden />
      Read-only
    </div>
  )
}