import * as React from "react"
import {
  ChevronDown,
  ChevronUp,
  CircleStop,
  Copy,
  Edit3,
  FileText,
  GitFork,
  MessageSquare,
  Save,
  Send,
  Settings,
  SlidersHorizontal,
  Trash2,
  X,
} from "lucide-react"

import { MarkdownMessage } from "@/components/markdown-message"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Select } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { LabelledField } from "@/components/app/shared"
import {
  ASK_QUESTIONS_TOOL_NAME,
  parseAskQuestionsArguments,
} from "@/lib/tools"
import { formatMessageCost } from "@/lib/pricing"
import { cn } from "@/lib/utils"
import type {
  AskQuestionsAnswer,
  AskQuestionsPayload,
  ChatMessage,
  ChatSession,
  ChatToolCall,
  ModelConfig,
  PromptTemplate,
  RequestState,
  ReasoningEffort,
  RuntimeConfig,
  ServiceConfig,
} from "@/types"

const STATUS_TEXT: Record<RequestState | "done", string> = {
  idle: "就绪",
  requesting: "请求中",
  generating: "生成中",
  failed: "失败",
  stopped: "已停止",
  done: "完成",
}

const REASONING_EFFORT_OPTIONS: { value: ReasoningEffort; label: string }[] = [
  { value: "default", label: "默认" },
  { value: "minimal", label: "minimal" },
  { value: "low", label: "low" },
  { value: "medium", label: "medium" },
  { value: "high", label: "high" },
]

function formatMessageTime(value: string) {
  return new Intl.DateTimeFormat("zh-CN", {
    hour: "2-digit",
    minute: "2-digit",
  }).format(new Date(value))
}

function formatDuration(ms?: number) {
  if (!ms) {
    return ""
  }

  if (ms < 1000) {
    return `${Math.round(ms)}ms`
  }

  return `${(ms / 1000).toFixed(1)}s`
}

function formatUsage(message: ChatMessage) {
  if (!message.usage) {
    return ""
  }

  const cachedPromptTokens =
    message.usage.promptCacheHitTokens ?? message.usage.cachedPromptTokens
  const parts = [
    message.usage.promptTokens !== undefined
      ? `In: ${message.usage.promptTokens}`
      : "",
    cachedPromptTokens !== undefined ? `(Cached: ${cachedPromptTokens})` : "",
    message.usage.completionTokens !== undefined
      ? `Out: ${message.usage.completionTokens}`
      : "",
    message.usage.totalTokens !== undefined
      ? `All: ${message.usage.totalTokens}`
      : "",
  ].filter(Boolean)

  return parts.length ? parts.join(" ") : ""
}

function getMessageCopyContent(message: ChatMessage) {
  if (message.role !== "assistant" || !message.reasoningContent?.trim()) {
    return message.content
  }

  return [
    `reasoning_content:\n${message.reasoningContent.trim()}`,
    message.content.trim() ? `content:\n${message.content.trim()}` : "",
  ]
    .filter(Boolean)
    .join("\n\n")
}

type ChatViewProps = {
  currentSession: ChatSession
  runtimeConfig: RuntimeConfig
  services: ServiceConfig[]
  models: ModelConfig[]
  prompts: PromptTemplate[]
  chatInput: string
  editingMessageId: string | null
  editingContent: string
  showPromptEditor: boolean
  headerOpen: boolean
  quickConfigOpen: boolean
  isBusy: boolean
  configIsValid: boolean
  onInputChange: (value: string) => void
  onSend: () => void
  onStop: () => void
  onCopy: (text: string, label?: string) => void
  onDeleteMessage: (messageId: string) => void
  onEditMessage: (message: ChatMessage) => void
  onForkMessage: (messageId: string) => void
  onSubmitAskQuestions: (
    messageId: string,
    toolCall: ChatToolCall,
    answers: AskQuestionsAnswer[]
  ) => void
  onCancelEdit: () => void
  onEditingContentChange: (value: string) => void
  onSaveEditOnly: () => void
  onSaveEditAndSend: () => void
  onServiceChange: (serviceId: string) => void
  onModelChange: (modelId: string) => void
  onPromptChange: (promptId: string) => void
  onHeaderOpenChange: (open: boolean) => void
  onQuickConfigOpenChange: (open: boolean) => void
  onPromptEditorToggle: () => void
  onSystemPromptChange: (value: string) => void
  onReasoningEffortChange: (value: ReasoningEffort) => void
  onOpenSettings: () => void
}

