'use client';

import React, { useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { INITIAL_USERS } from '@/types/auth';
import { AAMovementSidebar } from './AAMovementSidebar';
import { AAMovementTopHeader } from './AAMovementTopHeader';
import { MultiTierCommunicationModal } from '../dashboard/MultiTierCommunicationModal';

interface AAMovementShellProps {
  children: React.ReactNode;
}

export const AAMovementShell: React.FC<AAMovementShellProps> = ({ children }) => {
  const { currentUser, quickLogin } = useAuth();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isCommsModalOpen, setIsCommsModalOpen] = useState(false);

  const activeUser = currentUser || INITIAL_USERS[0];

  return (
    <div className="min-h-screen bg-[#F4F7FC] text-slate-900 flex antialiased">
      {/* 1. Left Dark Sidebar (Executive AAMovement Theme) */}
      <AAMovementSidebar
        isOpenMobile={isMobileMenuOpen}
        onCloseMobile={() => setIsMobileMenuOpen(false)}
      />

      {/* Mobile Backdrop Overlay */}
      {isMobileMenuOpen && (
        <div
          role="button"
          tabIndex={0}
          aria-label="Close navigation menu"
          className="fixed inset-0 bg-slate-950/60 backdrop-blur-xs z-30 lg:hidden cursor-pointer"
          onClick={() => setIsMobileMenuOpen(false)}
          onKeyDown={(e) => {
            if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
              setIsMobileMenuOpen(false);
            }
          }}
        />
      )}

      {/* 2. Main Content Viewport */}
      <div className="flex-1 flex flex-col min-w-0 min-h-screen">
        {/* Top Crisp White Header */}
        <AAMovementTopHeader
          currentUser={activeUser}
          onSwitchUser={(user) => quickLogin(user)}
          onOpenCommunication={() => setIsCommsModalOpen(true)}
          onToggleMobileMenu={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        />

        {/* Dynamic Page Children Content */}
        <main className="flex-1 w-full max-w-[1600px] mx-auto p-4 sm:p-6 lg:p-7">
          {children}
        </main>
      </div>

      {/* 3. Global Multi-Tier Intercom Desk Modal */}
      <MultiTierCommunicationModal
        isOpen={isCommsModalOpen}
        onClose={() => setIsCommsModalOpen(false)}
        currentUser={activeUser}
      />
    </div>
  );
};

export default AAMovementShell;