"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  Tag,
  Package,
  Banknote,
  Truck,
  Fuel,
  Send,
  BarChart3,
  ScrollText,
  Settings,
  Boxes,
} from "lucide-react";
import { cn } from "@/lib/utils";

type NavItem = {
  href: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
};

const groups: { label: string; items: NavItem[] }[] = [
  {
    label: "Overview",
    items: [
      { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
    ],
  },
  {
    label: "Operations",
    items: [
      { href: "/customers", label: "Customers", icon: Users },
      { href: "/delivery-notes", label: "Delivery Notes", icon: Package },
      { href: "/cash-customers", label: "Cash Customers", icon: Banknote },
      { href: "/suppliers", label: "Suppliers", icon: Truck },
      { href: "/fuel-purchases", label: "Fuel Purchases", icon: Fuel },
    ],
  },
  {
    label: "Pricing & reports",
    items: [
      { href: "/pricing", label: "Pricing", icon: Tag },
      { href: "/send-statement", label: "Send Statement", icon: Send },
      { href: "/custom-reports", label: "Custom Reports", icon: BarChart3 },
      { href: "/statements", label: "Statement Log", icon: ScrollText },
    ],
  },
  {
    label: "Admin",
    items: [
      { href: "/settings", label: "Settings", icon: Settings },
    ],
  },
];

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

  return (
    <aside className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0 z-30 border-r bg-sidebar text-sidebar-foreground">
      <div className="flex h-16 items-center gap-2 border-b border-sidebar-border px-4">
        <div className="flex h-9 w-9 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground font-bold">
          RJ
        </div>
        <div className="flex flex-col">
          <span className="text-sm font-semibold">RJ Bulk Supplies</span>
          <span className="text-xs text-muted-foreground">Back office</span>
        </div>
      </div>
      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-5">
        {groups.map((group) => {
          const isAdminGroup = group.label === "Admin";
          return (
            <div key={group.label}>
              <div className="px-3 mb-1.5 text-[11px] font-semibold uppercase tracking-[0.12em] text-primary/80">
                {group.label}
              </div>
              <div className="space-y-1">
                {group.items.map((item) => {
                  const Icon = item.icon;
                  const active = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href + "/"));
                  return (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={cn(
                        "flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
                        active
                          ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium"
                          : "hover:bg-sidebar-accent/50",
                        isAdminGroup && "text-muted-foreground"
                      )}
                    >
                      <Icon className="h-4 w-4" />
                      {item.label}
                    </Link>
                  );
                })}
              </div>
            </div>
          );
        })}
      </nav>
      <div className="px-4 py-3 border-t border-sidebar-border text-[10px] text-muted-foreground">
        RJ Bulk v1.0
      </div>
    </aside>
  );
}