"use client";

import { Fingerprint, Languages, ArrowLeft, ArrowRight, Moon, Sun } from "lucide-react";
import { usePathname } from "next/navigation";
import { useLanguage } from "@/components/language-provider";
import { useTheme } from "@/components/theme-provider";
import { useLoginModal } from "@/components/login-modal-provider";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const LINKS = [
  { id: "benefits", label: { fa: "مزایا", en: "Benefits" } },
  { id: "ecosystem", label: { fa: "محصولات", en: "Products" } },
  { id: "capabilities", label: { fa: "قابلیت‌ها", en: "Capabilities" } },
  { id: "safety", label: { fa: "امنیت", en: "Safety" } },
];

export function Navbar() {
  const { t, lang, toggle } = useLanguage();
  const { theme, toggle: toggleTheme } = useTheme();
  const { open } = useLoginModal();
  const pathname = usePathname();
  const Arrow = lang === "fa" ? ArrowLeft : ArrowRight;

  if (pathname?.startsWith("/account") || pathname?.startsWith("/admin")) return null;

  return (
    <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur-xl dark:border-white/10 dark:bg-ink/80">
      <div className="container-x flex h-16 items-center justify-between gap-4">
        <a href="#top" className="flex items-center gap-2.5 font-semibold text-slate-900 dark:text-white">
          <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-brand-gradient shadow-lg shadow-brand-900/20 dark:shadow-brand-900/40">
            <Fingerprint className="h-5 w-5 text-white" />
          </span>
          <span className="text-lg tracking-tight">{process.env.NEXT_PUBLIC_SITE_NAME || "MyAccount Hamsoo"}</span>
        </a>

        <nav className="hidden items-center gap-1 lg:flex">
          {LINKS.map((l) => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className="rounded-lg px-3 py-2 text-sm text-slate-600 transition hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white"
            >
              {l.label[lang]}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <button
            onClick={toggleTheme}
            aria-label="Toggle theme"
            className="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 text-slate-600 transition hover:bg-slate-100 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5"
          >
            {theme === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
          </button>
          <button
            onClick={toggle}
            aria-label="Toggle language"
            className="flex h-9 items-center gap-1.5 rounded-lg border border-slate-200 px-3 text-sm text-slate-600 transition hover:bg-slate-100 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5"
          >
            <Languages className="h-4 w-4" />
            {lang === "fa" ? "EN" : "فا"}
          </button>
          <button
            onClick={open}
            className={cn(buttonVariants({ size: "sm" }), "hidden sm:inline-flex")}
          >
            {t.nav.login}
            <Arrow className="h-4 w-4 rtl:rotate-180" />
          </button>
        </div>
      </div>
    </header>
  );
}