import Link from "next/link";
import { logout } from "@/lib/auth/actions";
import { prisma } from "@/lib/db";
import { getNavItems } from "@/lib/admin/nav-items";
import { AdminMobileNav } from "@/components/admin/AdminMobileNav";

export async function AdminSidebar({ userName }: { userName: string }) {
  const initials = userName.slice(0, 2).toUpperCase();
  const [pendingPhotoCount, unreadContactCount] = await Promise.all([
    prisma.photo.count({ where: { status: "PENDING" } }),
    prisma.contactMessage.count({ where: { isRead: false } }),
  ]);
  const NAV_ITEMS = getNavItems(pendingPhotoCount, unreadContactCount);

  return (
    <>
      <AdminMobileNav navItems={NAV_ITEMS} userName={userName} initials={initials} logoutAction={logout} />

      <div className="hidden w-[250px] shrink-0 flex-col overflow-y-auto bg-ink p-4 lg:flex lg:sticky lg:top-0 lg:h-screen">
        <div className="flex items-center gap-2.5 px-2.5 pb-6 pt-1.5">
          <span className="flex h-8 w-8 items-center justify-center rounded-[9px] bg-gradient-to-br from-accent to-accent-2">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z" />
            </svg>
          </span>
          <div>
            <div className="font-heading text-[16px] leading-tight text-white">SohbeteGir</div>
            <div className="text-[11px] text-white/40">Yönetim Paneli</div>
          </div>
        </div>

        <nav className="flex flex-col gap-1">
          {NAV_ITEMS.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="flex items-center justify-between rounded-[10px] px-3 py-2.5 text-[13.5px] font-semibold text-white/70 transition-colors hover:bg-white/10 hover:text-white"
            >
              <span className="flex items-center gap-2.5">
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
                  {item.icon}
                </svg>
                {item.label}
              </span>
              {item.badge !== null && (
                <span className="rounded-full bg-accent px-2 py-0.5 text-[10.5px] font-bold text-white">{item.badge}</span>
              )}
            </Link>
          ))}
        </nav>

        <div className="mt-auto flex items-center gap-2.5 border-t border-white/10 px-2.5 pt-3">
          <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent-2 text-[12px] font-bold text-white">
            {initials}
          </div>
          <div className="min-w-0 flex-1">
            <div className="truncate text-[13px] font-semibold text-white">{userName}</div>
            <div className="text-[11px] text-white/40">Yönetici</div>
          </div>
          <form action={logout}>
            <button className="text-white/40 hover:text-white" title="Çıkış Yap">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                <path d="M16 17l5-5-5-5" />
                <path d="M21 12H9" />
              </svg>
            </button>
          </form>
        </div>
      </div>
    </>
  );
}
