import React, { useState } from 'react';
import { Outlet, useLocation } from 'react-router-dom';
import { 
  Sun,
  Moon,
  Search
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';
import { AutoLabSidebar } from '../components/AutoLabSidebar';
import { useAutoLabTheme } from '../hooks/useAutoLabTheme';

export const AutoLabLayout = () => {
  useDocumentMetadata('Auto Lab', 'autolab');
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const { isDarkMode, toggleTheme } = useAutoLabTheme(); // Usa hook que detecta preferência do sistema
  const location = useLocation();

  // Map path to title
  const getPageTitle = (pathname) => {
    if (pathname.includes('cadastro')) return 'Cadastro';
    if (pathname.includes('estoque')) return 'Estoque';
    if (pathname.includes('vendas')) return 'Vendas';
    if (pathname.includes('clientes')) return 'Clientes';
    if (pathname.includes('configuracao')) return 'Configuração';
    return 'Ambiente Auto Lab';
  };

  return (
    <div className={cn(
      "flex min-h-screen font-inter selection:bg-emerald-500/30", 
      isDarkMode ? "dark bg-[#141414] text-slate-100" : "bg-slate-50 text-slate-900"
    )}>
      {/* Sidebar */}
      <AutoLabSidebar 
        isCollapsed={isSidebarCollapsed} 
        onToggle={() => setIsSidebarCollapsed(!isSidebarCollapsed)} 
      />

      {/* Main Content Area */}
      <main 
        className={cn(
          "flex-1 transition-all duration-300 min-h-screen flex flex-col min-w-0",
          isSidebarCollapsed ? "ml-[100px]" : "ml-[280px]"
        )}
      >
        {/* Header - Styled like screenshots */}
        <header className={cn(
          "h-16 px-8 sticky top-0 z-40 flex items-center justify-between",
          "bg-[#1b4332] text-white shadow-lg"
        )}>
            <div className="flex items-center gap-6 flex-1">
              <h1 className="text-2xl font-bold tracking-tight">{getPageTitle(location.pathname)}</h1>
              
              {/* Header Search Bar */}
              <div className="relative max-w-md w-full">
                <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-white/60" />
                <input 
                  type="text" 
                  placeholder="Pesquisar..." 
                  className="w-full bg-white/10 border border-white/20 rounded-lg py-1.5 pl-10 pr-4 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-emerald-500/50 transition-all"
                />
              </div>
            </div>

            <div className="flex items-center gap-4">
              {/* Theme Toggle */}
              <button 
                onClick={toggleTheme}
                className={cn(
                  "p-2 rounded-full transition-colors",
                  "text-white/80 hover:text-white hover:bg-white/10"
                )}
              >
                {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
              </button>
            </div>
        </header>

        {/* Content */}
        <div className="flex-1 p-6 min-w-0 overflow-hidden bg-slate-50 dark:bg-[#0f0f0f]">
           <div className={cn(
             "h-full w-full rounded-2xl border overflow-hidden flex flex-col shadow-sm",
             isDarkMode 
               ? "bg-[#1b1b1b] border-zinc-800 shadow-black/20" 
               : "bg-white border-slate-200 shadow-slate-200/50"
           )}>
              <div className="flex-1 overflow-y-auto custom-scrollbar">
                <Outlet />
              </div>
           </div>
        </div>
      </main>
    </div>
  );
};
