import { useEffect, useState } from "react";
import { Phone, Users, CreditCard, DollarSign, Menu, X } from "lucide-react";
import { useNavStore, type UserInfo } from "../store";
import { LanguageDropdown } from "./LanguageDropdown";
import Logo from "./icons/Logo";
import { content as arContent } from "../content/content-ar";
import { content as bnContent } from "../content/content-bn";
import { content as deContent } from "../content/content-de";
import { content as esContent } from "../content/content-es";
import { content as frContent } from "../content/content-fr";
import { content as hiContent } from "../content/content-hi";
import { content as idContent } from "../content/content-id";
import { content as ptContent } from "../content/content-pt";
import { content as ruContent } from "../content/content-ru";
import { content as zhContent } from "../content/content-zh";
import { content as enContent } from "../content/content";
import { getUserInfo } from "../getUserInfo";
import { Auth } from "./Auth";

export default function Navbar({
  lang,
  path,
}: {
  lang?: string;
  path: string;
}) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [navLang, setNavLang] = useState("");
  const { setLanguage, setUser, user } = useNavStore();
  // Supported languages
  const languages = [
    { code: "en", name: "English" },
    { code: "ar", name: "العربية" },
    { code: "de", name: "Deutsch" },
    { code: "fr", name: "Français" },
    { code: "id", name: "Indonesia" },
    { code: "ru", name: "Русский" },
    { code: "zh", name: "中文" },
    { code: "bn", name: "বাংলা" },
    { code: "es", name: "Español" },
    { code: "hi", name: "हिन्दी" },
    { code: "pt", name: "Português" },
  ];

  // Default: English
  let langOption = languages.find((l) => l.code === lang) || languages[0];
  let content;
  switch (lang) {
    case "ar":
      content = arContent;
      break;
    case "bn":
      content = bnContent;
      break;
    case "de":
      content = deContent;
      break;
    case "es":
      content = esContent;
      break;
    case "fr":
      content = frContent;
      break;
    case "hi":
      content = hiContent;
      break;
    case "id":
      content = idContent;
      break;
    case "pt":
      content = ptContent;
      break;
    case "ru":
      content = ruContent;
      break;
    case "zh":
      content = zhContent;
      break;
    default:
      content = enContent;
  }

  useEffect(() => {
    setNavLang(lang || "");
    setLanguage(langOption);
    if (typeof window !== "undefined") {
      const userInfo = getUserInfo<UserInfo>();
      setUser(userInfo);
    }
  }, []);
  // set content by navLang, default to English

  const langPrefix = navLang ? `/${navLang}` : "";

  return (
    <nav className="bg-white border-b border-gray-100 sticky top-0 z-50">
      <div className="max-w-7xl mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          {/* Logo */}
          {/* the logo and the text should be small on */}
          <a
            href={navLang ? `/${navLang}` : "/"}
            className="flex items-center gap-3"
          >
            <Logo
              className="w-8 h-8 md:w-11 md:h-11 scale-150 rounded"
              viewBox="0 0 500 500"
            />
            <span
              className={
                user
                  ? "inline text-base md:text-2xl font-bold text-gray-900"
                  : "hidden sm:inline text-base md:text-2xl font-bold text-gray-900"
              }
            >
              {content.brandName}
            </span>
          </a>

          {/* Desktop Navigation Links */}
          <div className="hidden lg:flex items-center gap-6 desktop-nav">
            <a
              href={`${langPrefix}/phone`}
              className="flex items-center gap-2 text-gray-700 hover:text-gray-900 font-medium transition-colors"
            >
              <Phone className="w-4 h-4" />
              <span>{content.phone}</span>
            </a>
            <a
              href={`${langPrefix}/contacts`}
              className="flex items-center gap-2 text-gray-700 hover:text-gray-900 font-medium transition-colors"
            >
              <Users className="w-4 h-4" />
              <span>{content.contacts}</span>
            </a>
            <a
              href={`${langPrefix}/buy-credits`}
              className="flex items-center gap-2 text-gray-700 hover:text-gray-900 font-medium transition-colors"
            >
              <CreditCard className="w-4 h-4" />
              <span>{content.buyCredits}</span>
            </a>
            <a
              href={`${langPrefix}/rates`}
              className="flex items-center gap-2 text-gray-700 hover:text-gray-900 font-medium transition-colors"
            >
              <DollarSign className="w-4 h-4" />
              <span>{content.rates}</span>
            </a>
          </div>

          {/* Right Side - Language & Auth */}
          <div className="flex items-center gap-3">
            {/* Language Dropdown */}
            <div className="hidden md:block">
              <LanguageDropdown isMobile={false} path={path} />
            </div>

            <Auth content={content} langPrefix={langPrefix} />

            {/* Mobile Menu Button */}
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="lg:hidden p-2 text-gray-700 hover:bg-gray-50 rounded-lg"
            >
              {mobileMenuOpen ? (
                <X className="w-6 h-6" />
              ) : (
                <Menu className="w-6 h-6" />
              )}
            </button>
          </div>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="lg:hidden mt-4 pt-4 border-t border-gray-100">
            <div className="flex flex-col gap-3">
              <a
                href={`${langPrefix}/phone`}
                className="flex items-center gap-3 text-gray-700 hover:text-gray-900 font-medium transition-colors py-2"
              >
                <Phone className="w-4 h-4" />
                <span>{content.phone}</span>
              </a>
              <a
                href={`${langPrefix}/contacts`}
                className="flex items-center gap-3 text-gray-700 hover:text-gray-900 font-medium transition-colors py-2"
              >
                <Users className="w-4 h-4" />
                <span>{content.contacts}</span>
              </a>
              <a
                href={`${langPrefix}/buy-credits`}
                className="flex items-center gap-3 text-gray-700 hover:text-gray-900 font-medium transition-colors py-2"
              >
                <CreditCard className="w-4 h-4" />
                <span>{content.buyCredits}</span>
              </a>
              <a
                href={`${langPrefix}/rates`}
                className="flex items-center gap-3 text-gray-700 hover:text-gray-900 font-medium transition-colors py-2"
              >
                <DollarSign className="w-4 h-4" />
                <span>{content.rates}</span>
              </a>

              {/* Mobile Language Selector */}
              <div className="pt-4 border-t border-gray-100">
                <p className="text-sm font-medium text-gray-500 mb-2">
                  {content.languageLabel}
                </p>
                <LanguageDropdown isMobile={true} path={path} />
              </div>
            </div>
          </div>
        )}
      </div>
    </nav>
  );
}