"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { LogoutButton } from "@/components/ui/LogoutButton";

const navLinks = [
  { href: "/portal/dashboard", label: "Dashboard" },
  { href: "/portal/clients", label: "Clients" },
  { href: "/portal/profile", label: "Profile" },
];

export function PortalNav({ userEmail }: { userEmail: string }) {
  const pathname = usePathname();

  return (
    <nav style={{ position: "sticky", top: 0, zIndex: 50, backgroundColor: "#1B2B4B", color: "#FAF9F7" }}>
      <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "0 2rem", height: "64px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        {/* Wordmark */}
        <span style={{ fontFamily: "var(--font-serif), Georgia, serif", fontWeight: 600, fontSize: "1.25rem", color: "#FAF9F7", letterSpacing: "0.02em" }}>
          Teressa Copeland
        </span>

        {/* Nav links + right side */}
        <div style={{ display: "flex", alignItems: "center", gap: "2rem" }}>
          {navLinks.map(({ href, label }) => {
            const isActive = pathname.startsWith(href);
            return (
              <Link
                key={href}
                href={href}
                style={{
                  color: "#FAF9F7",
                  textDecoration: "none",
                  fontSize: "0.8125rem",
                  letterSpacing: "0.08em",
                  textTransform: "uppercase",
                  fontWeight: 500,
                  opacity: isActive ? 1 : 0.8,
                  borderBottom: isActive ? "2px solid #C9A84C" : "2px solid transparent",
                  paddingBottom: "2px",
                  transition: "opacity 0.2s",
                }}
              >
                {label}
              </Link>
            );
          })}

          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", marginLeft: "0.5rem", borderLeft: "1px solid rgba(255,255,255,0.15)", paddingLeft: "1.25rem" }}>
            <span style={{ fontSize: "0.75rem", color: "rgba(250,249,247,0.6)" }}>{userEmail}</span>
            <LogoutButton className="text-white/70 hover:text-white" />
          </div>
        </div>
      </div>

      {/* Gold gradient border — matches SiteNav */}
      <div style={{ height: "1px", background: "linear-gradient(to right, transparent 0%, rgba(201,168,76,0.8) 30%, rgba(201,168,76,1) 50%, rgba(201,168,76,0.8) 70%, transparent 100%)" }} />
    </nav>
  );
}
