"use client";

import { LayoutDashboard, Package, CalendarCheck, CalendarDays, ShoppingBag, Users, Settings, Scissors, LogOut, Home } from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarFooter,
  SidebarHeader,
  useSidebar,
} from "@/components/ui/sidebar";
import { useAuth } from "@/contexts/AuthContext";
import { useLanguage } from "@/contexts/LanguageContext";
import { Button } from "@/components/ui/button";
import { usePathname, useRouter } from "next/navigation";
import Link from "next/link";

export const AdminSidebar = () => {
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const { logout } = useAuth();
  const { t } = useLanguage();
  const route = useRouter();
  const pathname = usePathname();

  const items = [
    { title: t("admin.nav.overview"),  url: "/admin",              icon: LayoutDashboard, exact: true },
    { title: t("admin.nav.products"),  url: "/admin/produits",     icon: Package },
    { title: t("admin.nav.orders"),    url: "/admin/commandes",    icon: ShoppingBag },
    { title: t("admin.nav.bookings"),  url: "/admin/reservations", icon: CalendarCheck },
    { title: t("admin.nav.planning"),  url: "/admin/planning",     icon: CalendarDays },
    { title: t("admin.nav.services"),  url: "/admin/services",     icon: Scissors },
    { title: t("admin.nav.customers"), url: "/admin/clients",      icon: Users },
    { title: t("admin.nav.settings"),  url: "/admin/parametres",   icon: Settings },
  ];

  const isActive = (item: typeof items[0]) =>
    item.exact ? pathname === item.url : pathname.startsWith(item.url);

  const handleLogout = () => {
    logout();
    route.push("/admin/login");
  };

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="border-b border-sidebar-border p-4">
        {!collapsed && (
          <div className="font-serif text-lg font-semibold tracking-wide">
            BADO HAIR
            <div className="text-xs text-muted-foreground font-sans font-normal">Admin</div>
          </div>
        )}
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>{t("admin.nav.management")}</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {items.map((item) => (
                <SidebarMenuItem key={item.url}>
                  <SidebarMenuButton asChild>
                    <Link
                      href={item.url}
                      className={`flex items-center gap-2 ${isActive(item) ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium" : ""}`}
                    >
                      <item.icon className="h-4 w-4" />
                      {!collapsed && <span>{item.title}</span>}
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="border-t border-sidebar-border p-2 space-y-1">
        <SidebarMenuButton asChild>
          <Link href="/" className="flex items-center gap-2">
            <Home className="h-4 w-4" />
            {!collapsed && <span>{t("admin.nav.view_site")}</span>}
          </Link>
        </SidebarMenuButton>
        <Button
          variant="ghost"
          size="sm"
          onClick={handleLogout}
          className="w-full justify-start gap-2"
        >
          <LogOut className="h-4 w-4" />
          {!collapsed && <span>{t("admin.logout")}</span>}
        </Button>
      </SidebarFooter>
    </Sidebar>
  );
};