import Link from "next/link";
import { auth } from "@/lib/auth";
import { logoutAction } from "@/server/actions/auth";
import { getBranding, getSettings } from "@/lib/session";
import { prisma } from "@/lib/prisma";

export async function Navbar() {
  const session = await auth();
  const branding = await getBranding();
  const settings = await getSettings();
  const activeFounders = await prisma.founder.count({
    where: { status: "active" },
  });

  return (
    <div className="app-topbar sticky top-0 z-40 px-3 pt-[max(0.5rem,env(safe-area-inset-top))] sm:top-3 sm:px-6 sm:pt-0">
      <nav className="nav-pill app-topbar__pill mx-auto flex max-w-7xl items-center justify-between gap-2 sm:gap-3">
        <Link href="/" className="flex min-w-0 items-center gap-2.5 sm:gap-3">
          {branding.logoUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img
              src={branding.logoUrl}
              alt={branding.brandName}
              className="h-8 w-8 shrink-0 rounded-full object-cover border border-white/15 sm:h-9 sm:w-9"
            />
          ) : (
            <div className="relative grid h-8 w-8 shrink-0 place-items-center rounded-full bg-[var(--lime)] text-sm font-semibold text-[var(--ink)] sm:h-8 sm:w-8">
              {branding.brandMark || "s"}
              <span className="absolute -right-0.5 -top-0.5 h-1.5 w-1.5 rounded-full bg-[var(--lime)] ring-2 ring-[var(--bg)]" />
            </div>
          )}
          <span className="truncate text-[15px] font-semibold tracking-tight sm:text-base">
            {branding.brandName}
          </span>
        </Link>

        <div className="hide-mobile flex items-center gap-5 text-sm text-white/70">
          <Link href="/" className="nav-link">
            Inicio
          </Link>
          {settings.moduleServices && (
            <Link href="/servicios" className="nav-link">
              Servicios
            </Link>
          )}
          <Link href="/explorar" className="nav-link">
            Explorar
          </Link>
          {settings.moduleClassifieds && (
            <Link href="/clasificados" className="nav-link">
              Clasificados
            </Link>
          )}
          {settings.moduleJobs && (
            <Link href="/empleos" className="nav-link">
              Empleos
            </Link>
          )}
          <Link href="/como-funciona" className="nav-link">
            Como funciona
          </Link>
          <Link href="/precios" className="nav-link">
            Precios
          </Link>
          {session?.user?.role === "admin" && (
            <Link href="/admin" className="nav-link text-[var(--lime)]">
              Admin
            </Link>
          )}
        </div>

        <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
          <div className="hide-mobile flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1">
            <span className="text-[10px] tracking-wider text-white/60">
              FOUNDERS
            </span>
            <span className="text-xs font-semibold">{activeFounders}</span>
          </div>

          {session?.user ? (
            <div className="flex items-center gap-1.5 sm:gap-2">
              <Link
                href="/dashboard"
                className="flex items-center gap-2 rounded-full p-0.5 hover:bg-white/5 sm:p-1"
                aria-label="Mi cuenta"
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={
                    session.user.avatar ||
                    "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
                  }
                  alt=""
                  className="h-8 w-8 rounded-full border border-white/20 object-cover sm:h-9 sm:w-9"
                />
                <div className="hide-mobile pr-1 text-left">
                  <p className="text-sm font-medium">{session.user.name}</p>
                  <p className="text-xs text-[var(--lime)]">
                    {session.user.role === "admin"
                      ? "Admin"
                      : session.user.role === "contractor"
                        ? "Contratista"
                        : "Cliente"}
                  </p>
                </div>
              </Link>
              <form action={logoutAction} className="hide-mobile">
                <button type="submit" className="btn-ghost !px-3 !py-2 text-xs">
                  Salir
                </button>
              </form>
            </div>
          ) : (
            <Link href="/login" className="btn-split app-topbar__login">
              <span className="btn-split__label">Entrar</span>
              <span className="btn-split__icon hide-mobile" aria-hidden>
                →
              </span>
            </Link>
          )}
        </div>
      </nav>
    </div>
  );
}