path: root/apps/web/app/reader/_components/reader-layout-shell.tsx

"use client"

import { Suspense, useCallback, useEffect, useState } from "react"
import { Group, Panel, Separator, useDefaultLayout } from "react-resizable-panels"
import { useUserInterfaceStore } from "@/lib/stores/user-interface-store"
import { classNames } from "@/lib/utilities"
import { useIsMobile } from "@/lib/hooks/use-is-mobile"
import { ErrorBoundary } from "./error-boundary"
import { SidebarContent } from "./sidebar-content"
import { CommandPalette } from "./command-palette"
import { AddFeedDialog } from "./add-feed-dialog"
import { SearchOverlay } from "./search-overlay"
import { KeyboardShortcutsDialog } from "./keyboard-shortcuts-dialog"
import { MfaChallenge } from "./mfa-challenge"
import { useKeyboardNavigation } from "@/lib/hooks/use-keyboard-navigation"
import { createSupabaseBrowserClient } from "@/lib/supabase/client"

const DENSITY_FONT_SIZE_MAP: Record<string, string> = {
  compact: "0.875rem",
  default: "1rem",
  spacious: "1.125rem",
}

export function ReaderLayoutShell({
  sidebarFooter,
  children,
}: {
  sidebarFooter: React.ReactNode
  children: React.ReactNode
}) {
  const [requiresMfaVerification, setRequiresMfaVerification] = useState(false)
  const [isMfaCheckComplete, setIsMfaCheckComplete] = useState(false)

  const isSidebarCollapsed = useUserInterfaceStore(
    (state) => state.isSidebarCollapsed
  )
  const toggleSidebar = useUserInterfaceStore((state) => state.toggleSidebar)
  const setSidebarCollapsed = useUserInterfaceStore(
    (state) => state.setSidebarCollapsed
  )
  const displayDensity = useUserInterfaceStore(
    (state) => state.displayDensity
  )
  const isSearchOpen = useUserInterfaceStore((state) => state.isSearchOpen)
  const setSearchOpen = useUserInterfaceStore((state) => state.setSearchOpen)
  const focusedPanel = useUserInterfaceStore((state) => state.focusedPanel)
  const focusFollowsInteraction = useUserInterfaceStore(
    (state) => state.focusFollowsInteraction
  )
  const isMobile = useIsMobile()
  const [sidebarMinimumWidth, setSidebarMinimumWidth] = useState("150px")
  const [sidebarDefaultWidth, setSidebarDefaultWidth] = useState("220px")

  const measureSidebarWidths = useCallback(() => {
    const firstNavigationItem = document.querySelector("[data-sidebar-nav-item]")
    if (!firstNavigationItem) return

    const canvas = document.createElement("canvas")
    const canvasContext = canvas.getContext("2d")
    if (!canvasContext) return

    const children = firstNavigationItem.querySelectorAll(":scope > *")
    let totalTextWidth = 0

    for (const child of children) {
      const computedStyle = getComputedStyle(child)
      canvasContext.font = `${computedStyle.fontWeight} ${computedStyle.fontSize} ${computedStyle.fontFamily}`
      totalTextWidth += Math.ceil(
        canvasContext.measureText(child.textContent ?? "").width
      )
    }

    if (children.length < 2) {
      const parentStyle = getComputedStyle(firstNavigationItem)
      canvasContext.font = `400 0.625rem ${parentStyle.fontFamily}`
      totalTextWidth += Math.ceil(canvasContext.measureText("999+").width)
    }

    const linkHorizontalPadding = 16
    const navigationContainerPadding = 16
    const minimumGap = 8
    const measuredMinimumWidth =
      totalTextWidth +
      linkHorizontalPadding +
      navigationContainerPadding +
      minimumGap

    setSidebarMinimumWidth(`${measuredMinimumWidth}px`)
    setSidebarDefaultWidth(`${Math.round(measuredMinimumWidth * 1.5)}px`)
  }, [])

  const sidebarLayout = useDefaultLayout({
    id: "asa-sidebar-layout",
    panelIds: ["sidebar", "main-content"],
    storage: typeof window !== "undefined" ? localStorage : { getItem: () => null, setItem: () => {} },
  })

  useKeyboardNavigation()

  useEffect(() => {
    if (isSidebarCollapsed || isMobile) return
    const timeoutIdentifier = setTimeout(measureSidebarWidths, 100)
    return () => clearTimeout(timeoutIdentifier)
  }, [isSidebarCollapsed, isMobile, measureSidebarWidths])

  useEffect(() => {
    async function checkAssuranceLevel() {
      const supabaseClient = createSupabaseBrowserClient()
      const { data } = await supabaseClient.auth.mfa.getAuthenticatorAssuranceLevel()

      if (
        data &&
        data.currentLevel === "aal1" &&
        data.nextLevel === "aal2"
      ) {
        setRequiresMfaVerification(true)
      }

      setIsMfaCheckComplete(true)
    }

    checkAssuranceLevel()
  }, [])

  useEffect(() => {
    if (window.innerWidth < 768) {
      setSidebarCollapsed(true)
    }
  }, [setSidebarCollapsed])

  useEffect(() => {
    document.body.style.setProperty(
      "--base-font-size",
      DENSITY_FONT_SIZE_MAP[displayDensity] ?? "0.8125rem"
    )
  }, [displayDensity])

  useEffect(() => {
    if (!focusFollowsInteraction) return

    function handlePointerDown(event: PointerEvent) {
      const target = event.target as HTMLElement
      const zone = target.closest("[data-panel-zone]")
      if (!zone) return
      const panelZone = zone.getAttribute("data-panel-zone")
      if (
        panelZone === "sidebar" ||
        panelZone === "entryList" ||
        panelZone === "detailPanel"
      ) {
        useUserInterfaceStore.getState().setFocusedPanel(panelZone)
      }
    }

    function handleScroll(event: Event) {
      const target = event.target as HTMLElement
      if (!target || !target.closest) return
      const zone = target.closest("[data-panel-zone]")
      if (!zone) return
      const panelZone = zone.getAttribute("data-panel-zone")
      if (
        panelZone === "sidebar" ||
        panelZone === "entryList" ||
        panelZone === "detailPanel"
      ) {
        const currentPanel = useUserInterfaceStore.getState().focusedPanel
        if (currentPanel !== panelZone) {
          useUserInterfaceStore.getState().setFocusedPanel(panelZone)
        }
      }
    }

    document.addEventListener("pointerdown", handlePointerDown)
    document.addEventListener("scroll", handleScroll, true)
    return () => {
      document.removeEventListener("pointerdown", handlePointerDown)
      document.removeEventListener("scroll", handleScroll, true)
    }
  }, [focusFollowsInteraction])

  if (!isMfaCheckComplete) {
    return (
      <div className="flex h-screen items-center justify-center bg-background-primary">
        <span className="text-text-dim">loading ...</span>
      </div>
    )
  }

  if (requiresMfaVerification) {
    return <MfaChallenge onVerified={() => setRequiresMfaVerification(false)} />
  }

  return (
    <div className="flex h-screen">
      {isMobile ? (
        <>
          <div
            className={classNames(
              "fixed inset-0 z-30 bg-black/50 transition-opacity",
              !isSidebarCollapsed
                ? "pointer-events-auto opacity-100"
                : "pointer-events-none opacity-0"
            )}
            onClick={toggleSidebar}
          />
          <aside
            data-panel-zone="sidebar"
            className={classNames(
              "fixed z-40 flex h-full w-64 shrink-0 flex-col border-r border-border bg-background-secondary transition-transform duration-200",
              isSidebarCollapsed ? "-translate-x-full" : "translate-x-0"
            )}
          >
            <div className="flex items-center justify-between p-4">
              <h2 className="text-text-primary">asa.news</h2>
              <button
                type="button"
                onClick={toggleSidebar}
                className="px-1 py-0.5 text-lg leading-none text-text-dim transition-colors hover:text-text-secondary"
              >
                &times;
              </button>
            </div>
            <ErrorBoundary>
              <Suspense>
                <SidebarContent />
              </Suspense>
            </ErrorBoundary>
            {sidebarFooter}
          </aside>
          <main className="flex-1 overflow-hidden">
            <div className="flex h-full flex-col">
              {isSidebarCollapsed && (
                <div className="flex items-center border-b border-border px-2 py-1">
                  <button
                    type="button"
                    onClick={toggleSidebar}
                    className="px-2 py-1 text-lg leading-none text-text-secondary transition-colors hover:text-text-primary"
                  >
                    &#9776;
                  </button>
                </div>
              )}
              <div className="flex-1 overflow-hidden">{children}</div>
            </div>
          </main>
        </>
      ) : (
        <div className="flex-1 overflow-hidden">
          <Group
            orientation="horizontal"
            defaultLayout={sidebarLayout.defaultLayout}
            onLayoutChanged={sidebarLayout.onLayoutChanged}
          >
            {!isSidebarCollapsed && (
              <>
                <Panel id="sidebar" defaultSize={sidebarDefaultWidth} minSize={sidebarMinimumWidth} maxSize="35%">
                  <aside
                    data-panel-zone="sidebar"
                    className={classNames(
                      "flex h-full flex-col border-r border-border bg-background-secondary",
                      focusedPanel === "sidebar"
                        ? "border-r-text-dim"
                        : ""
                    )}
                  >
                    <div className="flex items-center justify-between p-4">
                      <h2 className="text-text-primary">asa.news</h2>
                      <button
                        type="button"
                        onClick={toggleSidebar}
                        className="px-1 py-0.5 text-lg leading-none text-text-dim transition-colors hover:text-text-secondary"
                      >
                        &times;
                      </button>
                    </div>
                    <ErrorBoundary>
                      <Suspense>
                        <SidebarContent />
                      </Suspense>
                    </ErrorBoundary>
                    {sidebarFooter}
                  </aside>
                </Panel>
                <Separator className="w-px bg-border transition-colors hover:bg-text-dim" />
              </>
            )}
            <Panel id="main-content">
              <main className="h-full overflow-hidden">
                <div className="flex h-full flex-col">
                  {isSidebarCollapsed && (
                    <div className="flex items-center border-b border-border px-2 py-1">
                      <button
                        type="button"
                        onClick={toggleSidebar}
                        className="px-2 py-1 text-lg leading-none text-text-secondary transition-colors hover:text-text-primary"
                      >
                        &#9776;
                      </button>
                    </div>
                  )}
                  <div className="flex-1 overflow-hidden">{children}</div>
                </div>
              </main>
            </Panel>
          </Group>
        </div>
      )}
      <CommandPalette />
      <AddFeedDialog />
      {isSearchOpen && (
        <SearchOverlay onClose={() => setSearchOpen(false)} />
      )}
      <KeyboardShortcutsDialog />
    </div>
  )
}