import { useState } from 'react';
import { Sidebar } from './Sidebar';
import { Header } from './Header';
import { SearchModal } from './SearchModal';
import { MemoryPanel } from './MemoryPanel';
import { useAuth } from '@/hooks/useAuth';

interface AppLayoutProps {
  children: React.ReactNode;
}

export function AppLayout({ children }: AppLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [memoryOpen, setMemoryOpen] = useState(false);
  const { isLoggedIn } = useAuth();

  return (
    <div className="flex h-screen bg-[#FFFAF5] dark:bg-[#1a1a2e]">
      {/* 侧边栏 */}
      {isLoggedIn && (
        <>
          {/* 移动端遮罩 */}
          {sidebarOpen && (
            <div
              className="fixed inset-0 bg-black/30 z-20 lg:hidden"
              onClick={() => setSidebarOpen(false)}
            />
          )}
          <div
            className={`
              fixed lg:static inset-y-0 left-0 z-30 w-64 transform transition-transform duration-300 ease-in-out
              ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
            `}
          >
            <Sidebar onClose={() => setSidebarOpen(false)} onMemoryClick={() => setMemoryOpen(true)} />
          </div>
        </>
      )}

      {/* 主内容区 */}
      <div className="flex-1 flex flex-col min-w-0">
        {isLoggedIn && (
          <Header
            onMenuClick={() => setSidebarOpen(!sidebarOpen)}
            onSearchClick={() => setSearchOpen(true)}
          />
        )}
        <main className="flex-1 min-h-0 overflow-hidden">{children}</main>
      </div>

      {/* 搜索弹窗 */}
      <SearchModal isOpen={searchOpen} onClose={() => setSearchOpen(false)} />
      {/* 记忆管理弹窗 */}
      <MemoryPanel isOpen={memoryOpen} onClose={() => setMemoryOpen(false)} />
    </div>
  );
}