import Link from "next/link";
import { ArrowLeft, ArrowRight, MessageCircle, X } from "lucide-react";
import type { NavLink } from "@/lib/wp/menus";
import type { SiteSettings } from "@/lib/wp/site";
import { LanguageSwitcher } from "./LanguageSwitcher";
import { localizeHref, type Locale } from "@/lib/i18n/config";

interface MobileMenuProps {
  nav: ReadonlyArray<NavLink>;
  site: SiteSettings;
  locale: Locale;
  pathname: string;
  /** Active search string; preserved when switching language. */
  search?: string;
}

const MARQUEE_WORDS = [
  "Backyard '26",
  "KSA · GULF",
  "Tours & Events",
  "Religious",
  "Team Building",
  "Tourism",
];

/** Arabic-Indic digits 0-9 used when rendering the row index in Arabic. */
const AR_INDIC = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
function localIndex(n: number, locale: Locale): string {
  if (locale !== "ar") return String(n);
  return String(n)
    .split("")
    .map((d) => AR_INDIC[Number(d)] ?? d)
    .join("");
}

export function MobileMenu({ nav, site, locale, pathname, search = "" }: MobileMenuProps) {
  const items = nav.filter((n) => n.label.trim().length > 0);
  const marqueeRow = [...MARQUEE_WORDS, ...MARQUEE_WORDS];
  const contactHref = localizeHref("/contact", locale);
  const whatsappUrl = site.socials.whatsapp_url;
  // Direction-aware "forward" arrow: AR reading direction is right-to-left, so
  // the actionable arrow points left; LTR reading direction points right. The
  // existing `[dir="rtl"] .mobile-menu__arrow { transform: scaleX(-1) }` rule
  // cancels itself out now that we're picking the correct icon at the source.
  const ForwardArrow = locale === "ar" ? ArrowLeft : ArrowRight;

  return (
    <div className="mobile-menu" id="mobileMenu" aria-hidden="true">
      <div className="mobile-menu__bg" aria-hidden="true">
        <div className="mobile-menu__glow" />
        <div className="mobile-menu__grain" />
      </div>

      <div className="mobile-menu__chrome">
        <button
          className="mobile-menu__close close"
          aria-label={site.labels.menu_close || undefined}
          type="button"
        >
          <X width={16} height={16} aria-hidden />
          <span>CLOSE</span>
        </button>

        <div className="mobile-menu__stamp">
          <span className="mobile-menu__stamp-line" />
          <span className="mobile-menu__stamp-title">
            <span className="mobile-menu__stamp-dot">.</span>BACKYARD
          </span>
          <span className="mobile-menu__stamp-meta">EST · 2026 · KSA</span>
        </div>
      </div>

      <nav className="mobile-menu__nav" aria-label={site.labels.menu_toggle || undefined}>
        <ol className="mobile-menu__list">
          {items.map((item, idx) => (
            <li
              key={item.href}
              className="mobile-menu__row"
              style={{ ["--i" as string]: idx }}
            >
              <Link
                href={localizeHref(item.href, locale)}
                className="mobile-menu__link"
                data-nav
              >
                <span className="mobile-menu__rail" aria-hidden />
                <span className="mobile-menu__label">{item.label}</span>
                <span className="mobile-menu__num" aria-hidden>
                  {localIndex(idx + 1, locale)}
                </span>
                <ForwardArrow className="mobile-menu__arrow" width={16} height={16} aria-hidden />
              </Link>
            </li>
          ))}
        </ol>
      </nav>

      <div className="mobile-menu__foot">
        <LanguageSwitcher currentLocale={locale} pathname={pathname} search={search} variant="mobile" />
        {site.labels.menu_eyebrow ? (
          <div className="mobile-menu__eyebrow">
            <span className="mobile-menu__eyebrow-pip" />
            {site.labels.menu_eyebrow}
          </div>
        ) : null}
        <div className="mobile-menu__dock">
          {site.labels.cta_book ? (
            <Link href={contactHref} className="mobile-menu__cta mobile-menu__cta--primary">
              <span>{site.labels.cta_book}</span>
              <ForwardArrow width={16} height={16} aria-hidden />
            </Link>
          ) : null}
          {whatsappUrl ? (
            <a
              href={whatsappUrl}
              className="mobile-menu__cta mobile-menu__cta--ghost"
              target="_blank"
              rel="noopener noreferrer"
            >
              <MessageCircle width={15} height={15} aria-hidden />
              <span>{site.labels.whatsapp_label || "WhatsApp"}</span>
            </a>
          ) : null}
        </div>

        <div className="mobile-menu__marquee" aria-hidden="true">
          <div className="mobile-menu__marquee-track">
            {marqueeRow.map((word, i) => (
              <span key={`${word}-${i}`}>
                {word}
                <span className="mobile-menu__marquee-sep">/</span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}