// Author: fruit.com.cn
import { Suspense, useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { useLocale, useUi } from '../app/providers/AppProviders';
import { BottomNav } from './components/BottomNav';
import { Sidebar } from './components/Sidebar';
import { TopBar } from './components/TopBar';
import { UploadVideoDialog } from './components/UploadVideoDialog';

export function AppShell() {
  const { locale } = useLocale();
  const { sidebarOpen, setSidebarOpen } = useUi();
  const location = useLocation();
  const [uploadOpen, setUploadOpen] = useState(false);
  const immersive = location.pathname === '/shorts';

  return (
    <>
      <TopBar onToggleSidebar={() => setSidebarOpen(!sidebarOpen)} onUpload={() => setUploadOpen(true)} />
      <Sidebar />
      <main className={`content ${sidebarOpen ? '' : 'content-wide'}`}>
        <Suspense fallback={<div className="route-loading" aria-busy="true" />}>
          <Outlet />
        </Suspense>
        {!immersive && <footer className="site-footer">© {new Date().getFullYear()} {locale.copyright}</footer>}
      </main>
      <BottomNav />
      {sidebarOpen && (
        <button className="scrim mobile-only" onClick={() => setSidebarOpen(false)} aria-label="Close" type="button" />
      )}
      <UploadVideoDialog open={uploadOpen} onClose={() => setUploadOpen(false)} />
    </>
  );
}