/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React from "react";
import Link from "next/link";
import Image from "next/image";
import type { Product } from "@/types/product/product";
import { useCart } from "@/context/CartContext";
import { ShareButton } from "@/components/ui/share-button";

export default function ProductCard({ product }: { product: Product }) {
  const { addToCart } = useCart();
  const primaryImage =
    product.images?.find((img) => img.is_primary === true)?.image_url ??
    product.images?.[0]?.image_url ??
    "/placeholder-product.svg";

  return (
    <div className="group relative aspect-[4/5] overflow-hidden rounded-2xl border bg-card shadow-md transition-all duration-500 ease-out hover:-translate-y-1.5 hover:shadow-2xl hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.5)]">
      {/* Full width image Link */}
      <Link href={`/products/${product.slug}`} className="absolute inset-0 block overflow-hidden bg-muted">
        <Image
          src={primaryImage}
          alt={product.name}
          fill
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 25vw"
          className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
        />
        
        {/* Share Button */}
        <div className="absolute top-3 left-3 z-20 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
          <ShareButton 
            url={`${typeof window !== 'undefined' ? window.location.origin : ''}/products/${product.slug}`} 
            title={product.name} 
          />
        </div>

        {product.total_sold !== undefined && product.total_sold > 0 && (
          <div className="absolute top-3 right-3 z-10 filter drop-shadow-md transition-transform duration-300 group-hover:scale-110">
            <div className="relative flex h-14 w-14 items-center justify-center">
              <div 
                className="absolute inset-0 bg-gradient-to-br from-red-500 via-red-600 to-red-800 shadow-inner"
                style={{
                  clipPath: "polygon(50% 0%, 55% 5%, 61% 1%, 65% 7%, 72% 5%, 75% 12%, 82% 11%, 83% 19%, 90% 20%, 89% 28%, 95% 31%, 93% 39%, 98% 44%, 94% 51%, 98% 57%, 93% 63%, 96% 70%, 89% 74%, 90% 82%, 82% 84%, 81% 91%, 74% 91%, 71% 97%, 64% 95%, 60% 99%, 53% 96%, 48% 99%, 43% 95%, 38% 98%, 33% 93%, 27% 94%, 24% 88%, 18% 87%, 17% 79%, 10% 77%, 11% 69%, 5% 65%, 7% 57%, 2% 51%, 6% 45%, 3% 37%, 9% 32%, 8% 24%, 15% 21%, 17% 13%, 24% 12%, 27% 5%, 34% 7%, 38% 1%, 44% 5%)"
                }}
              />
              <div className="relative z-10 flex flex-col items-center justify-center rounded-full border border-red-300/40 p-1 text-center text-white">
                <span className="text-[11px] font-black leading-none tracking-tight text-amber-200">
                  {product.total_sold}
                </span>
                <span className="text-[8px] font-extrabold uppercase tracking-tighter text-white">
                  SOLD
                </span>
              </div>
            </div>
          </div>
        )}

        {!product.in_stock && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-[2px]">
            <span className="rounded-full bg-red-600/90 px-3.5 py-1 text-xs font-semibold text-white tracking-wider shadow-lg">
              Out of Stock
            </span>
          </div>
        )}
      </Link>

      {/* Glassmorphic floating bottom segment */}
      <div className="absolute bottom-3 left-3 right-3 z-10 overflow-visible rounded-xl border border-white/20 bg-black/40 p-4 md:p-5 backdrop-blur-lg transition-all duration-500 ease-out group-hover:bg-black/55 shadow-lg">
        <div className="flex flex-col gap-1.5 text-white">
          <Link href={`/products/${product.slug}`}>
            <h3 className="font-bold text-base md:text-lg leading-tight text-white group-hover:text-brand-accent-light transition-colors duration-500 ease-out line-clamp-1">
              {product.name}
            </h3>
          </Link>
          <p className="line-clamp-2 text-xs md:text-sm text-zinc-200/95 font-normal">
            {product.description}
          </p>

          <div className="mt-2.5 flex items-center justify-between gap-2">
            {/* Price display */}
            <div className="flex flex-col">
              {product.discount_type && product.discount_value && Number(product.discount_value) > 0 ? (
                <>
                  <span className="text-xs text-zinc-400 line-through">
                    ৳{Number(product.base_price || 0).toLocaleString()}
                  </span>
                  <span className="text-sm md:text-base font-extrabold leading-tight text-emerald-400">
                    ৳{Number(product.final_price || product.base_price || 0).toLocaleString()}
                  </span>
                </>
              ) : (
                <span className="text-sm md:text-base font-extrabold leading-tight text-white">
                  ৳{Number(product.final_price || product.base_price || 0).toLocaleString()}
                </span>
              )}
            </div>

            {/* Actions button */}
            {product.in_stock ? (
              <button
                type="button"
                onClick={(e) => {
                  e.preventDefault();
                  e.stopPropagation();
                  addToCart(product, 1);
                }}
                className="shrink-0 rounded-md bg-white px-3.5 py-2 text-xs font-bold uppercase tracking-wider text-black transition-all duration-300 ease-out hover:bg-brand-accent hover:text-white cursor-pointer relative z-20"
              >
                Add to Cart
              </button>
            ) : (
              <span className="rounded-md bg-white/25 px-3.5 py-2 text-xs font-bold uppercase tracking-wider text-zinc-300 cursor-not-allowed">
                Sold Out
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}