"use client";
import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import StorefrontOutlinedIcon from "@mui/icons-material/StorefrontOutlined";
import LocalOfferOutlinedIcon from "@mui/icons-material/LocalOfferOutlined";
import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined";
import ReceiptLongOutlinedIcon from "@mui/icons-material/ReceiptLongOutlined";
import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import LogoutIcon from "@mui/icons-material/Logout";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import Button from "./ui/Button";
//import MobileNavbar from "./MobileNavbar";
import { getUserInitials } from "@/utils/functions";
import { useAuth } from "@/context/AuthContext";
import LogoutConfirmModal from "@/components/modals/LogoutConfirmModal";
import { useModal } from "@/context/ModalContext";
import PartnerModal from "./modals/PartnerModal";
import dynamic from "next/dynamic";

const MobileNavbar = dynamic(() => import("./MobileNavbar"), { ssr: false });

const LanguageSwitcher = dynamic(
  () => import("@/components/LanguageSwitcher"),
  { ssr: false }
);

const NavItem = ({ href, icon: Icon, label, active }) => (
  <Link href={href} className={`nav-link ${active ? "active" : ""}`}>
    <Icon fontSize="small" />
    <span suppressHydrationWarning>{label}</span>
  </Link>
);

export default function Navbar({ favCount = 0, cartCount = 0 }) {
  const { t, i18n } = useTranslation();
  const pathname = usePathname();
  const router = useRouter();
  const [showUserMenu, setShowUserMenu] = useState(false);
  const [logoutOpen, setLogoutOpen] = useState(false);
  const { user, authReady } = useAuth();
  const authenticated = !!user;
  const { openModal, closeModal, isModalOpen } = useModal();

  return (
    <>
      {/* هيدر الديسكتوب فقط */}
      <header
        className="hidden lg:block w-full bg-white border-b border-gray-300"
        suppressHydrationWarning
      >
        <nav className="custom-container site-header flex items-center justify-between gap-6">
          {/* الشعار */}
          <Link href="/" className="flex items-center gap-2">
            <Image
              src="/Logo Otlob.png"
              alt="logo"
              width={120}
              height={100}
            />
            {/**
              <span
                className="text-brand font-semibold text-[16px]"
                suppressHydrationWarning
              >
                {t("brand")}
              </span>          
             */}
          </Link>

          {/* الروابط الوسطية */}
          <div className="flex items-center gap-8">
            <NavItem
              href="/"
              icon={HomeOutlinedIcon}
              label={t("nav.home")}
              active={pathname === "/"}
            />
            <NavItem
              href="/restaurants"
              icon={StorefrontOutlinedIcon}
              label={t("nav.restaurants")}
              active={pathname?.startsWith("/restaurants")}
            />
            <NavItem
              href="/offers"
              icon={LocalOfferOutlinedIcon}
              label={t("nav.offers")}
              active={pathname?.startsWith("/offers")}
            />
            <Link href="/favorites" className="nav-link">
              <FavoriteBorderOutlinedIcon fontSize="small" />
              <span suppressHydrationWarning>{t("nav.favorites")}</span>
            </Link>
            <NavItem
              href="/cart"
              icon={ShoppingCartOutlinedIcon}
              label={t("nav.cart")}
              active={pathname?.startsWith("/cart")}
            />
            <NavItem
              href="/orders"
              icon={ReceiptLongOutlinedIcon}
              label={t("nav.orders")}
              active={pathname?.startsWith("/orders")}
            />
          </div>

          {/* يمين: اللغة + تسجيل الدخول/معلومات المستخدم */}
          <div className="flex items-center gap-3 text-[14px]">
            <div className="relative flex items-center nav-link">
              {/*
              <select
                value={i18n.language}
                onChange={(e) => {
                  const next = e.target.value;
                  localStorage.setItem("lang", next);
                  document.cookie = `lang=${next}; path=/; max-age=31536000; samesite=lax`;
                  i18n.changeLanguage(next);
                }}
                className="bg-transparent border-none outline-none cursor-pointer px-1 py-1 text-gray-700 hover:text-brand transition-colors focus:outline-none focus:ring-0 text-[14px] font-medium min-w-[100px]"
                aria-label="Select language"
              >
                <option value="en">🇺🇸 English</option>
                <option value="ar">🇸🇦 العربية</option>
              </select>         
              */}
              <LanguageSwitcher />
            </div>

            {authenticated && user ? (
              <>
                <div className="relative">
                  <button
                    onClick={() => setShowUserMenu(!showUserMenu)}
                    className="flex items-center gap-2 px-3 py-2 rounded-xl hover:bg-gray-50 transition-colors"
                    aria-label="User menu"
                  >
                    <div className="w-8 h-8 rounded-full bg-brand text-white flex items-center justify-center text-sm font-semibold">
                      {getUserInitials(user?.name || user?.email)}
                    </div>
                    <span className="font-medium text-gray-700 hidden xl:block">
                      {user?.name || user?.email}
                    </span>
                    <KeyboardArrowDownIcon
                      className={`text-gray-500 transition-transform ${
                        showUserMenu ? "rotate-180" : ""
                      }`}
                      fontSize="small"
                    />
                  </button>

                  {/* User Dropdown Menu */}
                  {showUserMenu && (
                    <>
                      <div
                        className="fixed inset-0 z-10"
                        onClick={() => setShowUserMenu(false)}
                      />
                      <div className="absolute end-0 top-full mt-2 w-56 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-20">
                        <div className="px-4 py-3 border-b border-gray-100">
                          <p className="font-semibold text-gray-900 text-sm">
                            {user?.name || t("nav.profile")}
                          </p>
                          <p className="text-xs text-gray-500 mt-0.5">
                            {user?.email}
                          </p>
                        </div>
                        <Link
                          href="/profile"
                          onClick={() => setShowUserMenu(false)}
                          className="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
                        >
                          <AccountCircleIcon fontSize="small" />
                          <span>{t("nav.profile")}</span>
                        </Link>
                        <button
                          onClick={() => {
                            setShowUserMenu(false);
                            setLogoutOpen(true);
                          }}
                          className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 hover:bg-red-50 transition-colors"
                        >
                          <LogoutIcon fontSize="small" />
                          <span>{t("nav.logout")}</span>
                        </button>
                      </div>
                    </>
                  )}
                </div>

                <Button
                  variant="primary"
                  size="sm"
                  onClick={() => openModal("partner")}
                >
                  {t("nav.join")}
                </Button>
              </>
            ) : (
              <>
                {!authReady ? (
                  <div className="w-28 h-9 rounded-xl bg-gray-100 animate-pulse" />
                ) : (
                  <>
                    <Link href="/auth/login">
                      <Button variant="outline" size="sm">
                        {t("nav.login")}
                      </Button>
                    </Link>

                    <Button
                      variant="primary"
                      size="sm"
                      onClick={() => openModal("partner")}
                    >
                      {t("nav.join")}
                    </Button>
                  </>
                )}
              </>
            )}
          </div>
        </nav>
      </header>

      {/* موبايل: الشريط + الدروار */}
      <MobileNavbar favCount={favCount} cartCount={cartCount} />

      <LogoutConfirmModal
        open={logoutOpen}
        onClose={() => setLogoutOpen(false)}
        redirectTo="/"
      />

      <PartnerModal
        open={isModalOpen("partner")}
        onClose={() => closeModal("partner")}
      />
    </>
  );
}