"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  LayoutDashboard,
  Cpu,
  Package,
  ClipboardList,
  Factory,
  History,
  Users,
  Truck,
  Building2,
  ClipboardCheck,
  Settings,
  LogOut,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useAuth } from "@/contexts/auth-context";
import { Button } from "@/components/ui/button";

const navItems = [
  { href: "/", label: "Dashboard", icon: LayoutDashboard, section: "dashboard" },
  { href: "/customers", label: "Customers & Orders", icon: Users, section: "customers" },
  { href: "/suppliers", label: "Suppliers", icon: Building2, section: "suppliers" },
  { href: "/products", label: "Products", icon: Package, section: "products" },
  { href: "/components", label: "Components", icon: Cpu, section: "components" },
  { href: "/bom", label: "Bill of Materials", icon: ClipboardList, section: "products" },
  { href: "/stock-history", label: "Purchase History", icon: History, section: "stock-history" },
  { href: "/production", label: "Production Planning", icon: Factory, section: "production" },
  { href: "/logistics", label: "Logistics", icon: Truck, section: "logistics" },
  { href: "/stock-take", label: "Stock Take", icon: ClipboardCheck, section: "stock-take" },
];

export function AppSidebar() {
  const pathname = usePathname();
  const { user, logout, canAccessSection } = useAuth();

  // Filter nav items based on user permissions
  const visibleNavItems = navItems.filter((item) => canAccessSection(item.section));

  return (
    <aside className="flex h-screen w-64 flex-shrink-0 flex-col bg-sidebar text-sidebar-foreground">
      <div className="flex h-16 items-center gap-3 border-b border-sidebar-border px-6">
        <Cpu className="h-7 w-7 text-sidebar-primary" />
        <div>
          <h1 className="text-base font-bold tracking-tight text-sidebar-primary-foreground">
            Linse
          </h1>
          <p className="text-xs text-sidebar-foreground/60">Component Manager</p>
        </div>
      </div>
      <nav className="flex-1 px-3 py-4 overflow-y-auto">
        <ul className="flex flex-col gap-1">
          {visibleNavItems.map((item) => {
            const isActive =
              pathname === item.href ||
              (item.href !== "/" && pathname.startsWith(item.href));
            return (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={cn(
                    "flex items-center gap-3 rounded-md px-3 py-2.5 text-base font-medium transition-colors",
                    isActive
                      ? "bg-sidebar-accent text-sidebar-primary"
                      : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                  )}
                >
                  <item.icon className="h-5 w-5" />
                  {item.label}
                </Link>
              </li>
            );
          })}

          {/* Settings - Admin Only */}
          {user?.role === "admin" && (
            <li className="mt-4 pt-4 border-t border-sidebar-border">
              <Link
                href="/settings"
                className={cn(
                  "flex items-center gap-3 rounded-md px-3 py-2.5 text-base font-medium transition-colors",
                  pathname === "/settings"
                    ? "bg-sidebar-accent text-sidebar-primary"
                    : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                )}
              >
                <Settings className="h-5 w-5" />
                Settings
              </Link>
            </li>
          )}
        </ul>
      </nav>

      {/* User info and logout */}
      <div className="border-t border-sidebar-border px-4 py-4">
        <div className="flex items-center justify-between">
          <div className="min-w-0 flex-1">
            <p className="text-sm font-medium text-sidebar-foreground truncate">
              {user?.name}
            </p>
            <p className="text-xs text-sidebar-foreground/50 truncate">
              {user?.email}
            </p>
          </div>
          <Button
            variant="ghost"
            size="icon"
            onClick={logout}
            className="text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent flex-shrink-0"
            title="Sign out"
          >
            <LogOut className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </aside>
  );
}