export function ChatView({
  currentSession,
  runtimeConfig,
  services,
  models,
  prompts,
  chatInput,
  editingMessageId,
  editingContent,
  showPromptEditor,
  headerOpen,
  quickConfigOpen,
  isBusy,
  configIsValid,
  onInputChange,
  onSend,
  onStop,
  onCopy,
  onDeleteMessage,
  onEditMessage,
  onForkMessage,
  onSubmitAskQuestions,
  onCancelEdit,
  onEditingContentChange,
  onSaveEditOnly,
  onSaveEditAndSend,
  onServiceChange,
  onModelChange,
  onPromptChange,
  onHeaderOpenChange,
  onQuickConfigOpenChange,
  onPromptEditorToggle,
  onSystemPromptChange,
  onReasoningEffortChange,
  onOpenSettings,
}: ChatViewProps) {
  const canSend = chatInput.trim().length > 0 && !isBusy
  const messagesScrollRef = React.useRef<HTMLDivElement>(null)
  const reasoningMenuRef = React.useRef<HTMLDivElement>(null)
  const [reasoningMenuOpen, setReasoningMenuOpen] = React.useState(false)
  const selectedReasoningLabel =
    REASONING_EFFORT_OPTIONS.find(
      (option) => option.value === runtimeConfig.parameters.reasoningEffort
    )?.label ?? runtimeConfig.parameters.reasoningEffort

  React.useEffect(() => {
    const element = messagesScrollRef.current

    if (!element) {
      return
    }

    // Keep session switching predictable by jumping to the latest message.
    element.scrollTop = element.scrollHeight
  }, [currentSession.id])

  React.useEffect(() => {
    if (!reasoningMenuOpen) {
      return undefined
    }

    const handlePointerDown = (event: PointerEvent) => {
      if (
        reasoningMenuRef.current &&
        !reasoningMenuRef.current.contains(event.target as Node)
      ) {
        setReasoningMenuOpen(false)
      }
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setReasoningMenuOpen(false)
      }
    }

    document.addEventListener("pointerdown", handlePointerDown)
    document.addEventListener("keydown", handleKeyDown)

    return () => {
      document.removeEventListener("pointerdown", handlePointerDown)
      document.removeEventListener("keydown", handleKeyDown)
    }
  }, [reasoningMenuOpen])

  return (
    <section className="content-view chat-view">
      {headerOpen ? (
        <div className="chat-header border-b px-4 py-3">
          <div className="min-w-0 flex-1">
            <div className="flex flex-wrap items-center gap-2">
              <h1 className="truncate text-base font-semibold">
                {currentSession.title}
              </h1>
              {currentSession.temporary ? (
                <Badge tone="muted">临时</Badge>
              ) : null}
            </div>
            <div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
              <span>{runtimeConfig.service?.name || "未选择服务"}</span>
              <span>{runtimeConfig.modelName || "未选择模型"}</span>
              <span>{currentSession.messages.length} 条消息</span>
            </div>
          </div>
          <div className="chat-header-actions flex flex-wrap items-center gap-1">
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              title={quickConfigOpen ? "收起配置" : "展开配置"}
              aria-label={quickConfigOpen ? "收起配置" : "展开配置"}
              aria-expanded={quickConfigOpen}
              onClick={() => onQuickConfigOpenChange(!quickConfigOpen)}
            >
              <Settings />
            </Button>
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              title="收起聊天信息"
              aria-label="收起聊天信息"
              aria-expanded={headerOpen}
              onClick={() => onHeaderOpenChange(false)}
            >
              <ChevronUp />
            </Button>
          </div>
        </div>
      ) : (
        <div className="flex justify-end gap-1 border-b px-4 py-1.5">
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            title={quickConfigOpen ? "收起配置" : "展开配置"}
            aria-label={quickConfigOpen ? "收起配置" : "展开配置"}
            aria-expanded={quickConfigOpen}
            onClick={() => onQuickConfigOpenChange(!quickConfigOpen)}
          >
            <Settings />
          </Button>
          <Button
            type="button"
            variant="ghost"
            size="icon-sm"
            title="展开聊天信息"
            aria-label="展开聊天信息"
            aria-expanded={headerOpen}
            onClick={() => onHeaderOpenChange(true)}
          >
            <ChevronDown />
          </Button>
        </div>
      )}

      {quickConfigOpen ? (
        <div className="quick-config border-b px-4 py-3">
          <div className="grid gap-2 md:grid-cols-3">
            <LabelledField label="服务">
              <Select
                value={runtimeConfig.service?.id ?? ""}
                onChange={(event) => onServiceChange(event.target.value)}
              >
                {services.map((service) => (
                  <option key={service.id} value={service.id}>
                    {service.name}
                  </option>
                ))}
              </Select>
            </LabelledField>
            <LabelledField label="模型">
              <Select
                value={runtimeConfig.model?.id ?? ""}
                onChange={(event) => onModelChange(event.target.value)}
              >
                {models.map((model) => (
                  <option key={model.id} value={model.id}>
                    {model.displayName || model.name}
                  </option>
                ))}
              </Select>
            </LabelledField>
            <LabelledField label="提示词">
              <Select
                value={
                  currentSession.promptId ?? runtimeConfig.prompt?.id ?? ""
                }
                onChange={(event) => onPromptChange(event.target.value)}
              >
                {prompts.map((prompt) => (
                  <option key={prompt.id} value={prompt.id}>
                    {prompt.title}
                  </option>
                ))}
              </Select>
            </LabelledField>
          </div>
          <div className="mt-2 flex flex-wrap items-center gap-2">
            <Button
              type="button"
              variant="ghost"
              size="sm"
              onClick={onPromptEditorToggle}
            >
              <FileText />
              当前系统提示词
            </Button>
            {!configIsValid ? (
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={onOpenSettings}
              >
                <Settings />
                进入设置
              </Button>
            ) : null}
          </div>
          {showPromptEditor ? (
            <Textarea
              value={runtimeConfig.systemPrompt}
              onChange={(event) => onSystemPromptChange(event.target.value)}
              className="mt-2 min-h-24"
              placeholder="当前会话系统提示词"
            />
          ) : null}
        </div>
      ) : null}

      <div
        ref={messagesScrollRef}
        className="messages-scroll min-h-0 flex-1 overflow-y-auto px-4 py-4"
      >
        {currentSession.messages.length === 0 ? (
          <div className="empty-state mx-auto flex max-w-2xl flex-col gap-4 py-16 text-center">
            <div className="mx-auto flex size-12 items-center justify-center rounded-xl border bg-muted">
              <MessageSquare className="size-5" />
            </div>
            <div>
              <h2 className="text-lg font-semibold">
                开始一个本地保存的 AI 会话
              </h2>
              <p className="mt-2 text-sm leading-6 text-muted-foreground">
                配置 OpenAI-compatible 服务后即可聊天；所有会话、设置和 API Key
                默认保存在此浏览器本地。
              </p>
            </div>
            {!configIsValid ? (
              <div className="mx-auto flex flex-wrap justify-center gap-2">
                {runtimeConfig.errors.map((error) => (
                  <Badge key={error} tone="warning">
                    {error}
                  </Badge>
                ))}
              </div>
            ) : null}
          </div>
        ) : (
          <div className="mx-auto flex max-w-4xl flex-col gap-5">
            {currentSession.messages.map((message) => (
              <MessageItem
                key={message.id}
                message={message}
                editing={editingMessageId === message.id}
                editingContent={editingContent}
                onCopy={onCopy}
                onDelete={onDeleteMessage}
                onEdit={onEditMessage}
                onFork={onForkMessage}
                onSubmitAskQuestions={onSubmitAskQuestions}
                onCancelEdit={onCancelEdit}
                onEditingContentChange={onEditingContentChange}
                onSaveEditOnly={onSaveEditOnly}
                onSaveEditAndSend={onSaveEditAndSend}
              />
            ))}
          </div>
        )}
      </div>

      {currentSession.error ? (
        <div className="border-t px-4 py-2 text-sm text-destructive">
          {currentSession.error}
        </div>
      ) : null}

      <div className="composer border-t bg-background px-4 py-3">
        <div className="mx-auto max-w-4xl">
          <Textarea
            value={chatInput}
            onChange={(event) => onInputChange(event.target.value)}
            onKeyDown={(event) => {
              if (
                event.key === "Enter" &&
                !event.shiftKey &&
                !event.nativeEvent.isComposing
              ) {
                event.preventDefault()
                onSend()
              }
            }}
            placeholder="输入消息，Enter 发送，Shift + Enter 换行"
            className="min-h-24 resize-none"
            disabled={isBusy}
          />
          <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
            <div className="flex flex-wrap gap-1">
              <div ref={reasoningMenuRef} className="relative">
                <Button
                  type="button"
                  variant="ghost"
                  size="icon-sm"
                  title={`推理强度 reasoning_effort：${selectedReasoningLabel}`}
                  aria-label="推理强度 reasoning_effort"
                  aria-haspopup="menu"
                  aria-expanded={reasoningMenuOpen}
                  disabled={isBusy}
                  onClick={() => setReasoningMenuOpen((open) => !open)}
                >
                  <SlidersHorizontal />
                </Button>
                {reasoningMenuOpen ? (
                  <div className="absolute bottom-full left-0 z-30 mb-2 w-40 rounded-lg border bg-popover p-1 text-sm text-popover-foreground shadow-lg">
                    {REASONING_EFFORT_OPTIONS.map((option) => {
                      const selected =
                        option.value === runtimeConfig.parameters.reasoningEffort

                      return (
                        <button
                          key={option.value}
                          type="button"
                          role="menuitemradio"
                          aria-checked={selected}
                          className={cn(
                            "flex h-8 w-full items-center justify-between rounded-md px-2 text-left text-sm hover:bg-muted focus-visible:bg-muted focus-visible:outline-none",
                            selected && "bg-muted font-medium"
                          )}
                          onClick={() => {
                            onReasoningEffortChange(option.value)
                            setReasoningMenuOpen(false)
                          }}
                        >
                          <span>{option.label}</span>
                          {selected ? <span className="text-xs">✓</span> : null}
                        </button>
                      )
                    })}
                  </div>
                ) : null}
              </div>
            </div>
            <div className="flex gap-2">
              {isBusy ? (
                <Button type="button" variant="outline" onClick={onStop}>
                  <CircleStop />
                  停止
                </Button>
              ) : null}
              <Button type="button" onClick={onSend} disabled={!canSend}>
                <Send />
                发送
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

type MessageItemProps = {
  message: ChatMessage
  editing: boolean
  editingContent: string
  onCopy: (text: string, label?: string) => void
  onDelete: (messageId: string) => void
  onEdit: (message: ChatMessage) => void
  onFork: (messageId: string) => void
  onSubmitAskQuestions: (
    messageId: string,
    toolCall: ChatToolCall,
    answers: AskQuestionsAnswer[]
  ) => void
  onCancelEdit: () => void
  onEditingContentChange: (value: string) => void
  onSaveEditOnly: () => void
  onSaveEditAndSend: () => void
}

function MessageItem({
  message,
  editing,
  editingContent,
  onCopy,
  onDelete,
  onEdit,
  onFork,
  onSubmitAskQuestions,
  onCancelEdit,
  onEditingContentChange,
  onSaveEditOnly,
  onSaveEditAndSend,
}: MessageItemProps) {
  const usage = formatUsage(message)
  const cost = formatMessageCost(message.cost)
  const duration = formatDuration(message.elapsedMs)
  const isUserMessage = message.role === "user"
  const roleLabel =
    message.role === "user"
      ? "你"
      : message.role === "tool"
        ? `工具：${message.toolName || "unknown"}`
        : "助手"
  const ToolIcon = message.role === "tool" ? SlidersHorizontal : MessageSquare

  return (
    <article
      className={cn(
        "message-row flex flex-col",
        message.role === "tool" && "gap-3",
        isUserMessage ? "items-end" : "items-start"
      )}
    >
      {message.role === "tool" ? (
        <div className="mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg border bg-muted">
          <ToolIcon className="size-4" />
        </div>
      ) : null}
      <div
        className={cn(
          "message-bubble min-w-0",
          isUserMessage &&
          "message-bubble-user max-w-[min(720px,88%)] px-4 py-3 text-foreground",
          message.role === "assistant" &&
          "message-bubble-assistant max-w-[min(760px,100%)] px-0 py-1 pl-2",
          message.role === "tool" &&
          "message-bubble-tool max-w-[min(760px,90%)] rounded-lg border bg-background px-3 py-3"
        )}
      >
        <div className="mb-2 flex flex-wrap items-center gap-2 text-xs opacity-75">
          <span>{roleLabel}</span>
          <span>{formatMessageTime(message.createdAt)}</span>
          {message.model ? <span>{message.model}</span> : null}
          {message.status && message.status !== "done" ? (
            <span>{STATUS_TEXT[message.status]}</span>
          ) : null}
        </div>

        {editing ? (
          <div className="space-y-2">
            <Textarea
              value={editingContent}
              onChange={(event) => onEditingContentChange(event.target.value)}
              className="min-h-28 bg-background text-foreground"
            />
            <div className="flex justify-end gap-2">
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={onCancelEdit}
              >
                <X />
                取消
              </Button>
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={onSaveEditOnly}
              >
                <Save />
                仅保存
              </Button>
              <Button type="button" size="sm" onClick={onSaveEditAndSend}>
                <Save />
                保存并发送
              </Button>
            </div>
          </div>
        ) : message.role === "assistant" ? (
          <>
            {message.reasoningContent?.trim() ? (
              <ReasoningContent
                content={message.reasoningContent}
                streaming={
                  message.status === "generating" ||
                  message.status === "requesting"
                }
              />
            ) : null}
            {message.content.trim() ? (
              <MarkdownMessage content={message.content} />
            ) : null}
            {message.toolCalls?.length ? (
              <div className="mt-3 grid gap-3">
                {message.toolCalls.map((toolCall) => (
                  <ToolCallPanel
                    key={toolCall.id}
                    messageId={message.id}
                    toolCall={toolCall}
                    onSubmitAskQuestions={onSubmitAskQuestions}
                  />
                ))}
              </div>
            ) : null}
            {!message.content.trim() &&
              !message.reasoningContent?.trim() &&
              !message.toolCalls?.length ? (
              <MarkdownMessage content="..." />
            ) : null}
          </>
        ) : message.role === "tool" ? (
          <div className="rounded-lg border bg-muted/40 p-2.5 text-xs">
            <div className="mb-2 font-medium text-muted-foreground">
              工具结果
            </div>
            <pre className="max-h-64 overflow-auto leading-5 break-words whitespace-pre-wrap">
              {message.content}
            </pre>
          </div>
        ) : (
          <div className="text-sm leading-6 whitespace-pre-wrap">
            {message.content}
          </div>
        )}

        {message.error ? (
          <div className="mt-2 rounded-lg border border-destructive/20 bg-destructive/10 px-2 py-1 text-sm text-destructive">
            {message.error}
          </div>
        ) : null}
        {duration || usage || cost ? (
          <div className="mt-2 flex flex-wrap gap-2 text-xs opacity-70">
            {duration ? <span>{duration}</span> : null}
            {usage ? <span>Token {usage}</span> : null}
            {cost ? <span>{cost}</span> : null}
          </div>
        ) : null}
      </div>
      {!editing ? (
        <div
          className={cn(
            "message-actions mt-2 flex flex-wrap gap-1",
            isUserMessage ? "justify-end" : "justify-start"
          )}
        >
          <Button
            type="button"
            size="icon-xs"
            variant={isUserMessage ? "secondary" : "ghost"}
            title="复制消息"
            onClick={() => onCopy(getMessageCopyContent(message))}
          >
            <Copy />
          </Button>
          {isUserMessage ? (
            <Button
              type="button"
              size="icon-xs"
              variant="secondary"
              title="编辑消息"
              onClick={() => onEdit(message)}
            >
              <Edit3 />
            </Button>
          ) : null}
          <Button
            type="button"
            size="icon-xs"
            variant={isUserMessage ? "secondary" : "ghost"}
            title="从此处分叉会话"
            onClick={() => onFork(message.id)}
          >
            <GitFork />
          </Button>
          <Button
            type="button"
            size="icon-xs"
            variant={isUserMessage ? "secondary" : "ghost"}
            title="删除消息"
            onClick={() => onDelete(message.id)}
          >
            <Trash2 />
          </Button>
        </div>
      ) : null}
    </article>
  )
}

function ReasoningContent({
  content,
  streaming,
}: {
  content: string
  streaming: boolean
}) {
  return (
    <details
      className="mb-3 rounded-lg border bg-muted/30 px-3 py-2"
      open={streaming}
    >
      <summary className="cursor-pointer text-xs font-medium text-muted-foreground">
        reasoning_content{streaming ? " · 生成中" : ""}
      </summary>
      <pre className="mt-2 max-h-80 overflow-auto text-xs leading-5 break-words whitespace-pre-wrap text-muted-foreground">
        {content}
      </pre>
    </details>
  )
}

type ToolCallPanelProps = {
  messageId: string
  toolCall: ChatToolCall
  onSubmitAskQuestions: (
    messageId: string,
    toolCall: ChatToolCall,
    answers: AskQuestionsAnswer[]
  ) => void
}

function ToolCallPanel({
  messageId,
  toolCall,
  onSubmitAskQuestions,
}: ToolCallPanelProps) {
  const askQuestions =
    toolCall.name === ASK_QUESTIONS_TOOL_NAME
      ? parseAskQuestionsArguments(toolCall.arguments)
      : null

  return (
    <div className="rounded-lg border bg-muted/30 p-3 text-sm">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="flex items-center gap-2 font-medium">
          <SlidersHorizontal className="size-4" />
          <span>Tool call: {toolCall.name}</span>
        </div>
        <Badge
          tone={
            toolCall.status === "completed"
              ? "success"
              : toolCall.status === "failed"
                ? "danger"
                : "warning"
          }
        >
          {toolCall.status === "completed"
            ? "已完成"
            : toolCall.status === "failed"
              ? "失败"
              : "等待用户"}
        </Badge>
      </div>

      <details className="mt-3 rounded-lg border bg-background/70 px-2.5 py-2 text-xs">
        <summary className="cursor-pointer text-muted-foreground">
          调用参数
        </summary>
        <pre className="mt-2 max-h-48 overflow-auto leading-5 break-words whitespace-pre-wrap">
          {toolCall.arguments || "{}"}
        </pre>
      </details>

      {toolCall.error ? (
        <div className="mt-3 rounded-lg border border-destructive/20 bg-destructive/10 px-2.5 py-2 text-sm text-destructive">
          {toolCall.error}
        </div>
      ) : null}

      {askQuestions?.error ? (
        <div className="mt-3 rounded-lg border border-destructive/20 bg-destructive/10 px-2.5 py-2 text-sm text-destructive">
          askQuestions 参数解析失败：{askQuestions.error}
        </div>
      ) : null}

      {askQuestions?.payload && toolCall.status !== "completed" ? (
        <AskQuestionsForm
          key={toolCall.id}
          payload={askQuestions.payload}
          onSubmit={(answers) =>
            onSubmitAskQuestions(messageId, toolCall, answers)
          }
        />
      ) : null}

      {toolCall.result ? (
        <details
          className="mt-3 rounded-lg border bg-background/70 px-2.5 py-2 text-xs"
          open
        >
          <summary className="cursor-pointer text-muted-foreground">
            返回给模型的结果
          </summary>
          <pre className="mt-2 max-h-48 overflow-auto leading-5 break-words whitespace-pre-wrap">
            {toolCall.result}
          </pre>
        </details>
      ) : null}
    </div>
  )
}

type AskQuestionsFormProps = {
  payload: AskQuestionsPayload
  onSubmit: (answers: AskQuestionsAnswer[]) => void
}

function AskQuestionsForm({ payload, onSubmit }: AskQuestionsFormProps) {
  const [answers, setAnswers] = React.useState<
    Record<string, string | string[]>
  >(() => {
    const initialAnswers: Record<string, string | string[]> = {}

    for (const question of payload.questions) {
      initialAnswers[question.id] = question.type === "multiple" ? [] : ""
    }

    return initialAnswers
  })
  const [error, setError] = React.useState("")

  function updateAnswer(questionId: string, value: string | string[]) {
    setAnswers((current) => ({ ...current, [questionId]: value }))
    setError("")
  }

  function toggleMultiValue(questionId: string, value: string) {
    const currentValue = answers[questionId]
    const currentValues = Array.isArray(currentValue) ? currentValue : []
    const nextValues = currentValues.includes(value)
      ? currentValues.filter((item) => item !== value)
      : [...currentValues, value]

    updateAnswer(questionId, nextValues)
  }

  function submitAnswers() {
    for (const question of payload.questions) {
      const value = answers[question.id]
      const isEmpty = Array.isArray(value)
        ? value.length === 0
        : !String(value ?? "").trim()

      if (question.required && isEmpty) {
        setError(`请回答：${question.label}`)
        return
      }
    }

    onSubmit(
      payload.questions.map((question) => ({
        questionId: question.id,
        label: question.label,
        value: answers[question.id] ?? (question.type === "multiple" ? [] : ""),
      }))
    )
  }

  return (
    <div className="mt-3 grid gap-3 rounded-lg border bg-background p-3">
      <div>
        <div className="text-sm font-semibold">
          {payload.title || "需要你的确认"}
        </div>
        {payload.description ? (
          <div className="mt-1 text-xs leading-5 text-muted-foreground">
            {payload.description}
          </div>
        ) : null}
      </div>

      {payload.questions.map((question) => (
        <div key={question.id} className="grid gap-2 rounded-lg border p-2.5">
          <div className="text-sm font-medium">
            {question.label}
            {question.required ? (
              <span className="text-destructive"> *</span>
            ) : null}
          </div>

          {question.type === "text" ? (
            <Textarea
              value={String(answers[question.id] ?? "")}
              onChange={(event) =>
                updateAnswer(question.id, event.target.value)
              }
              placeholder={question.placeholder}
              className="min-h-20"
            />
          ) : null}

          {question.type === "single" ? (
            <div className="grid gap-2">
              {(question.options ?? []).map((option) => (
                <label
                  key={option.value}
                  className="flex gap-2 rounded-lg border px-2.5 py-2"
                >
                  <input
                    type="radio"
                    name={question.id}
                    checked={answers[question.id] === option.value}
                    onChange={() => updateAnswer(question.id, option.value)}
                    className="mt-1 size-4 accent-primary"
                  />
                  <span className="min-w-0 flex-1">
                    <span className="block text-sm">{option.label}</span>
                    {option.description ? (
                      <span className="block text-xs leading-5 text-muted-foreground">
                        {option.description}
                      </span>
                    ) : null}
                  </span>
                </label>
              ))}
            </div>
          ) : null}

          {question.type === "multiple" ? (
            <div className="grid gap-2">
              {(question.options ?? []).map((option) => {
                const currentValue = answers[question.id]
                const selectedValues = Array.isArray(currentValue)
                  ? currentValue
                  : []

                return (
                  <label
                    key={option.value}
                    className="flex gap-2 rounded-lg border px-2.5 py-2"
                  >
                    <input
                      type="checkbox"
                      checked={selectedValues.includes(option.value)}
                      onChange={() =>
                        toggleMultiValue(question.id, option.value)
                      }
                      className="mt-1 size-4 accent-primary"
                    />
                    <span className="min-w-0 flex-1">
                      <span className="block text-sm">{option.label}</span>
                      {option.description ? (
                        <span className="block text-xs leading-5 text-muted-foreground">
                          {option.description}
                        </span>
                      ) : null}
                    </span>
                  </label>
                )
              })}
            </div>
          ) : null}
        </div>
      ))}

      {error ? <div className="text-sm text-destructive">{error}</div> : null}

      <div className="flex justify-end">
        <Button type="button" onClick={submitAnswers}>
          <Send />
          提交给模型
        </Button>
      </div>
    </div>
  )
}