import Image from "next/image";
import Link from "next/link";
import { LanguageToggle } from "@/components/language-toggle";
import { MobileNav } from "@/components/mobile-nav";
import { NavLinks } from "@/components/nav-links";
import { ThemeToggle } from "@/components/theme-toggle";
import { getBasePath, getDirection, portfolioContent, sharedProfile, type Language } from "@/data/portfolio";

export function Navbar({ language }: { language: Language }) {
  const dir = getDirection(language);
  const t = portfolioContent[language].ui;
  const brandName = language === "ar" ? sharedProfile.brandNameAr : sharedProfile.brandNameEn;
  const basePath = getBasePath(language);

  const navItems = [
    { label: t.navAbout, href: `${basePath}#about` },
    { label: t.navPhilosophy, href: `${basePath}#philosophy` },
    { label: t.navProjects, href: `${basePath}#projects` },
    { label: t.awards, href: `${basePath}#awards` },
    { label: t.navContact, href: `${basePath}#contact` },
  ];

  return (
    <header className="navbar-shell sticky top-0 z-50 border-b backdrop-blur-xl">
      <div
        className={`site-container navbar-layout relative flex items-center justify-between gap-4 py-4 ${
          dir === "rtl" ? "md:flex-row-reverse md:justify-between" : "md:justify-between"
        }`}
      >
        <Link href={basePath} className="navbar-brand-link min-w-0 max-w-[68vw] md:max-w-fit">
          <div className={`navbar-brand-lockup flex items-center gap-4 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
            <div className="logo-shell navbar-logo-shell overflow-hidden rounded-[20px] border p-2">
              <Image
                src={sharedProfile.logoImage}
                alt={language === "ar" ? "\u0634\u0639\u0627\u0631 \u063a\u0631\u064a\u0633 \u0628\u0637\u0631\u0633 \u0633\u0644\u0645\u0648\u0646" : "Grace Butrus Salmoun logo"}
                width={60}
                height={60}
                className="navbar-logo-image h-[60px] w-[60px] rounded-[14px] object-contain"
              />
            </div>
            <div className={`navbar-brand-copy min-w-0 ${dir === "rtl" ? "text-right" : ""}`}>
              <p className="type-brand display-face hidden text-[var(--color-ink)] sm:block">
                {brandName}
              </p>
              <p className="type-brand display-face navbar-brand-mobile text-[var(--color-ink)] sm:hidden">
                {brandName}
              </p>
              <p className="type-label navbar-specialty mt-1 tracking-[0.18em] text-[var(--color-muted)]">
                {t.architectureEngineer}
              </p>
            </div>
          </div>
        </Link>

        <div
          className={`hidden gap-3 md:flex md:flex-row md:items-center ${
            dir === "rtl" ? "md:flex-row-reverse" : ""
          }`}
        >
          <NavLinks items={navItems} alignEnd={dir !== "rtl"} />

          <div className={`flex items-center gap-2 ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
            <ThemeToggle language={language} />
            <LanguageToggle language={language} />
          </div>
        </div>

        <div className={`navbar-mobile-controls flex items-center gap-2 md:hidden ${dir === "rtl" ? "flex-row-reverse" : ""}`}>
          <ThemeToggle language={language} />
          <LanguageToggle language={language} />
          <MobileNav
            items={navItems}
            dir={dir}
            openLabel={language === "ar" ? "فتح القائمة" : "Open menu"}
            closeLabel={language === "ar" ? "إغلاق القائمة" : "Close menu"}
          />
        </div>
      </div>
    </header>
  );
}