/**
 * components/layout/Sidebar.tsx
 * App sidebar for authenticated dashboard pages — professional black & white theme.
 */

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { clsx } from "clsx";
import {
  LayoutDashboard as DashboardIcon,
  Building2 as PropertiesIcon,
  Network as NetworkIcon,
  TrendingUp as EarningsIcon,
  LogOut as LogoutIcon,
  ChevronRight as ArrowIcon,
  Wallet as WalletIcon,
  ShieldAlert as AdminIcon,
  User as ProfileIcon,
  UserPlus as RegisterIcon,
} from "lucide-react";

const NAV_ITEMS = [
  { href: "/dashboard", icon: DashboardIcon, label: "DASHBOARD" },
  { href: "/properties", icon: PropertiesIcon, label: "PROPERTIES" },
  { href: "/network", icon: NetworkIcon, label: "MY Team" },
  { href: "/earnings", icon: EarningsIcon, label: "EARNINGS" },
  { href: "/dashboard/register", icon: RegisterIcon, label: "REGISTER" },
];

interface SidebarProps {
  userName?: string;
  userEmail?: string;
  walletBalance?: number;
  role?: string;
  onLogout?: () => void;
  title?: string;
}

export function Sidebar({
  userName = "Agent",
  userEmail,
  walletBalance = 0,
  role = "user",
  onLogout,
  title = "Property Hub",
}: SidebarProps) {
  const pathname = usePathname();

  return (
    <aside className="flex h-full w-64 flex-col bg-slate-900 border-r border-white/5 shadow-[20px_0_40px_rgba(79,70,229,0.1)]">
      {/* Logo */}
      <div className="flex items-center gap-3 px-8 py-8">
        <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-600 shadow-lg shadow-indigo-500/20">
          <PropertiesIcon className="h-4 w-4 text-white" />
        </div>
        <div>
          <p className="font-jakarta font-black text-sm text-white tracking-tighter uppercase leading-none">
            Property Hub
          </p>
          <p className="text-[9px] font-black text-indigo-400 uppercase tracking-[0.2em] mt-1">
            Enterprise
          </p>
        </div>
      </div>

      {/* Wallet Balance Card */}
      <div className="mx-6 mb-8 rounded-[1.5rem] bg-indigo-600 p-6 shadow-xl shadow-indigo-500/20 border border-indigo-400/20">
        <div className="flex items-center gap-2 text-[10px] font-black text-indigo-100 uppercase tracking-widest mb-3">
          <WalletIcon className="h-3 w-3" />
          Balance
        </div>
        <p className="text-2xl font-jakarta font-black text-white tracking-tight">
          ₹{walletBalance.toLocaleString("en-IN")}
        </p>
      </div>

      {/* Navigation */}
      <nav className="flex-1 px-4 space-y-1 overflow-y-auto">
        <p className="px-4 text-[9px] font-black text-slate-300 uppercase tracking-[0.3em] mb-4">
          Main Menu
        </p>
        {NAV_ITEMS.map(({ href, icon: Icon, label }) => {
          const isActive = pathname === href || pathname.startsWith(href + "/");
          return (
            <Link
              key={href}
              href={href}
              className={clsx(
                "group flex items-center gap-3 rounded-2xl px-4 py-3.5 transition-all duration-300",
                isActive
                  ? "bg-indigo-600 text-white shadow-lg shadow-indigo-500/20"
                  : "text-slate-400 hover:text-white hover:bg-white/5"
              )}
            >
              <Icon
                className={clsx(
                  "h-4 w-4 flex-shrink-0 transition-colors",
                  isActive ? "text-white" : "text-slate-500 group-hover:text-indigo-400"
                )}
              />
              <span className="text-[10px] font-black tracking-widest uppercase">{label}</span>
              {isActive && (
                <ArrowIcon className="ml-auto h-3 w-3 text-indigo-200" />
              )}
            </Link>
          );
        })}
      </nav>

      {/* User Profile + Logout */}
      <div className="p-6">
        <div className="bg-white/5 rounded-[1.5rem] p-4 border border-white/5">
          <div className="flex items-center gap-3 mb-4">
            <div className="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center text-xs font-black text-white shadow-md">
              {userName ? userName[0].toUpperCase() : "A"}
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-xs font-black text-white truncate uppercase tracking-tight">
                {userName}
              </p>
              <p className="text-[10px] font-bold text-slate-500 truncate tracking-tight">
                {userEmail}
              </p>
            </div>
          </div>
          {onLogout && (
            <div className="flex flex-col gap-2">
              {role === "admin" && (
                <Link
                  href="/admin"
                  className="flex w-full items-center justify-center gap-2 rounded-xl py-3 text-[10px] font-black text-white bg-indigo-600 hover:bg-indigo-700 transition-all uppercase tracking-widest shadow-lg shadow-indigo-500/20"
                >
                  <AdminIcon className="h-3.5 w-3.5" />
                  Admin Control
                </Link>
              )}
              <button
                onClick={onLogout}
                className="flex w-full items-center justify-center gap-2 rounded-xl py-3 text-[10px] font-black text-slate-500 hover:text-rose-400 hover:bg-rose-500/5 transition-all uppercase tracking-widest border border-transparent hover:border-rose-500/10"
              >
                <LogoutIcon className="h-3.5 w-3.5" />
                Sign out
              </button>
            </div>
          )}
        </div>
      </div>
    </aside>
  );
}