"use client"

/**
 * Leo ambience settings — floating window via shared `FloatingWindow`.
 * Apply-on-change; prefs live in `LeoAmbienceProvider`.
 * Free-drag (no corner snap). Tabs: Ask Leo panel | Leo search bar | Ask Leo
 * button | Greeting banner | Motion.
 */

import * as React from "react"

import { useLeoAmbience } from "@/components/leo-ambience-context"
import { Button } from "@/components/ui/button"
import {
  FloatingWindow,
  defaultFloatingWindowRect,
  type FloatingWindowRect,
  type FloatingWindowViewport,
} from "@/components/ui/floating-window"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsListScrollRegion,
  TabsTrigger,
  TabsTriggerIcon,
  TabsTriggerLabel,
} from "@/components/ui/tabs"
import { ToggleSwitch } from "@/components/ui/toggle-switch"
import {
  ButtonSegmentedControl,
  type ButtonSegmentOption,
} from "@/components/ui/button-segmented-control"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import {
  LEO_AMBIENCE_DEFAULTS,
  LEO_AMBIENCE_WINDOW_RECT_KEY,
  LEO_GREETING_BANNER_OFFSET_MAX,
  LEO_LAUNCHER_OFFSET_MAX,
  LEO_LAUNCHER_WASH_STRENGTH_MAX,
  LEO_LAUNCHER_WASH_STRENGTH_MIN,
  LEO_SEARCH_BAR_OFFSET_MAX,
  clampGreetingBannerOffset,
  clampLauncherWashOffset,
  clampSearchBarOffset,
  type LeoBlobAnimationSpeed,
  type LeoBlobIntensity,
  type LeoComposerVeil,
  type LeoLauncherWashIntensity,
  type LeoSearchBarWashMode,
  type LeoThinkingAnimationStyle,
} from "@/lib/leo-ambience"
import { usePersistedState } from "@exxatdesignux/ui/lib/persisted-state"
import { cn } from "@/lib/utils"

const SETTINGS_DEFAULT_WIDTH = 380
const SETTINGS_DEFAULT_HEIGHT = 640

function defaultSettingsRect(viewport: FloatingWindowViewport): FloatingWindowRect {
  return defaultFloatingWindowRect(viewport, {
    width: SETTINGS_DEFAULT_WIDTH,
    height: SETTINGS_DEFAULT_HEIGHT,
    anchor: "center-right",
  })
}

function SettingRow({
  label,
  htmlFor,
  children,
}: {
  label: string
  htmlFor?: string
  children: React.ReactNode
}) {
  return (
    <div className="flex items-center justify-between gap-3 border-b border-border/60 py-3 last:border-b-0">
      <Label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
        {label}
      </Label>
      <div className="shrink-0">{children}</div>
    </div>
  )
}

/**
 * One exclusive choice in this window.
 *
 * `ButtonSegmentedControl` rather than `ToggleGroup`: an ambience pref always
 * has exactly one answer, and the outline toggle group let the user deselect
 * into a fourth, meaningless state that the handlers then had to swallow
 * (`if (!v) return`). The DS control is a `radiogroup` on the same pill chrome as
 * the hub view switcher, so these rows read as the product's own segments
 * instead of a stack of bordered buttons.
 *
 * The fade lives here, not in the control: a disabled pref is still legible,
 * and the label has to dim with it or the row reads as half-available.
 */
function ChoiceRow<T extends string>({
  label,
  ariaLabel,
  value,
  options,
  disabled,
  onChange,
}: {
  label: string
  ariaLabel?: string
  value: T
  options: ButtonSegmentOption<T>[]
  disabled?: boolean
  onChange: (value: T) => void
}) {
  return (
    <div
      className={cn(
        "flex flex-col gap-2 border-b border-border/60 py-3",
        disabled && "opacity-50",
      )}
    >
      <Label className="text-sm font-medium">{label}</Label>
      <ButtonSegmentedControl
        value={value}
        options={options}
        disabled={disabled}
        onValueChange={onChange}
        aria-label={ariaLabel ?? label}
      />
    </div>
  )
}

/**
 * Free 2D offset pad — no snap; maps pointer position to ±`max`.
 *
 * The range is a prop because the two washes are different sizes: the composer's
 * pad moves its lobes by up to 120px, and the chip's by 14, so a shared range
 * would either be too coarse to place a chip field or too short to reach the
 * ends of a composer. Keyboard steps come with it for the same reason.
 */
