src/app/pages/ChatPage.tsx

import React from 'react';
import ChatInput from '../components/chat/ChatInput.tsx';
import MessageList from '../components/chat/MessageList.tsx';
import { useChat } from '../hooks/useChat.ts';

const ChatPage = () => {
  const { messages, isLoading, error, sendMessage, sendAudioMessage, retryLastMessage } = useChat();

  const handleMessageSubmit = (message: string, selectedTool?: string | null, stance?: 'positive' | 'negative') => {
    sendMessage(message, selectedTool, stance);
  };

  const handleAudioSubmit = (audioBlob: Blob, selectedTool?: string | null, stance?: 'positive' | 'negative') => {
    sendAudioMessage(audioBlob, selectedTool);
  };

  const hasConversation = messages.length > 0;

  return (
    <div className={`flex min-h-screen bg-white dark:bg-black transition-colors duration-200 ${hasConversation ? 'flex-col' : ''}`}>
      {hasConversation ? (
        <>
          {/* Messages */}
          <div className="flex-1 max-w-4xl w-full mx-auto pt-20">
            <MessageList
              messages={messages}
              isLoading={isLoading}
              error={error}
              onRetry={retryLastMessage}
            />
          </div>

          {/* Input */}
          <div className="px-4 py-4">
            <div className="max-w-4xl mx-auto">
              <ChatInput onSubmit={handleMessageSubmit} onAudioSubmit={handleAudioSubmit} placeholder="Type your message..." />
            </div>
          </div>
        </>
      ) : (
        /* Centered input when no conversation */
        <div className="flex items-center justify-center px-4 pt-20 pb-10 w-full">
          <div className="w-full max-w-4xl">
            <ChatInput onSubmit={handleMessageSubmit} onAudioSubmit={handleAudioSubmit} placeholder="Ask me anything..." />
          </div>
        </div>
      )}
    </div>
  );
};

export default ChatPage;