'use client';

import { useState } from 'react';
import { ChevronDown, ChevronRight } from 'lucide-react';
import type { Signal } from '@pac/types';
import { Button } from '@/components/ui/button';

/**
 * 引导节点区 —— 确认单上「还有什么要您定的」。
 *
 * 规格见 docs/design/assignment-agent-flow.md §五。这一层是**纯呈现**：
 * ⛔ 不判定该不该亮（那是服务端 `computeSignals` 的事），⛔ 不执行动作（只把 intent 抛上去）。
 *
 * ── 三条来自教条的硬要求 ────────────────────────────────────────
 * ① **不截断**：`action` 层全部展开。防噪音靠把 `info` 折叠，⛔ 不靠丢弃 ——
 *    藏起一条主管就不知道有东西卡着（G9）。
 * ② **默认永远是 no-op 且要写出来**：每条都显示"不处理会怎样"，
 *    这样「一条不点、直接确认」是**看得见**的安全选项（G4/G8）。
 * ③ **选项是可点击的动作，不是让他照着打字**（G10）。
 *    打字 → 模型理解 → 翻译成动作，每一环都可能错；点击是确定性的。
 */
export function ConfirmSheetSignals({
  signals,
  readOnly,
  busyIntent,
  onIntent,
}: {
  signals: Signal[];
  readOnly: boolean;
  /** 正在执行的 intent（按钮转圈用）；null = 空闲 */
  busyIntent?: string | null;
  onIntent: (intent: string, args?: Record<string, unknown>) => void;
}) {
  const [infoOpen, setInfoOpen] = useState(false);
  if (signals.length === 0) return null;

  const action = signals.filter((s) => s.tier === 'action');
  const info = signals.filter((s) => s.tier === 'info');

  return (
    <div className="border-b bg-amber-50/40">
      {action.map((s) => (
        <Row key={s.key} signal={s} readOnly={readOnly} busyIntent={busyIntent} onIntent={onIntent} />
      ))}

      {/*
        ⚠️ 纯信息类默认折叠 —— 它们「不管也没事」，展开会把真正要处置的那几条挤下去。
        ⛔ 但不能不给：主管看到「405 人」时，"这数哪来的"和这个数本身一样重要（T14）。
      */}
      {info.length > 0 && (
        <div className="px-3 py-1.5">
          <button
            type="button"
            onClick={() => setInfoOpen((v) => !v)}
            className="flex items-center gap-1 text-[11px] text-slate-500 hover:text-slate-700"
          >
            {infoOpen ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
            另有 {info.length} 条说明
          </button>
          {infoOpen &&
            info.map((s) => (
              <Row
                key={s.key}
                signal={s}
                readOnly={readOnly}
                busyIntent={busyIntent}
                onIntent={onIntent}
                muted
              />
            ))}
        </div>
      )}
    </div>
  );
}

function Row({
  signal: s,
  readOnly,
  busyIntent,
  onIntent,
  muted,
}: {
  signal: Signal;
  readOnly: boolean;
  busyIntent?: string | null;
  onIntent: (intent: string, args?: Record<string, unknown>) => void;
  muted?: boolean;
}) {
  return (
    <div className={`px-3 py-2 ${muted ? 'pt-1.5' : 'border-b border-amber-100/70 last:border-b-0'}`}>
      {/* ⚠️ 标题是**唯一**加粗的地方：一条消息里加粗超过两处就等于没有重点 */}
      <p className={muted ? 'text-[11.5px] text-slate-600' : 'text-[12px] font-medium text-slate-800'}>
        {s.title}
      </p>
      <p className="mt-0.5 text-[11px] leading-relaxed text-slate-500">{s.why}</p>
      {/*
        ⭐ 默认路径**必须显示**，而且要看起来是个正常选项而不是失败兜底 ——
        「一条不点直接确认」在任何情况下都安全，这句话是它的证据。
      */}
      <p className="mt-0.5 text-[10.5px] text-slate-400">{s.defaultLabel}</p>
      {!readOnly && s.options.length > 0 && (
        <div className="mt-1.5 flex flex-wrap gap-1.5">
          {s.options.map((o) => {
            const busy = busyIntent === o.intent;
            return (
              <Button
                key={`${o.intent}:${o.label}`}
                size="sm"
                variant="outline"
                disabled={busyIntent != null}
                onClick={() => onIntent(o.intent, o.args)}
                className="h-6 border-amber-300 bg-white px-2 text-[11px] text-amber-900 hover:bg-amber-50"
              >
                {busy ? '处理中…' : o.label}
              </Button>
            );
          })}
        </div>
      )}
    </div>
  );
}
