import { useEffect } from 'react';
import { useAppStore } from '@/store';
import { useChat } from '@/hooks/useChat';
import { ChatMessage } from './ChatMessage';
import { ChatInput } from './ChatInput';
import { ScrollArea } from '@/components/ui/scroll-area';

export function ChatView() {
  const { activeConversationId, conversations, setConversations } = useAppStore();
  const { messages, connected, send, createConversation } = useChat(activeConversationId);

  useEffect(() => {
    fetch('/api/pipeline/conversations')
      .then((r) => r.json())
      .then(setConversations)
      .catch(() => {});
  }, [messages]);

  const handleNewConversation = () => {
    createConversation('新对话');
    setTimeout(() => {
      fetch('/api/pipeline/conversations')
        .then((r) => r.json())
        .then(setConversations);
    }, 300);
  };

  if (!activeConversationId) {
    return (
      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-zinc-500">
        <p>选择对话或开始新对话</p>
        <button
          onClick={handleNewConversation}
          className="px-4 py-2 rounded-md bg-zinc-800 text-sm hover:bg-zinc-700 transition-colors"
        >
          开始新对话
        </button>
      </div>
    );
  }

  return (
    <div className="flex-1 flex flex-col">
      <div className="px-4 py-2 border-b border-zinc-800 flex items-center gap-2">
        <div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-500' : 'bg-red-500'}`} />
        <span className="text-xs text-zinc-500">{connected ? '已连接' : '连接中...'}</span>
      </div>
      <ScrollArea className="flex-1 px-4 py-4">
        {messages.map((msg) => (
          <ChatMessage key={msg.id} message={msg} />
        ))}
      </ScrollArea>
      <ChatInput onSend={send} />
    </div>
  );
}