<template>
  <q-card class="partner-card" :class="{ 'cursor-pointer': editable }" flat>
    <div class="partner-card__logo-wrap q-pa-md">
      <q-img
        v-if="partner.logo?.url"
        :src="partner.logo.url"
        fit="cover"
        class="full-width full-height partner-card__logo-img"
      />
      <div v-else class="full-width full-height flex flex-center partner-card__logo-placeholder">
        <q-icon name="mdi-domain" size="48px" color="grey-4" />
      </div>
    </div>

    <q-card-section class="q-pt-sm q-pb-xs">
      <div class="row items-center justify-between no-wrap q-mb-xs" style="gap: 6px">
        <div class="text-subtitle2 text-weight-bold ellipsis partner-card__name">
          {{ partner.company_name }}
        </div>
        <q-chip v-if="partner.category?.name" dense class="partner-card__category-chip q-ma-none flex-shrink-0">
          {{ partner.category.name }}
        </q-chip>
        <div v-if="partner.discount_percentage" class="partner-card__discount-badge flex-shrink-0">
          {{ $t('associado.discount')}} -{{ partner.discount_percentage }}%
        </div>
      </div>

      <div class="row items-end no-wrap">
        <div class="col">
          <div class="text-caption partner-card__info row items-center q-mb-xs">
            <q-icon name="mdi-map-marker-outline" size="14px" class="q-mr-xs" />
            <span class="ellipsis">{{ addressLine ?? '--' }}</span>
          </div>
          <div class="text-caption partner-card__info row items-center">
            <q-icon name="mdi-phone-outline" size="14px" class="q-mr-xs" />
            {{ partner.phone ?? '--' }}
          </div>
        </div>
        <q-btn
          v-if="editable"
          round
          unelevated
          class="partner-card__edit-btn q-ml-sm"
          icon="mdi-pencil"
          size="sm"
          @click.stop="$emit('edit', partner)"
        />
      </div>

      <div class="row items-center justify-between q-mt-sm">
        <div class="row items-center text-caption partner-card__info" style="gap: 2px">
          <q-icon name="mdi-star" size="14px" color="amber" />
          <span>4.5/5</span>
        </div>
        <div class="text-caption partner-card__info row items-center" style="gap: 2px">
          <q-icon name="mdi-calendar-outline" size="13px" />
          {{ $t('associado.validity_until') }} {{ partner.contract_end ? formatDate(partner.contract_end) : '--' }}
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { computed } from "vue";
import { date } from "quasar";

defineEmits(["edit"]);

const { partner, editable } = defineProps({
  partner: { type: Object, required: true },
  editable: { type: Boolean, default: false },
});

const addressLine = computed(() => {
  const parts = [partner.address, partner.neighborhood, partner.city?.name].filter(Boolean);
  if(!parts.length) return '--';
  return parts.join(", ");
});

const formatDate = (d) => (d ? date.formatDate(d, "MM/YYYY") : "—");
</script>

<style lang="scss" scoped>
@use "src/css/quasar.variables.scss" as vars;

.partner-card {
  border-radius: 12px;
  background: white;
  transition: box-shadow 0.2s;

  &:hover {
    box-shadow: 0 4px 20px rgba(102, 29, 117, 0.15);
  }

  &__logo-wrap {
    position: relative;
    height: 150px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }

  &__logo-img {
    height: 150px;
  }

  &__logo-placeholder {
    height: 150px;
    background: vars.$neutral-normal;
  }

  &__edit-btn {
    background: linear-gradient(90deg, #4d1658 0%, #8b30a5 100%) !important;
    color: white !important;
  }

  &__name {
    color: vars.$violet-normal;
    min-width: 0;
  }

  &__info {
    color: vars.$violet-normal;
    opacity: 0.75;
  }

  &__category-chip {
    background: #ead5f0 !important;
    color: vars.$violet-normal !important;
    font-size: 11px;
    font-weight: 500;
    height: 22px;
  }

  &__discount-badge {
    background: vars.$violet-normal;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }
}

.flex-shrink-0 {
  flex-shrink: 0;
}
</style>
