import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
import { ArrowUpRight, History, MessageCircle, MessageSquarePlus, Send, Sparkles, Square } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { cloudAgentsApi } from '@/lib/cloud-agents-api';
import type { CloudHistory, CloudInterrupt, CloudPrompt, CloudRequest, CloudRun, CloudThread, CloudScheduleProposal } from '../../../shared/cloud-agents';
import { CloudFiles } from './CloudFiles';
import { CloudAvatar } from './CloudAvatar';
import './desktop-workspace.css';
import './agent-chat.css';
import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { CloudPendingContext, useCloudPendingState, usePendingCloudInput } from './CloudPending';
import { agentExamples } from './agent-guidance';

export const cloudStatus = (status: string) => ({
  idle: '尚未开始', queued: '等待执行', dispatching: '准备执行', dispatched: '已提交', pending: '准备中',
  running: '运行中', cancel_requested: '正在停止', cancelled: '已停止', completed: '已完成',
  failed: '失败', interrupted: '等待你的确认', submitted: '已提交', rejected: '未执行',
}[status] ?? status);
const active = (status?: string) => Boolean(status && ['queued', 'dispatching', 'dispatched', 'pending', 'running', 'cancel_requested', 'submitted'].includes(status));
const message = (e: unknown) => e instanceof Error ? e.message : '暂时无法完成操作';
const object = (v: unknown): Record<string, unknown> => v && typeof v === 'object' ? v as Record<string, unknown> : {};

