"use client";

import { useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { UserCircleIcon, LogOutIcon, MenuIcon, CopyIcon, HomeIcon, SettingsIcon, UsersIcon, UtensilsIcon, LayoutGridIcon, ChefHatIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

const MENU_ITEMS = [
  { href: "/", label: "داشبورد", icon: HomeIcon },
  { href: "/orders", label: "سفارشات", icon: CopyIcon },
  { href: "/halls", label: "سالن‌ها و میزها", icon: LayoutGridIcon },
  { href: "/stations", label: "بخش‌های آماده‌سازی", icon: ChefHatIcon },
  { href: "/menu", label: "منوی رستوران", icon: UtensilsIcon },
  { href: "/users", label: "پرسنل", icon: UsersIcon },
  { href: "/settings", label: "تنظیمات", icon: SettingsIcon },
];

export function DashboardLayoutClient({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(true);
  const pathname = usePathname();

  const toggleSidebar = () => setIsOpen(!isOpen);

  // Find current title based on active path
  const currentItem = MENU_ITEMS.find(item => pathname.startsWith(item.href)) || { label: "داشبورد توکان" };

  return (
    <div className="flex min-h-screen bg-muted/40 font-sans">
      {/* Sidebar */}
      <aside className={`border-l bg-card flex flex-col h-screen fixed right-0 top-0 transition-all duration-300 z-20 shadow-sm ${isOpen ? 'w-64' : 'w-20'}`}>
        <div className="h-16 flex items-center justify-between border-b px-4">
          {isOpen && <h1 className="font-bold text-xl text-primary whitespace-nowrap overflow-hidden">مدیریت توکان</h1>}
          <Button variant="ghost" size="icon" onClick={toggleSidebar} className="mr-auto">
            <MenuIcon className="w-5 h-5" />
          </Button>
        </div>
        <nav className="flex-1 p-3 space-y-2 overflow-y-auto">
          {MENU_ITEMS.map((item) => {
            const isActive = pathname.startsWith(item.href);
            return (
              <Link 
                key={item.href} 
                href={item.href} 
                className={`flex items-center gap-3 px-3 py-2 rounded-md transition-colors ${isActive ? 'bg-primary text-primary-foreground' : 'hover:bg-accent text-foreground'}`}
                title={!isOpen ? item.label : undefined}
              >
                <item.icon className="w-5 h-5 flex-shrink-0" />
                {isOpen && <span className="whitespace-nowrap overflow-hidden transition-opacity">{item.label}</span>}
              </Link>
            )
          })}
        </nav>
        {isOpen && (
          <div className="p-4 border-t text-sm text-center text-muted-foreground whitespace-nowrap">
            نسخه ۱.۰.۰
          </div>
        )}
      </aside>

      {/* Main Content */}
      <div className={`flex flex-col flex-1 transition-all duration-300 ${isOpen ? 'mr-64' : 'mr-20'}`}>
        <header className="h-16 border-b bg-background flex items-center justify-between px-6 sticky top-0 z-10 w-full shadow-sm">
          <div className="flex items-center gap-4">
            <h2 className="text-xl font-medium">{currentItem.label}</h2>
          </div>
          <div className="flex items-center gap-4">
            <div id="header-actions" className="flex items-center gap-2"></div>
            <div className="h-6 w-px bg-border mx-2"></div>
            <div className="flex items-center gap-3">
              <span className="text-sm">مدیر سیستم</span>
              <Button variant="ghost" size="icon">
                <UserCircleIcon className="w-5 h-5" />
              </Button>
            </div>
          </div>
        </header>

        <main className="flex-1 p-6 max-w-7xl mx-auto w-full">
          {children}
        </main>
      </div>
    </div>
  );
}