import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square } from "lucide-react"
import * as React from "react"
import {
  AgentChatContextStatus,
  ChatAttachmentRows,
  useAgentChatComposer,
  type AgentChatComposerFile,
} from "@agents24/chat-react/ui"
import { attachmentFileAccept, type AgentChatInputContract } from "@agents24/chat-react/runtime"
import type { ContextWindow } from "@agents24/client/protocol"

import { Button } from "../ui/button"
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem,
  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger,
} from "../ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
import { Textarea } from "../ui/textarea"
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
import { cn } from "../../lib/utils"

export type Agents24ChatComposerProps = {
  queue?: React.ReactNode
  onRecordingStreamChange?: (stream: MediaStream | null) => void
  inputContract: AgentChatInputContract
  disabled?: boolean
  contextWindow?: ContextWindow | null
  scopeKey?: string | null
  focusKey?: string | null
  forceExpanded?: boolean
  isCancelling?: boolean
  isRunning: boolean
  agentId: string | null
  agents: Array<{ id: string; label: string }>
  modelId: string | null
  models: Array<{ id: string; label: string }>
  onModelChange: (modelId: string) => void
  onAgentChange: (agentId: string) => void
  onStop: () => void
  onSubmit: (text: string, files: AgentChatComposerFile[]) => Promise<void>
  restoredDraft?: { revision: number; text: string; files: AgentChatComposerFile[] } | null
  utilityRow?: "inline" | "below"
}

