import { CircleCheck, CircleHelp, LoaderCircle, RotateCw, X } from "lucide-react";
import { Button } from "@/shared/ui/button";
import { Checkbox } from "@/shared/ui/checkbox";
import { cn } from "@/shared/ui/cn";
import { Radio } from "@/shared/ui/radio";
import { Textarea } from "@/shared/ui/textarea";
import type { InteractionAnswer } from "../api/interaction-requests";
import type { InteractionRequestEntry, InteractionRequestsController } from "../hooks/use-interaction-requests";
import { AgentUserMessageText } from "./agent-user-message-text";

const statuses = { pending: "等待回答", answered: "答案已保存", skipped: "已跳过", cancelled: "已取消", invalidated: "已失效" };
const deliveries = { queued: "等待继续", dispatching: "正在继续处理", delivered: "已继续处理", blocked: "继续失败，可以重试", cancelled: "已停止继续" };

export function AgentInteractionRequests({ controller, representedMessageIds }: {
  controller: InteractionRequestsController;
  representedMessageIds?: ReadonlySet<string>;
}) {
  return <section aria-label="Agent 提问" className="space-y-3">
    {controller.checking ? <p role="status" className="text-xs text-muted-foreground">正在核对提问状态，核对后可回答。</p> : null}
    {controller.error ? <div role="alert" className="text-sm">{controller.error}<Button type="button" variant="ghost" size="sm" onClick={() => void controller.refresh()} aria-label="重新核对提问"><RotateCw size={14} aria-hidden />重新核对</Button></div> : null}
    {controller.entries.filter(({ record }) => !(record.delivery && ["answered", "skipped"].includes(record.status)
      && representedMessageIds?.has(record.delivery.native_message_id))).map((entry) =>
        <AgentInteractionRequestCard key={entry.record.interaction_id} entry={entry} checking={controller.checking}
          onChange={(draft) => controller.update(entry.record.interaction_id, draft)} onAction={(action) => void controller.act(entry.record.interaction_id, action)} />)}
  </section>;
}

/** Render the stored human answer, independent of the model-facing transcript. */
export function AgentInteractionReply({ entry, checking, onResume }: {
  entry: InteractionRequestEntry;
  checking: boolean;
  onResume: () => void;
}) {
  const { record } = entry;
  const retryable = record.delivery && ["queued", "dispatching", "blocked"].includes(record.delivery.status);
  return <div role="group" aria-label="已提交的回答" className="min-w-0 space-y-3">
    <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
      <CircleCheck size={14} className="shrink-0" aria-hidden />
      <span>{record.status === "skipped" ? "已跳过" : "已回答"}</span>
    </div>
    {record.status === "skipped" ? <p className="text-sm leading-6">已跳过本组可选问题。</p> : <dl className="space-y-3">
      {record.questions.map((question) => {
        const answer = record.answers?.find((item) => item.question_id === question.question_id);
        return <div key={question.question_id} className="min-w-0">
          <dt className="mb-1 break-words text-xs leading-5 text-muted-foreground">{question.title}</dt>
          <dd className="space-y-1.5 whitespace-pre-wrap break-words text-sm leading-6 text-foreground">
            {answer?.selected_options.map((option) => <div key={option.id} className="font-medium"><AgentUserMessageText content={option.label} /></div>)}
            {answer?.custom_text ? <div>{answer.selected_options.length ? <span className="block text-xs text-muted-foreground">补充说明</span> : null}<AgentUserMessageText content={answer.custom_text} /></div> : null}
            {!answer?.selected_options.length && !answer?.custom_text ? <p className="text-muted-foreground">未填写</p> : null}
          </dd>
        </div>;
      })}
    </dl>}
    {entry.error ? <p role="alert" className="text-xs leading-5 text-destructive">{entry.error}</p> : null}
    {entry.conflict ? <details className="text-xs"><summary className="cursor-pointer">查看本窗口未提交的输入，供复制</summary><pre className="mt-2 whitespace-pre-wrap break-words">{JSON.stringify(entry.conflict, null, 2)}</pre></details> : null}
    {record.delivery ? <div className="flex flex-wrap items-center justify-between gap-2 border-t border-border pt-2">
      <span role="status" className="text-xs leading-5 text-muted-foreground">{checking ? "正在核对提问" : deliveries[record.delivery.status]}</span>
      {retryable ? <Button type="button" variant="ghost" size="sm" disabled={checking || entry.busy} onClick={onResume}>
        <RotateCw size={13} aria-hidden />重试继续
      </Button> : null}
    </div> : null}
  </div>;
}

