"use client";

import Link from "next/link";

type WorkspaceSection = {
  label: string;
  active?: boolean;
  href?: string;
  onClick?: () => void;
};

type AuthenticatedWorkspaceNavbarProps = {
  email: string;
  sections: WorkspaceSection[];
  onSignOut: () => Promise<void> | void;
};

function sectionClass(active: boolean) {
  return active
    ? "border-[#c4d600]/40 bg-[#c4d600]/15 text-white"
    : "border-white/10 bg-black/20 text-white/65 hover:border-white/20 hover:text-white";
}

function getEmailInitial(email: string) {
  const trimmed = email.trim();
  return trimmed.length > 0 ? trimmed.charAt(0).toUpperCase() : "?";
}

export function AuthenticatedWorkspaceNavbar({ email, sections, onSignOut }: AuthenticatedWorkspaceNavbarProps) {
  return (
    <header className="rounded-[1.5rem] border border-white/10 bg-[#0f140f]/85 px-4 py-3 text-white shadow-[0_24px_70px_-48px_rgba(196,214,0,0.28)] backdrop-blur-sm sm:px-5">
      <div className="flex flex-wrap items-center justify-between gap-4">
        <nav className="flex flex-wrap gap-2" aria-label="Secciones del espacio de trabajo">
          {sections.map((section) => {
            if (section.href) {
              return (
                <Link
                  key={section.label}
                  href={section.href}
                  className={`rounded-full border px-4 py-2 text-sm transition ${sectionClass(Boolean(section.active))}`}
                  aria-current={section.active ? "page" : undefined}
                >
                  {section.label}
                </Link>
              );
            }

            return (
              <button
                key={section.label}
                type="button"
                onClick={section.onClick}
                className={`rounded-full border px-4 py-2 text-sm transition ${sectionClass(Boolean(section.active))}`}
                aria-pressed={section.active ? true : undefined}
              >
                {section.label}
              </button>
            );
          })}
        </nav>

        <details className="relative">
          <summary
            className="flex size-11 cursor-pointer items-center justify-center rounded-full bg-[#c4d600] text-sm font-semibold text-[#10150d] transition hover:bg-[#d2e63e]"
            aria-label="Abrir menu de perfil"
          >
            <span className="sr-only">Abrir menu de perfil</span>
            <span aria-hidden="true">{getEmailInitial(email)}</span>
          </summary>

          <div className="absolute right-0 top-[calc(100%+0.75rem)] z-20 w-60 rounded-[1.25rem] border border-white/10 bg-[#0b0f0b] p-3 shadow-[0_28px_80px_-40px_rgba(0,0,0,0.8)]">
            <p className="truncate text-sm text-white/70">{email}</p>
            <button
              type="button"
              onClick={() => void onSignOut()}
              className="mt-3 flex w-full items-center justify-center rounded-xl border border-white/10 px-4 py-2.5 text-sm text-white/80 transition hover:border-white/20 hover:text-white"
            >
              Sign out
            </button>
          </div>
        </details>
      </div>
    </header>
  );
}