import React, { useState, useMemo } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { RhSidebar } from './RhSidebar';
import { RhHeader } from './RhHeader';
import { useRhTheme } from '../../hooks/useRhTheme';
import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';

export const RhLayout = () => {
    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
    const { theme, toggleTheme } = useRhTheme();
    const location = useLocation();
    
    // Definir título baseado na rota atual
    const pageTitle = useMemo(() => {
        const path = location.pathname;
        if (path.includes('/dashboard')) return 'Dashboard | Integra RH';
        if (path.includes('/trabalhadores')) return 'Trabalhadores | Integra RH';
        if (path.includes('/colaboradores')) return 'Colaboradores | Integra RH';
        if (path.includes('/ponto')) return 'Ponto Eletrônico | Integra RH';
        if (path.includes('/contratos-experiencia')) return 'Contratos de Experiência | Integra RH';
        if (path.includes('/aniversariantes')) return 'Aniversariantes | Integra RH';
        if (path.includes('/faltas-atestados')) return 'Faltas e Atestados | Integra RH';
        return 'Integra RH';
    }, [location.pathname]);
    
    useDocumentMetadata(pageTitle, 'rh');

    return (
        <div className="flex min-h-screen w-full bg-slate-50 dark:bg-[#09090b] transition-colors duration-300 overflow-hidden" style={{ fontFamily: 'var(--font-main)' }}>
            {/* Sidebar with Theme Props */}
            <RhSidebar 
                isCollapsed={isSidebarCollapsed} 
                onToggle={() => setIsSidebarCollapsed(!isSidebarCollapsed)} 
                theme={theme}
                onThemeToggle={toggleTheme}
            />

            {/* Main Content Area */}
            <main 
                className="flex-1 flex flex-col min-h-screen transition-all duration-300 ease-out min-w-0"
                style={{ 
                    marginLeft: isSidebarCollapsed ? '100px' : '280px'
                }}
            >
                {/* Header */}
                <RhHeader />

                {/* Content Area - Adjusted for maximum space utilization */}
                <div className="flex-1 flex flex-col p-4 md:p-6 min-w-0 overflow-hidden">
                    <div className="flex-1 rounded-2xl bg-white dark:bg-[#121212] border border-slate-200 dark:border-[#27272a] shadow-sm overflow-hidden relative flex flex-col">
                        <Outlet />
                    </div>
                </div>
            </main>
        </div>
    );
};
