"use client";

import Link from "next/link";
import { useEffect, useState, useSyncExternalStore } from "react";
import { createPortal } from "react-dom";
import { SearchAutocomplete } from "@/components/layout/search-autocomplete";
import { useSiteText } from "@/components/providers/site-text-provider";
import { logoutCustomerAction } from "@/app/compte/actions";
import type { MenuSettingsItem } from "@/lib/sanity/queries";

type MobileCategory = {
  _id: string;
  slug: string;
  title: string;
};

export type MobileNavProps = {
  categories: MobileCategory[];
  isAuthenticated: boolean;
  menuItems: MenuSettingsItem[];
  defaultOpen?: boolean;
};

export function MobileNav({ categories, isAuthenticated, menuItems, defaultOpen = false }: MobileNavProps) {
  const { t } = useSiteText();
  const [open, setOpen] = useState(defaultOpen);
  const isClient = useSyncExternalStore(
    () => () => {},
    () => true,
    () => false,
  );
  const portalTarget = isClient ? document.body : null;

  useEffect(() => {
    if (!isClient || !open) {
      document.body.style.overflow = "";
      return;
    }

    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = "";
    };
  }, [isClient, open]);

  return (
    <>
      <button
        type="button"
        aria-label="Ouvrir le menu"
        onClick={() => setOpen(true)}
        className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#ffdede] bg-white text-[var(--foreground)] shadow-[0_10px_24px_rgba(17,28,23,0.08)] transition hover:bg-[var(--surface-2)]"
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-5 w-5">
          <path strokeLinecap="round" d="M4 7h16" />
          <path strokeLinecap="round" d="M4 12h16" />
          <path strokeLinecap="round" d="M4 17h16" />
        </svg>
      </button>

      {portalTarget
        ? createPortal(
            <div
              className={`fixed inset-0 z-[130] bg-[var(--surface)] transition-opacity duration-200 md:hidden ${open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`}
              aria-hidden={!open}
            >
              <div className="flex h-full flex-col">
                <div className="flex items-center justify-between border-b border-[var(--line)] bg-white px-4 py-3">
                  <p className="text-sm font-semibold uppercase tracking-[0.14em] text-[var(--accent-3)]">Menu</p>
                  <button
                    type="button"
                    aria-label="Fermer le menu"
                    onClick={() => setOpen(false)}
                    className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[#ffdede] bg-white text-[var(--foreground)] hover:bg-[var(--surface-2)]"
                  >
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-5 w-5">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M18 6 6 18" />
                    </svg>
                  </button>
                </div>

                <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-4">
                  <SearchAutocomplete className="relative flex items-center rounded-full border border-[#ffdede] bg-white p-1 shadow-[0_12px_30px_rgba(49,18,18,0.1)]" />

                  <nav className="space-y-2">
                    {menuItems.map((item) => (
                      <div key={item._key || `${item.label}-${item.href}`} className="space-y-1">
                        <Link
                          href={item.href}
                          target={item.openInNewTab ? "_blank" : undefined}
                          rel={item.openInNewTab ? "noreferrer" : undefined}
                          onClick={() => setOpen(false)}
                          className="block rounded-xl border border-[#ffe4e4] bg-white px-4 py-3 text-base font-semibold text-[var(--foreground)]"
                        >
                          {item.label}
                        </Link>
                        {item.children?.length ? (
                          <div className="ml-4 space-y-1">
                            {item.children.map((child) => (
                              <Link
                                key={child._key || `${child.label}-${child.href}`}
                                href={child.href}
                                target={child.openInNewTab ? "_blank" : undefined}
                                rel={child.openInNewTab ? "noreferrer" : undefined}
                                onClick={() => setOpen(false)}
                                className="block rounded-lg border border-[#ffe4e4] bg-white px-4 py-2 text-sm font-semibold text-[var(--foreground)]"
                              >
                                {child.label}
                              </Link>
                            ))}
                          </div>
                        ) : null}
                      </div>
                    ))}
                  </nav>

                  <section className="rounded-2xl border border-[#ffe4e4] bg-white p-3">
                    <p className="px-1 pb-2 text-xs font-semibold uppercase tracking-[0.08em] text-[var(--muted)]">{t("header.categories.all")}</p>
                    <div className="space-y-1">
                      <Link
                        href="/boutique"
                        onClick={() => setOpen(false)}
                        className="block rounded-lg px-3 py-2 text-sm font-semibold text-[var(--accent-3)] hover:bg-[var(--surface-2)]"
                      >
                        {t("header.categories.all")}
                      </Link>
                      {categories.length > 0 ? (
                        categories.slice(0, 10).map((category) => (
                          <Link
                            key={category._id}
                            href={`/boutique?categorie=${encodeURIComponent(category.slug)}`}
                            onClick={() => setOpen(false)}
                            className="block rounded-lg px-3 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--surface-2)]"
                          >
                            <span className="line-clamp-1">{category.title}</span>
                          </Link>
                        ))
                      ) : (
                        <p className="px-3 py-2 text-sm text-[var(--muted)]">{t("header.categories.empty")}</p>
                      )}
                    </div>
                  </section>

                  <section className="rounded-2xl border border-[#ffe4e4] bg-white p-3">
                    <p className="px-1 pb-2 text-xs font-semibold uppercase tracking-[0.08em] text-[var(--muted)]">{t("header.nav.account")}</p>
                    {isAuthenticated ? (
                      <div className="space-y-1">
                        <Link
                          href="/compte"
                          onClick={() => setOpen(false)}
                          className="block rounded-lg px-3 py-2 text-sm font-semibold text-[var(--foreground)] hover:bg-[var(--surface-2)]"
                        >
                          {t("header.account.manage")}
                        </Link>
                        <Link
                          href="/compte/commandes"
                          onClick={() => setOpen(false)}
                          className="block rounded-lg px-3 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--surface-2)]"
                        >
                          {t("header.account.orders")}
                        </Link>
                        <Link
                          href="/compte/devis"
                          onClick={() => setOpen(false)}
                          className="block rounded-lg px-3 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--surface-2)]"
                        >
                          {t("header.account.quotes")}
                        </Link>
                        <Link
                          href="/compte?section=payment"
                          onClick={() => setOpen(false)}
                          className="block rounded-lg px-3 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--surface-2)]"
                        >
                          {t("header.account.payment")}
                        </Link>
                        <form action={logoutCustomerAction} className="pt-1">
                          <button
                            type="submit"
                            className="w-full rounded-lg border border-[#f5505040] px-3 py-2 text-left text-sm font-semibold text-[var(--accent)] transition hover:bg-[#fff5f5]"
                          >
                            {t("header.account.logout")}
                          </button>
                        </form>
                      </div>
                    ) : (
                      <div className="space-y-1">
                        <Link
                          href="/connexion"
                          onClick={() => setOpen(false)}
                          className="block rounded-lg border border-[#ffdede] px-3 py-2 text-sm font-semibold text-[var(--accent-3)] hover:bg-[var(--surface-2)]"
                        >
                          {t("header.account.login")}
                        </Link>
                        <Link
                          href="/inscription"
                          onClick={() => setOpen(false)}
                          className="block rounded-lg border border-[#ffdede] px-3 py-2 text-sm font-semibold text-[var(--accent-3)] hover:bg-[var(--surface-2)]"
                        >
                          {t("header.account.signup")}
                        </Link>
                      </div>
                    )}
                  </section>
                </div>
              </div>
            </div>,
            portalTarget,
          )
        : null}
    </>
  );
}