"use client";

import Link from "next/link";
import {usePathname} from "next/navigation";
import {
  LayoutDashboard,
  Car,
  Calendar,
  Users,
  GitBranch,
  UserCheck,
  Tag,
  Settings,
  Bell,
  Building2,
  FileText,
  CreditCard,
  BarChart2,
  FileSignature,
  Monitor,
  ChevronLeft
} from "lucide-react";
import {cn} from "@/lib/utils";

type CompanySidebarProps = {
  tenantSlug: string;
  companyName: string;
  currentPath?: string;
};

const navItems = (slug: string) => [
  {href: `/company/${slug}`, label: "Dashboard", icon: LayoutDashboard, exact: true},
  {href: `/company/${slug}/fleet`, label: "Fleet", icon: Car, exact: false},
  {href: `/company/${slug}/bookings`, label: "Bookings", icon: Calendar, exact: false},
  {href: `/company/${slug}/contracts`, label: "Contracts", icon: FileSignature, exact: false},
  {href: `/company/${slug}/monitoring`, label: "Monitoring", icon: Monitor, exact: false},
  {href: `/company/${slug}/invoices`, label: "Invoices", icon: FileText, exact: false},
  {href: `/company/${slug}/payments`, label: "Payments", icon: CreditCard, exact: false},
  {href: `/company/${slug}/reports`, label: "Reports", icon: BarChart2, exact: false},
  {href: `/company/${slug}/customers`, label: "Customers", icon: Users, exact: false},
  {href: `/company/${slug}/branches`, label: "Branches", icon: GitBranch, exact: false},
  {href: `/company/${slug}/staff`, label: "Staff", icon: UserCheck, exact: false},
  {href: `/company/${slug}/coupons`, label: "Coupons", icon: Tag, exact: false},
  {href: `/company/${slug}/notifications`, label: "Notifications", icon: Bell, exact: false},
  {href: `/company/${slug}/settings/general`, label: "Settings", icon: Settings, exact: false}
];

export function CompanySidebar({tenantSlug, companyName}: CompanySidebarProps) {
  const pathname = usePathname();
  const locale = pathname.split("/")[1] || "en";
  const items = navItems(tenantSlug).map(item => ({...item, href: `/${locale}${item.href}`}));

  const isActive = (href: string, exact: boolean) => {
    if (exact) return pathname.endsWith(href) || pathname === href;
    return pathname.includes(href);
  };

  return (
    <div className="flex h-full flex-col">
      {/* Logo */}
      <div className="flex items-center gap-3 border-b border-white/5 px-5 py-5">
        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-indigo-700 shadow-lg shadow-indigo-900/40">
          <Building2 className="h-4 w-4 text-white" />
        </div>
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold text-white">{companyName}</p>
          <p className="text-xs text-gray-400">Management Portal</p>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto px-3 py-4">
        <ul className="space-y-0.5">
          {items.map(({href, label, icon: Icon, exact}) => {
            const active = isActive(href, exact);
            return (
              <li key={href}>
                <Link
                  href={href}
                  className={cn(
                    "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150",
                    active
                      ? "bg-white/10 text-white"
                      : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
                  )}
                >
                  <Icon
                    className={cn("h-4 w-4 shrink-0", active ? "text-indigo-400" : "text-gray-500")}
                  />
                  {label}
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>

      {/* Footer */}
      <div className="border-t border-white/5 px-5 py-4">
        <Link
          href="/"
          className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-300 transition-colors"
        >
          <ChevronLeft className="h-3 w-3 rtl:rotate-180" />
          Back to website
        </Link>
      </div>
    </div>
  );
}