"use client";

import React from "react";
import { Product } from "@/data/products";
import { useCart } from "@/context/CartContext";
import { ShoppingBag, Star, Eye, Check } from "lucide-react";

interface ProductCardProps {
  product: Product;
  onOpenDetails: (product: Product) => void;
}

export function ProductCard({ product, onOpenDetails }: ProductCardProps) {
  const { addToCart } = useCart();
  const [added, setAdded] = React.useState(false);

  const handleAddToCart = (e: React.MouseEvent) => {
    e.stopPropagation();
    if (!product.inStock) return;
    addToCart(product, 1);
    setAdded(true);
    setTimeout(() => setAdded(false), 1500);
  };

  return (
    <div
      data-product-id={product.id}
      data-category={product.category}
      data-price={product.price}
      data-name={product.name}
      onClick={() => onOpenDetails(product)}
      className="group bg-white rounded-2xl border border-stone-200/80 shadow-xs hover:shadow-xl transition-all duration-300 flex flex-col overflow-hidden cursor-pointer transform hover:-translate-y-1 active:scale-[0.98]"
    >
      {/* Product Image Container */}
      <div className="relative aspect-square w-full bg-stone-100 overflow-hidden">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={product.thumbnail}
          alt={product.name}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          loading="lazy"
        />

        {/* Badges Overlay */}
        <div className="absolute top-3 left-3 flex flex-col gap-1.5 z-10">
          {product.isFreeShipping && (
            <span className="bg-emerald-700/90 text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full backdrop-blur-xs shadow-xs">
              Envío Gratis
            </span>
          )}
          {product.badges.includes("Edición Limitada") && (
            <span className="bg-amber-600/90 text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full backdrop-blur-xs shadow-xs">
              Edición Limitada
            </span>
          )}
        </div>

        {/* Out of Stock Overlay */}
        {!product.inStock && (
          <div className="absolute inset-0 bg-stone-900/60 backdrop-blur-xs flex items-center justify-center">
            <span className="bg-stone-900 text-stone-100 text-xs font-bold uppercase tracking-wider px-3.5 py-1.5 rounded-full border border-stone-700 shadow-md">
              Agotado Temporalmente
            </span>
          </div>
        )}

        {/* Quick View Floating Button (visible on mobile, hover on desktop) */}
        <button
          data-quick-view="true"
          onClick={(e) => {
            e.stopPropagation();
            onOpenDetails(product);
          }}
          className="absolute bottom-3 right-3 bg-white/95 hover:bg-white text-stone-800 p-2 sm:p-2.5 rounded-full shadow-md opacity-90 sm:opacity-0 sm:group-hover:opacity-100 transition duration-200 backdrop-blur-xs hover:text-amber-900 active:scale-90"
          title="Vista rápida"
          aria-label={`Ver detalles de ${product.name}`}
        >
          <Eye className="w-4 h-4" />
        </button>
      </div>

      {/* Product Content */}
      <div className="p-4 sm:p-5 flex-1 flex flex-col justify-between space-y-3">
        <div>
          {/* Category & Weight */}
          <div className="flex items-center justify-between text-xs text-stone-500 mb-1">
            <span className="uppercase font-semibold tracking-wider text-[10px] text-amber-800">
              {product.category}
            </span>
            <span>{product.weight}</span>
          </div>

          {/* Title */}
          <h3 className="font-serif font-bold text-stone-900 text-base group-hover:text-amber-900 transition line-clamp-2">
            {product.name}
          </h3>

          {/* Rating */}
          <div className="flex items-center gap-1 mt-1.5">
            <div className="flex text-amber-500">
              {[...Array(5)].map((_, i) => (
                <Star key={i} className="w-3.5 h-3.5 fill-current" />
              ))}
            </div>
            <span className="text-[11px] text-stone-500 font-medium">
              ({product.reviewsCount})
            </span>
          </div>
        </div>

        {/* Price & Action Button */}
        <div className="pt-3 border-t border-stone-100 flex items-center justify-between">
          <div>
            <span className="text-xs text-stone-500 block -mb-1">Precio</span>
            <span className="text-lg font-bold text-amber-950">
              {product.price.toFixed(2)} €
            </span>
          </div>

          <button
            data-add-to-cart="true"
            disabled={!product.inStock}
            onClick={handleAddToCart}
            className={`px-3.5 py-2 rounded-full font-semibold text-xs transition-all duration-200 flex items-center gap-1.5 shadow-xs ${
              !product.inStock
                ? "bg-stone-100 text-stone-400 cursor-not-allowed"
                : added
                ? "bg-emerald-700 text-white"
                : "bg-amber-900 hover:bg-amber-950 text-amber-50 active:scale-95"
            }`}
          >
            {added ? (
              <>
                <Check className="w-3.5 h-3.5" />
                <span>Añadido</span>
              </>
            ) : (
              <>
                <ShoppingBag className="w-3.5 h-3.5" />
                <span>{product.inStock ? "Añadir" : "Agotado"}</span>
              </>
            )}
          </button>
        </div>
      </div>
    </div>
  );
}