export function CloudChat({ slug, previewRevision: latestRevision, initialThread, initialThreadId, onSchedule, activeView = true, headerAction, previewReady = true,
  assistantName = '助手', assistantAvatarUrl, examples = agentExamples(), hasUnsavedChanges = false, saveDisabled = false, onSaveForPreview }: {
  slug: string; assistantName?: string; assistantAvatarUrl?: string | null; headerAction?: ReactNode; previewReady?: boolean; activeView?: boolean; previewRevision?: number; initialThread?: CloudThread; initialThreadId?: string; onSchedule?: (proposal: CloudScheduleProposal) => void;
  examples?: readonly string[]; hasUnsavedChanges?: boolean; saveDisabled?: boolean; onSaveForPreview?: () => Promise<number | undefined>;
}) {
  const [previewRevision, setPreviewRevision] = useState(latestRevision === undefined ? undefined : initialThread?.draft_revision ?? latestRevision);
  const [showHistory, setShowHistory] = useState(false);
  const [threads, setThreads] = useState<CloudThread[]>([]);
  const [thread, setThread] = useState<CloudThread | null>(initialThread ?? null);
  const [clientId, setClientId] = useState(() => initialThread?.client_thread_id ?? crypto.randomUUID());
  const [history, setHistory] = useState<CloudHistory | null>(null);
  const [previousTrial, setPreviousTrial] = useState<{ history: CloudHistory; revision?: number } | null>(null);
  const [request, setRequest] = useState<CloudRequest | null>(null);
  const [queued, setQueued] = useState<CloudRequest[]>([]);
  const [run, setRun] = useState<CloudRun | null>(null);
  const [query, setQuery] = useState('');
  const [intent, setIntent] = useState<CloudPrompt | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [liveText, setLiveText] = useState('');
  const [progress, setProgress] = useState('');
  const [interrupt, setInterrupt] = useState<CloudInterrupt | null>(null);
  const [loading, setLoading] = useState(true);
  const [leaving, setLeaving] = useState(false);
  const [attachmentIds, setAttachmentIds] = useState<string[]>([]);
  const childrenPending = useCloudPendingState();
  usePendingCloudInput(busy || Boolean(intent) || Boolean(query.trim()) || attachmentIds.length > 0 || childrenPending.hasPending);
  const generation = useRef(0);
  const alive = useRef(true);
  const transcript = useRef<HTMLDivElement>(null);
  const following = useRef(true);
  const entry = useRef({ initialThread, initialThreadId, revision: previewRevision });
  const mode = previewRevision === undefined ? 'published' : 'preview';
  const readHistory = useCallback(async (id: string, expectedGeneration = generation.current) => {
    let page = await cloudAgentsApi.call('history', { thread_id: id });
    while (page.next_offset !== null) {
      const more = await cloudAgentsApi.call('history', { thread_id: id, offset: page.next_offset });
      page = { ...more, messages: [...page.messages, ...more.messages] };
    }
    if (!alive.current || expectedGeneration !== generation.current) return;
    setHistory(page); setRun(page.run); setInterrupt(page.run?.interrupt ?? null);
    setQueued(page.queued_requests ?? []);
    setRequest(active(page.run?.status) ? null : page.queued_requests?.[0] ?? null);
    if (page.run) setThreads(current => current.map(item => item.thread_id === id
      ? { ...item, run_id: page.run!.agent_run_id, status: !active(page.run!.status) && page.queued_requests?.length ? 'queued' : page.run!.status, unread: false } : item));
  }, []);
  useEffect(() => {
    alive.current = true;
    const g = ++generation.current;
    const open = async () => {
      try {
        const { recent } = await cloudAgentsApi.recovery();
        let page = await cloudAgentsApi.call('threads', { slug });
        while (page.next_offset !== null) {
          const more = await cloudAgentsApi.call('threads', { slug, offset: page.next_offset });
          page = { ...more, threads: [...page.threads, ...more.threads] };
        }
        if (!alive.current || g !== generation.current) return;
        const items = page.threads.filter(t => t.mode === mode);
        setThreads(items);
        const pointer = recent?.slug === slug && recent.mode === mode ? recent : null;
        const wanted = entry.current.initialThreadId ?? pointer?.thread_id;
        let latest = entry.current.initialThread ?? (wanted ? items.find(t => t.thread_id === wanted) : pointer ? undefined : items.find(t => mode !== 'preview' || t.draft_revision === entry.current.revision));
        if (wanted && !latest) {
          let archived = await cloudAgentsApi.call('threads', { slug, archived: true });
          for (;;) {
            latest = archived.threads.find(t => t.thread_id === wanted && t.mode === mode);
            if (latest || archived.next_offset === null) break;
            archived = await cloudAgentsApi.call('threads', { slug, archived: true, offset: archived.next_offset });
          }
          if (!alive.current || g !== generation.current) return;
          if (latest) setThreads([...items, latest]);
        }
        if (wanted && !latest) setError('上次对话已不可用，可选择其他对话或开始新对话');
        if (latest) {
          if (mode === 'preview') setPreviewRevision(latest.draft_revision ?? entry.current.revision);
          setThread(latest); setClientId(latest.client_thread_id ?? latest.thread_id);
          await readHistory(latest.thread_id, g);
        }
      } catch (e) { if (alive.current && g === generation.current) setError(message(e)); }
      finally { if (alive.current && g === generation.current) setLoading(false); }
    };
    void open();
    return () => { alive.current = false; generation.current++; };
  }, [slug, mode, readHistory]);

  useEffect(() => {
    if (loading || !activeView) return;
    let live = true;
    void cloudAgentsApi.remember({ slug, mode, thread_id: thread?.thread_id, draft_revision: previewRevision })
      .catch(e => { if (live) setError(message(e)); });
    return () => { live = false; };
  }, [slug, mode, thread?.thread_id, previewRevision, loading, activeView]);

  useEffect(() => {
    if (activeView && thread && run) void cloudAgentsApi.call('viewed', { thread_id: thread.thread_id, run_id: run.agent_run_id }).catch(() => undefined);
  }, [activeView, thread, run]);

  useEffect(() => {
    if (!request || request.run_id || !active(request.status)) return;
    let live = true;
    const poll = async () => {
      try {
        const next = await cloudAgentsApi.call('request', { request_id: request.request_id });
        if (live) {
          setRequest(next);
          if (next.run_id) {
            const acceptedRun = await cloudAgentsApi.call('run', { run_id: next.run_id });
            if (live) setRun(acceptedRun);
          }
        }
      } catch (e) { if (live) setError(message(e)); }
    };
    const timer = window.setInterval(() => void poll(), 1800);
    void poll();
    return () => { live = false; window.clearInterval(timer); };
  }, [request]);

  useEffect(() => {
    if (!queued.length || !thread) return;
    const g = generation.current;
    const timer = window.setInterval(() => {
      void readHistory(thread.thread_id, g).catch(e => {
        if (alive.current && generation.current === g) setError(message(e));
      });
    }, 2000);
    return () => window.clearInterval(timer);
  }, [queued.length, thread, readHistory]);

  const runId = request && active(request.status) ? request.run_id ?? undefined : run?.agent_run_id;
  const running = active(run?.status) || active(request?.status);
  useEffect(() => {
    if (!runId || !running) return;
    let live = true;
    let source: EventSource | undefined;
    const g = generation.current;
    const accept = (event: MessageEvent<string>) => {
      if (!live || g !== generation.current) return;
      try {
        const envelope = object(JSON.parse(event.data));
        const payload = object(envelope.payload);
        const chunk = object(payload.chunk);
        const targetThread = thread?.thread_id ?? request?.thread_id;
        if (envelope.thread_id && targetThread && envelope.thread_id !== targetThread) return;
        for (const item of Array.isArray(payload.items) ? payload.items : [chunk]) {
          const semantic = object(object(item).stream_event);
          if (semantic.type === 'message_delta' && typeof semantic.content === 'string') setLiveText(v => v + semantic.content);
          if (semantic.type === 'tool_call' && typeof semantic.name === 'string') setProgress('正在使用 ' + semantic.name);
        }
        if (event.type === 'interrupt') setInterrupt(chunk as CloudInterrupt);
        if (event.type === 'end') {
          source?.close();
          setLiveText(''); setProgress('');
          const id = thread?.thread_id ?? request?.thread_id;
          if (id) void readHistory(id, g).catch(e => { if (live) setError(message(e)); });
        }
      } catch { setError('运行事件读取失败，正在重新读取状态'); }
    };
    cloudAgentsApi.events(runId).then(stream => {
      if (!live) { stream.close(); return; }
      source = stream;
      for (const name of ['metadata', 'messages', 'custom', 'interrupt', 'end']) stream.addEventListener(name, accept as EventListener);
      stream.onerror = () => { if (live) setProgress('连接中断，正在重连…'); };
      stream.onopen = () => { if (live) setProgress(''); };
    }).catch(e => { if (live) setError(message(e)); });
    // Durable state is also read after an event stream expires or its terminal event was missed.
    const timer = window.setInterval(() => {
      cloudAgentsApi.call('run', { run_id: runId }).then(next => {
        if (!live || g !== generation.current) return;
        setRun(next);
        if (!active(next.status)) {
          source?.close(); setLiveText(''); setProgress(''); setInterrupt(next.interrupt ?? null);
          void readHistory(next.thread_id, g).catch(e => { if (live) setError(message(e)); });
        }
      }).catch(e => { if (live) setError(message(e)); });
    }, 5000);
    return () => { live = false; source?.close(); window.clearInterval(timer); };
  }, [runId, running, thread?.thread_id, request?.thread_id, readHistory]);
  useEffect(() => { if (following.current && transcript.current) transcript.current.scrollTop = transcript.current.scrollHeight; }, [history?.messages.length, liveText, interrupt]);
  const stalePreview = previewRevision !== undefined && latestRevision !== undefined && previewRevision !== latestRevision;

  const rememberThread = (next: CloudThread) => {
    setThread(next);
    setThreads(current => [next, ...current.filter(item => item.thread_id !== next.thread_id)]);
  };
  const send = async () => {
    if (busy || running || thread?.archived || (!intent && (hasUnsavedChanges || stalePreview || !previewReady || !query.trim()))) return;
    const input = intent ?? {
      request_id: crypto.randomUUID(), thread_id: thread?.thread_id ?? clientId, query: query.trim(),
      attachment_file_ids: attachmentIds,
      ...(previewRevision === undefined ? {} : { expected_revision: previewRevision }),
    };
    following.current = true;
    setBusy(true); setIntent(input); setError('');
    const g = generation.current;
    try {
      const accepted = await cloudAgentsApi.call(previewRevision === undefined ? 'submit' : 'preview', { slug, ...input });
      if (!alive.current || g !== generation.current) return;
      setRequest(accepted); setIntent(null); setQuery(''); setLiveText(''); setAttachmentIds([]);
      rememberThread({ thread_id: accepted.thread_id, client_thread_id: clientId, agent_slug: slug, title: input.query.slice(0, 80),
        mode, draft_revision: previewRevision, updated_at: new Date().toISOString(), run_id: accepted.run_id, status: accepted.status, unread: false });
      await readHistory(accepted.thread_id, g);
    } catch (e) { if (alive.current && g === generation.current) setError(message(e)); }
    finally { if (alive.current && g === generation.current) setBusy(false); }
  };
  const choose = async (next: CloudThread | null, keepQuery = false, revision = latestRevision) => {
    following.current = true;
    if (next) setPreviousTrial(null);
    if (mode === 'preview') setPreviewRevision(next?.draft_revision ?? revision);
    const g = ++generation.current;
    setThread(next); setClientId(next?.client_thread_id ?? crypto.randomUUID()); setHistory(null);
    setRequest(null); setQueued([]); setRun(null); setLiveText(''); setInterrupt(null); setError(''); if (!keepQuery) setQuery('');
    setAttachmentIds([]);
    if (next) { setLoading(true); try { await readHistory(next.thread_id, g); } catch(e) { setError(message(e)); } finally { setLoading(false); } }
  };
  const trialPending = running || queued.length > 0 || Boolean(intent) || Boolean(interrupt) || attachmentIds.length > 0 || childrenPending.hasPending;
  const restartTrial = async (saveFirst: boolean) => {
    if (busy || loading || trialPending || (saveFirst ? saveDisabled || !onSaveForPreview : !previewReady)) return;
    setBusy(true);
    try {
      const revision = saveFirst ? await onSaveForPreview!() : latestRevision;
      if (!alive.current || revision === undefined) return;
      if (history?.messages.length) setPreviousTrial({ history, revision: previewRevision });
      const lastQuestion = history?.messages.filter(item => item.role === 'user').at(-1)?.content;
      await choose(null, true, revision);
      if (!query.trim() && lastQuestion) setQuery(lastQuestion);
    } catch (e) { if (alive.current) setError(message(e)); }
    finally { if (alive.current) setBusy(false); }
  };
  const cancel = async () => {
    setBusy(true); setError('');
    try {
      if (request) await cloudAgentsApi.call('cancelRequest', { request_id: request.request_id });
      else if (runId) await cloudAgentsApi.call('cancelRun', { run_id: runId });
    } catch (e) { setError(message(e)); } finally { setBusy(false); }
  };
  return <CloudPendingContext.Provider value={childrenPending.report}><section className="agent-chat agent-chat-styled" aria-label={previewRevision === undefined ? '智能体对话' : '草稿预览'}>
    <div className="agent-chat-toolbar"><div className="agent-chat-toolbar-row">
      <div className="agent-chat-toolbar-heading"><span className="agent-chat-toolbar-icon" aria-hidden="true"><MessageCircle /></span><div className="min-w-0"><p className="agent-chat-toolbar-title">{previewRevision === undefined ? '和助手聊一聊' : '试一试'}</p>
        {previewRevision !== undefined && <p className="mt-1 text-xs text-muted-foreground">当前试用 · 修订 {previewRevision}</p>}
        <p className="mt-1 text-xs text-muted-foreground">由创建者支付词元点数{run?.version && ` · 版本 ${run.version}`}</p></div></div>
      <div className="agent-chat-toolbar-actions"><Button variant="ghost" aria-label="查看历史对话" title="查看历史对话" aria-expanded={showHistory} onClick={() => setShowHistory(v => !v)}><History aria-hidden="true" className="h-4 w-4" /><span>历史对话</span></Button>
      <Button variant="ghost" disabled={busy || Boolean(intent) || loading} onClick={() => (query.trim() || attachmentIds.length > 0 || childrenPending.hasPending) ? setLeaving(true) : void choose(null)} aria-label="新对话"><MessageSquarePlus aria-hidden="true" className="h-4 w-4" /><span>新对话</span></Button>{headerAction}</div>
    </div>
    {showHistory && threads.length === 0 && <p className="py-2 text-xs text-muted-foreground">还没有历史对话</p>}
    {showHistory && threads.length > 0 && <select aria-label="历史对话" className="agent-chat-history-select"
      value={thread?.thread_id ?? ''} disabled={busy || Boolean(intent) || Boolean(query.trim()) || attachmentIds.length > 0 || childrenPending.hasPending} onChange={e => void choose(threads.find(t => t.thread_id === e.target.value) ?? null)}>
      <option value="">新对话</option>{threads.map(t => <option key={t.thread_id} value={t.thread_id}>{t.mode === 'preview' ? `修订 ${t.draft_revision ?? previewRevision} · ` : ''}{t.title || '未命名对话'} · {cloudStatus(t.status)}</option>)}
    </select>}
    {(stalePreview || hasUnsavedChanges) && <div className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-border py-2 text-sm leading-6">
      <p>{hasUnsavedChanges ? '要求改好了？保存后再试一次，看看回答有什么不同。' : '要求已保存，重新试用就会使用最新修改。'}</p>
      <Button title="保留上次试用和未发送文字，不会自动发送消息" className="min-h-10" variant="outline" disabled={busy || loading || trialPending || (hasUnsavedChanges ? saveDisabled : !previewReady)}
        onClick={() => void restartTrial(hasUnsavedChanges)}>{hasUnsavedChanges ? '保存并重新试用' : '用最新草稿试用'}</Button>
      {trialPending && <p className="text-xs text-muted-foreground">先完成当前试用或确认操作，并取消附件选择，再重新试用。</p>}
      {!previewReady && <p className="text-muted-foreground">当前草稿尚未选择模型。选择模型并保存后，可开始新试用。</p>}
    </div>}
    </div>
    <div ref={transcript} data-testid="cloud-chat-messages" className="agent-chat-scroll"
      onScroll={e => { const el = e.currentTarget; following.current = el.scrollHeight - el.scrollTop - el.clientHeight < 64; }}><div className="agent-chat-transcript">
      {loading ? <div role="status" className="agent-chat-loading"><MessageCircle aria-hidden="true" /><p>正在读取对话…</p></div>
        : !history?.messages.length && !liveText && <div className="agent-chat-welcome">
          <div className="agent-chat-welcome-portrait"><CloudAvatar src={assistantAvatarUrl} name={assistantName} className="agent-chat-welcome-avatar" /><Sparkles aria-hidden="true" className="agent-chat-welcome-spark" /></div>
          <p className="agent-chat-welcome-name">{assistantName}</p>
          <h2>{mode === 'preview' ? '问它一个小问题' : 'Hi，今天想聊些什么？'}</h2>
          <p className="agent-chat-welcome-description">{mode === 'preview' ? '看看它的回答是否符合你的要求。不满意就改一改，再试一次。' : '从下面选一句，或写下你自己的想法。'}</p>
          <div className="agent-chat-examples">{examples.map((example, index) => <Button key={example} type="button" variant="outline"
            className="agent-chat-example" data-tone={index % 3}
            disabled={busy || Boolean(intent) || Boolean(query.trim()) || Boolean(thread?.archived)} onClick={() => setQuery(example)}><span>{example}</span><ArrowUpRight aria-hidden="true" /></Button>)}</div>
          <p className="agent-chat-example-note">点选只会填入输入框，由你决定何时发送。</p>
        </div>}
      {previousTrial && <details className="rounded-lg border border-border p-3 text-sm">
        <summary className="min-h-10 cursor-pointer content-center font-medium">对比上一次试用 · 修订 {previousTrial.revision}</summary>
        <p className="my-2 text-xs text-muted-foreground">这是修改前的回答。用同一个问题再问一次，更容易看出变化。</p>
        <TrialMessages history={previousTrial.history} onError={setError} assistantName={assistantName} assistantAvatarUrl={assistantAvatarUrl} />
      </details>}
      {history && <TrialMessages history={history} onError={setError} assistantName={assistantName} assistantAvatarUrl={assistantAvatarUrl} />}
      {liveText && <article className="agent-chat-message" data-role="assistant" aria-label="助手正在回复">
        <CloudAvatar src={assistantAvatarUrl} name={assistantName} className="agent-chat-message-avatar" />
        <div className="agent-chat-message-content"><p className="agent-chat-speaker">{assistantName}</p><div className="agent-chat-message-body whitespace-pre-wrap">{liveText}</div></div>
      </article>}
      {onSchedule && history?.schedule_proposals?.map(proposal => <article key={proposal.id} className="space-y-3 rounded-xl border border-violet-200 bg-violet-50/30 p-4 text-sm">
        <h3 className="font-medium">自动任务建议 · {proposal.name}</h3><p className="whitespace-pre-wrap">{proposal.prompt}</p>
        <p className="text-xs text-muted-foreground">{proposal.cron_expression} · {proposal.timezone} · 尚未启用</p>
        <Button variant="outline" disabled={busy || Boolean(intent) || Boolean(query.trim()) || attachmentIds.length > 0 || childrenPending.hasPending} onClick={() => onSchedule(proposal)}>查看并配置自动任务</Button>
      </article>)}
      {run?.error && run.status === 'failed' && <p role="alert" className="text-sm text-destructive">{run.error.message}</p>}
      {interrupt && runId && !thread?.archived && <CloudApproval key={runId} interrupt={interrupt} runId={runId} onResumed={nextRun => {
        setInterrupt(null); setLiveText(''); setRun(nextRun); setRequest(null);
      }} />}

    {queued.length > 0 && <div className="mb-3 space-y-2 rounded-lg bg-muted/40 p-3 text-sm">
      <p>还有 {queued.length} 条请求排队中，关闭客户端后仍会继续。</p>
      {queued.map((item, index) => <div key={item.request_id} className="flex items-center justify-between">
        <span>排队 {index + 1} · 版本 {item.version}</span>
        <Button variant="ghost" size="sm" disabled={busy} onClick={async () => {
          setBusy(true);
          try { await cloudAgentsApi.call('cancelRequest', { request_id: item.request_id }); await readHistory(item.thread_id); }
          catch (e) { setError(message(e)); } finally { setBusy(false); }
        }}>取消排队</Button>
      </div>)}
    </div>}
    {error && <p role="alert" className="mb-3 text-sm text-destructive">{error}</p>}
    {thread?.archived && <div className="mb-3 flex items-center justify-between gap-3 rounded-lg bg-muted/40 p-3 text-sm">
      <span>此对话已归档，恢复后可继续发送消息。</span>
      <Button variant="outline" disabled={busy} onClick={async () => {
        setBusy(true); setError('');
        try { await cloudAgentsApi.call('archiveThread', { thread_id: thread.thread_id, archived: false }); rememberThread({ ...thread, archived: false }); }
        catch (e) { setError(message(e)); } finally { setBusy(false); }
      }}>恢复对话</Button>
    </div>}
    </div></div>
    <div className="agent-chat-files"><CloudFiles key={clientId} threadId={thread?.thread_id} selected={attachmentIds} onSelected={setAttachmentIds}
      onBusy={setBusy} disabled={busy || running || Boolean(intent) || loading || Boolean(thread?.archived)} ensureThread={async () => {
        if (thread) return thread.thread_id;
        const created = await cloudAgentsApi.call('createThread', { slug, thread_id: clientId, preview: previewRevision !== undefined, expected_revision: previewRevision });
        rememberThread({ thread_id: created.thread_id, client_thread_id: clientId, agent_slug: slug, title: '新对话', mode, draft_revision: previewRevision,
          status: 'idle', updated_at: new Date().toISOString(), run_id: null, unread: false });
        return created.thread_id;
      }} /></div>
    {leaving && <div className="mb-3 flex flex-wrap items-center gap-2 text-sm"><span>放弃未发送的内容并新建对话？</span>
      <Button variant="outline" onClick={() => { setLeaving(false); void choose(null); }}>放弃内容</Button><Button variant="ghost" onClick={() => setLeaving(false)}>继续编辑</Button></div>}
    <form data-testid="cloud-chat-composer" className="agent-chat-composer" onSubmit={e => { e.preventDefault(); void send(); }}>
      <Textarea aria-label="消息" className="agent-chat-input resize-y border-0 shadow-none focus-visible:ring-0" maxLength={32000}
        value={query} disabled={busy || Boolean(intent) || loading || thread?.archived} placeholder="说说你的想法，或问一个问题…" onChange={e => setQuery(e.target.value)}
        onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && e.keyCode !== 229) { e.preventDefault(); void send(); } }} />
      <div className="agent-chat-composer-footer">
        <div className="agent-chat-composer-meta"><p role="status" className="agent-chat-status" data-active={running}>{progress || (running ? cloudStatus(run?.status ?? request?.status ?? '') : run ? cloudStatus(run.status) : '就绪')}</p><span className="agent-chat-keyboard-hint">Enter 发送 · Shift + Enter 换行</span></div>
        {running ? <Button className="agent-chat-stop" size="sm" variant="outline" disabled={busy} onClick={() => void cancel()} type="button"><Square className="mr-2 h-3 w-3" />停止</Button>
          : <Button className="agent-chat-send" size="sm" type="submit" disabled={busy || loading || thread?.archived || (!intent && (hasUnsavedChanges || stalePreview || !previewReady || !query.trim()))}><Send className="mr-2 h-3 w-3" />{busy ? '正在提交…' : intent ? '重试本次发送' : '发送'}</Button>}
      </div>
    </form>
  </section></CloudPendingContext.Provider>;
}

