import React, { ReactNode, useCallback, useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { useApp } from '@nexuscrm/host-sdk';
import { UtilityBar } from './UtilityBar';
import { TopBar } from './TopBar';
import { Sidebar } from './Sidebar';

interface LayoutProps {
  children: ReactNode;
}

const SIDEBAR_COLLAPSED_STORAGE_KEY = 'salesforce_crm_sidebar_collapsed';

export function CrmLayout({ children }: LayoutProps) {
  const { currentApp } = useApp();
  const [isSidebarCollapsed, setSidebarCollapsedState] = useState<boolean>(() => (
    localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY) === 'true'
  ));
  const setIsSidebarCollapsed = useCallback((collapsed: boolean) => {
    setSidebarCollapsedState(collapsed);
    localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, String(collapsed));
  }, []);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  // Close mobile menu on route change
  const location = useLocation();
  useEffect(() => {
    setMobileMenuOpen(false);
  }, [location]);

  return (
    <div className="h-screen flex flex-col overflow-hidden bg-slate-50 relative">

      <TopBar
        mobileMenuOpen={mobileMenuOpen}
        setMobileMenuOpen={setMobileMenuOpen}
        isSidebarCollapsed={isSidebarCollapsed}
      />

      <div className="flex flex-1 overflow-hidden relative">
        <Sidebar
          isSidebarCollapsed={isSidebarCollapsed}
          setIsSidebarCollapsed={setIsSidebarCollapsed}
          mobileMenuOpen={mobileMenuOpen}
          setMobileMenuOpen={setMobileMenuOpen}
        />

        {/* No padding-top on the scroll container: the sticky constraint
            rectangle insets by the scroll container's padding, so any
            padding-top here pins every descendant `sticky top-0` that many
            pixels below the viewport top — an unclosable gap that scrolled
            content bleeds through. Pages own their top spacing via their
            content containers (`max-w-* mx-auto p-6`). */}
        <main className="flex-1 overflow-y-auto bg-slate-50 px-6 pb-6">
          {children}
        </main>
      </div >

      {/* Utility Bar */}
      {
        currentApp?.utilityItems && currentApp.utilityItems.length > 0 && (
          <UtilityBar items={currentApp.utilityItems} />
        )
      }
    </div >
  );
}