import Link from "next/link";
import type { Metadata } from "next";
import SiteNav from "@/components/site-nav";
import SiteFooter from "@/components/site-footer";
import { listOpenShops } from "@db/queries/merch";
import { formatPrice } from "@/lib/format";

export const metadata: Metadata = {
  title: "Merch · VibePass Tickets",
  description: "Official merchandise from festivals and events on VibePass.",
};

export const dynamic = "force-dynamic";

export default async function ShopDirectoryPage() {
  const shops = await listOpenShops();

  return (
    <div className="flex-1 bg-bg text-ink">
      <SiteNav />
      <main className="mx-auto max-w-6xl px-4 py-12">
        <p className="text-xs font-semibold uppercase tracking-[0.3em] text-brand-green-h">Merch</p>
        <h1 className="mt-2 text-3xl font-black">Official event merchandise</h1>
        <p className="mt-2 max-w-xl text-muted">Wear the vibe. Shops run by the organizers behind your favourite events.</p>

        {shops.length === 0 ? (
          <p className="mt-10 text-muted">No shops are open right now — check back soon.</p>
        ) : (
          <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {shops.map((s) => (
              <Link
                key={s.id}
                href={`/shop/${s.slug}`}
                className="group overflow-hidden rounded-2xl border border-line bg-panel transition-colors hover:border-brand-green"
              >
                <div className="aspect-[16/9] bg-bg">
                  {s.bannerUrl && (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={s.bannerUrl} alt="" className="h-full w-full object-cover" />
                  )}
                </div>
                <div className="p-4">
                  <h2 className="font-bold group-hover:text-brand-green-h">{s.name}</h2>
                  <p className="mt-1 text-sm text-muted">
                    {s.productCount} item{s.productCount === 1 ? "" : "s"} · from {formatPrice(s.fromCents, "kes")}
                  </p>
                </div>
              </Link>
            ))}
          </div>
        )}
      </main>
      <SiteFooter />
    </div>
  );
}