import type { Product } from '@/payload-types'

import { Media } from '@/components/Media'
import { ProductPrice } from '@/components/ProductPrice'
import clsx from 'clsx'
import Link from 'next/link'
import React from 'react'

type Props = {
  product: Partial<Product>
}

export const ProductGridItem: React.FC<Props> = ({ product }) => {
  const { badge, commonName, gallery, ratingSummary, title } = product

  const image =
    gallery?.[0]?.image && typeof gallery[0]?.image !== 'string' ? gallery[0]?.image : false
  const badgeLabel = typeof badge?.label === 'string' ? badge.label.trim() : ''
  const badgeTone = badge?.tone || 'default'
  const commonNameLabel = typeof commonName === 'string' ? commonName.trim() : ''
  const ratingAverage =
    typeof ratingSummary?.average === 'number' && ratingSummary.average > 0
      ? ratingSummary.average
      : null
  const ratingCount =
    typeof ratingSummary?.count === 'number' && ratingSummary.count > 0 ? ratingSummary.count : null

  return (
    <Link
      className="group relative flex h-full w-full flex-col overflow-hidden rounded-xl border border-[#dbe8d7]/70 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#b9d8c2] hover:shadow-lg hover:shadow-[#003b29]/10 dark:bg-card"
      href={`/products/${product.slug}`}
    >
      {badgeLabel ? (
        <span
          className={clsx(
            'absolute left-2 top-2 z-10 rounded-full px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider',
            {
              'bg-primary text-primary-foreground': badgeTone === 'default',
              'bg-amber-500 text-black': badgeTone === 'highlight',
              'bg-red-600 text-white': badgeTone === 'sale',
            },
          )}
        >
          {badgeLabel}
        </span>
      ) : null}

      {image ? (
        <div className="relative aspect-[4/5] w-full shrink-0 overflow-hidden rounded-t-xl bg-[#eef4e9]">
          <Media
            fill
            htmlElement={null}
            imgClassName="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
            resource={image}
          />
        </div>
      ) : null}

      <div className="flex flex-1 flex-col justify-between gap-3 p-3">
        <div className="space-y-0.5">
          <h3 className="line-clamp-2 text-[14px] font-bold leading-tight text-[#063f2b]">
            {title}
          </h3>
          {commonNameLabel ? (
            <p className="line-clamp-1 text-[11px] italic text-muted-foreground">
              {commonNameLabel}
            </p>
          ) : null}

          {ratingAverage !== null ? (
            <div className="mt-1 flex items-center gap-1 text-[11px] font-medium text-muted-foreground/80">
              <span>Rating {ratingAverage.toFixed(1)}</span>
              {ratingCount !== null ? <span>({ratingCount})</span> : null}
            </div>
          ) : null}
        </div>

        <div className="border-t border-[#dbe8d7]/70 pt-2">
          <ProductPrice className="text-[17px] font-bold text-[#063f2b]" product={product} />
          <span className="mt-2 flex w-full items-center justify-center rounded-lg bg-[#14422d] py-1.5 text-[12px] font-bold text-white transition-colors group-hover:bg-[#063f2b]">
            Lihat detail
          </span>
        </div>
      </div>
    </Link>
  )
}