import { useEffect, useRef } from 'react';
import { useChatStore } from '@/stores/chatStore';
import Sidebar from '@/components/layout/Sidebar';
import ChatArea from '@/components/chat/ChatArea';
import SettingsModal from '@/components/chat/SettingsModal';
import KnowledgePanel from '@/components/knowledge/KnowledgePanel';
import { Menu, Settings } from 'lucide-react';

function App() {
  const {
    conversations,
    currentConversationId,
    isSidebarOpen,
    isSettingsOpen,
    createConversation,
    toggleSidebar,
    toggleSettings,
  } = useChatStore();

  const initialized = useRef(false);

  useEffect(() => {
    if (!initialized.current && conversations.length === 0) {
      initialized.current = true;
      createConversation();
    }
  }, [conversations.length, createConversation]);

  return (
    <div className="flex h-screen w-screen overflow-hidden bg-[var(--color-bg)]">
      {/* Mobile sidebar overlay */}
      {isSidebarOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-30 lg:hidden"
          onClick={toggleSidebar}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`fixed lg:static inset-y-0 left-0 z-40 w-72 bg-[var(--color-surface)] border-r border-[var(--color-border)] transform transition-transform duration-300 ease-in-out ${
          isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0 lg:hidden'
        }`}
      >
        <Sidebar />
      </aside>

      {/* Main Content */}
      <main className="flex-1 flex flex-col min-w-0">
        {/* Header */}
        <header className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-border)] bg-[var(--color-bg)]">
          <div className="flex items-center gap-3">
            <button
              onClick={toggleSidebar}
              className="p-2 rounded-lg hover:bg-[var(--color-surface-hover)] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
            >
              <Menu size={20} />
            </button>
            <h1 className="text-lg font-semibold text-[var(--color-text)] truncate">
              AIUI Chat
            </h1>
          </div>
          <button
            onClick={toggleSettings}
            className="p-2 rounded-lg hover:bg-[var(--color-surface-hover)] text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
          >
            <Settings size={20} />
          </button>
        </header>

        {/* Chat Area */}
        {currentConversationId ? (
          <ChatArea conversationId={currentConversationId} />
        ) : (
          <div className="flex-1 flex items-center justify-center text-[var(--color-text-muted)]">
            <p>Select or create a conversation to start chatting</p>
          </div>
        )}
      </main>

      {/* Settings Modal */}
      {isSettingsOpen && <SettingsModal />}

      {/* Knowledge Panel */}
      <KnowledgePanel />
    </div>
  );
}

export default App;