import { useState } from 'react';
import { ThemeProvider } from 'antd-style';
import { ChatContainer } from './components/ChatContainer';
import { Sidebar } from './components/SidebarNew';
import { ChatHeader } from './components/ChatHeader';
import { useChat } from './hooks/useChat';
import { useAppStyles } from './styles/appLayout.styles';
import { chatGPTTheme } from './styles/theme';
import './App.css';

function App() {
  const chatState = useChat();
  const { styles } = useAppStyles();
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  const closeSidebar = () => {
    setSidebarOpen(false);
  };

  return (
    <ThemeProvider theme={chatGPTTheme}>
      <div className={styles.layout}>
        {/* Sidebar */}
        <aside className={`${styles.sidebar} ${sidebarOpen ? 'open' : ''}`}>
          <Sidebar
            conversations={chatState.conversations}
            activeConversationId={chatState.activeConversationId}
            onNewChat={() => {
              chatState.createNewConversation();
              closeSidebar();
            }}
            onSelectConversation={(id) => {
              chatState.selectConversation(id);
              closeSidebar();
            }}
            onClose={closeSidebar}
          />
        </aside>

        {/* Main Content Area */}
        <main className={styles.mainContent}>
          {/* Mobile Header */}
          <ChatHeader
            onMenuClick={toggleSidebar}
            onSettingsClick={() => console.log('Settings')}
            onProfileClick={() => console.log('Profile')}
          />

          {/* Chat Area */}
          <div className={styles.chatArea}>
            <ChatContainer
              messages={chatState.messages}
              isTyping={chatState.isTyping}
              onSendMessage={chatState.sendMessage}
            />
          </div>
        </main>

        {/* Mobile Overlay */}
        {sidebarOpen && (
          <div
            className={`${styles.overlay} visible`}
            onClick={closeSidebar}
          />
        )}
      </div>
    </ThemeProvider>
  );
}

export default App;