"use client";

import { useEffect } from "react";
import Link from "next/link";
import { X, Phone, ChevronRight } from "lucide-react";
import { companyDetails } from "@/content/company";
import { cn } from "@/lib/utils";

interface MobileMenuProps {
  isOpen: boolean;
  onClose: () => void;
}

export function MobileMenu({ isOpen, onClose }: MobileMenuProps) {
  // Prevent body scrolling when menu is open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [isOpen]);

  const hvacSections = [
    { label: "Ofertowana klimatyzacja", href: "/klimatyzacja" },
    { label: "Klimatyzatory ścienne", href: "/sklep?category=scienne" },
    { label: "Klimatyzatory multisplit", href: "/sklep?category=multisplit" },
    { label: "Klimatyzatory przenośne", href: "/sklep?category=przenosne" },
    { label: "Klimatyzatory kasetonowe", href: "/sklep?category=kasetonowe" },
    { label: "Klimatyzator konsolowe", href: "/sklep?category=konsolowe" },
    { label: "Montaż klimatyzacji", href: "/klimatyzacja" },
    { label: "Serwis i przeglądy", href: "/klimatyzacja" },
  ];



  return (
    <div
      className={cn(
        "fixed inset-0 z-50 lg:hidden transition-all duration-300",
        isOpen ? "pointer-events-auto" : "pointer-events-none"
      )}
    >
      {/* Dark Overlay */}
      <div
        className={cn(
          "absolute inset-0 bg-black/60 transition-opacity duration-300",
          isOpen ? "opacity-100" : "opacity-0"
        )}
        onClick={onClose}
      />

      {/* Drawer Panel */}
      <div
        className={cn(
          "absolute top-0 right-0 bottom-0 w-full max-w-sm bg-white shadow-xl flex flex-col transition-transform duration-300 ease-in-out",
          isOpen ? "translate-x-0" : "translate-x-full"
        )}
      >
        {/* Drawer Header */}
        <div className="flex justify-between items-center px-6 py-4 border-b border-border">
          <span className="text-xl font-bold font-heading text-primary">
            Menu<span className="text-accent">.</span>
          </span>
          <button
            onClick={onClose}
            className="p-1 rounded-lg hover:bg-muted text-primary transition-colors focus:ring-2 focus:ring-accent outline-none"
            aria-label="Zamknij menu"
          >
            <X className="size-6" />
          </button>
        </div>

        {/* Drawer Content */}
        <div className="flex-1 overflow-y-auto px-6 py-4">
          <div className="w-full">
            {/* 1. Klimatyzacja */}
            <details className="collapse collapse-arrow border-b border-border rounded-none">
              <summary className="collapse-title text-sm font-medium text-primary hover:text-accent py-3 px-0 min-h-0">
                Klimatyzacja
              </summary>
              <div className="collapse-content px-0 pb-2">
                <ul className="flex flex-col gap-2.5 pl-4 pb-2">
                  {hvacSections.map((item, idx) => (
                    <li key={idx}>
                      <Link
                        href={item.href}
                        onClick={onClose}
                        className="text-sm text-text-muted hover:text-accent transition-colors flex items-center justify-between py-1"
                      >
                        <span>{item.label}</span>
                        <ChevronRight className="size-3.5 opacity-60" />
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </details>

            {/* 2. Pompy Ciepła */}
            <div className="border-b border-border py-3">
              <Link
                href="/pompy-ciepla"
                onClick={onClose}
                className="text-sm font-medium text-primary hover:text-accent block"
              >
                Pompy ciepła
              </Link>
            </div>

            {/* Nowa sekcja: Miasta */}
            <div className="border-b border-border py-3">
              <details className="collapse collapse-arrow rounded-none">
                <summary className="collapse-title text-sm font-medium text-primary hover:text-accent py-0 px-0 min-h-0">
                  Montaż w miastach
                </summary>
                <div className="collapse-content px-0 pb-2">
                  <ul className="flex flex-col gap-2 pl-4 pb-2 mt-2">
                    {[
                      { label: "Klimatyzacja Wrocław", href: "/klimatyzacja/wroclaw" },
                      { label: "Klimatyzacja Legnica", href: "/klimatyzacja/legnica" },
                      { label: "Klimatyzacja Wałbrzych", href: "/klimatyzacja/walbrzych" },
                      { label: "Klimatyzacja Jelenia Góra", href: "/klimatyzacja/jelenia-gora" },
                      { label: "Klimatyzacja Lubin", href: "/klimatyzacja/lubin" },
                      { label: "Klimatyzacja Głogów", href: "/klimatyzacja/glogow" },
                      { label: "Klimatyzacja Świdnica", href: "/klimatyzacja/swidnica" },
                      { label: "Klimatyzacja Oława", href: "/klimatyzacja/olawa" },
                      { label: "Klimatyzacja Oleśnica", href: "/klimatyzacja/olesnica" },
                      { label: "Klimatyzacja Opole", href: "/klimatyzacja/opole" },
                      { label: "→ Wszystkie miasta", href: "/klimatyzacja#miasta" },
                    ].map((item, idx) => (
                      <li key={idx}>
                        <Link
                          href={item.href}
                          onClick={onClose}
                          className="text-sm text-text-muted hover:text-accent transition-colors flex items-center justify-between py-1"
                        >
                          <span>{item.label}</span>
                          <ChevronRight className="size-3.5 opacity-60" />
                        </Link>
                      </li>
                    ))}
                  </ul>
                </div>
              </details>
            </div>

            {/* 3. Dobór urządzenia */}
            <div className="border-b border-border py-3">
              <Link
                href="/kalkulator"
                onClick={onClose}
                className="text-sm font-medium text-primary hover:text-accent block"
              >
                Dobór urządzenia
              </Link>
            </div>



            {/* 5. Blog */}
            <div className="border-b border-border py-3">
              <Link
                href="/blog"
                onClick={onClose}
                className="text-sm font-medium text-primary hover:text-accent block"
              >
                Blog
              </Link>
            </div>

            {/* 6. O Nas */}
            <div className="border-b border-border py-3">
              <Link
                href="/o-nas"
                onClick={onClose}
                className="text-sm font-medium text-primary hover:text-accent block"
              >
                O nas
              </Link>
            </div>

            {/* 7. Kontakt */}
            <div className="border-b border-border py-3">
              <Link
                href="/kontakt"
                onClick={onClose}
                className="text-sm font-medium text-primary hover:text-accent block"
              >
                Kontakt
              </Link>
            </div>

            {/* 8. Zgłoś awarię */}
            <div className="border-b border-border py-3">
              <Link
                href="/zgloszenie-awarii"
                onClick={onClose}
                className="text-sm font-bold text-red-600 hover:text-red-700 block"
              >
                Zgłoś awarię
              </Link>
            </div>
          </div>
        </div>

        {/* Drawer Footer */}
        <div className="border-t border-border p-6 bg-slate-50 flex flex-col gap-4">
          <a
            href={`tel:${companyDetails.phoneRaw}`}
            className="flex items-center justify-center gap-2 p-3 bg-white border border-border rounded-xl text-primary font-semibold hover:text-accent transition-colors shadow-sm"
          >
            <Phone className="size-4 text-accent" />
            <span>Zadzwoń: {companyDetails.phone}</span>
          </a>
          <Link href="/kontakt" onClick={onClose}>
            <button className="btn btn-primary w-full font-bold">
              Darmowa konsultacja
            </button>
          </Link>
        </div>
      </div>
    </div>
  );
}