<?php
/**
 * TechShop Perú - Componente: Tarjeta de Producto
 * 
 * Reusable: muestra una tarjeta de producto con imagen, precio, descuento y acciones.
 * Espera la variable $p (array asociativo del producto).
 * 
 * @package TechShop Perú
 * @version 1.0
 */

if (!isset($p) || !is_array($p)) return;

$precio_final = precio_final($p);
$tiene_oferta = tiene_oferta($p);
$descuento = $tiene_oferta ? calc_descuento((float)$p['precio'], (float)$p['precio_oferta']) : 0;
$img_principal = !empty($p['imagen_principal'])
    ? UPLOADS_URL . '/products/' . $p['imagen_principal']
    : ASSETS_URL . '/images/placeholder-product.svg';
$url_producto = url('pages/detalle.php?slug=' . $p['slug']);

// Badges automáticos inteligentes (Mejora 16)
$badge_extra = '';
if (($p['stock'] ?? 0) > 0 && ($p['stock'] ?? 0) <= 3) {
    $badge_extra = '<span class="badge-smart badge-danger">⚡ Últimas ' . $p['stock'] . ' uds.</span>';
} elseif (!empty($p['destacado'])) {
    $badge_extra = '<span class="badge-smart badge-gold">★ Más Vendido</span>';
} elseif ($tiene_oferta && $descuento >= 20) {
    $badge_extra = '<span class="badge-smart badge-fire">🔥 Oportunidad</span>';
}
?>
<div class="product-card">
    <div class="card-img-wrapper position-relative">
        <a href="<?= $url_producto ?>">
            <img src="<?= $img_principal ?>" alt="<?= e($p['nombre']) ?>" class="img-fluid" loading="lazy"
                 onerror="this.onerror=null;this.src='<?= ASSETS_URL ?>/images/placeholder-product.svg'">
        </a>
        <!-- Badge descuento -->
        <?php if ($tiene_oferta): ?>
        <span class="badge-discount">-<?= $descuento ?>%</span>
        <?php endif; ?>
        <!-- Badge inteligente automático -->
        <?= $badge_extra ?>
        <!-- Favorito -->
        <button class="btn-fav" data-producto-id="<?= $p['id'] ?>" title="Agregar a favoritos" data-bs-toggle="tooltip">
            <i class="bi bi-heart"></i>
        </button>
        <!-- Quick View Button -->
        <button class="btn-quick-view" data-producto-id="<?= $p['id'] ?>" title="Vista rápida">
            <i class="bi bi-eye"></i>
        </button>
    </div>
    <div class="card-body d-flex flex-column">
        <div class="d-flex align-items-center justify-content-between mb-1">
            <span class="product-brand"><?= e($p['marca_nombre'] ?? '') ?></span>
            <span class="product-sku"><?= e($p['sku'] ?? '') ?></span>
        </div>
        <h6 class="product-title flex-grow-0">
            <a href="<?= $url_producto ?>" class="text-decoration-none"><?= e($p['nombre']) ?></a>
        </h6>

        <?php if (!empty($p['descripcion_corta'])): ?>
        <div class="product-specs mb-2" aria-label="Especificaciones">
            <?php
            // Mostrar las 3 primeras specs técnicas clave (estilo magitech / pcfactory)
            $specs = array_map('trim', explode(',', $p['descripcion_corta']));
            $specs = array_slice($specs, 0, 3);
            foreach ($specs as $spec): ?>
            <span class="spec-chip"><?= e($spec) ?></span>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <div class="d-flex align-items-center gap-1 mb-2">
            <?= render_estrellas((float)($p['calificacion'] ?? 0)) ?>
            <small class="text-muted">(<?= (int)($p['num_calificaciones'] ?? 0) ?>)</small>
        </div>

        <div class="product-price-row mb-2">
            <div class="d-flex align-items-baseline gap-2">
                <span class="price-current"><?= format_precio((float)$precio_final) ?></span>
                <?php if ($tiene_oferta): ?>
                <span class="price-original"><?= format_precio((float)$p['precio']) ?></span>
                <?php endif; ?>
            </div>
        </div>

        <div class="product-stock mb-2" style="font-size:.82rem;">
            <?php if ($p['stock'] > 0): ?>
            <span class="stock-ok"><i class="bi bi-check-circle-fill me-1"></i>En stock (<?= $p['stock'] ?> uds.)</span>
            <?php else: ?>
            <span class="stock-out"><i class="bi bi-x-circle-fill me-1"></i>Agotado</span>
            <?php endif; ?>
        </div>

        <?php if ($p['stock'] > 0): ?>
        <button class="btn btn-primary btn-sm add-to-cart-btn mb-1 w-100" data-producto-id="<?= $p['id'] ?>">
            <i class="bi bi-cart-plus me-1"></i> Agregar al carrito
        </button>
        <?php endif; ?>
        <div class="d-flex gap-1 mt-1">
            <button class="btn btn-outline-secondary btn-sm btn-compare flex-grow-1" data-producto-id="<?= $p['id'] ?>" title="Comparar">
                <i class="bi bi-arrow-left-right"></i>
            </button>
            <button class="btn btn-outline-info btn-sm btn-quick-view" data-producto-id="<?= $p['id'] ?>" title="Vista rápida">
                <i class="bi bi-eye"></i>
            </button>
        </div>
    </div>
</div>
