import React, { useEffect } from 'react';
import { useAssetStore } from '../store/useAssetStore';
import { useUIStore } from '../store/useUIStore';
import { useSidebar } from '../hooks/useSidebar';
import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
import Sidebar from './layout/Sidebar';
import Topbar from './layout/Topbar';
import ProfileModal from './layout/ProfileModal';

interface LayoutProps {
  children: React.ReactNode;
}

const Layout: React.FC<LayoutProps> = ({ children }) => {
  const { fetchProjects: fetchSites } = useAssetStore();
  const { isSidebarOpen, setSidebarOpen, expandedGroups, toggleGroup } = useSidebar();
  const { isProfileModalOpen, setProfileModalOpen } = useUIStore();

  // Keyboard shortcuts
  useKeyboardShortcuts([
    {
      key: 'k',
      ctrlKey: true,
      handler: () => {
        // Toggle search - could be enhanced with actual search functionality
        const searchInput = document.querySelector('input[placeholder*="Tìm kiếm"]') as HTMLInputElement;
        if (searchInput) {
          searchInput.focus();
        }
      }
    },
    {
      key: 'b',
      ctrlKey: true,
      handler: () => {
        setSidebarOpen(!isSidebarOpen);
      }
    },
    {
      key: 'p',
      ctrlKey: true,
      handler: () => {
        setProfileModalOpen(true);
      }
    }
  ]);

  // Fetch sites on mount
  useEffect(() => {
    fetchSites();
  }, [fetchSites]);

  return (
    <div className="flex h-screen bg-slate-50 dark:bg-slate-900 overflow-hidden relative transition-colors duration-200">
      <Sidebar
        isSidebarOpen={isSidebarOpen}
        setSidebarOpen={setSidebarOpen}
        expandedGroups={expandedGroups}
        toggleGroup={toggleGroup}
      />

      {/* Main Content */}
      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
        <Topbar
          isSidebarOpen={isSidebarOpen}
          setSidebarOpen={setSidebarOpen}
          onProfileClick={() => setProfileModalOpen(true)}
        />

        {/* Content Area */}
        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-slate-50 dark:bg-slate-900 p-4 sm:p-6 transition-colors">
          <div className="mx-auto h-full">
            {children}
          </div>
        </main>
      </div>

      <ProfileModal />
    </div>
  );
};

export default Layout;