"use client";

import {
  BarChart3,
  Boxes,
  Building2,
  GalleryHorizontal,
  ImageUp,
  LayoutDashboard,
  MessageSquare,
  Percent,
  Popcorn,
  Settings,
  Tags,
  TestTube2,
  UserRoundCheck,
  View,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";

const menuItems = [
  { label: "Dashboard", href: "/admin", icon: LayoutDashboard },
  { label: "Products", href: "/admin/products", icon: Boxes },
  { label: "Brands", href: "/admin/brands", icon: Building2 },
  { label: "Branches", href: "/admin/branches", icon: BarChart3 },
  { label: "Parts", href: "/admin/parts", icon: Tags },
  { label: "Offers", href: "/admin/offers", icon: Percent },
  { label: "Gallery", href: "/admin/gallery", icon: GalleryHorizontal },
  { label: "CMS", href: "/admin/cms", icon: ImageUp },
  { label: "News Popup", href: "/admin/news-popup", icon: Popcorn },
  { label: "Test Rides", href: "/admin/test-rides", icon: TestTube2 },
  { label: "Leads", href: "/admin/leads", icon: MessageSquare },
  { label: "3D Assets", href: "/admin/3d-assets", icon: View },
  { label: "Settings", href: "/admin/settings", icon: Settings },
];

export function AdminSidebar() {
  const pathname = usePathname();

  return (
    <aside className="w-full border-b border-border bg-[#f5f7fb] lg:min-h-screen lg:w-72 lg:border-b-0 lg:border-r">
      <div className="flex h-20 items-center gap-3 px-5">
        <img src="/images/brand/bashista-auto-logo.png" alt="Bashista Auto" className="h-12 w-auto object-contain" />
        <div>
          <p className="font-bold text-navy-deep">Bashista Auto</p>
          <p className="text-xs uppercase tracking-[0.16em] text-navy-muted">Admin</p>
        </div>
      </div>
      <nav className="flex gap-2 overflow-x-auto px-4 pb-4 lg:flex-col lg:overflow-visible">
        {menuItems.map((item) => {
          const Icon = item.icon;
          const active =
            item.href === "/admin" ? pathname === "/admin" : pathname.startsWith(item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex shrink-0 items-center gap-3 rounded-lg border border-transparent px-3 py-2 text-sm font-semibold text-navy-muted transition hover:border-border hover:bg-white hover:text-navy-deep",
                active && "border-primary/20 bg-primary text-white hover:bg-primary hover:text-white",
              )}
            >
              <Icon className="h-4 w-4" />
              {item.label}
            </Link>
          );
        })}
      </nav>
      <div className="m-4 hidden rounded-xl border border-border bg-white p-4 text-xs text-navy-muted lg:block">
        <p className="font-semibold text-navy-deep">Need Help?</p>
        <p className="mt-2">support@bashistaauto.com</p>
        <p>+91 97625 62500</p>
      </div>
    </aside>
  );
}