function WashOffsetPad({
  ariaLabel,
  max,
  clamp,
  step = 4,
  coarseStep = 12,
  offsetX,
  offsetY,
  disabled,
  onChange,
}: {
  ariaLabel: string
  max: number
  clamp: (value: number) => number
  /** Arrow-key increment. */
  step?: number
  /** Shift + arrow increment. */
  coarseStep?: number
  offsetX: number
  offsetY: number
  disabled?: boolean
  onChange: (x: number, y: number) => void
}) {
  const padRef = React.useRef<HTMLDivElement>(null)
  const draggingRef = React.useRef(false)

  const applyFromClient = React.useCallback(
    (clientX: number, clientY: number) => {
      const el = padRef.current
      if (!el) return
      const rect = el.getBoundingClientRect()
      const nx = (clientX - rect.left) / rect.width
      const ny = (clientY - rect.top) / rect.height
      onChange(clamp((nx * 2 - 1) * max), clamp((ny * 2 - 1) * max))
    },
    [clamp, max, onChange],
  )

  const onPointerDown = (event: React.PointerEvent) => {
    if (disabled || event.button !== 0) return
    event.preventDefault()
    event.stopPropagation()
    draggingRef.current = true
    event.currentTarget.setPointerCapture(event.pointerId)
    applyFromClient(event.clientX, event.clientY)
  }

  const onPointerMove = (event: React.PointerEvent) => {
    if (!draggingRef.current) return
    event.stopPropagation()
    applyFromClient(event.clientX, event.clientY)
  }

  const endDrag = (event: React.PointerEvent) => {
    if (!draggingRef.current) return
    draggingRef.current = false
    try {
      event.currentTarget.releasePointerCapture(event.pointerId)
    } catch {
      /* already released */
    }
  }

  const leftPct = ((offsetX / max + 1) / 2) * 100
  const topPct = ((offsetY / max + 1) / 2) * 100

  return (
    <div
      className={cn(
        "flex flex-col gap-2 border-b border-border/60 py-3",
        disabled && "opacity-50",
      )}
    >
      <div className="flex items-center justify-between gap-2">
        <Label className="text-sm font-medium">Placement</Label>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="h-7 px-2 text-xs"
          disabled={disabled || (offsetX === 0 && offsetY === 0)}
          onClick={() => onChange(0, 0)}
        >
          Center
        </Button>
      </div>
      <div
        ref={padRef}
        role="slider"
        tabIndex={disabled ? -1 : 0}
        aria-label={ariaLabel}
        aria-valuemin={-max}
        aria-valuemax={max}
        aria-valuenow={offsetX}
        aria-valuetext={`${offsetX}px horizontal, ${offsetY}px vertical`}
        aria-disabled={disabled || undefined}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        onKeyDown={(event) => {
          if (disabled) return
          const increment = event.shiftKey ? coarseStep : step
          let x = offsetX
          let y = offsetY
          if (event.key === "ArrowLeft") x -= increment
          else if (event.key === "ArrowRight") x += increment
          else if (event.key === "ArrowUp") y -= increment
          else if (event.key === "ArrowDown") y += increment
          else return
          event.preventDefault()
          onChange(clamp(x), clamp(y))
        }}
        className={cn(
          "relative aspect-square w-full touch-none rounded-xl border border-border bg-muted/40",
          disabled ? "cursor-not-allowed" : "cursor-crosshair",
        )}
      >
        <div
          className="pointer-events-none absolute inset-[18%] rounded-full border border-dashed border-border/80"
          aria-hidden
        />
        <div
          className="pointer-events-none absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-border/70"
          aria-hidden
        />
        <div
          className="pointer-events-none absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-border/70"
          aria-hidden
        />
        <div
          className="pointer-events-none absolute size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-brand shadow-sm"
          style={{ left: `${leftPct}%`, top: `${topPct}%` }}
          aria-hidden
        />
      </div>
      <div className="flex justify-between text-[0.7rem] tabular-nums text-muted-foreground">
        <span>
          X {offsetX > 0 ? "+" : ""}
          {offsetX}px
        </span>
        <span>
          Y {offsetY > 0 ? "+" : ""}
          {offsetY}px
        </span>
      </div>
    </div>
  )
}

