"use client"

/**
 * AskLeoComposer — ChatGPT-style composer:
 * - Compact: one row (`+ | input | mic`, send appears on focus).
 * - Wrapped: full-width text (grows to ~8 rows, then scrolls), icons on a footer row.
 * - Autosize via scrollHeight (no grow-wrap / field-sizing conflicts).
 */

import * as React from "react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"

import { DictationSoundwave } from "@/components/dictation-soundwave"
import { useLeoAmbience } from "@/components/leo-ambience-context"
import { LeoSearchBarWash } from "@/components/leo-search-bar-wash"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Kbd } from "@/components/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { SearchRecentsPopover } from "@/components/search-recents-popover"
import {
  LeoIcon,
  type LeoIconMotionState,
} from "@/components/ui/leo-icon"
import { useSpeechDictation } from "@/hooks/use-speech-dictation"
import type { DedicatedSearchRecentsController } from "@/lib/dedicated-search-recents"
import { processDictationTranscript } from "@/lib/dictation-transcript"
import { cn } from "@/lib/utils"

const GHOST_ICON_BTN =
  "icon-button-chrome size-9 shrink-0 rounded-full hover:bg-accent hover:text-interactive-hover-foreground"

/** Matches `--exxat-composer-max-height: 13rem` in exxat-composer.css (~8–9 text rows). */
const COMPOSER_MAX_ROWS = 8
const COMPOSER_MAX_HEIGHT_FALLBACK_PX = 208

const PHRASE_EASE = [0.22, 1, 0.36, 1] as const

export interface AskLeoComposerSearchRecents {
  recents: Pick<DedicatedSearchRecentsController, "read" | "clear" | "eventName">
  onSelect: (query: string) => void
}

export interface AskLeoComposerProps {
  value: string
  onChange: (value: string) => void
  onSubmit?: (message: string) => void
  /**
   * Whether submitting empties the field. True for a conversation, where the
   * message leaves the composer and becomes a turn in the transcript. False for
   * a search bar, where the query is the state of the results below it and has
   * to stay legible and editable after the search runs.
   */
  clearOnSubmit?: boolean
  placeholder?: string
  animatedPlaceholders?: string[]
  animatedPlaceholderIntervalMs?: number
  animatedPlaceholderMaxLines?: 1 | 2
  leadingSlot?: "attachments" | "ai-mark"
  inputLabel?: string
  submitButtonAriaLabel?: string
  submitAppearance?: "send" | "search"
  onExpandedChange?: (expanded: boolean) => void
  searchRecents?: AskLeoComposerSearchRecents
  dictationDisabled?: boolean
  isAnalyzing?: boolean
  /** In-flight search (Library AI search). Shows a spinner on the submit control. */
  isSearching?: boolean
  /**
   * Library / mode-switch Leo search — prefs-driven wash, double-click opens
   * Leo appearance settings.
   */
  searchBarAmbience?: boolean
  /**
   * Host actions rendered inside the pill, ahead of dictation and submit.
   * For a named action the composer itself does not own (LeoAssistBar's
   * rewrite action and its overflow).
   */
  inlineActions?: React.ReactNode
  onStop?: () => void
  composerShellClassName?: string
  shellMaxWidth?: "2xl" | "full"
  className?: string
}

