import { useEffect, useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import { cloudAgentsApi } from '@/lib/cloud-agents-api';
import type { CloudAgentEntry, CloudThread } from '../../../shared/cloud-agents';
import { cloudStatus } from './CloudChat';

export function CloudOverview({ section, onAgent, onThread }: {
  section: 'received' | 'activity'; onAgent: (entry: CloudAgentEntry) => void; onThread: (thread: CloudThread) => void;
}) {
  const [agents, setAgents] = useState<CloudAgentEntry[]>([]);
  const [threads, setThreads] = useState<CloudThread[]>([]);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(true);
  const [offset, setOffset] = useState<number | null>(null);
  const [refresh, setRefresh] = useState(0);
  const paged = useRef(false);
  useEffect(() => {
    let live = true;
    paged.current = false;
    setLoading(true);
    const load = async () => {
      try {
        if (section === 'received') {
          const result = await cloudAgentsApi.call('received', {});
          if (live) setAgents(result.agents);
        } else {
          const result = await cloudAgentsApi.call('threads', {});
          if (live) { setThreads(result.threads); setOffset(result.next_offset); }
        }
        if (live) setError('');
      } catch(e) { if (live) setError(e instanceof Error ? e.message : '暂时无法读取'); }
      finally { if (live) setLoading(false); }
    };
    void load();
    const timer = window.setInterval(() => { if (!paged.current) void load(); }, 15000);
    return () => { live = false; window.clearInterval(timer); };
  }, [section, refresh]);
  const more = async () => {
    if (offset === null) return;
    paged.current = true;
    setLoading(true);
    try { const page = await cloudAgentsApi.call('threads', { offset }); setThreads(v => [...v, ...page.threads]); setOffset(page.next_offset); }
    catch(e) { setError(e instanceof Error ? e.message : '加载失败'); } finally { setLoading(false); }
  };
  return <section className="space-y-4">
    {error && <p role="alert" className="text-sm text-destructive">{error}<Button variant="ghost" onClick={() => setRefresh(v => v + 1)}>重新连接</Button></p>}
    {section === 'received' ? <>
      <p className="text-sm text-muted-foreground">这里显示其他创作者授权你使用的智能体。由创建者承担费用，你的会话和文件仅属于你。</p>
      {!loading && !agents.length && <p className="py-12 text-center text-sm text-muted-foreground">还没有收到分享</p>}
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">{agents.map(agent => <button key={agent.slug} onClick={() => onAgent(agent)}
        className="rounded-xl border border-border p-5 text-left transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
        <h2 className="font-medium">{agent.name}</h2><p className="mt-2 line-clamp-3 text-sm leading-6 text-muted-foreground">{agent.purpose}</p>
        <p className="mt-4 text-xs text-muted-foreground">版本 {agent.published_version} · 打开对话</p>
      </button>)}</div></> : <>
      <p className="text-sm text-muted-foreground">查看自己的对话、自动任务结果和待确认事项。</p>
      {!loading && !threads.length && <p className="py-12 text-center text-sm text-muted-foreground">还没有运行记录</p>}
      {threads.map(thread => <button key={thread.thread_id} onClick={() => onThread(thread)}
        className="flex min-h-20 w-full items-center justify-between gap-4 rounded-xl border border-border p-4 text-left transition-colors hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
        <div className="min-w-0"><h2 className="truncate text-sm font-medium">{thread.unread && <span className="mr-2 inline-block h-2 w-2 rounded-full bg-violet-500" aria-label="未读" />}{thread.title || '未命名对话'}</h2>
          <p className="mt-2 text-xs text-muted-foreground">{thread.mode === 'preview' ? '草稿预览' : '正式运行'} · {new Date(thread.updated_at).toLocaleString()}</p></div>
        <span className="shrink-0 text-sm text-muted-foreground">{cloudStatus(thread.status)}</span>
      </button>)}
      {offset !== null && <Button variant="outline" disabled={loading} onClick={() => void more()}>加载更早记录</Button>}
    </>}
  </section>;
}