import React, { useState, useRef } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { Moon, Sun, Globe, Menu } from 'lucide-react';
import { User } from '../types';
import PlatformSidebar from '../components/PlatformSidebar';
import UserProfileDropdown from '../components/UserProfileDropdown';
import NotificationDropdown from '../components/NotificationDropdown';
import LanguageSelector from '../components/LanguageSelector';
import TicketModal from '../components/TicketModal';
import HelpButton from '../components/HelpButton';
import { useTicket } from '../hooks/useTickets';
import { useScrollToTop } from '../hooks/useScrollToTop';

interface PlatformLayoutProps {
  user: User;
  darkMode: boolean;
  toggleTheme: () => void;
  onSignOut: () => void;
}

const PlatformLayout: React.FC<PlatformLayoutProps> = ({ user, darkMode, toggleTheme, onSignOut }) => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [ticketModalId, setTicketModalId] = useState<string | null>(null);
  const mainContentRef = useRef<HTMLElement>(null);
  const location = useLocation();

  // Pages that need edge-to-edge rendering (no padding)
  const noPaddingRoutes = ['/help/api-docs', '/platform/email'];

  useScrollToTop(mainContentRef);

  // Fetch ticket data when modal is opened from notification
  const { data: ticketFromNotification } = useTicket(ticketModalId && ticketModalId !== 'undefined' ? ticketModalId : undefined);

  const handleTicketClick = (ticketId: string) => {
    setTicketModalId(ticketId);
  };

  const closeTicketModal = () => {
    setTicketModalId(null);
  };

  return (
    <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
      {/* Mobile menu */}
      <div className={`fixed inset-y-0 left-0 z-40 transform ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out md:hidden`}>
        <PlatformSidebar user={user} isCollapsed={false} toggleCollapse={() => { }} />
      </div>
      {isMobileMenuOpen && <div className="fixed inset-0 z-30 bg-black/50 md:hidden" onClick={() => setIsMobileMenuOpen(false)}></div>}

      {/* Static sidebar for desktop */}
      <div className="hidden md:flex md:flex-shrink-0">
        <PlatformSidebar user={user} isCollapsed={isCollapsed} toggleCollapse={() => setIsCollapsed(!isCollapsed)} />
      </div>

      {/* Main Content Area */}
      <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
        {/* Platform Top Bar */}
        <header className="flex items-center justify-between h-16 px-4 sm:px-8 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center gap-4">
            <button
              onClick={() => setIsMobileMenuOpen(true)}
              className="p-2 -ml-2 text-gray-500 rounded-md md:hidden hover:bg-gray-100 dark:hover:bg-gray-700"
              aria-label="Open sidebar"
            >
              <Menu size={24} />
            </button>
            <div className="hidden md:flex items-center text-gray-500 dark:text-gray-400 text-sm gap-2">
              <Globe size={16} />
              <span>smoothschedule.com</span>
              <span className="mx-2 text-gray-300">/</span>
              <span className="text-gray-900 dark:text-white font-medium">Admin Console</span>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <LanguageSelector />
            <button
              onClick={toggleTheme}
              className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
            >
              {darkMode ? <Sun size={20} /> : <Moon size={20} />}
            </button>
            <NotificationDropdown onTicketClick={handleTicketClick} />
            <HelpButton />
            <UserProfileDropdown user={user} />
          </div>
        </header>

        <main ref={mainContentRef} className={`flex-1 overflow-auto bg-gray-50 dark:bg-gray-900 ${noPaddingRoutes.includes(location.pathname) ? '' : 'p-8'}`}>
          <Outlet />
        </main>
      </div>

      {/* Ticket modal opened from notification */}
      {ticketModalId && ticketFromNotification && (
        <TicketModal
          ticket={ticketFromNotification}
          onClose={closeTicketModal}
        />
      )}
    </div>
  );
};

export default PlatformLayout;