export const AskLeoComposer = React.forwardRef<HTMLTextAreaElement, AskLeoComposerProps>(
  function AskLeoComposer(
    {
      value,
      onChange,
      onSubmit,
      clearOnSubmit = true,
      placeholder = "Ask Leo anything…",
      className,
      composerShellClassName,
      onExpandedChange,
      animatedPlaceholders,
      animatedPlaceholderIntervalMs = 4200,
      animatedPlaceholderMaxLines = 1,
      leadingSlot = "attachments",
      inputLabel = "Message to Leo",
      submitButtonAriaLabel = "Send message",
      submitAppearance = "send",
      searchRecents,
      dictationDisabled = false,
      isAnalyzing = false,
      isSearching = false,
      searchBarAmbience = false,
      inlineActions,
      onStop,
      shellMaxWidth = "full",
    },
    forwardedRef,
  ) {
    const {
      prefs: leoPrefs,
      previewThinking,
      setSettingsOpen,
      setPreviewThinking,
    } = useLeoAmbience()
    const [isWrapped, setIsWrapped] = React.useState(false)
    const [isOverflowing, setIsOverflowing] = React.useState(false)
    const [showBottomFade, setShowBottomFade] = React.useState(false)
    const [isFocused, setIsFocused] = React.useState(false)
    /** True after the user clicks or types in the composer (not panel autofocus). */
    const [userActivated, setUserActivated] = React.useState(false)
    const [recentsOpen, setRecentsOpen] = React.useState(false)
    const [recentItems, setRecentItems] = React.useState<string[]>([])
    const [dictationError, setDictationError] = React.useState<string | null>(null)
    const reduceMotion = useReducedMotion()
    const fieldId = React.useId()
    const dictationBaseRef = React.useRef("")
    const innerRef = React.useRef<HTMLTextAreaElement>(null)
    const singleLineHeightRef = React.useRef(24)
    const maxHeightPxRef = React.useRef(COMPOSER_MAX_HEIGHT_FALLBACK_PX)
    const fileInputRef = React.useRef<HTMLInputElement>(null)
    const onExpandedChangeRef = React.useRef(onExpandedChange)
    React.useEffect(() => {
      onExpandedChangeRef.current = onExpandedChange
    })

    const applyWrapped = React.useCallback((next: boolean | ((prev: boolean) => boolean)) => {
      setIsWrapped(prev => {
        const resolved = typeof next === "function" ? next(prev) : next
        if (resolved !== prev) onExpandedChangeRef.current?.(resolved)
        return resolved
      })
    }, [])

    const phrases = React.useMemo(
      () =>
        (animatedPlaceholders ?? []).flatMap(s => {
          const trimmed = s.trim()
          return trimmed ? [trimmed] : []
        }),
      [animatedPlaceholders],
    )
    const [phraseIndex, setPhraseIndex] = React.useState(0)

    const syncComposerLayout = React.useCallback((text: string) => {
      const textarea = innerRef.current
      if (!textarea) {
        applyWrapped(text.includes("\n"))
        return
      }

      const lineHeight = parseFloat(getComputedStyle(textarea).lineHeight) || 24
      const maxHeightPx = lineHeight * COMPOSER_MAX_ROWS
      maxHeightPxRef.current = maxHeightPx

      textarea.style.minHeight = "0"
      textarea.style.height = "0px"
      const scrollHeight = textarea.scrollHeight
      const cappedHeight = Math.min(scrollHeight, maxHeightPx)
      textarea.style.height = `${cappedHeight}px`

      const overflowing = scrollHeight > maxHeightPx + 1
      setIsOverflowing(overflowing)

      if (overflowing) {
        textarea.scrollTop = textarea.scrollHeight
      }
      setShowBottomFade(overflowing && textarea.scrollTop > 4)

      if (!text.trim()) {
        singleLineHeightRef.current = Math.min(scrollHeight, lineHeight)
        applyWrapped(false)
        return
      }

      if (text.includes("\n")) {
        applyWrapped(true)
        return
      }

      const lineCount = Math.max(1, Math.round(scrollHeight / lineHeight))
      const baseline = singleLineHeightRef.current || lineHeight
      // Expand to the wrapped footer layout only when a second row appears.
      const wrappedNow = lineCount > 1 || scrollHeight > baseline + 2

      // Stay wrapped once multiline — full-width reflow can collapse line count
      // back to 1 and would otherwise flip to compact with centered icons.
      applyWrapped(wasWrapped => wrappedNow || wasWrapped)
    }, [applyWrapped])

    const updateScrollFade = React.useCallback(() => {
      const textarea = innerRef.current
      if (!textarea) return
      const maxHeightPx = maxHeightPxRef.current
      const overflowing = textarea.scrollHeight > maxHeightPx + 1
      const atBottom = textarea.scrollTop + textarea.clientHeight >= textarea.scrollHeight - 4
      setShowBottomFade(overflowing && !atBottom)
    }, [])

    const appendDictation = React.useCallback(
      (chunk: string, isFinal: boolean) => {
        if (!chunk && !isFinal) return
        const base = dictationBaseRef.current
        const next = processDictationTranscript(base, chunk, isFinal)
        if (isFinal) {
          dictationBaseRef.current = next
        }
        onChange(next)
      },
      [onChange],
    )

    const {
      isSupported: dictationSupported,
      isListening,
      waveformLevels,
      start: startDictation,
      stop: stopDictation,
    } = useSpeechDictation({
      onTranscript: appendDictation,
      onError: () => {
        setDictationError("Could not capture speech. Check microphone permissions and try again.")
      },
    })

    const beginDictation = React.useCallback(() => {
      if (!dictationSupported || dictationDisabled || isAnalyzing || isSearching) return
      setRecentsOpen(false)
      setDictationError(null)
      dictationBaseRef.current = value
      void startDictation()
    }, [dictationDisabled, dictationSupported, isAnalyzing, isSearching, startDictation, value])

    const finishDictation = React.useCallback(() => {
      stopDictation()
    }, [stopDictation])

    const canSend = Boolean(value.trim())
    // Idle: dictation only. Reveal send after the user engages the field
    // (click / type) or when there is text to submit — not on panel autofocus alone.
    const showSend =
      ((userActivated && isFocused) || canSend) &&
      !isListening &&
      !isAnalyzing &&
      !isSearching

    const activateComposer = React.useCallback(() => {
      setUserActivated(true)
    }, [])

    // Dictation takes the placeholder over with "Listening…", and a search that
    // is running is showing its own query, so neither wants suggestions rotating
    // underneath. Two strings at one spot read as garbled text, not as a state.
    const showAnimatedPlaceholder =
      phrases.length > 0 &&
      !value.trim() &&
      !isWrapped &&
      !isListening &&
      !isSearching

    React.useEffect(() => {
      if (!showAnimatedPlaceholder) return
      const id = window.setInterval(() => {
        setPhraseIndex(i => (i + 1) % phrases.length)
      }, animatedPlaceholderIntervalMs)
      return () => window.clearInterval(id)
    }, [showAnimatedPlaceholder, phrases.length, animatedPlaceholderIntervalMs])

    React.useEffect(() => {
      if (!showAnimatedPlaceholder) setPhraseIndex(0)
    }, [showAnimatedPlaceholder])

    /**
     * `exit` is a function variant so it can read `custom` at the moment the
     * phrase leaves: `true` means the next suggestion is taking its place and
     * the two crossfade, `false` means the placeholder itself is over (someone
     * typed, dictated, or the field wrapped) and it has to disappear at once.
     */
    const phraseMotion = React.useMemo(
      () => ({
        enter: { opacity: 0, y: reduceMotion ? 0 : 3 },
        visible: {
          opacity: 1,
          y: 0,
          transition: { duration: reduceMotion ? 0 : 0.32, ease: PHRASE_EASE },
        },
        exit: (rotating: boolean) => {
          const instant = reduceMotion || !rotating
          return {
            opacity: 0,
            y: instant ? 0 : -3,
            transition: { duration: instant ? 0 : 0.32, ease: PHRASE_EASE },
          }
        },
      }),
      [reduceMotion],
    )

    React.useEffect(() => {
      if (!searchRecents) return
      const sync = () => setRecentItems(searchRecents.recents.read())
      sync()
      window.addEventListener(searchRecents.recents.eventName, sync)
      window.addEventListener("storage", sync)
      return () => {
        window.removeEventListener(searchRecents.recents.eventName, sync)
        window.removeEventListener("storage", sync)
      }
    }, [searchRecents])

    React.useEffect(() => {
      if ((dictationDisabled || isAnalyzing || isSearching) && isListening) {
        stopDictation({ playRelease: false })
      }
    }, [dictationDisabled, isAnalyzing, isSearching, isListening, stopDictation])

    const dictationHotkey = (e: KeyboardEvent) => {
      if (e.metaKey || e.ctrlKey || e.altKey) return
      const tag = (e.target as HTMLElement)?.tagName
      if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement)?.isContentEditable) return
      if ((e.key === "m" || e.key === "M") && dictationSupported && !dictationDisabled && !isAnalyzing && !isSearching) {
        e.preventDefault()
        if (isListening) finishDictation()
        else beginDictation()
      }
    }

    const dictationHotkeyRef = React.useRef<(e: KeyboardEvent) => void>(() => {})
    React.useEffect(() => {
      dictationHotkeyRef.current = dictationHotkey
    })

    React.useEffect(() => {
      const listener = (e: KeyboardEvent) => dictationHotkeyRef.current(e)
      window.addEventListener("keydown", listener)
      return () => window.removeEventListener("keydown", listener)
    }, [])

    React.useLayoutEffect(() => {
      syncComposerLayout(value)
    }, [value, isWrapped, syncComposerLayout])

    const setTextareaRef = React.useCallback(
      (node: HTMLTextAreaElement | null) => {
        innerRef.current = node
        if (typeof forwardedRef === "function") {
          forwardedRef(node)
        } else if (forwardedRef) {
          ;(forwardedRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = node
        }
      },
      [forwardedRef],
    )

    function handleShellMouseDown(e: React.MouseEvent<HTMLDivElement>) {
      const target = e.target as HTMLElement
      if (target.closest("button, a, input, textarea, [role='button']")) {
        if (target.closest("textarea")) activateComposer()
        return
      }
      e.preventDefault()
      activateComposer()
      innerRef.current?.focus()
    }

    function handleSubmit(e: React.FormEvent) {
      e.preventDefault()
      if (isSearching || isAnalyzing) return
      if (isListening) stopDictation({ playRelease: false })
      const trimmed = value.trim()
      if (!trimmed) return
      onSubmit?.(trimmed)
      if (!clearOnSubmit) return
      onChange("")
      setIsWrapped(false)
      setIsOverflowing(false)
      setShowBottomFade(false)
      setUserActivated(false)
      if (innerRef.current) {
        innerRef.current.style.height = "0px"
      }
    }

    function handleTextareaScroll() {
      updateScrollFade()
    }

    function handleTextareaChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
      if (isListening) stopDictation({ playRelease: false })
      activateComposer()
      onChange(e.target.value)
      syncComposerLayout(e.target.value)
    }

    function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
      activateComposer()
      if (e.key === "Enter" && !e.shiftKey) {
        e.preventDefault()
        handleSubmit(e as unknown as React.FormEvent)
      }
    }

    function openComposerRecentsOnFocus() {
      setIsFocused(true)
      if (
        !isListening &&
        !isSearching &&
        !isAnalyzing &&
        !value.trim() &&
        recentItems.length > 0
      ) {
        setRecentsOpen(true)
      }
    }

    function dismissComposerRecentsOnBlur() {
      setIsFocused(false)
      if (!value.trim()) setUserActivated(false)
      window.setTimeout(() => setRecentsOpen(false), 120)
    }

    const leoBusy =
      isSearching ||
      isAnalyzing ||
      (searchBarAmbience && previewThinking)

    // The thinking wash belongs to the search bar only. The Ask Leo chatbox
    // shows work through the status marker instead, so a composer that is not
    // a search bar never paints a wash.
    const showSearchBarWash =
      searchBarAmbience &&
      leoPrefs.searchBarWash &&
      (isSearching || isAnalyzing || previewThinking)

    const washMode = leoPrefs.searchBarWashMode

    // Only the in-pill wash needs clipping. Idle pills stay overflow-visible so
    // recents and popovers are not trapped.
    const clipPillForWash = showSearchBarWash && washMode === "inside"

    const openAmbienceFromDoubleClick = React.useCallback(
      (event: React.MouseEvent) => {
        if (!searchBarAmbience) return
        event.preventDefault()
        setSettingsOpen(true)
        setPreviewThinking(true)
      },
      [searchBarAmbience, setPreviewThinking, setSettingsOpen],
    )

    const leoMarkState: LeoIconMotionState =
      leoBusy
        ? "working"
        : isFocused || userActivated
          ? "invited"
          : "rest"

    const leadingActions =
      leadingSlot === "ai-mark" ? (
        <Tooltip>
          <TooltipTrigger asChild>
            <span
              tabIndex={0}
              role="img"
              aria-label={isSearching ? "Leo is searching" : "AI search"}
              className="flex size-9 shrink-0 items-center justify-center rounded-full text-brand outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
              style={
                {
                  "--leo-icon-fill":
                    "var(--brand-color-dark, var(--brand-color))",
                } as React.CSSProperties
              }
            >
              <LeoIcon
                variant="ambient"
                size="sm"
                state={leoMarkState}
                className="pointer-events-none overflow-visible"
              />
            </span>
          </TooltipTrigger>
          <TooltipContent side="top" sideOffset={6} className="text-xs">
            {isSearching ? "Searching" : "AI search"}
          </TooltipContent>
        </Tooltip>
      ) : (
        <DropdownMenu>
          <Tooltip>
            <TooltipTrigger asChild>
              <DropdownMenuTrigger asChild>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className={GHOST_ICON_BTN}
                  aria-label="Add attachments"
                >
                  <i className="fa-light fa-plus text-lg leading-none" aria-hidden="true" />
                </Button>
              </DropdownMenuTrigger>
            </TooltipTrigger>
            <TooltipContent side="top" sideOffset={6} className="max-w-xs text-xs">
              Add photos, files, and more
            </TooltipContent>
          </Tooltip>
          <DropdownMenuContent align="start" className="max-w-xs rounded-2xl p-1.5">
            <DropdownMenuGroup className="space-y-1">
              <DropdownMenuItem
                className="flex items-center gap-2 rounded-md"
                onClick={() => fileInputRef.current?.click()}
              >
                <i className="fa-light fa-paperclip w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
                Add photos &amp; files
              </DropdownMenuItem>
              <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
                <i className="fa-light fa-robot w-4 shrink-0 text-center opacity-60" aria-hidden="true" />
                Agent mode
              </DropdownMenuItem>
              <DropdownMenuItem className="flex items-center gap-2 rounded-md" onClick={() => {}}>
                <i
                  className="fa-light fa-magnifying-glass w-4 shrink-0 text-center opacity-60"
                  aria-hidden="true"
                />
                Deep Research
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      )

    const trailingActions = (
      <>
        {inlineActions}
        {isListening ? (
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="button"
                className="h-9 shrink-0 gap-2 rounded-full border-2 border-brand/70 bg-brand px-3.5 text-[color:var(--brand-foreground)] shadow-sm hover:bg-brand/90"
                onClick={finishDictation}
                aria-label="Stop dictation"
              >
                <DictationSoundwave levels={waveformLevels} className="w-auto min-w-0 flex-none" aria-hidden />
                <span className="text-sm font-medium">Stop</span>
              </Button>
            </TooltipTrigger>
            <TooltipContent side="top" sideOffset={6} className="text-xs">
              Stop dictation
            </TooltipContent>
          </Tooltip>
        ) : null}

        {!isAnalyzing && !isSearching && !isListening && !dictationDisabled ? (
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                disabled={!dictationSupported}
                className={cn(GHOST_ICON_BTN, !dictationSupported && "opacity-40")}
                aria-label="Start dictation"
                onClick={beginDictation}
              >
                <i className="fa-light fa-microphone text-lg leading-none" aria-hidden="true" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="top" sideOffset={6} className="flex items-center gap-1.5 text-xs">
              {!dictationSupported ? (
                "Dictation is not supported in this browser"
              ) : (
                <>
                  Dictate <Kbd>M</Kbd>
                </>
              )}
            </TooltipContent>
          </Tooltip>
        ) : null}

        {isSearching ? (
          <Button
            type="button"
            size="icon"
            disabled
            aria-busy
            aria-label="Searching"
            className="size-9 shrink-0 rounded-full"
          >
            <i
              className="fa-light fa-spinner-third fa-spin text-lg leading-none"
              aria-hidden="true"
            />
          </Button>
        ) : isAnalyzing ? (
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="button"
                size="icon"
                className="size-9 shrink-0 rounded-full"
                onClick={() => onStop?.()}
                aria-label="Stop generating"
              >
                <i className="fa-solid fa-stop text-lg italic" aria-hidden="true" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="top" sideOffset={6} className="flex items-center gap-1.5 text-xs">
              Stop <Kbd>Esc</Kbd>
            </TooltipContent>
          </Tooltip>
        ) : showSend ? (
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="submit"
                size="icon"
                className="size-9 shrink-0 rounded-full"
                disabled={!canSend}
                aria-label={submitButtonAriaLabel}
              >
                <i
                  className={cn(
                    "text-lg leading-none",
                    submitAppearance === "search" ? "fa-light fa-magnifying-glass" : "fa-light fa-arrow-up",
                  )}
                  aria-hidden="true"
                />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="top" sideOffset={6} className="flex items-center gap-1.5 text-xs">
              {submitButtonAriaLabel} <Kbd>↵</Kbd>
            </TooltipContent>
          </Tooltip>
        ) : null}
      </>
    )

    const composerShell = (
      <form
        onSubmit={handleSubmit}
        className="group/composer relative min-w-0 w-full"
        noValidate
        aria-busy={isAnalyzing || isSearching || (searchBarAmbience && previewThinking)}
      >
        {showSearchBarWash && washMode === "outside" ? (
          <LeoSearchBarWash prefs={leoPrefs} mode="outside" />
        ) : null}
        <label htmlFor={fieldId} className="sr-only">
          {inputLabel}
        </label>
        {leadingSlot === "attachments" ? (
          <input
            ref={fileInputRef}
            type="file"
            multiple
            className="sr-only"
            aria-label="Attach files"
            // Opened by the "Add attachments" menu, never reached directly.
            // Left in the tab order it was an invisible stop between the
            // suggestions and the message box, and screen readers announced a
            // stray "Attach files" field with no way to see what it belonged to.
            tabIndex={-1}
            onChange={() => {}}
          />
        ) : null}

        {dictationError ? (
          <p className="mb-2 text-xs text-destructive" role="alert">
            {dictationError}
          </p>
        ) : null}

        <div
          role="presentation"
          onMouseDown={handleShellMouseDown}
          onDoubleClick={openAmbienceFromDoubleClick}
          data-wrapped={isWrapped ? "" : undefined}
          className={cn(
            "exxat-composer-grid relative grid w-full cursor-text rounded-3xl border border-solid bg-clip-padding p-2.5 shadow-md transition-[background-color,border-color,box-shadow] duration-200 ease-in-out",
            // Clip in-bar Leo wash to the pill; stay overflow-visible when idle
            // so popovers / recents are not trapped. Outside wash paints on a
            // sibling halo so the pill itself can stay overflow-visible.
            clipPillForWash ? "overflow-hidden" : "overflow-visible",
            isWrapped ? "exxat-composer-grid--wrapped" : "exxat-composer-grid--compact items-center",
            shellMaxWidth === "2xl" && "mx-auto max-w-2xl",
            "exxat-composer-idle",
            isListening && "exxat-composer-dictating",
            composerShellClassName,
          )}
        >
          {showSearchBarWash && washMode === "inside" ? (
            <LeoSearchBarWash prefs={leoPrefs} mode="inside" />
          ) : null}

          {!isWrapped ? (
            <div className="exxat-composer-leading relative z-[2] shrink-0 pl-1">{leadingActions}</div>
          ) : null}

          <div
            className={cn(
              "exxat-composer-primary relative z-[2] min-w-0",
              isWrapped ? "px-2 pb-0.5 pt-0.5" : "px-1.5 py-0.5",
            )}
          >
            <div
              className={cn(
                "exxat-composer-scroll relative min-w-0 w-full",
                isOverflowing && "exxat-composer-scroll--overflow",
                showBottomFade && "exxat-composer-scroll--fade-top",
              )}
            >
              <textarea
                id={fieldId}
                ref={setTextareaRef}
                data-slot="ask-leo-composer-input"
                value={value}
                onChange={handleTextareaChange}
                onScroll={handleTextareaScroll}
                onKeyDown={handleKeyDown}
                onFocus={openComposerRecentsOnFocus}
                onBlur={dismissComposerRecentsOnBlur}
                readOnly={isSearching || isAnalyzing}
                placeholder={
                  isListening
                    ? "Listening…"
                    : showAnimatedPlaceholder
                      ? " "
                      : placeholder
                }
                aria-live={isListening ? "polite" : undefined}
                autoComplete="off"
                rows={1}
                className={cn(
                  "exxat-composer-input placeholder-aa block w-full resize-none overflow-x-hidden overflow-y-auto border-0 bg-transparent p-0 text-base leading-[1.5] text-foreground outline-none placeholder:text-placeholder-foreground",
                  isOverflowing && "overscroll-y-contain",
                  showAnimatedPlaceholder && "placeholder:text-transparent",
                )}
              />
              <div
                className={cn(
                  "pointer-events-none absolute inset-x-0 top-0 flex overflow-hidden",
                  animatedPlaceholderMaxLines === 2
                    ? "min-h-[2.5rem] items-start"
                    : "min-h-[1.5rem] items-center",
                )}
                aria-hidden="true"
              >
                {/* The boundary outlives the phrase so one suggestion can fade
                    out while the next fades in. `custom` carries the reason the
                    phrase is leaving: rotating to the next suggestion crossfades,
                    but the moment someone types the phrase has to be gone on the
                    same frame — a ghost suggestion drifting over freshly typed
                    text reads as a rendering bug. */}
                <AnimatePresence mode="wait" initial={false} custom={showAnimatedPlaceholder}>
                  {showAnimatedPlaceholder ? (
                    <motion.span
                      key={phraseIndex}
                      custom={showAnimatedPlaceholder}
                      variants={phraseMotion}
                      initial="enter"
                      animate="visible"
                      exit="exit"
                      className={cn(
                        "block w-full text-start text-base leading-[1.5] text-placeholder-foreground",
                        animatedPlaceholderMaxLines === 2
                          ? "line-clamp-2 whitespace-normal break-words"
                          : "truncate",
                      )}
                    >
                      {phrases[phraseIndex]}
                    </motion.span>
                  ) : null}
                </AnimatePresence>
              </div>
            </div>
          </div>

          {isWrapped ? (
            <>
              <div className="exxat-composer-leading relative z-[2] shrink-0 pl-1 pb-0.5">
                {leadingActions}
              </div>
              <div className="exxat-composer-trailing relative z-[2] flex shrink-0 items-center gap-1.5 pb-0.5">
                {trailingActions}
              </div>
            </>
          ) : (
            <div className="exxat-composer-trailing relative z-[2] flex shrink-0 items-center gap-1.5">
              {trailingActions}
            </div>
          )}
        </div>
      </form>
    )

    return (
      <div
        className={cn("relative min-w-0 w-full", className)}
        onDoubleClick={openAmbienceFromDoubleClick}
      >
        {searchRecents && recentItems.length > 0 ? (
          <SearchRecentsPopover
            open={recentsOpen}
            onOpenChange={setRecentsOpen}
            items={recentItems}
            onSelect={searchRecents.onSelect}
            onClear={() => searchRecents.recents.clear()}
            anchor={composerShell}
          />
        ) : (
          composerShell
        )}
      </div>
    )
  },
)