<template>
  <div class="partner-card" :class="{ 'cursor-pointer': editable }" @click="editable && $emit('edit', partner)">
    <!-- Image flush with card edges -->
    <div class="partner-card__img-wrap q-pa-sm">
      <q-img
        v-if="partner.logo?.url"
        :src="partner.logo.url"
        fit="cover"
        class="partner-card__img"
      />
      <div v-else class="partner-card__img-placeholder flex flex-center">
        <q-icon name="mdi-domain" size="48px" color="grey-4" />
      </div>
    </div>

    <!-- Content -->
    <div class="partner-card__body">
      <!-- Name -->
      <div class="partner-card__name">{{ partner.company_name }}</div>

      <!-- Badges: category chip + discount -->
      <div class="partner-card__badges">
        <span v-if="partner.category?.name" class="partner-card__chip">
          {{ partner.category.name }}
        </span>
        <span v-if="partner.discount_percentage" class="partner-card__discount">
          -{{ partner.discount_percentage }}%
        </span>
        <q-btn
          v-if="editable"
          round
          unelevated
          class="partner-card__edit-btn q-ml-auto"
          icon="mdi-pencil"
          size="xs"
          @click.stop="$emit('edit', partner)"
        />
      </div>

      <!-- Address -->
      <div class="partner-card__info">
        <q-icon name="mdi-map-marker-outline" size="14px" />
        <span class="partner-card__info-text">{{ addressLine }}</span>
      </div>

      <!-- Phone -->
      <div class="partner-card__info">
        <q-icon name="mdi-phone-outline" size="14px" />
        <span>{{ partner.phone ?? '--' }}</span>
      </div>

      <q-btn
        v-if="whatsappUrl"
        unelevated
        dense
        no-caps
        size="sm"
        color="positive"
        icon="mdi-whatsapp"
        class="partner-card__whatsapp"
        :label="$t('agendamento.falar_whatsapp')"
        @click.stop="openUrl(whatsappUrl)"
      />

      <!-- Footer: rating + validity -->
      <div class="partner-card__footer">
        <div class="partner-card__rating">
          <q-icon name="mdi-star" size="14px" color="amber" />
          <span>4.5/5</span>
        </div>
        <div class="partner-card__validity">
          <q-icon name="mdi-calendar-outline" size="13px" />
          <span>{{ $t('associado.validity_until') }} {{ partner.contract_end ? formatDate(partner.contract_end) : '--' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { date } from "quasar";
import { whatsappUrlFor } from "src/helpers/utils";
import { openUrl } from "src/helpers/links";

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);
  return parts.length ? parts.join(", ") : "--";
});

const whatsappUrl = computed(() => whatsappUrlFor(partner));

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

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

.partner-card__whatsapp {
  align-self: flex-start;
  border-radius: 8px;
  margin-top: 4px;
}

.partner-card {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  background: white;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s;

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

  &__img-wrap {
    width: 100%;
    height: 140px;
    overflow: hidden;
  }

  &__img {
    width: 100%;
    height: 140px;
  }

  &__img-placeholder {
    width: 100%;
    height: 140px;
    background: #ececec;
  }

  &__body {
    padding: 12px 16px 16px;
    overflow: hidden;
  }

  &__name {
    font-size: 14px;
    font-weight: 600;
    color: vars.$violet-normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
  }

  &__badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
  }

  &__chip {
    display: inline-flex;
    align-items: center;
    background: #ead5f0;
    color: vars.$violet-normal;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
  }

  &__discount {
    display: inline-flex;
    align-items: center;
    background: vars.$violet-normal;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
  }

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

  &__info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: vars.$violet-normal;
    opacity: 0.75;
    margin-bottom: 4px;
    overflow: hidden;
  }

  &__info-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  &__footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    color: vars.$violet-normal;
    opacity: 0.75;
    overflow: hidden;
  }

  &__rating {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }

  &__validity {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
