import { useState } from 'react';
import { Outlet } from 'react-router-dom';

// Astryx design system — see themes/astryx.js and CLAUDE.md's Astryx CLI
// section. This replaces the old MUI Drawer/Header/HorizontalBar shell;
// horizontal menu orientation (config.menuOrientation) was dropped since it
// was never exposed as a user-facing toggle in this app — see AppSideNav.js.
// AppShell config (variant/height/contentPadding/mobileNav breakpoint) and
// the lifted collapse state mirror doormile_crm/src/layout/MainLayout/index.jsx
// — that sibling Doormile app's validated Astryx shell.
import { AppShell } from '@astryxdesign/core/AppShell';
import { Theme } from '@astryxdesign/core/theme';
import { doormileTheme } from 'themes/astryx';

import AppTopNav from './AppTopNav';
import AppSideNav from './AppSideNav';

// ==============================|| MAIN LAYOUT ||============================== //

const MainLayout = () => {
  // Lifted here (rather than left as SideNav's own uncontrolled state) so the
  // TopNav logo can track the sidebar's collapse state. Defaults to collapsed
  // on every load/reload (not persisted).
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(true);

  return (
    <Theme theme={doormileTheme} mode="light">
      {/* height="auto" (not doormile_crm's "fill"): "fill" scrolls the
          content area in its own container, and CLAUDE.md's canonical
          useInfiniteQuery pattern observes a sentinel against the window's
          viewport (IntersectionObserver root=null), which only fires
          correctly with normal document-level scroll. */}
      <AppShell
        variant="section"
        height="auto"
        contentPadding={0}
        topNav={<AppTopNav />}
        sideNav={<AppSideNav isCollapsed={isSidebarCollapsed} onCollapsedChange={setIsSidebarCollapsed} />}
        mobileNav={{ breakpoint: 'lg' }}
      >
        <div className="main-content-area" style={{ minHeight: '100%', boxSizing: 'border-box' }}>
          <Outlet />
        </div>
        <style>{`
          .main-content-area {
            padding: 24px;
          }
          @media (max-width: 480px) {
            .main-content-area {
              padding: 16px;
            }
          }
        `}</style>
      </AppShell>
    </Theme>
  );
};

export default MainLayout;