export function AgentInteractionRequestCard({ entry, checking, onChange, onAction }: {
  entry: InteractionRequestEntry; checking: boolean; onChange: (draft: InteractionAnswer[]) => void;
  onAction: (action: "reply" | "skip" | "cancel" | "resume") => void;
}) {
  const { record } = entry;
  if (["answered", "skipped"].includes(record.status)) return <div className="flex min-w-0 justify-end">
    <div className="agent-panel-user-message min-w-0 max-w-[92%] rounded-2xl px-3 py-3">
      <AgentInteractionReply entry={entry} checking={checking} onResume={() => onAction("resume")} />
    </div>
  </div>;
  const pending = record.status === "pending";
  const disabled = checking || entry.busy || !pending;
  const values = entry.draft;
  const answerFor = (id: string) => values.find((answer) => answer.question_id === id) ?? { question_id: id, selected_option_ids: [], custom_text: "" };
  const change = (answer: InteractionAnswer) => onChange(record.questions.map((question) => question.question_id === answer.question_id ? answer : answerFor(question.question_id)));
  const valid = record.questions.every((question) => !question.required || answerFor(question.question_id).selected_option_ids.length > 0 || (question.allow_custom && answerFor(question.question_id).custom_text.trim().length > 0));
  const draftStatus = checking ? "正在核对提问" : entry.saving ? "正在保存草稿" : entry.dirty ? "草稿尚未保存"
    : entry.draft.some((answer) => answer.selected_option_ids.length || answer.custom_text.trim()) ? "草稿已保存" : "提交后继续处理";

  return <article aria-label="需要补充的信息" aria-busy={entry.busy || checking}
    className="min-w-0 overflow-hidden rounded-xl border border-border bg-card text-card-foreground">
    <header className="flex min-h-10 items-center justify-between gap-3 px-4 pt-3 sm:px-5">
      <div role="status" className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
        <CircleHelp size={15} className="shrink-0" aria-hidden />
        <span>{checking ? "核对中" : statuses[record.status]}</span>
      </div>
      {pending ? <Button type="button" size="icon-sm" variant="ghost" aria-label="取消提问" title="取消提问"
        disabled={disabled} onClick={() => onAction("cancel")}><X size={15} aria-hidden /></Button> : null}
    </header>

    <div className="space-y-5 px-4 pb-4 pt-2 sm:px-5 sm:pb-5">
      {record.questions.map((question) => {
        const answer = answerFor(question.question_id);
        const selected = new Set(answer.selected_option_ids);
        return <fieldset key={question.question_id} disabled={disabled} className="min-w-0">
          <legend className="mb-2 w-full text-sm font-semibold leading-6 text-foreground">
            {question.title}
            {pending ? <span className="ml-2 text-[11px] font-normal text-muted-foreground">
              {question.required ? "必填" : "可选"}{question.options.length ? question.mode === "multiple" ? " · 可多选" : " · 单选" : ""}
            </span> : null}
          </legend>
          {pending ? <>
            <p className="mb-3 whitespace-pre-wrap break-words text-sm leading-6 text-muted-foreground">{question.body}</p>
            <div className="space-y-2">
              {question.options.map((option) => <label key={option.id}
                className={cn("flex min-h-11 min-w-0 cursor-pointer items-start gap-2.5 rounded-lg border px-3 py-2.5 text-sm leading-6 has-[:disabled]:cursor-default",
                  selected.has(option.id) ? "border-primary/50 bg-primary/5" : "border-border bg-background has-[:enabled]:hover:bg-muted/40")}>
                <span className="mt-0.5 inline-flex shrink-0">
                  {question.mode === "single" ? <Radio name={`${record.interaction_id}-${question.question_id}`}
                    checked={selected.has(option.id)} onChange={() => change({ ...answer, selected_option_ids: [option.id] })} />
                    : <Checkbox checked={selected.has(option.id)} onChange={(event) => change({ ...answer,
                      selected_option_ids: event.target.checked ? [...answer.selected_option_ids, option.id] : answer.selected_option_ids.filter((id) => id !== option.id) })} />}
                </span>
                <span className="min-w-0 flex-1 break-words">{option.label}</span>
              </label>)}
            </div>
            {question.allow_custom ? <label className="mt-3 block text-xs font-medium leading-5 text-foreground">
              {question.options.length ? "自定义回答 / 补充说明" : "你的回答"}
              <Textarea aria-label={`${question.title}：补充说明`} placeholder={question.options.length ? "可以直接填写回答，也可以补充已选内容" : "请输入你的回答"}
                maxLength={2000} value={answer.custom_text} onChange={(event) => change({ ...answer, custom_text: event.target.value })}
                className="mt-1.5 min-h-20 resize-y bg-background text-sm font-normal leading-6" />
            </label> : null}
          </> : <p className="text-sm leading-6 text-muted-foreground">未提交回答。</p>}
        </fieldset>;
      })}
      {entry.error ? <p role="alert" className="text-sm leading-5 text-destructive">{entry.error}</p> : null}
      {entry.conflict ? <details className="text-xs"><summary className="cursor-pointer">查看本窗口未提交的输入，供复制</summary><pre className="mt-2 whitespace-pre-wrap break-words">{JSON.stringify(entry.conflict, null, 2)}</pre></details> : null}
    </div>

    <footer className="flex flex-wrap items-center justify-between gap-3 border-t border-border px-4 py-3 sm:px-5">
      <p role="status" className="text-xs leading-5 text-muted-foreground">{pending ? draftStatus : "本次提问已结束"}</p>
      <div className="ml-auto flex flex-wrap gap-2">
        {pending ? <>
          {record.questions.every((question) => !question.required) ? <Button type="button" size="sm" variant="outline" disabled={disabled} onClick={() => onAction("skip")}>跳过</Button> : null}
          <Button type="button" size="sm" disabled={disabled || !valid} onClick={() => onAction("reply")}>
            {entry.busy ? <LoaderCircle size={14} className="animate-spin motion-reduce:animate-none" aria-hidden /> : null}提交回答
          </Button>
        </> : null}
      </div>
    </footer>
  </article>;
}