"use client";

import Link from "next/link";
import { Menu, X, Send, MessageCircle, Phone } from "lucide-react";
import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";
import { createPortal } from "react-dom";

type NavLink = {
  href: string;
  label: string;
};

export default function MobileMenu({
  navLinks,
}: {
  navLinks: NavLink[];
}) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const pathname = usePathname();
  const canUsePortal = typeof window !== "undefined";

  useEffect(() => {
    if (mobileOpen) {
      document.body.style.overflow = "hidden";
      document.documentElement.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
      document.documentElement.style.overflow = "";
    }

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

  return (
    <>
      <button
        type="button"
        onClick={() => setMobileOpen(true)}
        className="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-3 py-2 transition-colors hover:bg-white/10 md:hidden"
        aria-label="Открыть меню"
      >
        <Menu className="w-5 h-5" />
      </button>

      {canUsePortal &&
        mobileOpen &&
        createPortal(
          <div className="fixed inset-0 z-[999] w-screen overflow-x-hidden bg-black/90 backdrop-blur-xl md:hidden">
            <div className="flex min-h-dvh w-full flex-col bg-[radial-gradient(circle_at_top,#133222_0%,#090909_42%,#050505_100%)]">
              <div className="flex items-center justify-between border-b border-white/10 px-4 py-3">
                <div className="min-w-0">
                  <div className="text-xl font-semibold leading-none tracking-[-0.03em]">
                    WorkParking
                  </div>
                  <div className="mt-1 text-xs uppercase tracking-[0.18em] text-neutral-500">
                    Smart entry systems
                  </div>
                </div>

                <button
                  type="button"
                  onClick={() => setMobileOpen(false)}
                  className="inline-flex items-center justify-center rounded-xl border border-white/10 p-2 text-neutral-300 transition-colors hover:bg-white/5 hover:text-white"
                  aria-label="Закрыть меню"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>

              <div className="flex-1 overflow-y-auto px-4 py-5">
                <div className="mx-auto w-full max-w-none">
                  <Link
                    href="/contacts#contact-request"
                    onClick={() => setMobileOpen(false)}
                    className="mb-6 flex w-full items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-4 py-4 text-sm font-semibold text-white transition-colors hover:bg-emerald-500"
                  >
                    <Phone className="w-5 h-5" />
                    Связаться с нами
                  </Link>

                  <nav className="flex w-full flex-col rounded-3xl border border-white/10 bg-white/[0.03] px-4 py-1">
                    {navLinks.map((link) => {
                      const isActive = pathname === link.href;

                      return (
                        <Link
                          key={link.href}
                          href={link.href}
                          onClick={() => setMobileOpen(false)}
                          className={[
                            "block w-full border-b border-white/10 py-3.5 text-base transition-colors last:border-b-0",
                            isActive
                              ? "text-emerald-300"
                              : "text-white hover:text-emerald-300",
                          ].join(" ")}
                        >
                          {link.label}
                        </Link>
                      );
                    })}
                  </nav>

                  <div className="mt-6 grid w-full gap-4">
                    <div className="w-full rounded-3xl border border-white/10 bg-white/[0.03] p-4">
                      <div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
                        Контакты
                      </div>

                      <div className="flex flex-col gap-2 text-sm">
                        <a
                          href="tel:+79999698149"
                          className="text-neutral-200 transition-colors hover:text-emerald-300"
                        >
                          +7 (999) 969-81-49
                        </a>
                        <a
                          href="mailto:sale@parkflow.ru"
                          className="text-neutral-200 transition-colors hover:text-emerald-300"
                        >
                          sale@parkflow.ru
                        </a>
                        <a
                          href="mailto:info@parkflow.ru"
                          className="text-neutral-200 transition-colors hover:text-emerald-300"
                        >
                          info@parkflow.ru
                        </a>
                      </div>
                    </div>

                    <div className="w-full rounded-3xl border border-white/10 bg-white/[0.03] p-4">
                      <div className="mb-3 text-[11px] uppercase tracking-[0.22em] text-neutral-500">
                        Мы в сети
                      </div>

                      <div className="flex flex-wrap gap-3 text-sm">
                        <a
                          href="#"
                          className="rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
                        >
                          VK
                        </a>
                        <a
                          href="#"
                          className="inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
                        >
                          <Send className="h-4 w-4" />
                          Telegram
                        </a>
                        <a
                          href="#"
                          className="inline-flex items-center gap-2 rounded-full border border-white/10 px-3 py-2 text-neutral-200 transition-colors hover:text-emerald-300"
                        >
                          <MessageCircle className="h-4 w-4" />
                          MAX
                        </a>
                      </div>
                    </div>

                    <div className="px-1 text-xs text-neutral-500">
                      ООО «Пракфлоу» • ИНН 7777773333
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>,
          document.body,
        )}
    </>
  );
}