/** Icons so the row can shed labels before it sheds whole tabs — this window is resizable to nothing. */
const AMBIENCE_TABS = [
  { value: "panel", label: "Ask Leo panel", icon: "fa-sidebar-flip" },
  { value: "search", label: "Leo search bar", icon: "fa-magnifying-glass" },
  { value: "launcher", label: "Ask Leo button", icon: "fa-sparkles" },
  { value: "greeting", label: "Greeting banner", icon: "fa-sun" },
  { value: "motion", label: "Motion", icon: "fa-waveform-lines" },
] as const

const THINKING_STYLE_OPTIONS: ButtonSegmentOption<LeoThinkingAnimationStyle>[] = [
  { value: "blobs", label: "Blobs" },
  { value: "pulse", label: "Pulse" },
]

const BLOB_INTENSITY_OPTIONS: ButtonSegmentOption<LeoBlobIntensity>[] = [
  { value: "low", label: "Low" },
  { value: "normal", label: "Normal" },
  { value: "high", label: "High" },
]

/**
 * Two, where the panel offers three: the blob field paints `normal` and `high`,
 * and quieter than normal is what Field strength is for. A third segment here
 * would be a control that changes nothing.
 */
const LAUNCHER_WASH_INTENSITY_OPTIONS: ButtonSegmentOption<LeoLauncherWashIntensity>[] =
  [
    { value: "normal", label: "Normal" },
    { value: "high", label: "High" },
  ]

const COMPOSER_VEIL_OPTIONS: ButtonSegmentOption<LeoComposerVeil>[] = [
  { value: "off", label: "Off" },
  { value: "soft", label: "Soft" },
  { value: "strong", label: "Strong" },
]

const SEARCH_BAR_WASH_MODE_OPTIONS: ButtonSegmentOption<LeoSearchBarWashMode>[] = [
  { value: "inside", label: "Inside" },
  { value: "outside", label: "Outside" },
]

const ANIMATION_SPEED_OPTIONS: ButtonSegmentOption<LeoBlobAnimationSpeed>[] = [
  { value: "slow", label: "Slow" },
  { value: "normal", label: "Normal" },
  { value: "fast", label: "Fast" },
]