export function ChatComposer({
  inputContract,
  queue,
  onRecordingStreamChange,
  disabled,
  contextWindow,
  focusKey,
  scopeKey,
  forceExpanded = false,
  isCancelling = false,
  isRunning,
  agentId,
  agents,
  modelId,
  models,
  onModelChange,
  onAgentChange,
  onStop,
  onSubmit,
  restoredDraft,
  utilityRow = "inline",
}: Agents24ChatComposerProps) {
  const inputRef = React.useRef<HTMLInputElement>(null)
  const { text, setText, files, removeFile, addFiles, textareaRef, submit,
    attachmentError, attachmentMimeTypes, allowAttachments, recordingAllowed,
    recorder, isExpanded, validationError, action, canSubmit } = useAgentChatComposer({
      inputContract, disabled, scopeKey, focusKey, forceExpanded, isCancelling, isRunning,
      onSubmit, restoredDraft, onRecordingStreamChange,
    })

  const selectedAgent = agents.find((item) => item.id === agentId)
  const selectedModel = models.find((item) => item.id === modelId)
  const modelSelector = models.length > 0 ? (
    <div className="w-fit max-w-40">
      <Select disabled={disabled || isRunning} onValueChange={onModelChange} value={modelId || undefined}>
        <SelectTrigger aria-label="Runtime model">
          <SelectValue placeholder="Model" />
        </SelectTrigger>
        <SelectContent align="start">
          {models.map((model) => <SelectItem key={model.id} value={model.id}>{model.label}</SelectItem>)}
        </SelectContent>
      </Select>
    </div>
  ) : null
  const runtimeSelector = agents.length > 1 ? (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="h-8 max-w-64 gap-1.5 bg-transparent px-2.5 text-xs font-normal hover:bg-muted/40 disabled:opacity-100"
          disabled={disabled || isRunning}
          aria-label="Runtime configuration"
        >
          <span className="truncate">
            {[selectedAgent?.label, selectedModel?.label].filter(Boolean).join(" · ") || "Runtime"}
          </span>
          <ChevronDown className="size-3.5 text-muted-foreground" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-64 rounded-lg">
        <DropdownMenuSub>
            <DropdownMenuSubTrigger className="rounded-lg">
              <span>Agent</span><span className="ml-auto max-w-32 truncate text-muted-foreground">{selectedAgent?.label}</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent className="w-56 rounded-lg">
              <DropdownMenuRadioGroup value={agentId || undefined} onValueChange={onAgentChange}>
                {agents.map((agent) => <DropdownMenuRadioItem className="rounded-lg" key={agent.id} value={agent.id}>{agent.label}</DropdownMenuRadioItem>)}
              </DropdownMenuRadioGroup>
            </DropdownMenuSubContent>
        </DropdownMenuSub>
        {models.length > 0 ? (
          <DropdownMenuSub>
            <DropdownMenuSubTrigger className="rounded-lg">
              <span>Model</span><span className="ml-auto max-w-32 truncate text-muted-foreground">{selectedModel?.label}</span>
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent className="max-h-64 w-56 rounded-lg">
              <DropdownMenuRadioGroup value={modelId || undefined} onValueChange={onModelChange}>
                {models.map((model) => <DropdownMenuRadioItem className="rounded-lg" key={model.id} value={model.id}>{model.label}</DropdownMenuRadioItem>)}
              </DropdownMenuRadioGroup>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
        ) : null}
      </DropdownMenuContent>
    </DropdownMenu>
  ) : modelSelector
  const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0
  const showUtilityRow = utilityRow === "below"

  return (
    <div
      className="relative z-10 w-full pb-[max(1rem,env(safe-area-inset-bottom))]"
      data-agents24-chat-composer=""
    >
      {queue}
      {attachmentError || recorder.error ? <p className="mb-2 text-xs text-destructive" role="alert">{attachmentError || recorder.error}</p> : null}
      <div
        data-expanded={isExpanded || undefined}
        data-attachments={files.length > 0 || undefined}
        className={cn(
          "agents24-composer-grid grid min-w-0 items-center gap-2 rounded-xl border bg-background shadow-sm",
          isExpanded ? "p-2" : "p-1.5",
        )}
      >
        {allowAttachments && files.length > 0 && (
          <div className="agents24-composer-attachments min-w-0">
            <ChatAttachmentRows
              layout="composer"
              attachments={files}
              onRemove={(attachment) => {
                if (!attachment.id) return
                removeFile(attachment.id)
              }}
            />
          </div>
        )}
        {allowAttachments ? (
          <>
            <input
              ref={inputRef}
              className="sr-only"
              type="file"
              multiple
              accept={attachmentFileAccept(attachmentMimeTypes)}
              onChange={(event) => {
                addFiles(Array.from(event.target.files ?? []))
                event.currentTarget.value = ""
              }}
            />
            <div className="agents24-composer-attach flex min-w-0 items-center">
              <Button className="bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground" variant="ghost" size="icon" aria-label="Attach files" disabled={disabled} onClick={() => inputRef.current?.click()}>
                <span aria-hidden>+</span>
              </Button>
            </div>
          </>
        ) : <span aria-hidden="true" className="agents24-composer-attach" />}
        <Textarea
          ref={textareaRef}
          value={text}
          rows={1}
          placeholder="Message the agent"
          aria-label="Message"
          disabled={disabled}
          className={cn(
            "agents24-composer-textarea max-h-56 min-h-9 field-sizing-content resize-none overflow-y-auto border-0 bg-transparent px-2 shadow-none focus-visible:ring-0 dark:bg-transparent",
            isExpanded ? "py-2" : "h-9 py-2",
          )}
          onChange={(event) => {
            setText(event.target.value)
          }}
          onKeyDown={(event) => {
            if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
              event.preventDefault()
              void submit()
            }
          }}
        />
        <div className="agents24-composer-actions flex items-center gap-1">
          {utilityRow === "inline" ? <AgentChatContextStatus contextWindow={contextWindow} /> : null}
          {utilityRow === "inline" ? runtimeSelector : null}
          {recordingAllowed ? (
            <Button
              variant={recorder.isRecording ? "default" : "ghost"}
              size="icon"
              aria-label={recorder.isRecording ? "Stop recording" : "Record audio"}
              disabled={disabled || isRunning}
              onClick={() => { if (recorder.isRecording) recorder.stop(); else void recorder.start() }}
            >
              {recorder.isRecording ? <Square className="fill-current" /> : <Mic />}
            </Button>
          ) : null}
          {action === "stop" ? (
            <Button size="icon" aria-label={isCancelling ? "Cancelling response" : "Stop response"}
              disabled={disabled || isCancelling} onClick={onStop}>
              {isCancelling ? <LoaderCircle className="animate-spin" /> : <Square className="fill-current" />}
            </Button>
          ) : validationError ? (
              <Tooltip>
                <TooltipTrigger asChild>
                  <span tabIndex={0} aria-label={validationError}>
                    <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled onClick={() => void submit()}><ArrowUp /></Button>
                  </span>
                </TooltipTrigger>
                <TooltipContent>{validationError}</TooltipContent>
              </Tooltip>
            ) : (
              <Button size="icon" aria-label={isRunning ? "Queue message" : "Send message"} disabled={!canSubmit} onClick={() => void submit()}><ArrowUp /></Button>
            )}
        </div>
      </div>
      {showUtilityRow ? (
        <div
          aria-hidden={!runtimeSelector && !hasContextWindow ? "true" : undefined}
          className="mt-2 flex min-h-8 items-center justify-between gap-2 px-1"
          data-agents24-chat-composer-utility=""
        >
          <div className="min-w-0">{runtimeSelector}</div>
          <AgentChatContextStatus contextWindow={contextWindow} />
        </div>
      ) : null}
    </div>
  )
}