import React from 'react';
import { ChatInterface } from '@jazzmine-ui/react';
import type { Chat, Context, Message } from '@jazzmine-ui/react';
import '@jazzmine-ui/react/styles';

export function App() {
  // App-owned state: ChatInterface only renders what you pass.
  const [messages, setMessages] = React.useState<Message[]>([]);
  const [chats] = React.useState<Chat[]>([]);
  const [activeChatId, setActiveChatId] = React.useState<string>();
  const [isLoading, setIsLoading] = React.useState(false);

  const onSend = async (text: string, contexts?: Context[]) => {
    setMessages((prev) => [
      ...prev,
      { id: crypto.randomUUID(), text, sender: 'user', timestamp: new Date().toISOString() },
    ]);

    setIsLoading(true);
    try {
      // Forward optional contexts to backend when available.
      console.log('Forward selected contexts to backend:', contexts);
      const reply = `Echo: ${text}`;
      setMessages((prev) => [
        ...prev,
        {
          id: crypto.randomUUID(),
          text: reply,
          sender: 'assistant',
          timestamp: new Date().toISOString(),
        },
      ]);
    } finally {
      setIsLoading(false);
    }
  };

  const onNewChat = () => {
    console.log('Create a new chat in your backend, then update chats state.');
  };

  const onSelectChat = (chatId: string) => {
    setActiveChatId(chatId);
    console.log('Load messages for chat:', chatId);
  };

  const onDeleteChat = (chatId: string) => {
    console.log('Delete chat in backend:', chatId);
    if (activeChatId === chatId) {
      setActiveChatId(undefined);
      setMessages([]);
    }
  };

  return (
    <div style={{ height: '100vh' }}>
      <ChatInterface
        chats={chats} /* Required: conversations shown in sidebar */
        activeChatId={activeChatId} /* Optional: currently active conversation id */
        messages={messages} /* Required: feed data for the main panel */
        onSend={onSend} /* Required: composer send action */
        onNewChat={onNewChat} /* Required: new-chat action */
        onSelectChat={onSelectChat} /* Required: sidebar selection action */
        onDeleteChat={onDeleteChat} /* Optional: enables delete action */
        isLoading={isLoading} /* Optional: assistant loading state */
        defaultMessage="Welcome! Ask me anything to get started." /* Optional: empty feed message */
      />
    </div>
  );
}