"use client";

import Link from 'next/link';
import Image from 'next/image';
import '@/styles/Products.css';

interface Product {
    id: number;
    name: string;
    description: string;
    price: number;
    original_price?: number;
    images: string[];
    primary_image?: string;
    stock_status: 'in_stock' | 'out_of_stock';
    product_condition: string;
    badge_text?: string;
    badge_color?: string;
}

interface ProductCardProps {
    product: Product;
}

const CONDITION_MAP: Record<string, string> = {
    'New': 'Ny',
    'Excellent': 'Utmärkt',
    'Good': 'Bra',
    'Fair': 'Okej',
    'Poor': 'Sliten',
    'new': 'Ny',
    'excellent': 'Utmärkt',
    'good': 'Bra',
    'fair': 'Okej',
    'poor': 'Sliten'
};

// Consistent number formatting to avoid hydration mismatch
function formatPrice(num: number): string {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
}

export default function ProductCard({ product }: ProductCardProps) {
    const imageUrl = product.primary_image || product.images?.[0] || '/placeholder.png';
    const hasDiscount = product.original_price && product.original_price > product.price;
    const discountPercentage = hasDiscount
        ? Math.round(((product.original_price! - product.price) / product.original_price!) * 100)
        : 0;

    return (
        <div className="product-card">
            {/* Image */}
            <div className="product-card-image">
                {product.badge_text && (
                    <div
                        className="product-card-badge"
                        style={{ backgroundColor: product.badge_color || '#000' }}
                    >
                        {product.badge_text}
                    </div>
                )}

                {hasDiscount && (
                    <div className="product-card-discount">
                        -{discountPercentage}%
                    </div>
                )}

                <Link href={`/products/${product.id}`}>
                    <Image
                        src={imageUrl}
                        alt={product.name}
                        fill
                        style={{ objectFit: 'cover' }}
                        sizes="(max-width: 480px) 100vw, (max-width: 900px) 50vw, (max-width: 1200px) 33vw, 25vw"
                        unoptimized={imageUrl.startsWith('http')}
                    />
                </Link>
            </div>

            {/* Content */}
            <div className="product-card-content">
                {/* Condition */}
                <div className="product-card-condition">
                    {CONDITION_MAP[product.product_condition] || product.product_condition}
                </div>

                {/* Title with stock indicator */}
                <div className="product-card-title">
                    <Link href={`/products/${product.id}`} className="block">
                        <span className="block">{product.name}</span>
                    </Link>
                </div>

                <div className="product-card-footer">
                    <div className="product-card-price">
                        {/* Always render layout for original price for alignment, hide if no discount */}
                        <span className={`product-card-price-original ${!hasDiscount ? 'invisible' : ''}`}>
                            {hasDiscount ? `${formatPrice(product.original_price!)} kr` : '0 kr'}
                        </span>
                        <span className={`product-card-price-current ${hasDiscount ? 'discount' : ''}`}>
                            {formatPrice(product.price)} kr
                        </span>
                    </div>

                    <div className={`flex items-center gap-1.5 text-[0.65rem] font-bold uppercase tracking-wider ${product.stock_status === 'in_stock' ? 'text-green-600' : 'text-red-500'}`}>
                        <div className={`w-1.5 h-1.5 rounded-full ${product.stock_status === 'in_stock' ? 'bg-green-600' : 'bg-red-500'}`} />
                        {product.stock_status === 'in_stock' ? 'I lager' : 'Slutsåld'}
                    </div>
                </div>
            </div>
        </div>
    );
}
