import { Link } from "@tanstack/react-router";
import { toast } from "sonner";

import { bdt, toBn } from "@/lib/bn";
import { addToCart } from "@/lib/cart";
import { setCartOpen } from "@/lib/ui-store";
import { track } from "@/lib/pixel";
import type { Product } from "@/lib/catalog";

export function ProductCard({ product }: { product: Product }) {
  const discount =
    product.oldPrice && product.oldPrice > product.price
      ? Math.round(((product.oldPrice - product.price) / product.oldPrice) * 100)
      : 0;
  const soldOut = product.stock <= 0;

  return (
    <article className="group flex flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
      <Link
        to="/product/$slug"
        params={{ slug: product.slug }}
        className="relative block overflow-hidden bg-muted"
      >
        <img
          src={product.images[0]}
          alt={product.name}
          loading="lazy"
          width={1024}
          height={1024}
          className="aspect-square w-full object-cover transition duration-500 group-hover:scale-105"
        />
        {discount > 0 && (
          <span className="absolute left-3 top-3 rounded-full bg-destructive px-3 py-1 text-xs font-semibold text-destructive-foreground">
            {toBn(discount)}% ছাড়
          </span>
        )}
        {soldOut && (
          <span className="absolute inset-x-0 bottom-0 bg-foreground/80 py-2 text-center text-sm font-semibold text-background">
            স্টক শেষ
          </span>
        )}
      </Link>

      <div className="flex flex-1 flex-col gap-2 p-4">
        <p className="text-xs text-muted-foreground">
          <i className="fa-solid fa-tag mr-1" aria-hidden="true" />
          {product.category} · {product.unitLabel}
        </p>
        <h3 className="text-base font-semibold leading-snug text-foreground">
          <Link to="/product/$slug" params={{ slug: product.slug }}>
            {product.name}
          </Link>
        </h3>
        <div className="flex items-center gap-1 text-xs text-accent">
          {Array.from({ length: 5 }).map((_, i) => (
            <i
              key={i}
              className={i < Math.round(product.rating) ? "fa-solid fa-star" : "fa-regular fa-star"}
              aria-hidden="true"
            />
          ))}
          <span className="ml-1 text-muted-foreground">({toBn(product.reviewCount)})</span>
        </div>
        <div className="mt-auto flex items-baseline gap-2">
          <span className="text-lg font-bold text-primary">{bdt(product.price)}</span>
          {product.oldPrice && (
            <span className="text-sm text-muted-foreground line-through">
              {bdt(product.oldPrice)}
            </span>
          )}
        </div>
        <button
          type="button"
          disabled={soldOut}
          onClick={() => {
            addToCart({
              productId: product.id,
              slug: product.slug,
              name: product.name,
              image: product.images[0]!,
              variant: product.variants?.[0]?.label,
              price: product.price,
              qty: 1,
            });
            track("AddToCart", { content_name: product.name, value: product.price, currency: "BDT" });
            setCartOpen(true);
            toast.success("পণ্যটি কার্টে যোগ হয়েছে");
          }}
          className="mt-2 inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition hover:bg-primary-deep disabled:cursor-not-allowed disabled:opacity-50"
        >
          <i className="fa-solid fa-cart-plus" aria-hidden="true" />
          {soldOut ? "স্টক শেষ" : "কার্টে যোগ করুন"}
        </button>
      </div>
    </article>
  );
}