import type { FlowSessionOption } from "./flowSession";

/**
 * 会话选择器（切片 FV1；design/19 §2）—— 「看哪个会话的链路图」变成可切的。
 * props 驱动（不读 store），因此可被真实渲染测试直接喂输入（同 `FlowTurnPicker`）。
 *
 * 选项**只含发布会话白名单内**的会话（web / sess-backthink / web: 次级会话）。白名单外的
 * 会话（群聊 / 陌生人的 `sess-*`）永远没有链路图，列出来只会让用户点了看到空态 ——
 * 假承诺不如不列，诚实说明写在下面那行小字里。
 */
export function FlowSessionPicker({
  options,
  value,
  onSelect,
}: {
  options: readonly FlowSessionOption[];
  value: string;
  onSelect: (sessionId: string) => void;
}): React.ReactNode {
  return (
    <div className="space-y-1.5">
      <div className="flex flex-wrap items-center gap-2 text-xs text-[var(--mu-text-lo)]">
        <label htmlFor="flow-session-select" className="font-medium">
          会话
        </label>
        <select
          id="flow-session-select"
          value={value}
          onChange={(e) => onSelect(e.target.value)}
          className="rounded-[var(--mu-radius-sm)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-2)] px-2 py-1 text-xs text-[var(--mu-text-mid)]"
        >
          {options.map((o) => (
            <option key={o.id} value={o.id}>
              {o.label}
            </option>
          ))}
        </select>
        <span className="text-[11px] text-[var(--mu-text-lo)]">
          换会话后，本页的图 / 轮次列表都跟着切
        </span>
      </div>
      <p className="text-[11px] text-[var(--mu-text-lo)]">
        只列发布会话白名单内的会话（主会话 web / 自主思考 sess-backthink / 你的次级会话
        web:*）。白名单之外的会话（群聊 / 陌生人的 sess-*）永远没有链路图，因此不在这个列表里
        —— 那不是缺陷。
      </p>
    </div>
  );
}