import Link from "next/link";
import { notFound } from "next/navigation";
import { db } from "@/lib/db";
import { can, requireConfAccess, type Action } from "@/lib/rbac";
import { StatusBadge } from "@/components/ui";

const NAV: [string, string, string, Action][] = [
  ["", "Overview", "📊", "conference.view"],
  ["live", "Live Control", "🎛️", "content.manage"],
  ["registrations", "Registrations", "🎟️", "registrations.manage"],
  ["agenda", "Agenda", "🗓️", "agenda.manage"],
  ["venue", "Venue & Halls", "🏛️", "agenda.manage"],
  ["speakers", "Speakers", "🎤", "speakers.manage"],
  ["tickets", "Tickets & Coupons", "💳", "registrations.manage"],
  ["checkin", "Check-in", "✅", "checkin.perform"],
  ["submissions", "Submissions", "📄", "submissions.manage"],
  ["sponsors", "Sponsors", "🤝", "sponsors.manage"],
  ["announcements", "Announcements", "📢", "content.manage"],
  ["certificates", "Certificates", "🏅", "certificates.manage"],
  ["volunteers", "Volunteers", "🙋", "volunteers.manage"],
  ["settings", "Settings", "⚙️", "conference.manage"],
];

export default async function WorkspaceLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const { membership } = await requireConfAccess(id);
  const conf = await db.conference.findUnique({ where: { id }, select: { id: true, name: true, slug: true, status: true, primaryColor: true } });
  if (!conf) notFound();

  const visible = NAV.filter(([, , , action]) => can(membership, action));
  const isVolunteerOnly = !membership.isSuperAdmin && membership.roles.every((r) => r === "VOLUNTEER");

  return (
    <div className="mx-auto flex max-w-7xl">
      <aside className="sticky top-14 hidden h-[calc(100vh-3.5rem)] w-60 shrink-0 flex-col border-r border-zinc-800/70 px-3 py-4 md:flex">
        <div className="mb-4 px-2">
          <div className="flex items-center gap-2">
            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-sm font-bold text-white" style={{ background: conf.primaryColor }}>
              {conf.name[0]}
            </span>
            <div className="min-w-0">
              <div className="truncate text-sm font-semibold text-zinc-100">{conf.name}</div>
              <StatusBadge status={conf.status} />
            </div>
          </div>
          {isVolunteerOnly && (
            <div className="mt-2 rounded-lg bg-indigo-500/10 px-2.5 py-1.5 text-[11px] font-semibold text-indigo-600">
              🙋 Volunteer access — your assigned areas only
            </div>
          )}
          <Link
            href={`/c/${conf.slug}`}
            target="_blank"
            className="mt-3 block truncate rounded-lg border border-zinc-800 px-2.5 py-1.5 text-xs text-zinc-400 transition hover:bg-zinc-800/70 hover:text-zinc-200"
          >
            🌐 /c/{conf.slug} ↗
          </Link>
        </div>
        <nav className="flex-1 space-y-0.5 overflow-y-auto">
          {visible.map(([path, name, icon]) => (
            <Link
              key={path}
              href={`/dashboard/c/${conf.id}${path ? `/${path}` : ""}`}
              className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm text-zinc-400 transition hover:bg-zinc-800/70 hover:text-zinc-100"
            >
              <span className="text-base leading-none">{icon}</span> {name}
            </Link>
          ))}
        </nav>
        <Link href="/dashboard" className="mt-2 rounded-lg px-2.5 py-2 text-xs text-zinc-600 transition hover:text-zinc-300">
          ← All conferences
        </Link>
      </aside>
      <div className="fx-in min-w-0 flex-1 px-4 py-6 sm:px-6">{children}</div>
    </div>
  );
}