import { Check } from "lucide-react";
import { useMemo } from "react";

import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
import type { ClarificationPayload } from "@/roundtable-planning/api/multi-agent";
import { resolveAllowMultiple } from "@/roundtable-planning/lib/clarification";

export type IntentClarificationSelection = {
  selectedIds: string[];
  custom: string;
};

/**
 * Composite selection-map key for one clarification question. When the intent
 * agent asks several questions in one turn, each needs its own selection state,
 * so we key by `${msgId}::${clarificationId}` (falling back to the arrival
 * index when the payload has no id). The map itself lives in `useStep1Intent`.
 */
export function clarificationKey(
  msgId: number,
  clarId: string | undefined,
  index: number,
): string {
  return `${msgId}::${clarId ?? `idx-${index}`}`;
}

type ClarificationOption = {
  id: string;
  label: string;
  description?: string;
};

function normalizeOptions(raw: unknown[]): ClarificationOption[] {
  return raw
    .map((opt, index) => {
      if (typeof opt === "string") {
        const label = opt.trim();
        return label ? { id: `option-${index}`, label } : null;
      }
      if (opt && typeof opt === "object" && "label" in opt) {
        const obj = opt as { id?: unknown; label?: unknown; description?: unknown };
        const label = String(obj.label ?? "").trim();
        if (!label) return null;
        const id = String(obj.id ?? label).trim() || `option-${index}`;
        const description =
          typeof obj.description === "string" && obj.description.trim()
            ? obj.description.trim()
            : undefined;
        return { id, label, description };
      }
      return null;
    })
    .filter((opt): opt is ClarificationOption => opt !== null);
}

export function formatIntentClarificationAnswer(
  payload: ClarificationPayload,
  selection: IntentClarificationSelection,
): string | null {
  const options = normalizeOptions(Array.isArray(payload.options) ? payload.options : []);
  const selectedLabels = selection.selectedIds
    .map((sid) => options.find((option) => option.id === sid)?.label)
    .filter((label): label is string => Boolean(label && label.trim()));
  const trimmedCustom = selection.custom.trim();

  if (selectedLabels.length > 0 && trimmedCustom) {
    return `我选择：${selectedLabels.join("、")}；补充：${trimmedCustom}`;
  }
  if (selectedLabels.length > 0) {
    return `我选择：${selectedLabels.join("、")}`;
  }
  if (trimmedCustom) {
    return trimmedCustom;
  }
  return null;
}

interface IntentClarificationCardProps {
  payload: ClarificationPayload;
  fallbackContent?: string;
  selection: IntentClarificationSelection;
  onSelectionChange: (next: IntentClarificationSelection) => void;
  disabled?: boolean;
  submitting?: boolean;
  /** Multi-select: submit current selection. Single-select: also used for custom text. */
  onSubmit: (overrideSelection?: IntentClarificationSelection) => void;
  /**
   * Defer submission: even single-select option clicks only *record* the
   * selection (via onSelectionChange) instead of sending immediately, and the
   * card hides its own submit button. Used when several questions are answered
   * together and the parent owns one combined submit button.
   */
  deferSubmit?: boolean;
}

