'use client';

import Link from 'next/link';
import Image from 'next/image';
import { motion } from 'framer-motion';
import { Icon, WhatsappGlyph } from './icons';
import { waProductQuote } from '@/lib/whatsapp';

export interface ProductCardItem {
    slug: string;
    title: string;
    image: string;
    category?: string;
    sku?: string;
    inStock?: boolean;
}

export function ProductCard({ p, eager = false }: { p: ProductCardItem; eager?: boolean }) {
    return (
        <motion.article
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, amount: 0.3 }}
            transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
            className="group relative glass border-glow rounded-xl overflow-hidden flex flex-col"
        >
            {/* Stock pill */}
            <span
                className={`absolute top-3 left-3 z-10 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] uppercase tracking-widest font-bold ${
                    p.inStock === false
                        ? 'bg-danger/20 text-red-300 border border-danger/40'
                        : 'bg-success/15 text-emerald-300 border border-success/40'
                }`}
            >
                <span className="w-1.5 h-1.5 rounded-full bg-current" />
                {p.inStock === false ? 'Inquire' : 'In Stock'}
            </span>

            <Link href={`/products/${p.slug}`} className="block bg-white aspect-square relative overflow-hidden">
                {p.image ? (
                    <Image
                        src={p.image}
                        alt={p.title}
                        fill
                        sizes="(max-width: 640px) 80vw, (max-width: 1024px) 33vw, 22vw"
                        loading={eager ? 'eager' : 'lazy'}
                        className="object-contain p-5 transition-transform duration-500 group-hover:scale-105"
                    />
                ) : (
                    <div className="w-full h-full flex items-center justify-center text-steel-300">
                        <Icon.Cog className="w-16 h-16" />
                    </div>
                )}
            </Link>

            <div className="p-4 flex flex-col gap-2 flex-1">
                {p.category && (
                    <span className="font-mono text-[10px] uppercase tracking-widest text-orange-500">{p.category}</span>
                )}
                <Link href={`/products/${p.slug}`} className="block">
                    <h3 className="font-semibold text-[0.95rem] leading-snug text-white line-clamp-2 group-hover:text-orange-500 transition-colors">
                        {p.title}
                    </h3>
                </Link>
                {p.sku && <p className="font-mono text-[11px] text-steel-500">SKU: {p.sku}</p>}

                <div className="mt-auto pt-3 grid grid-cols-[1fr_auto] gap-2">
                    <Link
                        href={`/products/${p.slug}`}
                        className="text-xs font-semibold uppercase tracking-wider text-steel-200 hover:text-orange-500 inline-flex items-center gap-1 transition-colors"
                    >
                        View Details <Icon.ArrowRight className="w-3 h-3" />
                    </Link>
                    <a
                        href={waProductQuote(p.title)}
                        target="_blank"
                        rel="noopener"
                        aria-label={`Inquire on WhatsApp about ${p.title}`}
                        className="inline-flex items-center justify-center w-9 h-9 rounded-md bg-[var(--color-whatsapp)] text-white hover:brightness-110"
                    >
                        <WhatsappGlyph className="w-4 h-4" />
                    </a>
                </div>
            </div>
        </motion.article>
    );
}