"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";

const MENU_ITEMS = [
  { name: "About", href: "/about" },
  { name: "Events", href: "/events" },
  { name: "Gallery", href: "/gallery" },
  { name: "Volunteers", href: "/volunteers" },
  { name: "Success Stories", href: "/success-stories" },
  { name: "Blogs", href: "/blogs" },
  { name: "Contact", href: "/contact" },
];

const PROGRAM_ITEMS = [
  { name: "Education Support", href: "/education-support" },
  { name: "Healthcare Services", href: "/healthcare-services" },
  { name: "Women Empowerment", href: "/women-empowerment" },
  { name: "Youth Development", href: "/youth-development" },
  { name: "Environmental Awareness", href: "/environmental-awareness" },
  { name: "Community Welfare", href: "/community-welfare" },
];

function Icon({
  name,
  className = "",
}: {
  name: "menu" | "close" | "user" | "plus" | "heart" | "chevron";
  className?: string;
}) {
  const common = "h-4 w-4 shrink-0";

  if (name === "menu") {
    return (
      <svg viewBox="0 0 24 24" fill="none" className={`${common} ${className}`}>
        <path
          d="M4 6h16M4 12h16M4 18h16"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  if (name === "close") {
    return (
      <svg viewBox="0 0 24 24" fill="none" className={`${common} ${className}`}>
        <path
          d="M6 6l12 12M18 6L6 18"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  if (name === "user") {
    return (
      <svg viewBox="0 0 24 24" fill="none" className={`${common} ${className}`}>
        <path
          d="M20 21a8 8 0 0 0-16 0M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  if (name === "plus") {
    return (
      <svg viewBox="0 0 24 24" fill="none" className={`${common} ${className}`}>
        <path
          d="M12 5v14M5 12h14"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
        />
      </svg>
    );
  }

  if (name === "heart") {
    return (
      <svg
        viewBox="0 0 24 24"
        fill="currentColor"
        className={`${common} ${className}`}
      >
        <path d="M12 21s-7.5-4.6-10-9.7C.3 7.8 2.4 4 6.2 4c2 0 3.4 1 4.2 2.1C11.2 5 12.6 4 14.6 4c3.8 0 5.9 3.8 4.2 7.3C16.5 16.4 12 21 12 21Z" />
      </svg>
    );
  }

  return (
    <svg viewBox="0 0 24 24" fill="none" className={`${common} ${className}`}>
      <path
        d="m6 9 6 6 6-6"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function Header() {
  const [isOpen, setIsOpen] = useState(false);
  const [programOpen, setProgramOpen] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    setIsOpen(false);
    setProgramOpen(false);
  }, [pathname]);

  useEffect(() => {
    document.body.style.overflow = isOpen ? "hidden" : "";

    return () => {
      document.body.style.overflow = "";
    };
  }, [isOpen]);

  const isProgramActive = PROGRAM_ITEMS.some((item) => item.href === pathname);

  return (
    <>
      <header className="fixed left-0 top-0 z-[60] h-20 w-full border-b border-white/10 bg-black/30 backdrop-blur-xl">
        <div className="mx-auto flex h-full max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
          <Link
            href="/"
            aria-label="Rajvi Social Welfare Trust Home"
            className="flex h-[60px] w-[180px] shrink-0 items-center"
            onClick={() => setIsOpen(false)}
          >
            <Image
              src="/logo.webp"
              alt="Rajvi Social Welfare Trust Logo"
              width={180}
              height={60}
              priority
              quality={75}
              sizes="180px"
              className="h-[60px] w-[180px] object-contain"
            />
          </Link>

          <nav
            aria-label="Main Navigation"
            className="hidden items-center gap-6 xl:flex"
          >
            {MENU_ITEMS.slice(0, 4).map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className={`text-sm font-semibold transition hover:text-[var(--accent)] ${
                  pathname === item.href
                    ? "text-[var(--accent)]"
                    : "text-white"
                }`}
              >
                {item.name}
              </Link>
            ))}

            <div className="group relative">
              <button
                type="button"
                className={`flex items-center gap-2 text-sm font-semibold transition hover:text-[var(--accent)] ${
                  isProgramActive ? "text-[var(--accent)]" : "text-white"
                }`}
              >
                Programs
                <Icon
                  name="chevron"
                  className="h-3 w-3 transition group-hover:rotate-180"
                />
              </button>

              <div className="invisible absolute left-1/2 top-full w-72 -translate-x-1/2 pt-5 opacity-0 transition group-hover:visible group-hover:opacity-100">
                <div className="rounded-2xl border border-white/10 bg-slate-950/95 p-3 shadow-2xl backdrop-blur-xl">
                  {PROGRAM_ITEMS.map((item) => (
                    <Link
                      key={item.name}
                      href={item.href}
                      className={`block rounded-xl px-4 py-3 text-sm font-medium transition hover:bg-white/10 hover:text-[var(--accent)] ${
                        pathname === item.href
                          ? "bg-white/10 text-[var(--accent)]"
                          : "text-slate-200"
                      }`}
                    >
                      {item.name}
                    </Link>
                  ))}
                </div>
              </div>
            </div>

            {MENU_ITEMS.slice(4).map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className={`text-sm font-semibold transition hover:text-[var(--accent)] ${
                  pathname === item.href
                    ? "text-[var(--accent)]"
                    : "text-white"
                }`}
              >
                {item.name}
              </Link>
            ))}
          </nav>

          <div className="hidden items-center gap-3 xl:flex">
            <Link
              href="/donate-now"
              className="inline-flex items-center gap-2 rounded-xl bg-red-600 px-5 py-2.5 text-sm font-bold text-white shadow-lg transition hover:-translate-y-0.5 hover:bg-red-700"
            >
              <Icon name="heart" />
              Donate
            </Link>

            <a
              href="https://my.rajvisocialwelfare.org/"
              target="_blank"
              rel="noopener noreferrer external"
              className="inline-flex items-center gap-2 rounded-xl border border-white/20 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-white hover:text-black"
            >
              <Icon name="user" />
              Login
            </a>

            <a
              href="https://my.rajvisocialwelfare.org/register.php"
              target="_blank"
              rel="noopener noreferrer external"
              className="inline-flex items-center gap-2 rounded-xl bg-[var(--accent)] px-5 py-2.5 text-sm font-bold text-black transition hover:-translate-y-0.5 hover:bg-[var(--accent-hover)]"
            >
              <Icon name="plus" />
              Register
            </a>
          </div>

          <button
            type="button"
            onClick={() => setIsOpen((prev) => !prev)}
            aria-label={isOpen ? "Close Menu" : "Open Menu"}
            aria-expanded={isOpen}
            className="relative z-[70] flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-white/20 bg-white/5 text-white transition active:scale-95 xl:hidden"
          >
            {isOpen ? <Icon name="close" /> : <Icon name="menu" />}
          </button>
        </div>
      </header>

      {isOpen && (
        <div className="fixed inset-0 z-50 overflow-y-auto bg-black/95 backdrop-blur-xl xl:hidden">
          <div className="flex min-h-screen flex-col justify-between px-4 pb-8 pt-24 sm:px-6">
            <nav aria-label="Mobile Navigation" className="flex flex-col">
              {MENU_ITEMS.slice(0, 4).map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`border-b border-white/10 py-4 text-base font-semibold transition ${
                    pathname === item.href
                      ? "text-[var(--accent)]"
                      : "text-white"
                  }`}
                >
                  {item.name}
                </Link>
              ))}

              <div className="border-b border-white/10 py-4">
                <button
                  type="button"
                  onClick={() => setProgramOpen((prev) => !prev)}
                  className={`flex w-full items-center justify-between text-base font-semibold ${
                    isProgramActive ? "text-[var(--accent)]" : "text-white"
                  }`}
                >
                  Programs
                  <Icon
                    name="chevron"
                    className={`h-3 w-3 transition ${
                      programOpen ? "rotate-180" : ""
                    }`}
                  />
                </button>

                {programOpen && (
                  <div className="mt-4 space-y-2 rounded-2xl bg-white/5 p-3">
                    {PROGRAM_ITEMS.map((item) => (
                      <Link
                        key={item.name}
                        href={item.href}
                        className={`block rounded-xl px-4 py-3 text-sm font-medium ${
                          pathname === item.href
                            ? "bg-white/10 text-[var(--accent)]"
                            : "text-slate-300"
                        }`}
                      >
                        {item.name}
                      </Link>
                    ))}
                  </div>
                )}
              </div>

              {MENU_ITEMS.slice(4).map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className={`border-b border-white/10 py-4 text-base font-semibold transition ${
                    pathname === item.href
                      ? "text-[var(--accent)]"
                      : "text-white"
                  }`}
                >
                  {item.name}
                </Link>
              ))}
            </nav>

            <div className="mt-8 grid gap-4">
              <Link
                href="/donate-now"
                className="inline-flex items-center justify-center gap-2 rounded-xl bg-red-600 py-4 text-sm font-bold text-white shadow-md transition active:scale-[0.98]"
              >
                <Icon name="heart" />
                Donate Now
              </Link>

              <a
                href="https://my.rajvisocialwelfare.org/"
                target="_blank"
                rel="noopener noreferrer external"
                className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 py-4 text-sm font-bold text-white transition active:bg-white/10"
              >
                <Icon name="user" />
                Member Login
              </a>

              <a
                href="https://my.rajvisocialwelfare.org/register.php"
                target="_blank"
                rel="noopener noreferrer external"
                className="inline-flex items-center justify-center gap-2 rounded-xl bg-[var(--accent)] py-4 text-sm font-bold text-black transition active:scale-[0.98]"
              >
                <Icon name="plus" />
                Register as Volunteer
              </a>
            </div>
          </div>
        </div>
      )}
    </>
  );
}