export function IntentClarificationCard({
  payload,
  fallbackContent,
  selection,
  onSelectionChange,
  disabled = false,
  submitting = false,
  onSubmit,
  deferSubmit = false,
}: IntentClarificationCardProps) {
  const options = useMemo(
    () => normalizeOptions(Array.isArray(payload.options) ? payload.options : []),
    [payload.options],
  );

  const allowMultiple = resolveAllowMultiple(
    payload.allowMultiple,
    payload.clarificationType,
  );

  const canSubmit = useMemo(() => {
    return selection.selectedIds.length > 0 || selection.custom.trim().length > 0;
  }, [selection.custom, selection.selectedIds]);

  // In defer mode the parent owns the (combined) submit button.
  const showSubmitButton = !deferSubmit && (allowMultiple || payload.allowCustom !== false);

  function handleOptionClick(optionId: string) {
    if (disabled || submitting) return;
    if (!allowMultiple) {
      if (deferSubmit) {
        // Single-select but combined submit: just record the choice (replace),
        // keep any custom text the user already typed.
        onSelectionChange({ ...selection, selectedIds: [optionId] });
        return;
      }
      onSubmit({ selectedIds: [optionId], custom: "" });
      return;
    }
    const next = selection.selectedIds.includes(optionId)
      ? selection.selectedIds.filter((id) => id !== optionId)
      : [...selection.selectedIds, optionId];
    onSelectionChange({ ...selection, selectedIds: next });
  }

  function updateCustom(value: string) {
    if (disabled || submitting) return;
    onSelectionChange({ ...selection, custom: value });
  }

  return (
    <div className="mt-2 rounded-xl border border-red-100 bg-white p-3 shadow-sm">
      <div className="space-y-1.5">
        <div className="flex items-center gap-2">
          <span className="text-[10px] font-bold uppercase tracking-wide text-primary">
            需要你的确认
          </span>
          {payload.clarificationType ? (
            <span className="rounded-full bg-[var(--brand-200)]/60 px-2 py-0.5 text-[9px] font-mono font-bold text-[var(--brand-950)]">
              {payload.clarificationType}
            </span>
          ) : null}
        </div>
        {payload.context ? (
          <p className="text-[11px] leading-relaxed text-slate-500 italic">{payload.context}</p>
        ) : null}
        <div className="text-xs font-medium leading-relaxed text-slate-800">
          {payload.question || fallbackContent}
        </div>
      </div>

      {options.length > 0 ? (
        <div className="mt-3 grid gap-2">
          <div className="text-[10px] text-slate-500">
            {allowMultiple ? "可多选（再次点击取消选择）" : "请选择一项（点击即发送）"}
          </div>
          {options.map((option) => {
            const isSelected = selection.selectedIds.includes(option.id);
            // Highlight selected options whenever the choice is "sticky" — i.e.
            // multi-select, or single-select in defer mode (where a click records
            // rather than immediately sends).
            const showSelected = isSelected && (allowMultiple || deferSubmit);
            return (
              <button
                key={option.id}
                type="button"
                disabled={disabled || submitting}
                onClick={() => handleOptionClick(option.id)}
                className={cn(
                  "flex w-full items-start justify-between gap-2 rounded-xl border px-3 py-2 text-left transition",
                  showSelected
                    ? "border-primary bg-primary text-white shadow-sm"
                    : "border-slate-200 bg-slate-50/80 text-slate-800 hover:border-primary/40 hover:bg-white",
                  !allowMultiple && !deferSubmit && !disabled && !submitting && "active:scale-[0.99]",
                  (disabled || submitting) && "cursor-not-allowed opacity-60",
                )}
              >
                <span className="flex min-w-0 flex-1 flex-col items-start gap-1">
                  <span className="text-[11px] font-bold">{option.label}</span>
                  {option.description ? (
                    <span
                      className={cn(
                        "text-[10px] leading-snug",
                        showSelected ? "text-white/80" : "text-slate-500",
                      )}
                    >
                      {option.description}
                    </span>
                  ) : null}
                </span>
                {showSelected ? (
                  <Check className="mt-0.5 h-3.5 w-3.5 shrink-0" />
                ) : null}
              </button>
            );
          })}
        </div>
      ) : null}

      {payload.allowCustom !== false ? (
        <div className="mt-3 flex flex-col gap-2">
          <Textarea
            value={selection.custom}
            onChange={(event) => updateCustom(event.currentTarget.value)}
            placeholder={
              options.length > 0
                ? allowMultiple
                  ? "可选：补充说明（与所选项一起发送），或在此填写自定义回答"
                  : "如果以上选项都不合适，可以在这里输入自定义回答"
                : "如果以上选项都不合适，可以在这里输入你的回答"
            }
            disabled={disabled || submitting}
            className="min-h-16 resize-none border-slate-200 text-xs"
          />
        </div>
      ) : null}

      {showSubmitButton ? (
        <div className="mt-3 flex justify-end">
          <Button
            type="button"
            size="sm"
            disabled={disabled || submitting || !canSubmit}
            onClick={() => onSubmit()}
            className="h-8 rounded-xl px-4 text-xs font-bold"
          >
            {submitting ? "发送中…" : "发送回答"}
          </Button>
        </div>
      ) : null}
    </div>
  );
}