'use client';

import { useState } from 'react';
import { usePathname } from 'next/navigation';
import "../globals.css";
import { DashboardNav } from "@/components/DashboardNav";
import { DashboardHeader } from "@/components/DashboardHeader";

export default function DashboardLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const pathname = usePathname();

  // Dynamic header configuration based on path
  const headerConfig: Record<string, { title: string; subtitle: string; showActions: boolean }> = {
    '/dashboard': { 
      title: 'Intelligence Hub', 
      subtitle: 'Operational Performance', 
      showActions: true 
    },
    '/dashboard/leads': { 
      title: 'Inventory', 
      subtitle: 'Verified Intelligence', 
      showActions: true 
    },
    '/dashboard/scan': { 
      title: 'Extraction Engine', 
      subtitle: 'Global Intelligence Extraction', 
      showActions: true 
    },
    '/dashboard/logs': { 
      title: 'Intelligence Audit', 
      subtitle: 'Historical Records', 
      showActions: true 
    },
    '/dashboard/settings': { 
      title: 'System Parameters', 
      subtitle: 'Global Configuration', 
      showActions: false 
    },
  };

  const currentHeader = headerConfig[pathname] || headerConfig['/dashboard'];

  return (
    <div className="flex xl:max-w-[1600px] xl:mx-auto h-screen overflow-hidden bg-white xl:border-x xl:border-[#f5f5f5] xl:shadow-[0px_0px_50px_rgba(0,0,0,0.02)]">
      {/* Sidebar Overlay for Mobile */}
      {isSidebarOpen && (
        <div 
          className="lg:hidden fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[55] transition-opacity"
          onClick={() => setIsSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <div className={`
        fixed inset-y-0 left-0 lg:static lg:block z-[60] transition-transform duration-300 transform
        ${isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
      `}>
        <DashboardNav onClose={() => setIsSidebarOpen(false)} />
      </div>

      <main className="flex-1 flex flex-col min-w-0 bg-white overflow-hidden relative">
        <DashboardHeader 
          title={currentHeader.title} 
          subtitle={currentHeader.subtitle} 
          showActions={currentHeader.showActions}
          onMenuToggle={() => setIsSidebarOpen(true)} 
        />
        <div className="flex-1 overflow-y-auto overflow-x-hidden">
          {children}
        </div>
      </main>
    </div>
  );
}
