"use client";

import { useId, useState, type KeyboardEvent } from "react";

import { Button } from "@/components/ui/Button";
import { TextInput } from "@/components/ui/TextInput";
import type { ClarifyOptionVM } from "@/lib/workbench/clarify";

interface ChoiceChipsProps {
  // 反问的澄清问题。
  question: string;
  // 2–4 个具体选项；为空时只渲染自由输入。
  options: ClarifyOptionVM[];
  // 是否提供常驻自由输入兜底。
  allowFreeText: boolean;
  // 点选某选项：回传其 value（供上层折进 instruction）。
  onPick: (value: string) => void;
  // 提交自由输入文本（allowFreeText 且提供此回调时可用）。
  onFreeText?: (text: string) => void;
}

// AI 反问澄清的选项芯片组（WFW-9 M1）：渲染一个问题 + 一组选项芯片（复用 Button），
// 作者点选一项即高亮并回传 value；可选自由输入兜底。纯展示、无副作用、无 API 调用。
export function ChoiceChips({
  question,
  options,
  allowFreeText,
  onPick,
  onFreeText,
}: ChoiceChipsProps) {
  const [picked, setPicked] = useState<string | null>(null);
  const [freeText, setFreeText] = useState("");
  const inputId = useId();
  const hasOptions = options.length > 0;
  const canSubmit = Boolean(onFreeText) && freeText.trim().length > 0;

  const handlePick = (value: string): void => {
    setPicked(value);
    onPick(value);
  };

  const handleFreeSubmit = (): void => {
    const trimmed = freeText.trim();
    if (!trimmed || !onFreeText) return;
    onFreeText(trimmed);
    setFreeText("");
  };

  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>): void => {
    if (event.key !== "Enter") return;
    event.preventDefault();
    handleFreeSubmit();
  };

  return (
    <div className="space-y-2">
      <p className="text-sm text-ink">{question}</p>

      {hasOptions ? (
        <div className="flex flex-wrap gap-2" role="group" aria-label="澄清选项">
          {options.map((option, index) => {
            const active = option.value === picked;
            return (
              <Button
                key={`${index}-${option.value}`}
                type="button"
                aria-pressed={active}
                onClick={() => handlePick(option.value)}
                variant={active ? "outline" : "secondary"}
                size="sm"
              >
                {option.label}
              </Button>
            );
          })}
        </div>
      ) : null}

      {allowFreeText ? (
        <div className="flex items-center gap-2">
          <label htmlFor={inputId} className="sr-only">
            自由回答
          </label>
          <TextInput
            id={inputId}
            value={freeText}
            onChange={(event) => setFreeText(event.target.value)}
            onKeyDown={handleKeyDown}
            controlSize="sm"
            placeholder="或直接说你的想法…"
            className="flex-1"
          />
          <Button
            type="button"
            onClick={handleFreeSubmit}
            disabled={!canSubmit}
            variant="secondary"
            size="sm"
          >
            提交
          </Button>
        </div>
      ) : null}
    </div>
  );
}