"use client";

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

import { Button } from "@/components/button";
import { mainNav } from "@/components/navigation";

export function MobileHeader() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="lg:hidden">
      <button
        type="button"
        aria-label={isOpen ? "Zatvori meni" : "Otvori meni"}
        aria-expanded={isOpen}
        onClick={() => setIsOpen((value) => !value)}
        className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-900 shadow-sm transition hover:border-slate-300 hover:bg-slate-50"
      >
        <span className="sr-only">{isOpen ? "Zatvori meni" : "Otvori meni"}</span>
        {isOpen ? <X className="h-5 w-5" strokeWidth={1.8} /> : <Menu className="h-5 w-5" strokeWidth={1.8} />}
      </button>

      <AnimatePresence>
        {isOpen ? (
        <motion.div
          className="fixed inset-x-0 top-[4.5rem] z-40 h-[calc(100vh-4.5rem)] overflow-y-auto border-t border-slate-200/80 bg-white/[0.96] shadow-[0_24px_80px_rgb(15_23_42_/_0.14)] backdrop-blur-xl lg:hidden"
          initial={{ opacity: 0, y: -8 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -8 }}
          transition={{ duration: 0.18, ease: "easeOut" }}
        >
          <div className="mx-auto flex max-w-7xl flex-col gap-2 px-5 py-5">
            {mainNav.map((item) =>
              item.children ? (
                <details key={item.label} className="group rounded-lg border border-slate-200 bg-white">
                  <summary className="flex cursor-pointer list-none items-center justify-between px-4 py-3 text-sm font-semibold text-slate-950">
                    {item.label}
                    <span className="text-primary">+</span>
                  </summary>
                  <div className="border-t border-slate-100 py-2">
                    {item.children.map((child) => (
                      <Link
                        key={`${item.label}-${child.label}`}
                        href={child.href}
                        onClick={() => setIsOpen(false)}
                        className="block px-4 py-2 text-sm text-slate-600 hover:text-primary"
                      >
                        {child.label}
                      </Link>
                    ))}
                  </div>
                </details>
              ) : (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setIsOpen(false)}
                  className="rounded-lg px-4 py-3 text-sm font-semibold text-slate-950 hover:bg-slate-50"
                >
                  {item.label}
                </Link>
              ),
            )}
            <Button
              href="/kontakt"
              className="mt-2 w-full"
              data-lead-type="general"
              data-lead-subject="Upit: konsultacije"
              data-source-section="Mobile header CTA"
              onClick={() => setIsOpen(false)}
            >
              Zakaži konsultaciju
            </Button>
          </div>
        </motion.div>
        ) : null}
      </AnimatePresence>
    </div>
  );
}