"use client";

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

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

export default function MobileMenu({
  navLinks,
}: {
  navLinks: NavLink[];
}) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const pathname = usePathname();

  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="md:hidden inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/5 px-3 py-2 hover:bg-white/10 transition-colors"
        aria-label="Открыть меню"
      >
        <Menu className="w-5 h-5" />
      </button>

      {mobileOpen && (
        <div className="fixed inset-0 z-[999] md:hidden bg-black">
          <div className="flex h-full flex-col bg-black">
            <div className="flex items-center justify-between px-4 py-4 border-b border-white/10">
              <div>
                <div className="text-2xl font-bold leading-none">WorkParking</div>
                <div className="mt-2 text-sm text-neutral-500">
                  Апгрейд дворовых шлагбаумов
                </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 hover:bg-white/5 hover:text-white transition-colors"
                aria-label="Закрыть меню"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="flex-1 overflow-y-auto px-4 py-6">
              <Link
                href="/contacts"
                onClick={() => setMobileOpen(false)}
                className="mb-8 inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-4 py-4 text-base font-semibold text-white hover:bg-emerald-500 transition-colors"
              >
                <FileText className="w-5 h-5" />
                Оставить заявку
              </Link>

              <nav className="flex flex-col">
                {navLinks.map((link) => {
                  const isActive = pathname === link.href;

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

              <div className="mt-10">
                <div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
                  Контакты
                </div>

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

              <div className="mt-10">
                <div className="text-xs uppercase tracking-[0.2em] text-neutral-500 mb-4">
                  Мы в сети
                </div>

                <div className="flex flex-col gap-3 text-base">
                  <a
                    href="#"
                    className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
                  >
                    VK
                  </a>
                  <a
                    href="#"
                    className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
                  >
                    <Send className="w-4 h-4" />
                    Telegram
                  </a>
                  <a
                    href="#"
                    className="inline-flex items-center gap-3 text-neutral-200 hover:text-emerald-300 transition-colors"
                  >
                    <MessageCircle className="w-4 h-4" />
                    MAX
                  </a>
                </div>
              </div>

              <div className="mt-10 pb-6 text-sm text-neutral-500">
                ООО «Пракфлоу» • ИНН 7777773333
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}