import { Suspense } from "react"
import { listRegions } from "@lib/data/regions"
import { listLocales } from "@lib/data/locales"
import { getLocale } from "@lib/data/locale-actions"
import { StoreRegion } from "@medusajs/types"
import LocalizedClientLink from "@modules/common/components/localized-client-link"
import CartButton from "@modules/layout/components/cart-button"
import SideMenu from "@modules/layout/components/side-menu"

const TOTTI_BROWN = "#7B4A2A"

const CATEGORIES = [
  { label: "🧱 Construction", handle: "/categories/construction-and-open-ended", pill: "bg-orange-400 text-white" },
  { label: "✂️ Fine Motor", handle: "/categories/fine-motor-toys", pill: "bg-pink-400 text-white" },
  { label: "🏃 Movement", handle: "/categories/movement-toys", pill: "bg-sky-400 text-white" },
  { label: "🌈 Sensory", handle: "/categories/sensory-toys", pill: "bg-green-400 text-white" },
  { label: "🔄 Rent", handle: "/categories/toys-for-rent", pill: "bg-violet-400 text-white" },
]

export default async function Nav() {
  const [regions, locales, currentLocale] = await Promise.all([
    listRegions().then((regions: StoreRegion[]) => regions),
    listLocales(),
    getLocale(),
  ])

  return (
    <div className="sticky top-0 inset-x-0 z-50">
      {/* Top bar */}
      <header className="bg-white border-b-2 shadow-sm" style={{ borderColor: `${TOTTI_BROWN}20` }}>
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 flex items-center justify-between h-16">
          {/* Logo */}
          <LocalizedClientLink href="/" className="flex items-center gap-2" data-testid="nav-store-link">
            <img src="/images/totti-logo.png" alt="Totti" className="h-9 w-auto" />
          </LocalizedClientLink>

          {/* Category pills — desktop */}
          <div className="hidden md:flex items-center gap-2">
            <LocalizedClientLink
              href="/store"
              className="px-4 py-1.5 rounded-full text-sm font-bold text-yellow-400 hover:opacity-90 transition-colors"
              style={{ backgroundColor: TOTTI_BROWN }}
            >
              All Products
            </LocalizedClientLink>
            {CATEGORIES.map((cat) => (
              <LocalizedClientLink
                key={cat.handle}
                href={cat.handle}
                className={`px-3 py-1.5 rounded-full text-xs font-bold transition-all hover:scale-105 ${cat.pill}`}
              >
                {cat.label}
              </LocalizedClientLink>
            ))}
          </div>

          {/* Right */}
          <div className="flex items-center gap-4">
            <LocalizedClientLink
              className="hidden md:block text-sm font-semibold hover:opacity-70 transition-opacity"
              style={{ color: TOTTI_BROWN }}
              href="/account"
              data-testid="nav-account-link"
            >
              Account
            </LocalizedClientLink>
            <Suspense
              fallback={
                <LocalizedClientLink
                  className="font-bold text-sm px-4 py-1.5 rounded-full text-yellow-400"
                  style={{ backgroundColor: TOTTI_BROWN }}
                  href="/cart"
                  data-testid="nav-cart-link"
                >
                  Cart (0)
                </LocalizedClientLink>
              }
            >
              <CartButton />
            </Suspense>
            <div className="md:hidden">
              <SideMenu regions={regions} locales={locales} currentLocale={currentLocale} />
            </div>
          </div>
        </nav>
      </header>

      {/* Mobile category scroll */}
      <div className="md:hidden bg-white border-t overflow-x-auto no-scrollbar" style={{ borderColor: `${TOTTI_BROWN}15` }}>
        <div className="flex items-center gap-2 px-4 py-2 min-w-max">
          <LocalizedClientLink
            href="/store"
            className="px-3 py-1 rounded-full text-xs font-bold text-yellow-400"
            style={{ backgroundColor: TOTTI_BROWN }}
          >
            All
          </LocalizedClientLink>
          {CATEGORIES.map((cat) => (
            <LocalizedClientLink
              key={cat.handle}
              href={cat.handle}
              className={`px-3 py-1 rounded-full text-xs font-bold ${cat.pill}`}
            >
              {cat.label}
            </LocalizedClientLink>
          ))}
        </div>
      </div>
    </div>
  )
}