import { useCallback, useEffect, useState } from 'react';
import { Download, Folder, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { cloudAgentsApi } from '@/lib/cloud-agents-api';
import type { CloudAgentOperations, CloudChannelSession, CloudChannelConversation, CloudFile, CloudPendingOperation } from '../../../shared/cloud-agents';
import { CloudApproval, cloudStatus } from './CloudChat';
import { usePendingCloudInput } from './CloudPending';

const failureText = (error: unknown) => error instanceof Error ? error.message : '微信会话暂时无法读取';
const activeRun = (status?: string) => ['pending', 'queued', 'running', 'interrupted', 'preparing'].includes(status ?? '');
type Control = CloudAgentOperations['channelConversationControl']['input'];

function useVisible(active: boolean) {
  const [visible, setVisible] = useState(document.visibilityState !== 'hidden');
  useEffect(() => {
    const update = () => setVisible(document.visibilityState !== 'hidden');
    document.addEventListener('visibilitychange', update);
    return () => document.removeEventListener('visibilitychange', update);
  }, []);
  return active && visible;
}

export function CloudChannelConversations({ slug, channelAccountId, activeView = true }: { slug: string; channelAccountId?: string; activeView?: boolean }) {
  const [sessions, setSessions] = useState<CloudChannelSession[]>([]);
  const [selected, setSelected] = useState('');
  const [offset, setOffset] = useState<number | null>(null);
  const [revision, setRevision] = useState(0);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [busy, setBusy] = useState(false);
  const visible = useVisible(activeView);
  useEffect(() => {
    if (!visible) return;
    let live = true;
    setLoading(true);
    void cloudAgentsApi.call('channelConversations', { slug }).then(page => {
      if (!live) return;
      const items = channelAccountId ? page.items.filter(item => item.channel_account_id === channelAccountId) : page.items;
      setSessions(items); setOffset(page.next_offset); setError('');
      setSelected(current => items.some(item => item.session_id === current) ? current : items[0]?.session_id || '');
    }).catch(error => { if (live) setError(failureText(error)); }).finally(() => { if (live) setLoading(false); });
    return () => { live = false; };
  }, [channelAccountId, slug, visible, revision]);
  const more = async () => {
    if (loading || offset === null) return;
    setLoading(true);
    try { const page = await cloudAgentsApi.call('channelConversations', { slug, offset });
      const next = channelAccountId ? page.items.filter(item => item.channel_account_id === channelAccountId) : page.items;
      setSessions(items => [...items, ...next]); setOffset(page.next_offset); }
    catch (error) { setError(failureText(error)); } finally { setLoading(false); }
  };
  return <section aria-label="微信会话" className="space-y-4">
    <div className="flex flex-wrap items-start justify-between gap-3"><div><h2 className="font-medium">微信对话</h2>
      <p className="mt-1 text-sm leading-6 text-muted-foreground">查看扫码账号的微信会话，处理确认和保存文件。新消息请从对应微信对话发送。</p></div>
      <Button variant="ghost" size="sm" disabled={loading || busy} onClick={() => setRevision(value => value + 1)}><RefreshCw className="mr-2 h-4 w-4" />刷新会话</Button></div>
    {error && <p role="alert" className="text-sm text-destructive">{error}</p>}
    {loading && !sessions.length && <p role="status" className="text-sm text-muted-foreground">正在读取微信会话…</p>}
    {!loading && !error && !sessions.length && <p className="rounded-xl bg-muted/30 p-6 text-sm leading-6 text-muted-foreground">还没有微信会话。请先在“渠道 → 微信”中连接并启用账号，然后用扫码的微信发送一条消息。</p>}
    {!!sessions.length && <label className="block space-y-2 text-sm"><span>选择微信会话</span>
      <select className="h-10 w-full rounded-md border border-input bg-background px-3" value={selected} disabled={busy} onChange={event => setSelected(event.target.value)}>
        {!sessions.some(session => session.session_id === selected) && <option value={selected}>当前会话</option>}
        {sessions.map(session => <option key={session.session_id} value={session.session_id}>{session.agent_name || '微信助手'} · 第 {session.sequence ?? 1} 段 · {new Date(session.created_at).toLocaleString()}{session.session_state === 'closed' ? ' · 历史' : ''}</option>)}
      </select></label>}
    {offset !== null && <Button variant="outline" size="sm" disabled={loading || busy} onClick={() => void more()}>加载更早会话</Button>}
    {selected && <ChannelSession key={selected} sessionId={selected} visible={visible} refreshRevision={revision} onBusy={setBusy} onNewSession={id => { setSelected(id); setRevision(value => value + 1); }} />}
  </section>;
}

function ChannelSession({ sessionId, visible, refreshRevision, onBusy, onNewSession }: {
  sessionId: string; visible: boolean; refreshRevision: number; onBusy: (busy: boolean) => void; onNewSession: (id: string) => void;
}) {
  const [data, setData] = useState<CloudChannelConversation | null>(null);
  const [files, setFiles] = useState<CloudFile[]>([]);
  const [outputs, setOutputs] = useState<CloudFile[]>([]);
  const [path, setPath] = useState('/');
  const [revision, setRevision] = useState(0);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');
  const [fileError, setFileError] = useState('');
  const [notice, setNotice] = useState('');
  const [pending, setPending] = useState<CloudPendingOperation[]>([]);
  const [recoveryReady, setRecoveryReady] = useState(false);
  const [intent, setIntent] = useState<Control | null>(null);
  const locked = busy || !recoveryReady || Boolean(intent) || pending.length > 0;
  usePendingCloudInput(locked);
  useEffect(() => { onBusy(locked); return () => onBusy(false); }, [locked, onBusy]);
  const loadRecovery = useCallback(async () => {
    const recovery = await cloudAgentsApi.recovery();
    setPending(recovery.pending.filter(item => item.operation === 'channelConversationControl' && item.input.session_id === sessionId));
    setRecoveryReady(true);
  }, [sessionId]);
  useEffect(() => { void loadRecovery().catch(error => setError(failureText(error))); }, [loadRecovery]);
  useEffect(() => {
    if (!visible) return;
    let live = true;
    let timer: ReturnType<typeof setTimeout>;
    const load = async () => {
      try {
        let next = await cloudAgentsApi.call('channelConversation', { session_id: sessionId });
        while (live && next.next_offset !== null) {
          const more = await cloudAgentsApi.call('channelConversation', { session_id: sessionId, offset: next.next_offset });
          next = { ...more, messages: [...next.messages, ...more.messages] };
        }
        if (live) setData(next);
      }
      catch (error) { if (live) setError(failureText(error)); }
      finally { if (live) timer = setTimeout(() => void load(), 5000); }
    };
    void load();
    return () => { live = false; clearTimeout(timer); };
  }, [sessionId, visible, revision, refreshRevision]);
  const runId = data?.run?.agent_run_id;
  const runStatus = data?.run?.status ?? data?.queued_requests?.[0]?.status;
  const threadId = data?.thread_id;
  useEffect(() => {
    if (!visible || !threadId) return;
    let live = true;
    setFileError('');
    void cloudAgentsApi.call('channelFiles', { session_id: sessionId, path }).then(async page => {
      if (!live) return;
      setFiles(page.files); setOutputs([]);
      const outputDirectory = path === '/' && page.files.find(file => file.is_dir && file.name === 'outputs');
      if (outputDirectory) {
        const outputPage = await cloudAgentsApi.call('channelFiles', { session_id: sessionId, path: outputDirectory.directory_path });
        if (live) setOutputs(outputPage.files.filter(file => !file.is_dir));
      }
    }).catch(error => { if (live) setFileError(failureText(error)); });
    return () => { live = false; };
  }, [sessionId, path, visible, threadId, runId, runStatus, revision, refreshRevision]);
  const control = async (input: Control) => {
    const frozen = intent ?? input;
    setIntent(frozen); setBusy(true); setError('');
    try {
      const result = await cloudAgentsApi.call('channelConversationControl', frozen);
      setIntent(null); setPending([]);
      if (frozen.action === 'new-session') onNewSession(result.session_id);
      else setRevision(value => value + 1);
    } catch (error) {
      setError(failureText(error));
      // Main retains accepted or uncertain operations. Move recovery to that
      // durable record so a rejected control can be dismissed before another.
      try { await loadRecovery(); setIntent(null); } catch { /* Keep the exact input available if the journal cannot be read. */ }
      throw error;
    }
    finally { setBusy(false); }
  };
  const resolve = async (operation: CloudPendingOperation, discard = false) => {
    setBusy(true); setError('');
    try {
      const response = await cloudAgentsApi.resolvePending(operation.id, discard);
      await loadRecovery();
      const result = response.result;
      if (!discard && operation.input.action === 'new-session' && result && typeof result === 'object'
        && 'session_id' in result && typeof result.session_id === 'string') onNewSession(result.session_id);
      else setRevision(value => value + 1);
    }
    catch (error) { setError(failureText(error)); } finally { setBusy(false); }
  };
  const save = async (file: CloudFile) => {
    setBusy(true); setFileError(''); setNotice('');
    try { const result = await cloudAgentsApi.downloadChannelArtifact(sessionId, file.path); if (result.saved) setNotice('已保存 ' + file.name); }
    catch (error) { setFileError(failureText(error)); } finally { setBusy(false); }
  };
  const controllable = data?.session_state === 'active' && data.grant_state === 'authorized';
  const running = activeRun(runStatus) || Boolean(data?.queued_requests?.length);
  const renderFiles = (items: CloudFile[]) => items.map(file => <div key={file.path || file.directory_path} className="flex items-center justify-between gap-3 text-sm">
    {file.is_dir ? <Button variant="ghost" disabled={busy} className="min-w-0 justify-start" onClick={() => setPath(file.directory_path)}><Folder className="mr-2 h-4 w-4" /><span className="truncate">{file.name}</span></Button>
      : <><span className="min-w-0 break-all">{file.name}</span><Button variant="outline" size="sm" disabled={busy} aria-label={'保存 ' + file.name} onClick={() => void save(file)}><Download className="mr-2 h-4 w-4" />保存文件</Button></>}
  </div>);
  const statusText = runStatus ? cloudStatus(runStatus) : data?.session_state === 'closed' ? '历史会话 · 可以查看消息和保存文件' : '等待微信消息';
  const runError = data?.run?.error;
  return <div className="space-y-4">
    <div className="flex flex-wrap items-center justify-between gap-3"><div data-testid="wechat-run-status" className="space-y-1 text-sm">
      <p role="status" aria-label="微信任务状态" className="text-muted-foreground">任务状态：{statusText}</p>
      {runError?.message && <p role="alert" aria-label="微信任务错误" className="text-destructive">任务错误：{runError.type ? runError.type + ' · ' : ''}{runError.message}</p>}
    </div>
      {controllable && <div className="flex gap-2"><Button variant="outline" size="sm" disabled={locked} onClick={() => void control({ session_id: sessionId, operation_id: crypto.randomUUID(), action: 'stop' }).catch(() => undefined)}>停止本次任务</Button>
        <Button variant="ghost" size="sm" disabled={locked || running} onClick={() => void control({ session_id: sessionId, operation_id: crypto.randomUUID(), action: 'new-session' }).catch(() => undefined)}>开始新对话</Button></div>}</div>
    {pending.map(operation => <div key={operation.id} className="space-y-2 rounded-lg border border-amber-200 p-3 text-sm"><p>上次会话操作的结果尚未确认。恢复会核对同一次操作。</p>
      <Button variant="outline" size="sm" disabled={busy} onClick={() => void resolve(operation)}>恢复上次操作</Button>
      <Button variant="ghost" size="sm" disabled={busy} onClick={() => void resolve(operation, true)}>忽略本机记录</Button></div>)}
    {intent && <Button variant="outline" disabled={busy} onClick={() => void control(intent).catch(() => undefined)}>重试本次操作</Button>}
    {error && <p role="alert" className="text-sm text-destructive">{error}</p>}
    <div className="space-y-4 rounded-xl border border-border p-4" aria-label="微信消息">
      {data?.messages.filter(message => message.role !== 'system').map(message => <article key={message.id} className={message.role === 'user' ? 'ml-6 rounded-xl bg-muted/40 p-3' : 'p-1'}>
        <p className="mb-2 text-xs text-muted-foreground">{message.role === 'user' ? '你 · 微信' : '智能体'}</p><div className="prose prose-sm max-w-none break-words"><ReactMarkdown remarkPlugins={[remarkGfm]} components={{ a: ({ href, children }) => href && /^(https?:|mailto:)/i.test(href) ? <a href={href} target="_blank" rel="noreferrer">{children}</a> : <span>{children}</span> }}>{message.content}</ReactMarkdown></div></article>)}
      {data && !data.messages.length && <p className="text-sm text-muted-foreground">还没有消息。</p>}
    </div>
    {!recoveryReady && <Button variant="outline" size="sm" onClick={() => void loadRecovery().catch(error => setError(failureText(error)))}>重新读取操作记录</Button>}
    {recoveryReady && controllable && runStatus === 'interrupted' && data?.run?.interrupt && runId && !pending.length && !intent && <CloudApproval key={runId} interrupt={data.run.interrupt} runId={runId}
      submitDecision={input => control({ ...input, session_id: sessionId, action: 'resume', run_id: runId })} />}
    <section aria-label="微信文件与产物" className="space-y-3 rounded-xl border border-border p-4"><div className="flex items-center justify-between gap-3"><h3 className="text-sm font-medium">文件与产物</h3>
      <Button variant="ghost" size="sm" disabled={busy} onClick={() => setRevision(value => value + 1)}>刷新文件</Button></div>
      {outputs.length > 0 && <div className="space-y-3 rounded-lg bg-muted/30 p-3"><p className="text-xs text-muted-foreground">生成的文件</p>{renderFiles(outputs)}</div>}
      {path !== '/' && <Button variant="ghost" size="sm" onClick={() => setPath(path.split('/').slice(0, -1).join('/') || '/')}>上一级</Button>}
      {renderFiles(files)}
      {!files.length && !fileError && <p className="text-xs text-muted-foreground">暂时没有文件。运行结束时会自动更新。</p>}
      {fileError && <p role="alert" className="text-sm text-destructive">{fileError}</p>}{notice && <p role="status" className="text-sm text-muted-foreground">{notice}</p>}
    </section>
  </div>;
}