import type { ReactNode } from "react";
import type { Shop } from "@/lib/shop";

const themes: Record<string, { wrap: string; nav: string; name: string; muted: string }> = {
  luxe: {
    wrap: "min-h-full bg-[#120c07] text-[#f4e6c5]",
    nav: "border-[#c9a227]/40 bg-[#1a1208]",
    name: "text-[#e8c547]",
    muted: "text-[#d7c49a]/80",
  },
  street: {
    wrap: "min-h-full bg-black text-white",
    nav: "border-white/15 bg-zinc-950",
    name: "uppercase tracking-[0.2em]",
    muted: "text-zinc-400",
  },
  boutique: {
    wrap: "min-h-full bg-[#faf4ef] text-[#3a2a28]",
    nav: "border-[#e7d5ce] bg-white",
    name: "text-[#9a4d57]",
    muted: "text-[#7a5d57]",
  },
  noir: {
    wrap: "min-h-full bg-white text-black",
    nav: "border-black bg-black text-white",
    name: "tracking-tight",
    muted: "text-neutral-600",
  },
  oasis: {
    wrap: "min-h-full bg-[#f4efe4] text-[#1c2a22]",
    nav: "border-[#cbbd9a] bg-[#0b6b4a] text-white",
    name: "text-white",
    muted: "text-[#5a6d64]",
  },
};

export function ShopShell({
  shop,
  children,
}: {
  shop: Shop;
  children: ReactNode;
}) {
  const theme = themes[shop.template] ?? themes.luxe;
  const dir = shop.locale === "ar" ? "rtl" : "ltr";
  return (
    <div className={theme.wrap} dir={dir}>
      <header className={`border-b px-4 py-4 ${theme.nav}`}>
        <a href={`/shop/${shop.slug}`} className={`text-xl font-bold ${theme.name}`}>
          {shop.name}
        </a>
        {shop.bio ? <p className={`mt-1 max-w-2xl text-sm ${shop.template === "oasis" || shop.template === "noir" ? "opacity-80" : theme.muted}`}>{shop.bio}</p> : null}
      </header>
      <main className="mx-auto w-full max-w-5xl px-4 py-8">{children}</main>
    </div>
  );
}

export function ProductCard({
  href,
  title,
  price,
  currency,
  photo,
  template,
}: {
  href: string;
  title: string;
  price: number;
  currency: string;
  photo?: string;
  template: string;
}) {
  const card =
    template === "street"
      ? "bg-zinc-900"
      : template === "luxe"
        ? "bg-[#1c140c] border border-[#c9a227]/30"
        : template === "noir"
          ? "border border-black"
          : "bg-white shadow";
  return (
    <a href={href} className={`block overflow-hidden rounded-3xl ${card}`}>
      {photo ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={photo} alt={title} className="aspect-[4/5] w-full object-cover" />
      ) : (
        <div className="aspect-[4/5] bg-black/10" />
      )}
      <div className="p-4">
        <h2 className="font-semibold">{title}</h2>
        <p className="mt-1 text-sm opacity-80">
          {price} {currency}
        </p>
      </div>
    </a>
  );
}