"use client";

import Link from "next/link";
import {usePathname} from "next/navigation";
import {LayoutDashboard, Building2, BarChart2, Settings, Bell, ClipboardList, Shield, ChevronLeft} from "lucide-react";
import {cn} from "@/lib/utils";

const navItems = [
  {href: "/super-admin", label: "Dashboard", icon: LayoutDashboard, exact: true},
  {href: "/super-admin/tenants", label: "Tenants", icon: Building2, exact: false},
  {href: "/super-admin/analytics", label: "Analytics", icon: BarChart2, exact: false},
  {href: "/super-admin/notifications", label: "Notifications", icon: Bell, exact: false},
  {href: "/super-admin/audit-logs", label: "Audit Logs", icon: ClipboardList, exact: false},
  {href: "/super-admin/settings", label: "Settings", icon: Settings, exact: false}
];

export function SuperAdminSidebar() {
  const pathname = usePathname();
  const locale = pathname.split("/")[1] || "en";

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

  const localizedItems = navItems.map(item => ({...item, href: `/${locale}${item.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-violet-500 to-violet-700 shadow-lg shadow-violet-900/40">
          <Shield className="h-4 w-4 text-white" />
        </div>
        <div className="min-w-0">
          <p className="truncate text-sm font-semibold text-white">Super Admin</p>
          <p className="text-xs text-gray-400">Platform Control</p>
        </div>
      </div>

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto px-3 py-4">
        <ul className="space-y-0.5">
          {localizedItems.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-violet-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>
  );
}