"use client"

/**
 * ShellLayoutContext — shell-global preference for chrome layout.
 *
 * This package ships **compact only**. Persisted legacy ids from older
 * packages normalize to `compact` via `normalizeShellLayoutVariant`.
 *
 * Variants and pure helpers live in `../lib/shell-layout` so this module exports
 * only the provider + hook (Vite Fast Refresh–safe).
 */

import * as React from "react"
import { usePersistedState } from "../lib/persisted-state"
import {
  DEFAULT_SHELL_LAYOUT_VARIANT,
  isCompactShell,
  normalizeShellLayoutVariant,
  SHELL_LAYOUT_VARIANT_KEY,
  type ShellLayoutVariant,
  type StoredShellLayoutVariant,
} from "../lib/shell-layout"

interface ShellLayoutContextValue {
  variant: ShellLayoutVariant
  setVariant: (variant: ShellLayoutVariant) => void
}

const ShellLayoutContext = React.createContext<ShellLayoutContextValue>({
  variant: DEFAULT_SHELL_LAYOUT_VARIANT,
  setVariant: () => {},
})

export function useShellLayout() {
  return React.useContext(ShellLayoutContext)
}

export function ShellLayoutProvider({ children }: { children: React.ReactNode }) {
  const [stored, setStored] = usePersistedState<StoredShellLayoutVariant>(
    SHELL_LAYOUT_VARIANT_KEY,
    DEFAULT_SHELL_LAYOUT_VARIANT,
    { debounceMs: 0 },
  )

  const variant = normalizeShellLayoutVariant(stored)

  const setVariant = React.useCallback(
    (next: ShellLayoutVariant) => {
      setStored(normalizeShellLayoutVariant(next))
    },
    [setStored],
  )

  // Compact density token for globals.css (radius, bar surface, flush gutters).
  React.useEffect(() => {
    const html = document.documentElement
    if (isCompactShell(variant)) {
      html.setAttribute("data-shell-density", "compact")
    } else {
      html.removeAttribute("data-shell-density")
    }
    return () => html.removeAttribute("data-shell-density")
  }, [variant])

  // One-time migrate: rewrite non-compact stored values onto v3 compact.
  React.useEffect(() => {
    if (stored !== "compact") {
      setStored("compact")
    }
  }, [stored, setStored])

  const value = React.useMemo(
    () => ({ variant, setVariant }),
    [variant, setVariant],
  )

  return (
    <ShellLayoutContext.Provider value={value}>{children}</ShellLayoutContext.Provider>
  )
}