<template>
  <v-card class="product-card" elevation="2" rounded="lg">
    <!-- Imagen del Producto -->
    <div class="product-image-container">
      <v-img
        :src="product.img"
        :alt="product.name"
        class="product-img"
        cover
        max-height="300"
        aspect-ratio="1"
      >
        <template v-slot:placeholder>
          <div class="d-flex align-center justify-center fill-height">
            <v-progress-circular
              indeterminate
              color="primary"
              size="32"
            ></v-progress-circular>
          </div>
        </template>
      </v-img>
    </div>

    <!-- Contenido de la Tarjeta -->
    <v-card-text class="product-content pa-3 text-center">
      <!-- Título del Producto -->
      <v-tooltip location="top" :text="product.name">
        <template v-slot:activator="{ props }">
          <h3
            class="product-name text-subtitle-1 font-weight-medium mb-2"
            v-bind="props"
          >
            {{ product.name }}
          </h3>
        </template>
      </v-tooltip>

      <!-- Sección de Precios -->
      <div class="prices-section mb-2">
        <!-- Precio Unitario -->
        <div class="price-row mb-1">
          <span class="price-label text-caption">Precio unitario</span>
          <div class="price-value text-body-1 font-weight-bold text-primary">
            {{ currency(product.price) }}
          </div>
        </div>

        <!-- Precio Total -->
        <div class="price-row">
          <span class="price-label text-caption">Precio total</span>
          <v-chip
            color="success"
            variant="flat"
            size="small"
            class="price-total-chip font-weight-bold mt-1"
          >
            {{ currency(product.price * product.quantity) }}
          </v-chip>
        </div>
      </div>
    </v-card-text>

    <!-- Footer con Controles de Cantidad -->
    <v-card-actions class="product-actions pa-2 pb-3 justify-center">
      <div class="quantity-controls">
        <v-btn
          icon
          size="small"
          variant="tonal"
          color="error"
          class="qty-btn"
          @click="decrease(product)"
          :disabled="disabled || product.quantity === 0"
        >
          <v-icon size="20">mdi-minus</v-icon>
        </v-btn>

        <v-text-field
          v-model.number="product.quantity"
          type="number"
          min="0"
          class="quantity-input mx-1"
          variant="solo-filled"
          density="compact"
          hide-details
          single-line
          flat
          aria-label="Cantidad"
          :disabled="disabled"
          @input="handleQuantityChange"
        />

        <v-btn
          icon
          size="small"
          variant="tonal"
          color="success"
          class="qty-btn"
          @click="handleIncrease"
          :disabled="disabled"
        >
          <v-icon size="20">mdi-plus</v-icon>
        </v-btn>
      </div>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true,
    },
    increase: {
      type: Function,
      required: true,
    },
    decrease: {
      type: Function,
      required: true,
    },
    currency: {
      type: Function,
      required: true,
    },
    updateQuantity: {
      type: Function,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleIncrease() {
      this.increase(this.product);
      this.$emit("add-to-cart", this.product);
    },
    handleQuantityChange(value) {
      this.updateQuantity(this.product);
      if (this.product.quantity > 0) {
        this.$emit("add-to-cart", this.product);
      }
    },
  },
};
</script>

<style scoped>
/* ============================================
   CARD CONTAINER
   ============================================ */
.product-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(33, 150, 243, 0.3);
}

/* ============================================
   IMAGEN DEL PRODUCTO
   ============================================ */
.product-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.product-img {
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .product-img {
  transform: scale(1.08);
}

/* ============================================
   CONTENIDO DE LA TARJETA
   ============================================ */
.product-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.product-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.5rem;
  letter-spacing: 0.01em;
}

/* ============================================
   SECCIÓN DE PRECIOS
   ============================================ */
.prices-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.price-label {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 0.65rem;
  color: #9e9e9e;
  font-weight: 500;
}

.price-value {
  color: #1565c0;
  letter-spacing: 0.02em;
  font-size: 1.1rem;
}

.price-total-chip {
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  padding: 0 12px;
  height: 26px;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.25);
}

/* ============================================
   CONTROLES DE CANTIDAD
   ============================================ */
.product-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fafafa;
}

.quantity-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.quantity-input {
  max-width: 65px;
  min-width: 65px;
}

.quantity-input :deep(.v-field) {
  background-color: #ffffff !important;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.quantity-input :deep(.v-field__input) {
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a1a1a;
  padding: 4px 0;
  min-height: 32px;
}

.quantity-input :deep(.v-field__field) {
  padding: 0;
}

.qty-btn {
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.qty-btn:hover {
  transform: scale(1.1);
}

.qty-btn:active {
  transform: scale(0.95);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Móvil pequeño (< 375px) */
@media (max-width: 374px) {
  .product-content {
    padding: 10px;
  }

  .product-name {
    font-size: 0.9rem;
    min-height: 2.4rem;
  }

  .price-value {
    font-size: 1rem;
  }

  .quantity-input {
    max-width: 60px;
    min-width: 60px;
  }
}

/* Móvil estándar (375px - 559px) */
@media (min-width: 375px) and (max-width: 559px) {
  .product-name {
    font-size: 0.85rem;
  }

  .price-value {
    font-size: 0.9rem;
  }
}

/* Tablet (560px - 959px) */
@media (min-width: 560px) and (max-width: 959px) {
  .product-content {
    padding: 10px;
  }

  .product-name {
    font-size: 0.9rem;
    min-height: 2.1rem;
  }

  .price-label {
    font-size: 0.62rem;
  }

  .price-value {
    font-size: 0.95rem;
  }

  .price-total-chip {
    font-size: 0.8rem;
    height: 24px;
  }

  .quantity-input {
    max-width: 58px;
    min-width: 58px;
  }
}

/* Desktop (≥ 960px) */
@media (min-width: 960px) {
  .product-content {
    padding: 12px 10px;
  }

  .product-name {
    font-size: 0.95rem;
    min-height: 2.2rem;
  }

  .price-label {
    font-size: 0.63rem;
  }

  .price-value {
    font-size: 1rem;
  }

  .price-total-chip {
    font-size: 0.85rem;
    height: 25px;
    padding: 0 11px;
  }

  .product-actions {
    padding: 6px;
    padding-bottom: 8px;
  }

  .quantity-input {
    max-width: 58px;
    min-width: 58px;
  }

  .qty-btn {
    width: 32px;
    height: 32px;
  }
}

/* Desktop Large (≥ 1280px) */
@media (min-width: 1280px) {
  .product-content {
    padding: 14px 12px;
  }

  .product-name {
    font-size: 2rem;
    min-height: 2.4rem;
  }

  .price-value {
    font-size: 1.05rem;
  }

  .price-total-chip {
    font-size: 0.9rem;
    height: 26px;
  }
}

/* Desktop Extra Large (≥ 1920px) */
@media (min-width: 1920px) {
  .product-name {
    font-size: 1.05rem;
    min-height: 2.5rem;
  }

  .price-value {
    font-size: 1.1rem;
  }
}
</style>
