import React, { useEffect } from 'react';
import Sidebar from './components/Sidebar.jsx';
import ChatArea from './components/ChatArea.jsx';
import ModelManager from './components/ModelManager.jsx';
import SystemPromptPanel from './components/SystemPromptPanel.jsx';
import { useStore } from './store/useStore.js';

export default function App() {
  const { fetchModels, createConversation, conversations, activeConvId, sidebarOpen } = useStore();

  useEffect(() => {
    fetchModels().then(() => {
      // Auto-create first conversation if none exists
      const state = useStore.getState();
      if (state.conversations.length === 0) {
        state.createConversation();
      } else if (!state.activeConvId) {
        useStore.setState({ activeConvId: state.conversations[0].id });
      }
    });
  }, []);

  return (
    <div className="flex h-screen overflow-hidden bg-midnight">
      {/* Subtle background gradient */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-0 left-0 w-96 h-96 bg-grape/5 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-blush/5 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />
      </div>

      {/* Layout */}
      <Sidebar />

      <main className="flex-1 flex flex-col min-w-0 relative">
        <ChatArea />
      </main>

      {/* Modals / overlays */}
      <ModelManager />
      <SystemPromptPanel />
    </div>
  );
}