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

export const PrafrotLayout = () => {
  useDocumentMetadata('Prafrota', 'prafrot');
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const [isDarkMode, setIsDarkMode] = useState(true);

  return (
    <div className={cn(
      "flex min-h-screen font-inter selection:bg-emerald-500/30 theme-frota", 
      isDarkMode ? "dark bg-[#141414] text-slate-100" : "bg-slate-50 text-slate-900"
    )}>
      {/* New Sidebar Component */}
      <PrafrotSidebar 
        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 */}
        <header className={cn(
          "h-16 px-8 sticky top-0 z-40 backdrop-blur-md border-b flex items-center justify-between",
          isDarkMode ? "bg-[#141414]/80 border-[#2a2a2a]" : "bg-slate-50/80 border-slate-200"
        )}>
            {/* <div className="flex items-center gap-4">
              <button 
                onClick={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
                className="text-slate-400 hover:text-emerald-500 transition-colors p-2 rounded-xl hover:bg-emerald-500/10"
              >
                <Menu size={20} />
              </button>
            </div> */}

            <div className="flex items-center gap-4">
              {/* Theme Toggle */}
              <button 
                onClick={() => setIsDarkMode(!isDarkMode)}
                className={cn(
                  "p-2 rounded-full transition-colors",
                  isDarkMode ? "text-slate-400 hover:text-yellow-400" : "text-slate-500 hover:text-orange-500"
                )}
              >
                {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
              </button>
            </div>
        </header>

        {/* Content */}
        <div className="flex-1 p-6 min-w-0 overflow-hidden">
           <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 p-6">
                <Outlet />
              </div>
           </div>
        </div>
      </main>
    </div>
  );
};
