import { getProductPrice } from "@lib/util/get-product-price"
import { HttpTypes } from "@medusajs/types"
import LocalizedClientLink from "@modules/common/components/localized-client-link"
import Image from "next/image"
import PlaceholderImage from "@modules/common/icons/placeholder-image"
import PreviewPrice from "./price"

const CATEGORY_COLORS: Record<string, { bg: string; accent: string; shadow: string }> = {
  "construction": { bg: "bg-orange-50", accent: "bg-orange-400", shadow: "hover:shadow-[4px_4px_0px_#fb923c]" },
  "fine motor":   { bg: "bg-pink-50",   accent: "bg-pink-400",   shadow: "hover:shadow-[4px_4px_0px_#f472b6]" },
  "movement":     { bg: "bg-sky-50",    accent: "bg-sky-400",    shadow: "hover:shadow-[4px_4px_0px_#38bdf8]" },
  "sensory":      { bg: "bg-green-50",  accent: "bg-green-400",  shadow: "hover:shadow-[4px_4px_0px_#4ade80]" },
  "rent":         { bg: "bg-violet-50", accent: "bg-violet-400", shadow: "hover:shadow-[4px_4px_0px_#a78bfa]" },
}

function getCategoryStyle(categoryName?: string) {
  if (!categoryName) return { bg: "bg-gray-50", accent: "bg-yellow-400", shadow: "hover:shadow-[4px_4px_0px_#facc15]" }
  const key = Object.keys(CATEGORY_COLORS).find((k) => categoryName.toLowerCase().includes(k))
  return key ? CATEGORY_COLORS[key] : { bg: "bg-gray-50", accent: "bg-yellow-400", shadow: "hover:shadow-[4px_4px_0px_#facc15]" }
}

export default async function ProductPreview({
  product,
  region,
}: {
  product: HttpTypes.StoreProduct
  isFeatured?: boolean
  region: HttpTypes.StoreRegion
}) {
  const { cheapestPrice } = getProductPrice({ product })
  const image = product.thumbnail || product.images?.[0]?.url
  const category = product.categories?.[0]?.name
  const style = getCategoryStyle(category)

  return (
    <LocalizedClientLink href={`/products/${product.handle}`} className="group block">
      <div
        data-testid="product-wrapper"
        className={`rounded-2xl overflow-hidden border-2 border-black transition-all duration-200 ${style.shadow} ${style.bg}`}
      >
        {/* Color accent bar */}
        <div className={`h-1.5 w-full ${style.accent}`} />

        {/* Image */}
        <div className="relative aspect-square w-full bg-white overflow-hidden">
          {image ? (
            <Image
              src={image}
              alt={product.title}
              fill
              className="object-cover group-hover:scale-105 transition-transform duration-300"
              sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
              quality={75}
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center text-gray-200">
              <PlaceholderImage size={48} />
            </div>
          )}

          {/* Quick view pill on hover */}
          <div className="absolute inset-0 flex items-end justify-center pb-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <span className="bg-black text-yellow-400 text-xs font-black px-4 py-1.5 rounded-full shadow-lg">
              View Product →
            </span>
          </div>
        </div>

        {/* Info */}
        <div className="p-3 flex flex-col gap-1.5">
          {category && (
            <span className={`text-[10px] font-black uppercase tracking-widest text-white ${style.accent} px-2 py-0.5 rounded-full w-fit`}>
              {category}
            </span>
          )}
          <p className="text-sm font-bold text-black leading-snug line-clamp-2" data-testid="product-title">
            {product.title}
          </p>
          <div className="text-sm font-black text-black">
            {cheapestPrice && <PreviewPrice price={cheapestPrice} />}
          </div>
        </div>
      </div>
    </LocalizedClientLink>
  )
}