sapiens-web3/client/src/components/ChatbotModal.tsx

import { useState } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { ScrollArea } from "@/components/ui/scroll-area";
import { MessageCircle, Send } from "lucide-react";
import { apiRequest, queryClient } from "@/lib/queryClient";
import type { ChatMessage, MediaOutlet } from "@shared/schema";

interface ChatbotModalProps {
  outlet: MediaOutlet;
  isOpen: boolean;
  onClose: () => void;
}

export default function ChatbotModal({ outlet, isOpen, onClose }: ChatbotModalProps) {
  const [message, setMessage] = useState("");

  const { data: messages = [], isLoading } = useQuery<ChatMessage[]>({
    queryKey: [`/api/media-outlets/${outlet.slug}/chat`],
    enabled: isOpen
  });

  const sendMessageMutation = useMutation({
    mutationFn: async (content: string) => {
      return await apiRequest("POST", `/api/media-outlets/${outlet.slug}/chat`, { content });
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [`/api/media-outlets/${outlet.slug}/chat`] });
      setMessage("");
    }
  });

  const handleSend = () => {
    if (message.trim()) {
      sendMessageMutation.mutate(message.trim());
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  const getChatbotName = () => {
    if (outlet.category === 'people') {
      return outlet.name;
    } else if (outlet.category === 'topics') {
      return `${outlet.name} 전문가`;
    } else {
      return `${outlet.name} 대표`;
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px] h-[600px] flex flex-col" data-testid="chatbot-modal">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2" data-testid="chatbot-title">
            <MessageCircle className="h-5 w-5" />
            {getChatbotName()}와 대화하기
          </DialogTitle>
        </DialogHeader>
        
        <ScrollArea className="flex-1 pr-4" data-testid="chat-messages-container">
          <div className="space-y-4">
            {isLoading ? (
              <div className="text-center text-muted-foreground py-8">
                대화 내용을 불러오는 중...
              </div>
            ) : messages.length === 0 ? (
              <div className="text-center text-muted-foreground py-8">
                <MessageCircle className="h-12 w-12 mx-auto mb-4 opacity-50" />
                <p>대화를 시작해보세요!</p>
                <p className="text-sm mt-2">
                  {getChatbotName()}에게 궁금한 것을 물어보세요.
                </p>
              </div>
            ) : (
              messages.map((msg) => (
                <div
                  key={msg.id}
                  className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
                  data-testid={`chat-message-${msg.id}`}
                >
                  <div
                    className={`max-w-[80%] rounded-lg px-4 py-2 ${
                      msg.role === 'user'
                        ? 'bg-primary text-primary-foreground'
                        : 'bg-muted'
                    }`}
                  >
                    <p className="text-sm whitespace-pre-wrap break-words">{msg.content}</p>
                  </div>
                </div>
              ))
            )}
            {sendMessageMutation.isPending && (
              <div className="flex justify-start">
                <div className="max-w-[80%] rounded-lg px-4 py-2 bg-muted">
                  <p className="text-sm text-muted-foreground">입력 중...</p>
                </div>
              </div>
            )}
          </div>
        </ScrollArea>

        <div className="flex gap-2 pt-4 border-t">
          <Textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            onKeyPress={handleKeyPress}
            placeholder="메시지를 입력하세요..."
            className="min-h-[60px] resize-none"
            disabled={sendMessageMutation.isPending}
            data-testid="chat-input"
          />
          <Button
            onClick={handleSend}
            disabled={!message.trim() || sendMessageMutation.isPending}
            size="icon"
            className="h-[60px] w-[60px]"
            data-testid="button-send-message"
          >
            <Send className="h-4 w-4" />
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}