"use client";

import Link from "next/link";
import Image from "next/image";
import {
  Bell,
  Heart,
  MessageCircle,
  ChevronDown,
} from "lucide-react";

import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { useAuth } from "@/context/AuthContext";

export default function Header() {

  const pathname = usePathname();

  const { isAuthenticated } = useAuth();

  const isHome = pathname === "/";

  const [isScrolled, setIsScrolled] =
    useState(false);

  const [mobileMenuOpen, setMobileMenuOpen] =
    useState(false);

  useEffect(() => {

    const handleScroll = () => {

      setIsScrolled(window.scrollY > 330);

    };

    window.addEventListener("scroll", handleScroll);

    return () =>
      window.removeEventListener(
        "scroll",
        handleScroll
      );

  }, []);

  // ================= ROUTES =================

  const searchLink = isAuthenticated
  ? "/search?tab=properties"
  : "/auth/signin";

const propertiesLink = isAuthenticated
  ? "/search?tab=properties"
  : "/auth/signin";

const projectsLink = isAuthenticated
  ? "/search?tab=projects"
  : "/auth/signin";

  const agentsLink = isAuthenticated
    ? "/find-agents"
    : "/auth/signin";

  const requestsLink = isAuthenticated
    ? "/property-requests/add"
    : "/auth/signin";

  return (
    <>
      {/* ================= MOBILE HEADER ================= */}

      <div className="lg:hidden fixed top-0 left-0 right-0 z-[9999]">

        <div
          className={`
            absolute inset-0 transition-all duration-500

            ${
              !isHome || isScrolled
                ? "bg-white/95 backdrop-blur-xl"
                : "bg-gradient-to-b from-[#081A25]/65 via-[#081A25]/20 to-transparent backdrop-blur-[2px]"
            }
          `}
        />

        <div
          className="
            relative
            flex
            flex-row-reverse
            items-center
            justify-between
            px-5
            pt-5
          "
        >
          <button
            onClick={() => setMobileMenuOpen(true)}
            className="
              flex
              items-center
              justify-center
              w-[34px]
              h-[34px]
            "
          >
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke={!isHome || isScrolled ? "#111827" : "white"}
              strokeWidth="2"
              strokeLinecap="round"
            >
              <line x1="3" y1="7" x2="21" y2="7" />
              <line x1="3" y1="12" x2="21" y2="12" />
              <line x1="3" y1="17" x2="21" y2="17" />
            </svg>
          </button>

          <Link href="/" className="flex items-center">
            <img
              src={
                !isHome || isScrolled
                  ? "/dark-logo.png"
                  : "/logo.png"
              }
              alt="logo"
              className="
                h-[42px]
                w-auto
                object-contain
                transition-all
                duration-500
              "
            />
          </Link>
        </div>
      </div>

      {/* ================= MOBILE MENU ================= */}

      {mobileMenuOpen && (
        <div className="fixed inset-0 z-[99999] lg:hidden">

          <div
            className="
              absolute
              inset-0
              bg-black/10
              backdrop-blur-[8px]
            "
            onClick={() => setMobileMenuOpen(false)}
          />

          <div className="absolute inset-0">
            <div
              className="
                h-full
                w-full
                bg-[rgba(120,130,140,0.28)]
                backdrop-blur-[28px]
              "
            >
              <div className="h-full flex flex-col px-4 pt-5 pb-5">

                <div className="flex items-center justify-between">
                  <img
                    src="/logo.png"
                    alt="logo"
                    className="h-[42px] w-auto object-contain"
                  />

                  <button
                    onClick={() => setMobileMenuOpen(false)}
                    className="
                      text-white
                      text-[34px]
                      leading-none
                      font-extralight
                    "
                  >
                    ×
                  </button>
                </div>

                <div className="mt-10">
                  {[
                    {
                      title: "الرئيسية",
                      link: "/",
                    },
                    {
                      title: "بحث",
                      link: searchLink,
                    },
                    {
                      title: "العقارات",
                      link: propertiesLink,
                    },
                    {
                      title: "المشاريع",
                      link: projectsLink,
                    },
                    {
                      title: "وسطاء عقاريين",
                      link: agentsLink,
                    },
                    {
                      title: "اطلب عقارك",
                      link: requestsLink,
                    },
                  ].map((item, index) => (
                    <Link
                      key={index}
                      href={item.link}
                      onClick={() =>
                        setMobileMenuOpen(false)
                      }
                      className="
                        relative
                        flex
                        items-center
                        py-4
                      "
                    >
                      <div
                        className="
                          absolute
                          left-0
                          top-1/2
                          -translate-y-1/2
                          flex
                          items-center
                          justify-center
                        "
                      >
                        <img
                          src="/icons/right-arrow.png"
                          alt="arrow"
                          className="
                            w-[18px]
                            h-[18px]
                            object-contain
                            rotate-180
                            opacity-90
                          "
                        />
                      </div>

                      <span
                        className="
                          text-white
                          text-[18px]
                          font-light
                          ml-auto
                        "
                      >
                        {item.title}
                      </span>
                    </Link>
                  ))}
                </div>

                {!isAuthenticated && (
                  <Link
                    href="/auth/signin"
                    className="
                      w-full
                      h-[54px]
                      rounded-full
                      bg-white
                      text-[#1E293B]
                      text-[20px]
                      font-medium
                      mt-6
                      flex
                      items-center
                      justify-center
                    "
                  >
                    تسجيل دخول
                  </Link>
                )}

              </div>
            </div>
          </div>
        </div>
      )}

      {/* ================= DESKTOP HEADER ================= */}

      <header
        className={`
          hidden
          lg:block
          fixed
          top-0
          left-0
          right-0
          z-[9999]
          transition-all
          duration-500
          bg-transparent

          ${
            isHome
              ? isScrolled
                ? "px-0 pt-0"
                : "px-6 pt-5"
              : "px-0 pt-0"
          }
        `}
      >
        <div
          className={`
            relative
            transition-all
            duration-500

            ${
              isHome
                ? isScrolled
                  ? "w-full rounded-none"
                  : "mx-auto max-w-[1720px] rounded-[28px]"
                : "w-full rounded-none"
            }

            h-[84px]
            overflow-hidden
            border

            ${
              isHome
                ? isScrolled
                  ? "border-[#E5E7EB] bg-[#F3F4F6]"
                  : "border-white/10 bg-[#527D87]/1 backdrop-blur-xl shadow-[0_8px_30px_rgba(0,0,0,0.18)]"
                : "border-[#E5E7EB] bg-[#FAFCFC]"
            }
          `}
        >
          <div
            className={`
              relative z-10 h-full flex items-center justify-between
              ${isHome ? "px-7" : "px-10"}
            `}
          >

            {/* RIGHT */}

            <div className="flex items-center gap-[36px]">

              <Link href="/">
                <Image
                  src={
                    !isHome || isScrolled
                      ? "/dark-logo.png"
                      : "/logo.png"
                  }
                  alt="logo"
                  width={170}
                  height={54}
                  className={`
                    object-contain
                    transition-all
                    duration-500

                    ${
                      isHome && !isScrolled
                        ? "brightness-0 invert opacity-95"
                        : ""
                    }
                  `}
                />
              </Link>

              <nav
                className={`
                  flex
                  items-center
                  gap-[28px]
                  text-[13px]
                  font-medium

                  ${
                    isHome
                      ? isScrolled
                        ? "text-[#334155]"
                        : "text-white"
                      : "text-[#334155]"
                  }
                `}
              >
                <Link href="/">الرئيسية</Link>

                <Link href={searchLink}>
                  بحث
                </Link>

                <Link href={propertiesLink}>
                  العقارات
                </Link>

                <Link href={projectsLink}>
                  المشاريع
                </Link>

                <Link href={agentsLink}>
                  وسطاء عقاريين
                </Link>

                <Link href={requestsLink}>
                  اطلب عقارك
                </Link>

                <Link href="/about">
                  من نحن
                </Link>

                <Link href="/contact">
                  تواصل معنا
                </Link>
              </nav>
            </div>

           {/* LEFT */}

<div className="flex items-center gap-2.5">

  {isAuthenticated ? (
    <>
      <div className="flex items-center gap-2">

        {/* Messages */}
        <Link
          href="/user-panel/messages"
          className={`
            relative
            w-[38px]
            h-[38px]
            rounded-full
            flex
            items-center
            justify-center
            border
            transition-all
            duration-300

            ${
              isHome && !isScrolled
                ? `
                  bg-[#06202E]
                  border-white/10
                `
                : `
                  bg-[#E2E8F0]
                  border-[#CBD5E1]
                `
            }
          `}
        >
          <MessageCircle
            className={`
              size-[15px]
              transition-all
              duration-300

              ${
                isHome && !isScrolled
                  ? "text-white"
                  : "text-[#334155]"
              }
            `}
          />

         <span
  className="
    absolute
    -top-1
    -right-1
    min-w-[17px]
    h-[17px]
    px-1
    rounded-full
    bg-red-500
    text-white
    text-[9px]
    font-bold
    flex
    items-center
    justify-center
  "
>
  2
</span>
        </Link>

        {/* Notifications */}
        <Link
          href="/user-panel/notifications"
          className={`
            relative
            w-[38px]
            h-[38px]
            rounded-full
            flex
            items-center
            justify-center
            border
            transition-all
            duration-300

            ${
              isHome && !isScrolled
                ? `
                  bg-[#06202E]
                  border-white/10
                `
                : `
                  bg-[#E2E8F0]
                  border-[#CBD5E1]
                `
            }
          `}
        >
          <Bell
            className={`
              size-[15px]
              transition-all
              duration-300

              ${
                isHome && !isScrolled
                  ? "text-white"
                  : "text-[#334155]"
              }
            `}
          />

         <span
  className="
    absolute
    -top-1
    -right-1
    min-w-[17px]
    h-[17px]
    px-1
    rounded-full
    bg-red-500
    text-white
    text-[9px]
    font-bold
    flex
    items-center
    justify-center
  "
>
  1
</span>
        </Link>

        {/* Favorites */}
        <Link
          href="/user-panel/favorites"
          className={`
            relative
            w-[38px]
            h-[38px]
            rounded-full
            flex
            items-center
            justify-center
            border
            transition-all
            duration-300

            ${
              isHome && !isScrolled
                ? `
                  bg-[#06202E]
                  border-white/10
                `
                : `
                  bg-[#E2E8F0]
                  border-[#CBD5E1]
                `
            }
          `}
        >
          <Heart
            className={`
              size-[15px]
              transition-all
              duration-300

              ${
                isHome && !isScrolled
                  ? "text-white"
                  : "text-[#334155]"
              }
            `}
          />

            <span
  className="
    absolute
    -top-1
    -right-1
    min-w-[17px]
    h-[17px]
    px-1
    rounded-full
    bg-red-500
    text-white
    text-[9px]
    font-bold
    flex
    items-center
    justify-center
  "
>
  3
</span>
        </Link>
      </div>

      {/* USER */}
      <Link
        href="/user-panel"
        className="flex items-center gap-2 pr-1"
      >
        <ChevronDown
          className={`
            size-[13px]
            transition-all
            duration-300

            ${
              isHome && !isScrolled
                ? "text-white/60"
                : "text-[#334155]"
            }
          `}
        />

        <div className="text-right">
          <h3
            className={`
              text-[13px]
              font-semibold
              tracking-tight
              leading-[1]
              transition-all
              duration-300

              ${
                isHome && !isScrolled
                  ? "text-white"
                  : "text-[#0F172A]"
              }
            `}
          >
            محمد القحطاني
          </h3>

          <p
            className={`
              text-[9px]
              mt-[3px]
              transition-all
              duration-300

              ${
                isHome && !isScrolled
                  ? "text-white/50"
                  : "text-[#7E858F]"
              }
            `}
          >
            مسوق عقاري
          </p>
        </div>

        <div
          className={`
            w-[38px]
            h-[38px]
            rounded-full
            overflow-hidden
            border
            transition-all
            duration-300

            ${
              isHome && !isScrolled
                ? "border-white/10"
                : "border-[#CBD5E1]"
            }
          `}
        >
          <img
            src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=300&auto=format&fit=crop"
            alt="avatar"
            className="w-full h-full object-cover"
          />
        </div>
      </Link>
    </>
  ) : (
    <Link
      href="/auth/signin"
      className="
        h-[42px]
        px-6
        rounded-full
        flex
        items-center
        justify-center
        text-[13px]
        font-medium
        transition-all
        bg-[#0F172A]
        text-white
      "
    >
      تسجيل دخول
    </Link>
  )}

</div>
          </div>
        </div>
      </header>
    </>
  );
}