import React from 'react';
import { AppProvider, useApp } from './context/AppContext';
import { AdminProvider } from './context/AdminContext';
import Sidebar from './components/Sidebar';
import MarkdownRenderer from './components/MarkdownRenderer';
import SiteHeader from './components/SiteHeader';
import AdminTokenModal from './components/AdminTokenModal';
import AdminPanel from './components/AdminPanel';
import './App.css';

function AdminBridge({ children }) {
  const { loadDirectoryTree } = useApp();
  return (
    <AdminProvider onTreeShouldReload={loadDirectoryTree}>{children}</AdminProvider>
  );
}

function AppContent() {
  const { sidebarOpen, toggleSidebar } = useApp();

  return (
    <div className="app">
      <SiteHeader />
      {sidebarOpen && (
        <button
          type="button"
          className="sidebar-backdrop"
          onClick={toggleSidebar}
          aria-label="关闭目录"
        />
      )}
      <div className="app-main">
        {!sidebarOpen && (
          <button
            className="floating-open-button"
            onClick={toggleSidebar}
            aria-label="展开目录"
            title="展开目录"
          >
            ☰
          </button>
        )}
        <Sidebar />
        <MarkdownRenderer />
      </div>
      <AdminTokenModal />
      <AdminPanel />
    </div>
  );
}

function App() {
  return (
    <AppProvider>
      <AdminBridge>
        <AppContent />
      </AdminBridge>
    </AppProvider>
  );
}

export default App;
