"use client";

import { useState } from "react";
// import Link from "next/link";
import { AnimatePresence, motion } from "framer-motion";

// --- Navigation temporarily disabled -------------------------------------
// Non-navigating stub replaces next/link so mobile menu items still render and
// still close the drawer (their onClick={onClose} runs) but go nowhere.
// Restore the import above to re-enable navigation.
const Link = ({ href, onClick, children, ...props }) => (
  <a
    href="#"
    onClick={(e) => {
      e.preventDefault();
      onClick?.(e);
    }}
    {...props}
  >
    {children}
  </a>
);
// -------------------------------------------------------------------------
import { mainNav, headerCta } from "@/config/navigation";
import { serviceCategories } from "@/data/services";
import { cn } from "@/lib/utils";
import { ChevronDown } from "@/components/ui/icons";

/**
 * Mobile slide-down navigation drawer. Each menu with children becomes an
 * accordion; Services expands into its categories → service links.
 */
export default function MobileNav({ open, onClose }) {
  const [expanded, setExpanded] = useState(null);

  const toggle = (title) => setExpanded((cur) => (cur === title ? null : title));

  return (
    <AnimatePresence>
      {open && (
        <motion.div
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: "auto", opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
          transition={{ duration: 0.25, ease: "easeInOut" }}
          className="overflow-hidden border-t border-border bg-background/95 backdrop-blur-xl lg:hidden"
        >
          <div className="container max-h-[calc(100vh-4rem)] space-y-1 overflow-y-auto py-4">
            {mainNav.map((item) => {
              const hasMenu = item.type === "mega" || item.type === "dropdown";

              if (!hasMenu) {
                return (
                  <Link
                    key={item.title}
                    href={item.href}
                    onClick={onClose}
                    className="block rounded-lg px-3 py-3 text-base font-medium text-foreground hover:bg-muted"
                  >
                    {item.title}
                  </Link>
                );
              }

              const isOpen = expanded === item.title;

              return (
                <div key={item.title} className="rounded-lg">
                  <button
                    onClick={() => toggle(item.title)}
                    className="flex w-full items-center justify-between rounded-lg px-3 py-3 text-base font-medium text-foreground hover:bg-muted"
                  >
                    {item.title}
                    <ChevronDown className={cn("h-4 w-4 transition-transform", isOpen && "rotate-180")} />
                  </button>

                  <AnimatePresence>
                    {isOpen && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.2 }}
                        className="overflow-hidden"
                      >
                        <div className="space-y-3 px-3 pb-3 pt-1">
                          {item.type === "mega"
                            ? serviceCategories.map((cat) => (
                                <div key={cat.slug}>
                                  <p className="px-1 py-1 text-xs font-medium uppercase tracking-wider text-accent">
                                    {cat.title}
                                  </p>
                                  <div className="grid grid-cols-2 gap-0.5">
                                    {cat.services.map((svc) => (
                                      <Link
                                        key={svc.slug}
                                        href={`/services/${svc.slug}`}
                                        onClick={onClose}
                                        className="rounded-md px-2 py-1.5 text-sm text-muted-foreground hover:text-foreground"
                                      >
                                        {svc.name}
                                      </Link>
                                    ))}
                                  </div>
                                </div>
                              ))
                            : item.items.map((link) => (
                                <Link
                                  key={link.href}
                                  href={link.href}
                                  onClick={onClose}
                                  className="block rounded-md px-2 py-2 text-sm text-muted-foreground hover:text-foreground"
                                >
                                  {link.title}
                                </Link>
                              ))}
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              );
            })}

            <Link
              href={headerCta.href}
              onClick={onClose}
              className="mt-3 block rounded-lg bg-primary px-4 py-3 text-center text-sm font-medium text-primary-foreground"
            >
              {headerCta.title}
            </Link>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}