import Link from "next/link";
import { requireUser } from "@/lib/auth";
import { db } from "@/lib/db";
import { logoutAction } from "@/app/(auth)/actions";
import { Avatar, Logo } from "@/components/ui";

export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  const user = await requireUser();
  // Volunteer-only accounts get a scoped console: no attendee/organizer surfaces.
  const memberships = user.platformRole === "USER"
    ? await db.confMember.findMany({ where: { userId: user.id }, select: { role: true } })
    : [];
  const volunteerOnly =
    user.platformRole === "USER" && memberships.length > 0 && memberships.every((m) => m.role === "VOLUNTEER");
  const unread = await db.notification.count({ where: { userId: user.id, readAt: null } });
  return (
    <div className="min-h-screen bg-zinc-950">
      <header className="fx-header sticky top-0 z-30 border-b border-zinc-800/70 bg-zinc-950/85 backdrop-blur">
        <div className="flex h-14 items-center justify-between px-4">
          <div className="flex items-center gap-6">
            <Logo href="/dashboard" />
            {volunteerOnly && (
              <span className="rounded-md bg-indigo-500/15 px-2 py-0.5 text-xs font-semibold text-indigo-600">🙋 VOLUNTEER</span>
            )}
            <nav className="hidden items-center gap-1 text-sm sm:flex">
              <Link href="/dashboard" className="rounded-lg px-3 py-1.5 text-zinc-400 transition hover:bg-zinc-800/70 hover:text-zinc-100">
                {volunteerOnly ? "My assignments" : "Conferences"}
              </Link>
              {!volunteerOnly && (
                <Link href="/me" className="rounded-lg px-3 py-1.5 text-zinc-400 transition hover:bg-zinc-800/70 hover:text-zinc-100">Attending</Link>
              )}
              {user.platformRole === "SUPER_ADMIN" && (
                <Link href="/admin" className="rounded-lg px-3 py-1.5 text-amber-600/90 transition hover:bg-zinc-800/70">Admin</Link>
              )}
            </nav>
          </div>
          <div className="flex items-center gap-3">
            <Link
              href="/dashboard/notifications"
              className="relative rounded-lg px-2 py-1.5 text-lg leading-none transition hover:bg-white/70"
              title="Notifications"
            >
              🔔
              {unread > 0 && (
                <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
                  {unread > 99 ? "99+" : unread}
                </span>
              )}
            </Link>
            <div className="hidden text-right text-xs sm:block">
              <div className="font-medium text-zinc-200">{user.name}</div>
              <div className="text-zinc-500">{user.email}</div>
            </div>
            <Avatar name={user.name} src={user.avatarUrl} size={8} />
            <form action={logoutAction}>
              <button className="rounded-lg px-2.5 py-1.5 text-xs text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-200">
                Sign out
              </button>
            </form>
          </div>
        </div>
      </header>
      <div className="fx-in">{children}</div>
    </div>
  );
}