chat.tsx

import { useEffect } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { useToast } from "@/hooks/use-toast";
import VisionOSCarousel from "@/components/VisionOSCarousel";
import { getChats, createChat, sendMessage, updateChatSettings } from "@/lib/api";
import { queryClient } from "@/lib/queryClient";

export default function Chat() {
  const { toast } = useToast();
  
  // Query for all chats
  const { data: chats, isLoading } = useQuery({
    queryKey: ["/api/chats"],
    queryFn: () => getChats(),
  });

  // Mutation for creating new chat
  const createChatMutation = useMutation({
    mutationFn: createChat,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["/api/chats"] });
    },
    onError: (error) => {
      toast({
        title: "Error creating chat",
        description: error.message,
        variant: "destructive",
      });
    },
  });

  // Mutation for sending messages
  const sendMessageMutation = useMutation({
    mutationFn: ({ chatId, content }: { chatId: number; content: string }) =>
      sendMessage(chatId, content),
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: ["/api/chats", variables.chatId] });
    },
    onError: (error) => {
      toast({
        title: "Error sending message",
        description: error.message,
        variant: "destructive",
      });
    },
  });

  // Mutation for updating chat settings
  const updateSettingsMutation = useMutation({
    mutationFn: ({ chatId, settings }: { chatId: number; settings: any }) =>
      updateChatSettings(chatId, settings),
    onSuccess: (_, variables) => {
      queryClient.invalidateQueries({ queryKey: ["/api/chats", variables.chatId] });
    },
    onError: (error) => {
      toast({
        title: "Error updating settings",
        description: error.message,
        variant: "destructive",
      });
    },
  });

  // Create initial chat if none exists
  useEffect(() => {
    if (!isLoading && (!chats || chats.length === 0)) {
      createChatMutation.mutate("New Chat");
    }
  }, [isLoading, chats]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <VisionOSCarousel
      chats={chats || []}
      onSendMessage={(chatId, content) => 
        sendMessageMutation.mutate({ chatId, content })}
      onUpdateSettings={(chatId, settings) =>
        updateSettingsMutation.mutate({ chatId, settings })}
      onCreateChat={(title) => createChatMutation.mutate(title)}
      isLoading={sendMessageMutation.isPending}
    />
  );
}