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, MessageCircle, ArrowDown } 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, conversations } = 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 [showScrollBtn, setShowScrollBtn] = useState(false);
  const creatingRef = useRef(false);
  const scrollRef = useRef<HTMLDivElement>(null);
  const userScrolledUp = 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]);

  // Auto-scroll: follow new content unless user has scrolled up
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    if (userScrolledUp.current) return;
    el.scrollTop = el.scrollHeight;
  }, [messages, thinking, pipeline, toolStatus]);

  // Detect user manual scroll
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => {
      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
      userScrolledUp.current = !atBottom;
      setShowScrollBtn(!atBottom);
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  // Reset scroll state on conversation switch
  useEffect(() => {
    userScrolledUp.current = false;
    setShowScrollBtn(false);
  }, [conversationId]);

  // After navigating to a new conversation, send the pending message once history is loaded
  useEffect(() => {
    if (conversationId && connected && pendingMessage) {
      const timer = setTimeout(() => {
        send(pendingMessage);
        setPendingMessage(null);
      }, 300);
      return () => clearTimeout(timer);
    }
  }, [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 {
      const newId = await createConversation(content.slice(0, 30), selectedAccountId || undefined);
      if (newId) {
        const list = await api.listConversations();
        setConversations(list);
        navigate(`/chat/${newId}`);
      }
    } catch {
      // fallback
    }
    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) {
    const recentConvs = conversations.slice(0, 5);
    return (
      <div className="flex-1 flex flex-col items-center justify-center bg-gradient-to-b from-white to-zinc-50/30">
        <div className="w-full max-w-xl px-4">
          <div className="text-center mb-6">
            <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-50 to-violet-50 flex items-center justify-center mx-auto mb-4 shadow-sm">
              <MessageCircle size={24} className="text-indigo-400" strokeWidth={1.5} />
            </div>
            <h2 className="text-lg font-semibold text-zinc-800">开始新对话</h2>
            <p className="text-sm text-zinc-400 mt-1">输入消息开始创作，对话将自动创建</p>
          </div>
          <ChatInput onSend={handleSend} disabled={thinking || creatingRef.current} />
          {accounts.length > 0 && (
            <div className="flex items-center gap-2 mt-3 justify-center">
              <span className="text-xs text-zinc-400">当前账号:</span>
              <select
                value={selectedAccountId || ''}
                onChange={(e) => useAppStore.getState().setSelectedAccountId(e.target.value || null)}
                className="h-7 rounded-lg border border-zinc-100 bg-white px-2.5 text-xs text-zinc-600 hover:border-zinc-200 transition-colors"
              >
                <option value="">不指定</option>
                {accounts.map((a) => <option key={a.id} value={a.id}>{a.name}</option>)}
              </select>
            </div>
          )}
          {recentConvs.length > 0 && (
            <div className="mt-8 border-t border-zinc-100 pt-4">
              <p className="text-[10px] text-zinc-400 uppercase tracking-wider mb-2">最近对话</p>
              {recentConvs.map((conv) => (
                <button
                  key={conv.id}
                  onClick={() => navigate(`/chat/${conv.id}`)}
                  className="w-full flex items-center gap-2 px-3 py-2 rounded-xl text-left hover:bg-zinc-50/80 transition-colors group"
                >
                  <MessageCircle size={13} className="text-zinc-300 flex-shrink-0" />
                  <span className="text-sm text-zinc-600 truncate flex-1 group-hover:text-zinc-800">{conv.title}</span>
                  <span className="text-[10px] text-zinc-300 flex-shrink-0">
                    {new Date(conv.updated_at).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })}
                  </span>
                </button>
              ))}
            </div>
          )}
        </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-100 flex items-center justify-between flex-shrink-0">
        <div className="flex items-center gap-2">
          <div className={`w-2 h-2 rounded-full ${connected ? 'bg-emerald-400 shadow-sm shadow-emerald-200' : 'bg-red-400 animate-pulse'}`} />
          <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 rounded-lg" 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 rounded-lg" onClick={handleStop}>
              <StopCircle size={12} className="mr-1" />停止
            </Button>
          )}
        </div>
      </div>

      {/* Chat area */}
      <div className="flex-1 overflow-hidden relative">
        <div className="h-full flex flex-col">
          {/* Message list */}
          <div ref={scrollRef} 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 text-indigo-400" />
                {toolStatus || '思考中...'}
              </div>
            )}
          </div>

          {/* Scroll to bottom FAB */}
          {showScrollBtn && (
            <button
              onClick={() => {
                scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
                userScrolledUp.current = false;
                setShowScrollBtn(false);
              }}
              className="absolute bottom-4 left-1/2 -translate-x-1/2 w-9 h-9 rounded-full bg-white border border-zinc-200 shadow-lg shadow-zinc-200/60 flex items-center justify-center text-zinc-400 hover:text-zinc-700 hover:border-zinc-300 hover:shadow-xl transition-all"
            >
              <ArrowDown size={16} />
            </button>
          )}

          {/* Quote bar */}
          {quote && (
            <div className="mx-4 px-3 py-1.5 bg-indigo-50/60 border border-indigo-100/50 rounded-xl 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>
  );
}