"use client"

/**
 * AskLeoSidebar — app-wide right rail for the AI assistant.
 * Mirrors the left sidebar behavior: slides in/out with a toggle button.
 * Lives in the (app) layout so it persists across all pages.
 *
 * The conversation itself is `AskLeoThreadBody`, shared with the floating
 * window (`components/ask-leo-window.tsx`); this file owns only the docked
 * shell and its header.
 */

import * as React from "react"
import { useLocation } from "react-router"
import { useProduct } from "@/contexts/product-context"
import { productSlug } from "@/stores/app-store"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { useSidebar } from "@/components/ui/sidebar"
import {
  ASK_LEO_PANEL_WIDTH_DEFAULT,
  ASK_LEO_PANEL_WIDTH_KEY,
  NestedSecondaryPanelShell,
  SECONDARY_PANEL_WIDTH_MAX,
  SECONDARY_PANEL_WIDTH_MIN,
  clampSecondaryPanelWidth,
} from "@/components/templates/nested-secondary-panel-shell"
import {
  ResizableHandle,
  ResizablePanel,
} from "@/components/ui/resizable"
import { useShellRailWidth } from "@exxatdesignux/ui/hooks/use-shell-rail-width"
import { AskLeoLauncher } from "@exxatdesignux/ui/components/shell/ask-leo-launcher"
import { useSidebarReflowZoom } from "@/hooks/use-sidebar-reflow-zoom"
import { AskLeoShortcutKbds, useAskLeo } from "@/components/ask-leo-context"
import {
  AskLeoIdentity,
  AskLeoNewChatButton,
  AskLeoThreadBody,
} from "@/components/ask-leo-thread-body"
import { AskLeoViewToggle } from "@/components/ask-leo-view-toggle"
import { useLeoAmbience } from "@/components/leo-ambience-context"
import { LeoIcon } from "@/components/ui/leo-icon"
import { focusAskLeoLauncher } from "@/lib/ask-leo-focus"

function isLeoLandingPath(pathname: string, leoHref: string) {
  return pathname === leoHref || pathname.startsWith(`${leoHref}/`)
}

/**
 * Right-rail Ask Leo — same shell as {@link NestedSecondaryPanelShell} / library secondary nav.
 * Sits beside `SidebarInset` in the app row (not inside the main inset card).
 */
