"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import {
  LayoutGrid,
  ListTree,
  MessageCircleQuestion,
  LogOut,
  Heart,
  UserCheck,
  Users,
  HeartHandshake,
  Images,
  Activity,
  Database,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useAuth } from "@/lib/auth-context";

const navItems = [
  { href: "/", label: "داشبورد", icon: LayoutGrid },
  { href: "/users", label: "کاربران در انتظار تایید", icon: UserCheck },
  { href: "/users/all", label: "همه کاربران", icon: Users },
  { href: "/matches", label: "رفقا (مچ‌ها)", icon: HeartHandshake },
  { href: "/photos", label: "نظارت بر عکس‌ها", icon: Images },
  { href: "/categories", label: "دسته‌بندی‌ها و گزینه‌ها", icon: ListTree },
  { href: "/questions", label: "سوالات پروفایل", icon: MessageCircleQuestion },
  { href: "/monitoring", label: "مانیتورینگ سرور", icon: Activity },
  { href: "/backups", label: "بک‌آپ دیتابیس", icon: Database },
];

export function Sidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const { user, logout } = useAuth();

  function handleLogout() {
    logout();
    router.push("/login");
  }

  return (
    <aside className="w-64 shrink-0 h-dvh sticky top-0 flex flex-col bg-(--color-surface-default) border-l border-(--color-border-subtle)">
      <div className="flex items-center gap-2.5 px-5 h-16 border-b border-(--color-border-subtle)">
        <div className="w-8 h-8 rounded-(--radius-sm) bg-(--color-brand-500) flex items-center justify-center shadow-(--shadow-cute-sm)">
          <Heart size={15} className="text-white" fill="white" />
        </div>
        <div>
          <p className="font-[var(--font-display)] font-extrabold text-[14px] leading-none">
            دلدل
          </p>
          <p className="text-[10px] text-(--color-content-tertiary) leading-none mt-0.5">
            پنل ادمین
          </p>
        </div>
      </div>

      <nav className="flex-1 flex flex-col gap-1 p-3">
        {navItems.map((item) => {
          const active = pathname === item.href;
          const Icon = item.icon;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "flex items-center gap-3 rounded-(--radius-sm) px-3.5 h-11 text-[14px] font-semibold transition-colors",
                active
                  ? "bg-(--color-brand-500) text-white shadow-(--shadow-cute-sm)"
                  : "text-(--color-content-secondary) hover:bg-(--color-bg-secondary)"
              )}
            >
              <Icon size={17} />
              {item.label}
            </Link>
          );
        })}
      </nav>

      <div className="p-3 border-t border-(--color-border-subtle) flex flex-col gap-2">
        <div className="px-2 py-2">
          <p className="text-[11px] text-(--color-content-tertiary)">وارد شده به‌عنوان</p>
          <p dir="ltr" className="text-[13px] font-bold text-(--color-content-primary) text-right">
            {user?.phone}
          </p>
        </div>
        <button
          onClick={handleLogout}
          className="flex items-center gap-3 rounded-(--radius-sm) px-3.5 h-10 text-[13px] font-semibold text-(--color-status-error) hover:bg-red-50 transition-colors"
        >
          <LogOut size={16} />
          خروج از حساب
        </button>
      </div>
    </aside>
  );
}