function AmbienceSettingsForm() {
  const {
    prefs,
    patchPrefs,
    resetPrefs,
    previewThinking,
    setPreviewThinking,
  } = useLeoAmbience()

  const washEnabled = prefs.thinkingBlob
  const isPulse = prefs.thinkingAnimationStyle === "pulse"

  return (
    <Tabs
      defaultValue="panel"
      className="flex min-h-0 flex-1 flex-col gap-0 overflow-hidden px-4 pb-4"
    >
      {/* Floating window the user can resize down to nothing. */}
      <TabsListScrollRegion ariaLabel="Ambience settings" className="shrink-0">
        <TabsList variant="line" className="w-full shrink-0 justify-start">
          {AMBIENCE_TABS.map(tab => (
            <TabsTrigger key={tab.value} value={tab.value}>
              <TabsTriggerIcon>
                <i className={cn("fa-light", tab.icon)} aria-hidden="true" />
              </TabsTriggerIcon>
              <TabsTriggerLabel>{tab.label}</TabsTriggerLabel>
            </TabsTrigger>
          ))}
        </TabsList>
      </TabsListScrollRegion>

      <TabsContent
        value="panel"
        className="mt-0 min-h-0 flex-1 overflow-y-auto focus-visible:outline-none"
      >
        <SettingRow label="Idle dots" htmlFor="leo-idle-dots">
          <ToggleSwitch
            id="leo-idle-dots"
            checked={prefs.idleDots}
            onChange={(idleDots) => patchPrefs({ idleDots })}
          />
        </SettingRow>

        <div
          className={cn(
            "flex flex-col gap-2 border-b border-border/60 py-3",
            !prefs.idleDots && "opacity-50",
          )}
        >
          <Label htmlFor="leo-idle-density" className="text-sm font-medium">
            Dot density
          </Label>
          <Slider
            id="leo-idle-density"
            min={0.5}
            max={3}
            step={0.05}
            value={[prefs.idleDensity]}
            disabled={!prefs.idleDots}
            aria-label="Idle dot density"
            onValueChange={(v) => patchPrefs({ idleDensity: v[0] ?? prefs.idleDensity })}
          />
          <div className="flex justify-between text-[0.7rem] text-muted-foreground">
            <span>Sparse</span>
            <span className="tabular-nums">{prefs.idleDensity.toFixed(2)}</span>
            <span>Dense</span>
          </div>
        </div>

        <div
          className={cn(
            "flex flex-col gap-2 border-b border-border/60 py-3",
            !prefs.idleDots && "opacity-50",
          )}
        >
          <Label htmlFor="leo-idle-glow" className="text-sm font-medium">
            Spotlight size
          </Label>
          <Slider
            id="leo-idle-glow"
            min={80}
            max={320}
            step={8}
            value={[prefs.idleGlowRadius]}
            disabled={!prefs.idleDots}
            aria-label="Idle spotlight radius"
            onValueChange={(v) =>
              patchPrefs({ idleGlowRadius: v[0] ?? prefs.idleGlowRadius })
            }
          />
          <div className="flex justify-between text-[0.7rem] text-muted-foreground">
            <span>Tight</span>
            <span className="tabular-nums">{prefs.idleGlowRadius}px</span>
            <span>Wide</span>
          </div>
        </div>

        <SettingRow label="Thinking wash" htmlFor="leo-thinking-blob">
          <ToggleSwitch
            id="leo-thinking-blob"
            checked={prefs.thinkingBlob}
            onChange={(thinkingBlob) => patchPrefs({ thinkingBlob })}
          />
        </SettingRow>

        <ChoiceRow
          label="Thinking style"
          value={prefs.thinkingAnimationStyle}
          options={THINKING_STYLE_OPTIONS}
          disabled={!washEnabled}
          onChange={(thinkingAnimationStyle) =>
            patchPrefs({ thinkingAnimationStyle })
          }
        />

        <div
          className={cn(
            "flex flex-col gap-2 border-b border-border/60 py-3",
            !washEnabled && "opacity-50",
          )}
        >
          <Label htmlFor="leo-blob-opacity" className="text-sm font-medium">
            {isPulse ? "Pulse strength" : "Wash opacity"}
          </Label>
          <Slider
            id="leo-blob-opacity"
            min={0.05}
            max={1}
            step={0.01}
            value={[prefs.thinkingBlobOpacity]}
            disabled={!washEnabled}
            aria-label={isPulse ? "Pulse strength" : "Thinking wash opacity"}
            onValueChange={(v) =>
              patchPrefs({
                thinkingBlobOpacity: v[0] ?? prefs.thinkingBlobOpacity,
              })
            }
          />
          <div className="flex justify-between text-[0.7rem] text-muted-foreground">
            <span>Faint</span>
            <span className="tabular-nums">
              {Math.round(prefs.thinkingBlobOpacity * 100)}%
            </span>
            <span>Strong</span>
          </div>
        </div>

        {!isPulse ? (
          <ChoiceRow
            label="Blob intensity"
            value={prefs.thinkingBlobIntensity}
            options={BLOB_INTENSITY_OPTIONS}
            disabled={!washEnabled}
            onChange={(thinkingBlobIntensity) =>
              patchPrefs({ thinkingBlobIntensity })
            }
          />
        ) : null}

        <SettingRow label="Thinking cursor dots" htmlFor="leo-thinking-dots">
          <ToggleSwitch
            id="leo-thinking-dots"
            checked={prefs.thinkingOverlayDots}
            onChange={(thinkingOverlayDots) => patchPrefs({ thinkingOverlayDots })}
          />
        </SettingRow>

        <div
          className={cn(
            "flex flex-col gap-2 border-b border-border/60 py-3",
            !prefs.thinkingOverlayDots && "opacity-50",
          )}
        >
          <Label htmlFor="leo-thinking-dots-opacity" className="text-sm font-medium">
            Thinking dot opacity
          </Label>
          <Slider
            id="leo-thinking-dots-opacity"
            min={0.05}
            max={1}
            step={0.01}
            value={[prefs.thinkingOverlayDotsOpacity]}
            disabled={!prefs.thinkingOverlayDots}
            aria-label="Thinking overlay dot opacity"
            onValueChange={(v) =>
              patchPrefs({
                thinkingOverlayDotsOpacity:
                  v[0] ?? prefs.thinkingOverlayDotsOpacity,
              })
            }
          />
          <div className="flex justify-between text-[0.7rem] text-muted-foreground">
            <span>Faint</span>
            <span className="tabular-nums">
              {Math.round(prefs.thinkingOverlayDotsOpacity * 100)}%
            </span>
            <span>Strong</span>
          </div>
        </div>

        <ChoiceRow
          label="Composer veil"
          value={prefs.composerVeil}
          options={COMPOSER_VEIL_OPTIONS}
          onChange={(composerVeil) => patchPrefs({ composerVeil })}
        />
      </TabsContent>

      <TabsContent
        value="search"
        className="mt-0 min-h-0 flex-1 overflow-y-auto focus-visible:outline-none"
      >
        <SettingRow label="Search bar wash" htmlFor="leo-search-bar-wash">
          <ToggleSwitch
            id="leo-search-bar-wash"
            checked={prefs.searchBarWash}
            onChange={(searchBarWash) => patchPrefs({ searchBarWash })}
          />
        </SettingRow>

        <ChoiceRow
          label="Wash mode"
          ariaLabel="Search bar wash mode"
          value={prefs.searchBarWashMode}
          options={SEARCH_BAR_WASH_MODE_OPTIONS}
          disabled={!prefs.searchBarWash}
          onChange={(searchBarWashMode) => patchPrefs({ searchBarWashMode })}
        />

        <WashOffsetPad
          ariaLabel="Search bar wash placement"
          max={LEO_SEARCH_BAR_OFFSET_MAX}
          clamp={clampSearchBarOffset}
          offsetX={prefs.searchBarOffsetX}
          offsetY={prefs.searchBarOffsetY}
          disabled={!prefs.searchBarWash}
          onChange={(searchBarOffsetX, searchBarOffsetY) =>
            patchPrefs({ searchBarOffsetX, searchBarOffsetY })
          }
        />

        <div className={cn(!prefs.searchBarWash && "pointer-events-none opacity-50")}>
          <SettingRow label="Search bar sheen" htmlFor="leo-search-bar-sheen">
            <ToggleSwitch
              id="leo-search-bar-sheen"
              checked={prefs.searchBarSheen}
              onChange={(searchBarSheen) => {
                if (!prefs.searchBarWash) return
                patchPrefs({ searchBarSheen })
              }}
            />
          </SettingRow>
        </div>

        <div className={cn(!prefs.searchBarWash && "pointer-events-none opacity-50")}>
          <SettingRow label="Search bar dots" htmlFor="leo-search-bar-dots">
            <ToggleSwitch
              id="leo-search-bar-dots"
              checked={prefs.searchBarDots}
              onChange={(searchBarDots) => {
                if (!prefs.searchBarWash) return
                patchPrefs({ searchBarDots })
              }}
            />
          </SettingRow>
        </div>

        <p className="py-3 text-[0.7rem] text-muted-foreground">
          Double-click the Leo search bar to open this window. Preview thinking
          on the Motion tab shows the wash while you tune placement.
        </p>
      </TabsContent>

      <TabsContent
        value="launcher"
        className="mt-0 min-h-0 flex-1 overflow-y-auto focus-visible:outline-none"
      >
        <SettingRow label="Button wash" htmlFor="leo-launcher-wash">
          <ToggleSwitch
            id="leo-launcher-wash"
            checked={prefs.launcherWash}
            onChange={(launcherWash) => patchPrefs({ launcherWash })}
          />
        </SettingRow>

        <ChoiceRow
          label="Blob intensity"
          ariaLabel="Ask Leo button blob intensity"
          value={prefs.launcherWashIntensity}
          options={LAUNCHER_WASH_INTENSITY_OPTIONS}
          disabled={!prefs.launcherWash}
          onChange={(launcherWashIntensity) => patchPrefs({ launcherWashIntensity })}
        />

        <div
          className={cn(
            "flex flex-col gap-2 border-b border-border/60 py-3",
            !prefs.launcherWash && "opacity-50",
          )}
        >
          <Label htmlFor="leo-launcher-wash-strength" className="text-sm font-medium">
            Field strength
          </Label>
          <Slider
            id="leo-launcher-wash-strength"
            min={LEO_LAUNCHER_WASH_STRENGTH_MIN}
            max={LEO_LAUNCHER_WASH_STRENGTH_MAX}
            step={0.05}
            value={[prefs.launcherWashStrength]}
            disabled={!prefs.launcherWash}
            aria-label="Ask Leo button field strength"
            onValueChange={(v) =>
              patchPrefs({
                launcherWashStrength: v[0] ?? prefs.launcherWashStrength,
              })
            }
          />
          <div className="flex justify-between text-[0.7rem] text-muted-foreground">
            <span>Quiet</span>
            <span className="tabular-nums">
              {Math.round(prefs.launcherWashStrength * 100)}%
            </span>
            <span>Loud</span>
          </div>
        </div>

        <WashOffsetPad
          ariaLabel="Ask Leo button field placement"
          max={LEO_LAUNCHER_OFFSET_MAX}
          clamp={clampLauncherWashOffset}
          step={1}
          coarseStep={4}
          offsetX={prefs.launcherWashOffsetX}
          offsetY={prefs.launcherWashOffsetY}
          disabled={!prefs.launcherWash}
          onChange={(launcherWashOffsetX, launcherWashOffsetY) =>
            patchPrefs({ launcherWashOffsetX, launcherWashOffsetY })
          }
        />

        <div className={cn(!prefs.launcherWash && "pointer-events-none opacity-50")}>
          <SettingRow label="Button sheen" htmlFor="leo-launcher-wash-sheen">
            <ToggleSwitch
              id="leo-launcher-wash-sheen"
              checked={prefs.launcherWashSheen}
              onChange={(launcherWashSheen) => {
                if (!prefs.launcherWash) return
                patchPrefs({ launcherWashSheen })
              }}
            />
          </SettingRow>
        </div>

        <p className="py-3 text-[0.7rem] text-muted-foreground">
          The Ask Leo button in the utility bar carries the search bar blobs
          scaled to a chip. The field stays on and brightens on hover and while
          Leo is arriving, open, or working, so strength above 100% is spent on
          that brighter state. Placement moves the lobes by a chip's worth of
          pixels, not the composer's. Drift and speed live on the Motion tab.
        </p>
      </TabsContent>

      <TabsContent
        value="greeting"
        className="mt-0 min-h-0 flex-1 overflow-y-auto focus-visible:outline-none"
      >
        <SettingRow label="Banner wash" htmlFor="leo-greeting-banner-wash">
          <ToggleSwitch
            id="leo-greeting-banner-wash"
            checked={prefs.greetingBannerWash}
            onChange={(greetingBannerWash) => patchPrefs({ greetingBannerWash })}
          />
        </SettingRow>

        <div
          className={cn(
            "flex flex-col gap-2 border-b border-border/60 py-3",
            !prefs.greetingBannerWash && "opacity-50",
          )}
        >
          <Label htmlFor="leo-greeting-banner-wash-strength" className="text-sm font-medium">
            Field strength
          </Label>
          <Slider
            id="leo-greeting-banner-wash-strength"
            min={LEO_LAUNCHER_WASH_STRENGTH_MIN}
            max={LEO_LAUNCHER_WASH_STRENGTH_MAX}
            step={0.05}
            value={[prefs.greetingBannerWashStrength]}
            disabled={!prefs.greetingBannerWash}
            aria-label="Greeting banner field strength"
            onValueChange={(v) =>
              patchPrefs({
                greetingBannerWashStrength: v[0] ?? prefs.greetingBannerWashStrength,
              })
            }
          />
          <div className="flex justify-between text-[0.7rem] text-muted-foreground">
            <span>Quiet</span>
            <span className="tabular-nums">
              {Math.round(prefs.greetingBannerWashStrength * 100)}%
            </span>
            <span>Loud</span>
          </div>
        </div>

        <WashOffsetPad
          ariaLabel="Greeting banner wash placement"
          max={LEO_GREETING_BANNER_OFFSET_MAX}
          clamp={clampGreetingBannerOffset}
          offsetX={prefs.greetingBannerOffsetX}
          offsetY={prefs.greetingBannerOffsetY}
          disabled={!prefs.greetingBannerWash}
          onChange={(greetingBannerOffsetX, greetingBannerOffsetY) =>
            patchPrefs({ greetingBannerOffsetX, greetingBannerOffsetY })
          }
        />

        <p className="py-3 text-[0.7rem] text-muted-foreground">
          The products home greeting cover on campus, launcher, and spotlight
          layouts. Blob vs pulse follows the Ask Leo panel style on the Motion
          tab. Drift and speed live there too.
        </p>
      </TabsContent>

      <TabsContent
        value="motion"
        className="mt-0 min-h-0 flex-1 overflow-y-auto focus-visible:outline-none"
      >
        <SettingRow label="Preview thinking" htmlFor="leo-preview-thinking">
          <ToggleSwitch
            id="leo-preview-thinking"
            checked={previewThinking}
            onChange={setPreviewThinking}
          />
        </SettingRow>

        <SettingRow label="Animations" htmlFor="leo-blob-animations">
          <ToggleSwitch
            id="leo-blob-animations"
            checked={prefs.blobAnimations}
            onChange={(blobAnimations) => patchPrefs({ blobAnimations })}
          />
        </SettingRow>

        <ChoiceRow
          label="Animation speed"
          value={prefs.blobAnimationSpeed}
          options={ANIMATION_SPEED_OPTIONS}
          disabled={!prefs.blobAnimations}
          onChange={(blobAnimationSpeed) => patchPrefs({ blobAnimationSpeed })}
        />

        <p className="border-b border-border/60 py-3 text-[0.7rem] text-muted-foreground">
          Speed drives blob drift, pulse breathe, and thinking cursor waves.
          Search bar wash uses the same speed. Thinking style lives on Ask Leo
          panel; search bar stays on bar blobs.
        </p>

        <div className="pt-3">
          <Button
            type="button"
            variant="outline"
            size="sm"
            className="w-full"
            onClick={resetPrefs}
          >
            Reset to defaults
          </Button>
          <p className="mt-2 text-center text-[0.7rem] text-muted-foreground">
            Defaults: {LEO_AMBIENCE_DEFAULTS.thinkingAnimationStyle}, density{" "}
            {LEO_AMBIENCE_DEFAULTS.idleDensity}, wash{" "}
            {Math.round(LEO_AMBIENCE_DEFAULTS.thinkingBlobOpacity * 100)}%,{" "}
            {LEO_AMBIENCE_DEFAULTS.blobAnimationSpeed}
          </p>
        </div>
      </TabsContent>
    </Tabs>
  )
}