function TrialMessages({ history, onError, assistantName = '助手', assistantAvatarUrl }: {
  history: CloudHistory; onError: (error: string) => void; assistantName?: string; assistantAvatarUrl?: string | null;
}) {
  return history.messages.map(item => <article key={item.id} className="agent-chat-message" data-role={item.role === 'user' ? 'user' : 'assistant'}>
    {item.role !== 'user' && <CloudAvatar src={assistantAvatarUrl} name={assistantName} className="agent-chat-message-avatar" />}
    <div className="agent-chat-message-content"><p className="agent-chat-speaker">{item.role === 'user' ? '你' : assistantName}</p>
    <div className="agent-chat-message-body prose prose-sm max-w-none break-words"><ReactMarkdown urlTransform={url => url.startsWith('sandbox:/') ? url.slice(8) : defaultUrlTransform(url)} remarkPlugins={[remarkGfm]} components={{
      a: ({ href, children }) => href && !/^(https?:|mailto:|#)/i.test(href)
        ? <button className="text-primary underline" onClick={() => void cloudAgentsApi.download(history.thread_id, href.replace(/^\/api\/chat\/thread\/[^/]+\/artifacts\//, '/')).catch(e => onError(message(e)))}>{children}</button>
        : <a href={href} target="_blank" rel="noreferrer">{children}</a>,
    }}>{item.content}</ReactMarkdown></div></div>
  </article>);
}

export function CloudApproval({ interrupt, runId, onResumed, submitDecision }: {
  interrupt: CloudInterrupt; runId: string; onResumed?: (run: CloudRun) => void;
  submitDecision?: (input: { operation_id: string; decision: Record<string, unknown> }) => Promise<void>;
}) {
  const [answers, setAnswers] = useState<Record<string, string[]>>({});
  const [freeText, setFreeText] = useState<Record<string, string>>({});
  const [error, setError] = useState('');
  const [busy, setBusy] = useState(false);
  const [intent, setIntent] = useState<{ operation_id: string; decision: Record<string, unknown> } | null>(null);
  const actions = Array.isArray(interrupt.approval?.action_requests) ? interrupt.approval.action_requests : [];
  usePendingCloudInput(busy || Boolean(intent) || Object.values(answers).some(value => value.length > 0) || Object.values(freeText).some(value => value.trim()));
  const questions = (interrupt.questions ?? []).map((item, index) => {
    const q = object(item);
    return {
      id: String(q.question_id ?? 'q-' + (index + 1)), text: String(q.question ?? ''),
      multiple: q.multi_select === true, allowOther: q.allow_other !== false,
      options: (Array.isArray(q.options) ? q.options : []).map(value => typeof value === 'string'
        ? { value, label: value } : { value: String(object(value).value ?? object(value).label ?? ''), label: String(object(value).label ?? object(value).value ?? '') }),
    };
  });
  const complete = questions.length > 0 && questions.every(q => (freeText[q.id]?.trim() && q.allowOther) || answers[q.id]?.length);
  const submit = async (decision: Record<string, unknown>) => {
    const input = intent ?? { operation_id: crypto.randomUUID(), decision };
    setIntent(input); setBusy(true); setError('');
    try {
      if (submitDecision) await submitDecision(input);
      else {
        const result = await cloudAgentsApi.call('resume', { run_id: runId, ...input });
        onResumed?.(await cloudAgentsApi.call('run', { run_id: result.run_id }));
      }
    }
    catch(e) { setError(message(e)); } finally { setBusy(false); }
  };
  return <div className="space-y-3 rounded-xl border border-amber-200 bg-amber-50/50 p-4 text-sm">
    <h3 className="font-medium">需要你的确认</h3>
    {actions.length ? <>
      <p>助手想执行下面{actions.length > 1 ? '这些操作' : '这个操作'}。看清内容后，再决定是否允许。</p>
      {actions.map((action, i) => {
        const detail = object(action);
        const args = object(detail.args ?? detail.arguments);
        const labels: Record<string, string> = { query: '要查找的内容', url: '网页地址', path: '位置', file_path: '文件位置', content: '内容', command: '要运行的命令' };
        const names: Record<string, string> = { execute: '运行命令', ls: '查看文件列表' };
        return <div key={i} className="space-y-2 rounded-lg border border-amber-200 p-3">
          <p className="break-words font-medium">{actions.length > 1 ? (i + 1) + '. ' : ''}{typeof detail.description === 'string' && detail.description ? detail.description : typeof detail.name === 'string' ? names[detail.name] ?? detail.name : '待确认的操作'}</p>
          {Object.entries(args).map(([key, value]) => <div key={key} className="text-sm"><p className="text-muted-foreground">{labels[key] ?? key}</p>
            <pre className="max-h-40 overflow-auto whitespace-pre-wrap break-words font-sans leading-6">{typeof value === 'string' ? value : JSON.stringify(value, null, 2)}</pre></div>)}
          <details><summary className="min-h-10 cursor-pointer content-center text-xs text-muted-foreground">查看技术详情</summary><pre className="max-h-40 overflow-auto whitespace-pre-wrap text-xs">{JSON.stringify(action, null, 2)}</pre></details>
        </div>;
      })}
      <div className="flex gap-2"><Button disabled={busy || Boolean(intent)} onClick={() => void submit({ decisions: actions.map(() => ({ type: 'approve' })) })}>允许执行</Button>
        <Button variant="outline" disabled={busy || Boolean(intent)} onClick={() => void submit({ decisions: actions.map(() => ({ type: 'reject', message: '用户拒绝执行' })) })}>拒绝</Button></div></>
      : <>{questions.map(q => <fieldset key={q.id} disabled={busy || Boolean(intent)} className="space-y-2">
        <legend className="mb-2 font-medium">{q.text}</legend>
        {q.options.map(option => <label key={option.value} className="flex min-h-10 items-center gap-2">
          <input type={q.multiple ? 'checkbox' : 'radio'} name={q.id} checked={answers[q.id]?.includes(option.value) ?? false}
            onChange={e => { setFreeText(v => ({ ...v, [q.id]: '' })); setAnswers(v => ({ ...v, [q.id]: q.multiple
              ? e.target.checked ? [...(v[q.id] ?? []), option.value] : (v[q.id] ?? []).filter(item => item !== option.value) : [option.value] })); }} />
          {option.label}</label>)}
        {q.allowOther && <Textarea aria-label={q.text + '：补充回答'} placeholder="也可以填写自己的回答" value={freeText[q.id] ?? ''}
          onChange={e => setFreeText(v => ({ ...v, [q.id]: e.target.value }))} />}
      </fieldset>)}
        <Button disabled={busy || Boolean(intent) || !complete} onClick={() => void submit(Object.fromEntries(questions.map(q => [
          q.id, freeText[q.id]?.trim() ? { type: 'other', text: freeText[q.id].trim(), selected: answers[q.id] ?? [] }
            : q.multiple ? answers[q.id] : answers[q.id]?.[0],
        ])))}>提交回答</Button></>}
    {intent && !busy && <Button variant="outline" onClick={() => void submit(intent.decision)}>重试本次确认</Button>}
    {error && <p role="alert" className="text-destructive">{error}</p>}
  </div>;
}