export function AskLeoSidebar() {
  const { open, setOpen } = useAskLeo()
  const { setSettingsOpen } = useLeoAmbience()
  const { isMobile } = useSidebar()
  const reflowZoom = useSidebarReflowZoom()
  const navFlyout = isMobile || reflowZoom
  const { pathname } = useLocation()
  const { product } = useProduct()
  const leoHref = `/${productSlug(product)}/leo`
  const isOnLeoLanding = isLeoLandingPath(pathname, leoHref)
  // Owns the persisted width and the panel's size props. See the hook for why a
  // pixel `defaultSize` alone used to leave the rail wider on every load.
  const rail = useShellRailWidth({
    storageKey: ASK_LEO_PANEL_WIDTH_KEY,
    defaultWidth: ASK_LEO_PANEL_WIDTH_DEFAULT,
    minWidth: SECONDARY_PANEL_WIDTH_MIN,
    maxWidth: SECONDARY_PANEL_WIDTH_MAX,
    clamp: clampSecondaryPanelWidth,
    // v3 — drop widths the percentage conversion inflated before the rail
    // re-asserted its pixel size on mount.
    version: 3,
  })

  // Closing takes the focused button off the page with it, which drops focus to
  // the document root. Hand it back to the toggle that reopens the panel.
  const closePanel = React.useCallback(() => {
    setOpen(false)
    focusAskLeoLauncher()
  }, [setOpen])

  // Primary-nav collapse lives in `AskLeoShell` so switching panel → window
  // restores the hub width (window must not leave the sidebar collapsed).

  if (isOnLeoLanding) {
    return null
  }

  const overlay: false | "mobile" | "desktop" = navFlyout
    ? isMobile
      ? "mobile"
      : "desktop"
    : false
  const dockedResizable = open && overlay === false

  const shellBody = (
    <div className="flex min-h-0 flex-1 flex-col">
      {/* Header — title row + view menu + close */}
      <div className="flex shrink-0 flex-col gap-2 border-b border-sidebar-border/50 px-3 pb-3 pt-3.5">
        <div className="flex items-start justify-between gap-2">
          {/* Double-click is a pointer shortcut only. The keyboard route to
              appearance is the Appearance item in `AskLeoViewToggle`. */}
          <div
            className="min-w-0 flex-1 select-none"
            onDoubleClick={() => setSettingsOpen(true)}
          >
            <AskLeoIdentity />
          </div>
          <div className="flex shrink-0 items-center gap-1">
            <AskLeoNewChatButton />
            <AskLeoViewToggle />
            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  type="button"
                  onClick={closePanel}
                  className="icon-button-chrome inline-flex size-8 shrink-0 items-center justify-center rounded-md hover:bg-sidebar-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  aria-label="Close Ask Leo"
                >
                  <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
                </button>
              </TooltipTrigger>
              <TooltipContent side="bottom" className="flex max-w-xs flex-wrap items-center gap-1.5 text-xs">
                <span>Close Ask Leo</span>
                <AskLeoShortcutKbds />
              </TooltipContent>
            </Tooltip>
          </div>
        </div>
      </div>

      <AskLeoThreadBody />
    </div>
  )

  const shell = (
    <NestedSecondaryPanelShell
      open={open}
      compact={false}
      overlay={overlay}
      side="right"
      dataSlot="ask-leo-panel"
      widthPersistKey={ASK_LEO_PANEL_WIDTH_KEY}
      widthDefault={ASK_LEO_PANEL_WIDTH_DEFAULT}
      ownSize={!dockedResizable}
      aria-label="Ask Leo, AI assistant"
      contentClassName="flex min-h-0 flex-1 flex-col overflow-hidden"
    >
      {shellBody}
    </NestedSecondaryPanelShell>
  )

  // Overlay flyout is fixed — render outside the workspace `ResizablePanelGroup`.
  if (overlay !== false) {
    if (!open) return null
    return (
      <>
        <div
          aria-hidden="true"
          className="fixed inset-0 z-40 bg-background/60"
          onClick={() => setOpen(false)}
        />
        {shell}
      </>
    )
  }

  if (!open) return null

  return (
    <>
      <ResizableHandle withHandle />
      <ResizablePanel
        id="shell-ask-leo"
        {...rail.panelProps}
        className="min-h-0 min-w-0"
      >
        {shell}
      </ResizablePanel>
    </>
  )
}

// ─────────────────────────────────────────────────────────────────────────────
// Toggle button — can be placed anywhere (e.g. in SiteHeader or floating)
// ─────────────────────────────────────────────────────────────────────────────

/**
 * @deprecated Mount `AskLeoLauncher` from
 * `@exxatdesignux/ui/components/shell/ask-leo-launcher` instead, as
 * `components/utility-bar-slot.tsx` now does.
 *
 * Kept because it is exported from a framework file: an app may still mount the
 * toggle somewhere of its own, and a removed export is a build break on upgrade.
 *
 * It is a delegate rather than markup, though. This used to be a second copy of
 * the chip — the same glow wrap, star wrapper, and label attribute the package's
 * arrival animates — and a copy is what made the last release land inert: the CSS
 * shipped, the shell kept rendering the older assembly, and nothing changed on
 * screen. The wash and the arrival come with the packaged launcher, so `introActive`
 * has nothing left to do; the launcher stages its own greeting.
 */
export function AskLeoToggle({
  className,
  showLabel = false,
}: {
  className?: string
  /** When true, show “Ask Leo” text beside the icon (utility bar). */
  showLabel?: boolean
}) {
  const { open, busy, toggle } = useAskLeo()

  return (
    <AskLeoLauncher
      open={open}
      busy={busy}
      onToggle={toggle}
      showLabel={showLabel}
      shortcut={<AskLeoShortcutKbds />}
      className={className}
    />
  )
}