export function LeoAmbienceWindow() {
  const { settingsOpen, setSettingsOpen } = useLeoAmbience()
  const [storedRect, setStoredRect] = usePersistedState<FloatingWindowRect | null>(
    LEO_AMBIENCE_WINDOW_RECT_KEY,
    null,
  )

  const close = React.useCallback(() => setSettingsOpen(false), [setSettingsOpen])

  return (
    <FloatingWindow
      open={settingsOpen}
      rect={storedRect}
      onRectChange={setStoredRect}
      defaultRect={defaultSettingsRect}
      aria-label="Leo appearance settings"
      dataSlot="leo-ambience-window"
      className="bg-background/90"
      cornerSnap={false}
      gripAriaLabel="Drag to move settings. Arrow keys nudge, Alt with arrow keys resizes."
      gripTooltip="Drag to move · arrows nudge · Alt + arrows resize"
      onEscape={close}
      title={
        <h2 className="font-heading m-0 truncate text-base font-semibold leading-tight tracking-tight text-foreground">
          Leo appearance
        </h2>
      }
      toolbar={
        <Tooltip>
          <TooltipTrigger asChild>
            <button
              type="button"
              onClick={close}
              className="icon-button-chrome inline-flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-sidebar-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              aria-label="Close Leo appearance settings"
            >
              <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
            </button>
          </TooltipTrigger>
          <TooltipContent side="bottom" className="text-xs">
            Close
          </TooltipContent>
        </Tooltip>
      }
    >
      <AmbienceSettingsForm />
    </FloatingWindow>
  )
}

/*
 * There is deliberately no header gear here. Appearance is reached by
 * double-clicking an Ask Leo header, or by the Appearance item in
 * `AskLeoViewToggle` (the keyboard route). A third entry point in the header
 * would spend a toolbar slot on a preference the reader opens once.
 */