video-create/web/client/src/components/chat/ChatView.tsx

import { useEffect, useState, useCallback, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useAppStore } from '@/store';
import { useChat } from '@/hooks/useChat';
import { ChatMessage } from './ChatMessage';
import { ChatInput } from './ChatInput';
import { PipelineProgress } from './PipelineProgress';
import { Button } from '@/components/ui/button';
import { RefreshCw, Loader2, StopCircle, X } from 'lucide-react';
import { api } from '@/lib/api';
import type { Account, Message } from '@/types';

export function ChatView() {
  const { conversationId } = useParams<{ conversationId?: string }>();
  const navigate = useNavigate();
  const { setConversations, selectedAccountId } = useAppStore();
  const { messages, connected, thinking, toolStatus, pipeline, send, stop, createConversation, removeMessage } = useChat(conversationId || null);
  const [manifestPath, setManifestPath] = useState<string | null>(null);
  const [accounts, setAccounts] = useState<Account[]>([]);
  const [quote, setQuote] = useState<string | null>(null);
  const [pendingMessage, setPendingMessage] = useState<string | null>(null);
  const creatingRef = useRef(false);

  useEffect(() => { api.listAccounts().then(setAccounts).catch(() => {}); }, []);

  useEffect(() => {
    api.listConversations().then(setConversations).catch(() => {});
  }, [messages]);

  useEffect(() => {
    const toolMsgs = messages.filter((m) => m.role === 'tool');
    if (toolMsgs.length > 0) {
      try {
        const lastTool = JSON.parse(toolMsgs[toolMsgs.length - 1].content);
        if (lastTool.manifest) setManifestPath(lastTool.manifest);
      } catch {}
    }
  }, [messages]);

  // After navigating to a new conversation, send the pending message
  useEffect(() => {
    if (conversationId && connected && pendingMessage && messages.length === 0) {
      send(pendingMessage);
      setPendingMessage(null);
    }
  }, [conversationId, connected, pendingMessage]);

  const handleResume = async () => {
    if (!manifestPath) return;
    await fetch('/api/pipeline/resume', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ manifest: manifestPath }),
    });
  };

  const findPrecedingUser = useCallback((msgId: string): Message | null => {
    const idx = messages.findIndex((m) => m.id === msgId);
    if (idx <= 0) return null;
    for (let i = idx - 1; i >= 0; i--) {
      if (messages[i].role === 'user') return messages[i];
    }
    return null;
  }, [messages]);

  const handleRegenerate = useCallback((msgId: string) => {
    const prev = findPrecedingUser(msgId);
    if (prev) send(prev.content);
  }, [findPrecedingUser, send]);

  const handleContinue = useCallback(() => { send('请继续'); }, [send]);
  const handleQuote = useCallback((content: string) => { setQuote(content.slice(0, 200)); }, []);
  const handleDeleteMsg = useCallback((msgId: string) => {
    removeMessage(msgId);
  }, [removeMessage]);

  // Delayed conversation creation
  const handleSendNew = useCallback(async (content: string) => {
    if (creatingRef.current) return;
    creatingRef.current = true;
    setPendingMessage(content);

    try {
      createConversation(content.slice(0, 30), selectedAccountId || undefined);
      setTimeout(async () => {
        const list = await api.listConversations();
        setConversations(list);
        if (list.length > 0) {
          navigate(`/chat/${list[0].id}`);
        }
        creatingRef.current = false;
      }, 600);
    } catch {
      creatingRef.current = false;
    }
  }, [createConversation, selectedAccountId]);

  const handleSend = useCallback((content: string) => {
    if (quote) { content = `> ${quote}\n\n${content}`; setQuote(null); }
    if (conversationId) {
      send(content);
    } else {
      handleSendNew(content);
    }
  }, [send, quote, conversationId]);

  const handleStop = useCallback(() => { stop(); }, [stop]);

  // Empty state - no conversation selected
  if (!conversationId) {
    return (
      <div className="flex-1 flex flex-col items-center justify-center gap-4 bg-white">
        <div className="text-4xl mb-2">💬</div>
        <h2 className="text-lg font-semibold text-zinc-800">开始新对话</h2>
        <p className="text-sm text-zinc-500">输入消息开始创作，对话将自动创建</p>
        <div className="w-full max-w-xl px-4 mt-4">
          <ChatInput onSend={handleSend} disabled={thinking || creatingRef.current} />
        </div>
        {accounts.length > 0 && (
          <div className="flex items-center gap-2 mt-3">
            <span className="text-xs text-zinc-400">当前账号:</span>
            <select
              value={selectedAccountId || ''}
              onChange={(e) => useAppStore.getState().setSelectedAccountId(e.target.value || null)}
              className="h-7 rounded border border-zinc-200 bg-zinc-50 px-2 text-xs text-zinc-600"
            >
              <option value="">不指定</option>
              {accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
            </select>
          </div>
        )}
      </div>
    );
  }

  // Active conversation
  return (
    <div className="flex-1 flex flex-col bg-white h-full">
      {/* Header bar */}
      <div className="px-4 py-2 border-b border-zinc-200 flex items-center justify-between flex-shrink-0">
        <div className="flex items-center gap-1.5">
          <div className={`w-1.5 h-1.5 rounded-full ${connected ? 'bg-green-500' : 'bg-red-400'}`} />
          <span className="text-xs text-zinc-400">{connected ? '在线' : '连接中'}</span>
        </div>
        <div className="flex items-center gap-2">
          {manifestPath && (
            <Button size="sm" variant="outline" className="h-7 text-xs" onClick={handleResume}>
              <RefreshCw size={12} className="mr-1" />断点续跑
            </Button>
          )}
          {thinking && (
            <Button size="sm" variant="outline" className="h-7 text-xs text-red-500 border-red-200 hover:bg-red-50" onClick={handleStop}>
              <StopCircle size={12} className="mr-1" />停止
            </Button>
          )}
        </div>
      </div>

      {/* Chat area */}
      <div className="flex-1 overflow-hidden">
        <div className="h-full flex flex-col">
          {/* Message list */}
          <div className="flex-1 overflow-y-auto px-4 py-4">
            {messages.map((msg, i) => (
              msg.role !== 'tool' && (
                <ChatMessage
                  key={msg.id}
                  message={msg}
                  isLast={i === messages.length - 1}
                  isThinking={thinking}
                  onRegenerate={msg.role === 'assistant' ? handleRegenerate : undefined}
                  onContinue={msg.role === 'assistant' ? handleContinue : undefined}
                  onQuote={handleQuote}
                  onDelete={handleDeleteMsg}
                />
              )
            ))}

            {pipeline && (
              <PipelineProgress
                phase={pipeline.phase}
                progress={pipeline.progress}
                currentItem={pipeline.currentItem}
                totalItems={pipeline.totalItems}
                status={pipeline.status}
              />
            )}

            {thinking && !pipeline && (
              <div className="flex items-center gap-2 text-zinc-400 text-sm py-2">
                <Loader2 size={14} className="animate-spin" />
                {toolStatus || '思考中...'}
              </div>
            )}
          </div>

          {/* Quote bar */}
          {quote && (
            <div className="mx-4 px-3 py-1.5 bg-zinc-50 border border-zinc-200 rounded-lg flex items-center gap-2 text-xs text-zinc-500 flex-shrink-0">
              <span className="flex-1 truncate">引用: {quote}</span>
              <button onClick={() => setQuote(null)} className="text-zinc-400 hover:text-zinc-600"><X size={12} /></button>
            </div>
          )}

          {/* Input */}
          <ChatInput onSend={handleSend} disabled={thinking} />
        </div>
      </div>
    </div>
  );
}