AstroResearch/dashboard/src/components/agent/AskUserQuestionCard.tsx

// dashboard/src/features/agent/AskUserQuestionCard.tsx
import { useState, useEffect } from 'react';
import axios from 'axios';
import { MessageCircle, Send, Loader, CheckSquare, Square } from 'lucide-react';
import type { PendingQuestion } from '../../types';

interface AskUserQuestionCardProps {
  onAnswered?: () => void;
  onQuestionCountChange?: (count: number) => void;
}

export function AskUserQuestionCard({
  onAnswered,
  onQuestionCountChange,
}: AskUserQuestionCardProps) {
  const [pendingQuestions, setPendingQuestions] = useState<PendingQuestion[]>(
    []
  );
  const [answers, setAnswers] = useState<Record<string, string[]>>({});
  const [freeText, setFreeText] = useState<Record<string, string>>({});
  const [submitting, setSubmitting] = useState<Record<string, boolean>>({});
  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
  const [error, setError] = useState<Record<string, string | null>>({});

  // 轮询待回答问题
  useEffect(() => {
    let cancelled = false;

    const poll = async () => {
      try {
        const res = await axios.get<PendingQuestion[]>('/api/chat/questions');
        if (!cancelled) {
          const data = Array.isArray(res.data) ? res.data : [];
          setPendingQuestions(data);
          // 自动展开新问题
          setExpanded((prev) => {
            const next = { ...prev };
            for (const q of data) {
              if (q && q.question_id && !(q.question_id in next)) {
                next[q.question_id] = true;
              }
            }
            return next;
          });
        }
      } catch (e) {
        console.error('获取待回答问题失败:', e);
      }
    };

    poll();
    const interval = setInterval(poll, 3000); // 每3秒轮询
    return () => {
      cancelled = true;
      clearInterval(interval);
    };
  }, []);

  // 当待处理问题数量改变时，报告给父容器
  useEffect(() => {
    onQuestionCountChange?.(pendingQuestions.length);
  }, [pendingQuestions.length, onQuestionCountChange]);

  const toggleOption = (
    questionId: string,
    optionLabel: string,
    multiSelect: boolean
  ) => {
    setAnswers((prev) => {
      const current = prev[questionId] || [];
      if (multiSelect) {
        return {
          ...prev,
          [questionId]: current.includes(optionLabel)
            ? current.filter((o) => o !== optionLabel)
            : [...current, optionLabel],
        };
      } else {
        return { ...prev, [questionId]: [optionLabel] };
      }
    });
  };

  const handleSubmit = async (questionId: string) => {
    setSubmitting((prev) => ({ ...prev, [questionId]: true }));
    setError((prev) => ({ ...prev, [questionId]: null }));
    try {
      await axios.post('/api/chat/answer', {
        question_id: questionId,
        answers: answers[questionId] || [],
        free_text: freeText[questionId] || null,
      });
      // 移除已回答的问题
      setPendingQuestions((prev) =>
        prev.filter((q) => q.question_id !== questionId)
      );
      // 清理状态
      setAnswers((prev) => {
        const next = { ...prev };
        delete next[questionId];
        return next;
      });
      setFreeText((prev) => {
        const next = { ...prev };
        delete next[questionId];
        return next;
      });
      setError((prev) => {
        const next = { ...prev };
        delete next[questionId];
        return next;
      });
      onAnswered?.();
    } catch (e: unknown) {
      console.error('提交答案失败:', e);
      const axiosError = e as { response?: { status?: number } };
      const msg =
        axiosError.response?.status === 410
          ? '该问题已超时或已被回答'
          : axiosError.response?.status === 404
            ? '未找到该问题'
            : '提交失败，请稍后重试';
      setError((prev) => ({ ...prev, [questionId]: msg }));
    } finally {
      setSubmitting((prev) => ({ ...prev, [questionId]: false }));
    }
  };

  const dismissQuestion = (questionId: string) => {
    setPendingQuestions((prev) =>
      prev.filter((q) => q.question_id !== questionId)
    );
    setExpanded((prev) => ({ ...prev, [questionId]: false }));
  };

  if (pendingQuestions.length === 0) return null;

  return (
    <div className="flex flex-col gap-2">
      {pendingQuestions.map((q) => {
        if (!q || !q.question_id) return null;

        const isExpanded = expanded[q.question_id] !== false;
        const isSubmitting = submitting[q.question_id] || false;
        const qError = error[q.question_id] || null;
        const options = Array.isArray(q.options) ? q.options : [];
        const multiSelect = q.multi_select === true;

        return (
          <div
            key={q.question_id}
            className="rounded-md border-l-4 border-l-blueprint bg-sunken p-4 transition-all pointer-events-auto text-xs"
          >
            {/* 标题栏 - 头部与问题放在同一行，可省略独立的问题文本框 */}
            <div className="mb-2.5 flex items-center justify-between border-b border-subtle pb-2 min-w-0">
              <div className="flex items-center gap-1.5 min-w-0 flex-1 mr-3">
                <MessageCircle className="h-3.5 w-3.5 text-blueprint shrink-0" />
                <span className="px-1.5 py-0.2 rounded bg-border-subtle text-[9px] font-bold text-content shrink-0">
                  {q.header || '提问'}
                </span>
                <span
                  className="font-extrabold text-content text-[11px] truncate flex-1"
                  title={q.question || ''}
                >
                  {q.question || ''}
                </span>
              </div>
              <div className="flex items-center gap-2 shrink-0">
                {options.length > 0 && (
                  <button
                    type="button"
                    onClick={() =>
                      setExpanded((prev) => ({
                        ...prev,
                        [q.question_id]: !prev[q.question_id],
                      }))
                    }
                    className="text-[10px] font-bold text-blueprint hover:underline cursor-pointer select-none"
                  >
                    {isExpanded ? '收起选项' : '展开选项'}
                  </button>
                )}
              </div>
            </div>

            {/* 内容区 */}
            {isExpanded && (
              <div className="space-y-2.5">
                {/* 选项列表 */}
                {options.length > 0 && (
                  <div className="space-y-1.5">
                    <span className="text-[9px] font-bold text-tertiary uppercase tracking-wider block">
                      {multiSelect ? '可多选' : '请选择一项'}
                    </span>
                    <div className="space-y-1.5">
                      {options.map((option, idx) => {
                        const label =
                          typeof option?.label === 'string'
                            ? option.label
                            : String(option);
                        const desc =
                          typeof option?.description === 'string'
                            ? option.description
                            : '';
                        const selected = (
                          answers[q.question_id] || []
                        ).includes(label);

                        return (
                          <button
                            key={idx}
                            onClick={() =>
                              toggleOption(q.question_id, label, multiSelect)
                            }
                            disabled={isSubmitting}
                            className={`w-full text-left px-2.5 py-1.5 rounded-md border text-[11px] font-semibold transition-all cursor-pointer flex items-center gap-2 ${
                              selected
                                ? 'bg-blueprint/5 border-blueprint text-blueprint font-bold'
                                : 'bg-surface border-subtle text-secondary hover:border-subtle hover:bg-sunken'
                            } disabled:opacity-50`}
                          >
                            {/* 选择指示器 */}
                            {multiSelect ? (
                              selected ? (
                                <CheckSquare className="w-3.5 h-3.5 text-blueprint shrink-0" />
                              ) : (
                                <Square className="w-3.5 h-3.5 text-tertiary shrink-0" />
                              )
                            ) : (
                              <div
                                className={`w-3.5 h-3.5 rounded-full border-2 shrink-0 ${
                                  selected
                                    ? 'border-blueprint bg-blueprint'
                                    : 'border-subtle'
                                }`}
                              >
                                {selected && (
                                  <div className="w-full h-full flex items-center justify-center">
                                    <div className="w-1 h-1 rounded-full bg-white" />
                                  </div>
                                )}
                              </div>
                            )}

                            {/* 将 label 与 desc 合并在同一行呈现以压缩高度 */}
                            <div className="min-w-0 flex-1 flex items-baseline gap-1.5 truncate">
                              <span className="font-extrabold text-content text-[11px] shrink-0 leading-normal">
                                {label}
                              </span>
                              {desc && (
                                <span
                                  className="text-[10px] text-secondary font-medium truncate leading-normal"
                                  title={desc}
                                >
                                  — {desc}
                                </span>
                              )}
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  </div>
                )}

                {/* 自由文本 */}
                <div className="w-full">
                  <textarea
                    value={freeText[q.question_id] || ''}
                    onChange={(e) =>
                      setFreeText((prev) => ({
                        ...prev,
                        [q.question_id]: e.target.value,
                      }))
                    }
                    disabled={isSubmitting}
                    placeholder="补充说明（可选）..."
                    rows={1}
                    className="w-full bg-surface border border-default rounded-md px-2.5 py-1.5 text-[11px] text-content placeholder-tertiary focus:outline-none focus:border-blueprint focus:ring-1 focus:ring-blueprint/10 resize-none disabled:opacity-50 min-h-[32px] max-h-24 leading-normal"
                  />
                </div>

                {/* 错误提示 */}
                {qError && (
                  <div className="text-[10px] text-danger bg-red-50 border border-red-200 dark:bg-rose-500/10 dark:border-rose-500/30 rounded-md px-2.5 py-1.5 font-bold">
                    {qError}
                  </div>
                )}

                {/* 提交按钮 */}
                <div className="flex gap-1.5">
                  <button
                    onClick={() => handleSubmit(q.question_id)}
                    disabled={isSubmitting}
                    className="flex-1 flex items-center justify-center gap-1.5 bg-success hover:opacity-90 border border-success text-white rounded-md py-1.5 text-[11px] font-bold transition-colors cursor-pointer disabled:opacity-50"
                  >
                    {isSubmitting ? (
                      <>
                        <Loader className="w-3 h-3 animate-spin" />
                        <span>提交中...</span>
                      </>
                    ) : (
                      <>
                        <Send className="w-3 h-3" />
                        <span>提交回答</span>
                      </>
                    )}
                  </button>
                  <button
                    onClick={() => dismissQuestion(q.question_id)}
                    disabled={isSubmitting}
                    className="px-3 bg-sunken hover:bg-border-subtle text-secondary rounded-md text-[11px] font-bold transition-colors cursor-pointer disabled:opacity-50"
                  >
                    忽略
                  </button>
                </div>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}