"use client";

import { useState } from "react";
import Link from "next/link";
import { 
  LayoutDashboard, Users, ShoppingCart, Package, 
  Warehouse, PenTool, Wrench, Megaphone, 
  Landmark, UserCircle, Settings, Bell, Search,
  Menu, Globe, LogOut, ChevronLeft, ChevronRight, X
} from "lucide-react";

import { Input } from "@/components/ui/input";
import { Button, buttonVariants } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { 
  DropdownMenu, DropdownMenuContent, DropdownMenuItem, 
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger 
} from "@/components/ui/dropdown-menu";
import { useLanguage } from "@/lib/i18n";
import { DictionaryKey } from "@/lib/dictionaries";

const sidebarMenu: { nameKey: DictionaryKey; icon: any; href: string }[] = [
  { nameKey: "dashboard", icon: LayoutDashboard, href: "/dashboard" },
  { nameKey: "crmClients", icon: Users, href: "/dashboard/clients" },
  { nameKey: "salesQuotes", icon: ShoppingCart, href: "/dashboard/sales" },
  { nameKey: "productsCatalog", icon: Package, href: "/dashboard/products" },
  { nameKey: "warehouse", icon: Warehouse, href: "/dashboard/warehouse" },
  { nameKey: "projects", icon: PenTool, href: "/dashboard/projects" },
  { nameKey: "support", icon: Wrench, href: "/dashboard/support" },
  { nameKey: "marketing", icon: Megaphone, href: "/dashboard/marketing" },
  { nameKey: "accounting", icon: Landmark, href: "/dashboard/accounting" },
  { nameKey: "hr", icon: UserCircle, href: "/dashboard/hr" },
  { nameKey: "settings", icon: Settings, href: "/dashboard/settings" },
];

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const { t, setLanguage, dir } = useLanguage();

  return (
    <div className="flex h-screen overflow-hidden bg-brand-black text-white selection:bg-brand-red" dir={dir}>
      
      {/* Mobile Overlay */}
      {isMobileMenuOpen && (
        <div 
          className="fixed inset-0 bg-black/60 z-40 md:hidden backdrop-blur-sm"
          onClick={() => setIsMobileMenuOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside 
        className={`bg-brand-charcoal border-${dir === 'rtl' ? 'l' : 'r'} border-white/10 transition-transform duration-300 ease-in-out flex flex-col fixed inset-y-0 z-50 md:relative ${
          isMobileMenuOpen ? "translate-x-0 w-64" : (dir === 'rtl' ? "translate-x-full md:translate-x-0" : "-translate-x-full md:translate-x-0")
        } ${isSidebarOpen ? "md:w-64" : "md:w-20"}`}
      >
        <div className="h-16 flex items-center justify-between px-4 border-b border-white/10">
          {(isSidebarOpen || isMobileMenuOpen) ? (
            <div className="flex items-center gap-2">
              <span className="text-xl font-black text-brand-red">K</span>
              <span className="text-xl font-bold tracking-tight">CREATION</span>
            </div>
          ) : (
            <span className="text-2xl font-black text-brand-red mx-auto">K</span>
          )}
          {/* Close button on mobile */}
          <Button 
            variant="ghost" 
            size="icon" 
            className="md:hidden text-gray-400 hover:text-white"
            onClick={() => setIsMobileMenuOpen(false)}
          >
            <X className="w-5 h-5" />
          </Button>
        </div>

        <div className="flex-1 overflow-y-auto py-4 scrollbar-thin scrollbar-thumb-white/10">
          <nav className="space-y-1 px-2">
            {sidebarMenu.map((item) => (
              <Link 
                key={item.nameKey} 
                href={item.href}
                onClick={() => setIsMobileMenuOpen(false)}
                className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-gray-400 hover:bg-white/5 hover:text-white transition-colors group"
              >
                <item.icon className={`w-5 h-5 flex-shrink-0 group-hover:text-brand-red transition-colors ${!isSidebarOpen && !isMobileMenuOpen && "mx-auto"}`} />
                {(isSidebarOpen || isMobileMenuOpen) && <span className="font-medium text-sm truncate">{t(item.nameKey)}</span>}
              </Link>
            ))}
          </nav>
        </div>

        {/* Sidebar Footer / Toggle (Desktop only) */}
        <div className="p-4 border-t border-white/10 hidden md:block">
          <Button 
            variant="ghost" 
            size="icon"
            onClick={() => setIsSidebarOpen(!isSidebarOpen)}
            className="w-full text-gray-400 hover:text-white hover:bg-white/5"
          >
            {isSidebarOpen ? 
              (dir === 'rtl' ? <ChevronRight className="w-5 h-5" /> : <ChevronLeft className="w-5 h-5" />) : 
              (dir === 'rtl' ? <ChevronLeft className="w-5 h-5" /> : <ChevronRight className="w-5 h-5" />)
            }
          </Button>
        </div>
      </aside>

      {/* Main Content Area */}
      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
        
        {/* Top Header */}
        <header className="h-16 bg-brand-charcoal/80 backdrop-blur-md border-b border-white/10 flex items-center justify-between px-4 md:px-6 z-10">
          <div className="flex items-center gap-4 flex-1">
            {/* Mobile Menu Toggle */}
            <Button 
              variant="ghost" 
              size="icon" 
              className="md:hidden text-gray-400 hover:text-white"
              onClick={() => setIsMobileMenuOpen(true)}
            >
              <Menu className="w-6 h-6" />
            </Button>
            
            <div className="relative w-full max-w-md hidden md:block">
              <Search className={`absolute ${dir === 'rtl' ? 'right-3' : 'left-3'} top-2.5 h-4 w-4 text-gray-500`} />
              <Input 
                placeholder={t('searchPlaceholder')} 
                className={`${dir === 'rtl' ? 'pr-9' : 'pl-9'} bg-black/40 border-white/10 focus-visible:ring-brand-red`}
              />
            </div>
          </div>

          <div className="flex items-center gap-2 md:gap-4">
            <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white relative hidden sm:flex">
              <Bell className="w-5 h-5" />
              <span className={`absolute top-2 ${dir === 'rtl' ? 'left-2' : 'right-2'} w-2 h-2 bg-brand-red rounded-full`}></span>
            </Button>
            
            <DropdownMenu>
              <DropdownMenuTrigger className={buttonVariants({ variant: "ghost", size: "icon" }) + " text-gray-400 hover:text-white"}>
                <Globe className="w-5 h-5" />
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="bg-brand-charcoal border-white/10 text-white">
                <DropdownMenuItem onClick={() => setLanguage('fr')} className="focus:bg-white/10 focus:text-white cursor-pointer">Français</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setLanguage('ar')} className="focus:bg-white/10 focus:text-white cursor-pointer">العربية</DropdownMenuItem>
                <DropdownMenuItem onClick={() => setLanguage('en')} className="focus:bg-white/10 focus:text-white cursor-pointer">English</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>

            <DropdownMenu>
              <DropdownMenuTrigger className="outline-none focus:ring-0">
                <Avatar className="cursor-pointer border border-white/10 hover:border-white/30 transition-colors w-8 h-8 md:w-10 md:h-10">
                  <AvatarImage src="https://github.com/shadcn.png" />
                  <AvatarFallback className="bg-brand-red text-white text-xs md:text-sm">SA</AvatarFallback>
                </Avatar>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56 bg-brand-charcoal border-white/10 text-white">
                <div className="px-1.5 py-1 text-xs font-medium text-muted-foreground">{t('superAdmin')}</div>
                <DropdownMenuSeparator className="bg-white/10" />
                <DropdownMenuItem className="focus:bg-white/10 focus:text-white cursor-pointer">{t('profile')}</DropdownMenuItem>
                <DropdownMenuItem className="focus:bg-white/10 focus:text-white cursor-pointer">{t('settings')}</DropdownMenuItem>
                <DropdownMenuSeparator className="bg-white/10" />
                <DropdownMenuItem className="focus:bg-brand-red focus:text-white cursor-pointer text-red-400">
                  <LogOut className={`w-4 h-4 ${dir === 'rtl' ? 'ml-2' : 'mr-2'}`} />
                  {t('logout')}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </header>

        {/* Page Content */}
        <main className="flex-1 overflow-y-auto bg-[#0a0f14] p-4 md:p-6">
          {children}
        </main>
      </div>
    </div>
  );
}