"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
import { Heart } from "lucide-react";

import { Product } from "@/lib/data";
import { isInWishlist, toggleWishlist, subscribeWishlist } from "@/lib/wishlist";

interface ProductCardProps {
  product: Product;
}

const BADGE_MAP: Record<string, { label: string; color: string }> = {
  best:     { label: "Best Seller", color: "rgba(201,162,80,0.9)" },
  new:      { label: "New",         color: "rgba(124,58,237,0.85)" },
  featured: { label: "Featured",    color: "rgba(190,24,93,0.85)" },
};

export function ProductCard({ product }: ProductCardProps) {
  const badge = BADGE_MAP[product.category] ?? BADGE_MAP.featured;
  const [inWish, setInWish] = useState(false);

  useEffect(() => {
    setInWish(isInWishlist(product.id));
    return subscribeWishlist(() => setInWish(isInWishlist(product.id)));
  }, [product.id]);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.15 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      whileHover={{ y: -6, transition: { duration: 0.3, ease: "easeOut" } }}
      className="group relative card-shimmer-effect overflow-hidden rounded-2xl"
      style={{
        background: "linear-gradient(135deg, rgba(18,14,40,0.85) 0%, rgba(10,8,26,0.92) 100%)",
        backdropFilter: "blur(22px) saturate(170%)",
        WebkitBackdropFilter: "blur(22px) saturate(170%)",
        border: "1px solid rgba(201,162,80,0.14)",
        boxShadow: "0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06)"
      }}
    >
      {/* Hover glow ring */}
      <div
        className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-500 group-hover:opacity-100"
        style={{ boxShadow: "0 0 0 1px rgba(201,162,80,0.35), 0 16px 48px rgba(0,0,0,0.6), 0 0 32px rgba(201,162,80,0.12)" }}
      />

      {/* Image container */}
      <Link href={`/product/${product.id}`} className="block overflow-hidden">
        <div className="relative aspect-[3/4] w-full overflow-hidden">
          <Image
            src={product.image}
            alt={product.name}
            fill
            className="object-cover transition-transform duration-700 ease-out group-hover:scale-110"
            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
          />

          {/* Overlay gradient */}
          <div
            className="absolute inset-0 transition-opacity duration-500"
            style={{
              background:
                "linear-gradient(180deg, transparent 50%, rgba(4,4,16,0.85) 100%)"
            }}
          />

          {/* Hover overlay shimmer */}
          <div
            className="absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
            style={{
              background:
                "linear-gradient(45deg, rgba(201,162,80,0.05) 0%, transparent 60%)"
            }}
          />

          {/* Badge */}
          <div className="absolute left-3 top-3">
            <span
              className="inline-flex items-center rounded-full px-2.5 py-1 text-[10px] font-extrabold uppercase tracking-wider text-white shadow-lg"
              style={{ background: badge.color, backdropFilter: "blur(8px)" }}
            >
              {badge.label}
            </span>
          </div>

          {/* Wishlist button */}
          <button
            onClick={(e) => { e.preventDefault(); toggleWishlist(product.id); }}
            className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full transition-all duration-200 hover:scale-110"
            style={{
              background: inWish ? "rgba(239,68,68,0.20)" : "rgba(0,0,0,0.45)",
              border: inWish ? "1.5px solid rgba(239,68,68,0.5)" : "1px solid rgba(255,255,255,0.18)",
              backdropFilter: "blur(6px)",
            }}
            aria-label={inWish ? "Remove from wishlist" : "Add to wishlist"}
          >
            <Heart
              className="h-4 w-4 transition-all duration-200"
              style={{ color: inWish ? "#f87171" : "rgba(255,255,255,0.6)", fill: inWish ? "#f87171" : "none" }}
            />
          </button>
        </div>
      </Link>

      {/* Info section */}
      <div className="p-4">
        <Link href={`/product/${product.id}`} className="block space-y-0.5">
          <h3 className="text-sm font-semibold tracking-tight text-white/90 transition-colors duration-200 group-hover:text-amber-300">
            {product.name}
          </h3>
          <p
            className="text-sm font-bold"
            style={{
              background: "linear-gradient(90deg, #c9a250, #f0d080)",
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
              WebkitTextFillColor: "transparent"
            }}
          >
            ৳{product.price}
          </p>
        </Link>


      </div>
    </motion.div>
  );
}