<template>
  <div>
    <DefaultHeaderPage />

    <div class="q-pa-md">
      <div v-if="loading" class="flex flex-center q-py-xl">
        <q-spinner color="primary" size="48px" />
      </div>

      <div v-else-if="items.length === 0" class="text-center text-grey q-py-xl">
        <q-icon name="mdi-heart-off-outline" size="64px" class="q-mb-sm" />
        <div>{{ $t("associado.no_interests") }}</div>
      </div>

      <div v-else class="row q-col-gutter-md">
        <div
          v-for="item in items"
          :key="item.id"
          class="col-12 col-sm-6 col-md-4 col-lg-3"
        >
          <q-card flat bordered class="interest-card full-height column">
            <q-card-section class="col">
              <div class="flex items-start justify-between q-mb-sm">
                <div class="text-subtitle1 text-weight-medium">{{ item.name }}</div>
                <q-badge v-if="item.category?.name" color="primary" :label="item.category.name" />
              </div>
              <div v-if="item.description" class="text-body2 text-grey-7 q-mb-sm ellipsis-3-lines">
                {{ item.description }}
              </div>
              <div class="text-body2">
                <span class="text-weight-medium">{{ $t('associado.price') }}:</span>
                R$ {{ formatPrice(item.price) }}
              </div>
            </q-card-section>
            <q-card-actions>
              <q-btn
                color="negative"
                icon="mdi-heart-remove-outline"
                :label="$t('associado.remove_interest')"
                :loading="togglingId === item.id"
                flat
                @click="removeInterest(item)"
              />
            </q-card-actions>
          </q-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import { getMyInterestsAssociado, toggleInterestAssociado as apiToggleInterest } from "src/api/storeItem";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const $q = useQuasar();
const { t } = useI18n();

const items = ref([]);
const loading = ref(true);
const togglingId = ref(null);

const formatPrice = (price) => {
  if (!price) return "0,00";
  return Number(price).toLocaleString("pt-BR", { minimumFractionDigits: 2 });
};

const removeInterest = async (item) => {
  togglingId.value = item.id;
  try {
    await apiToggleInterest(item.id);
    items.value = items.value.filter((i) => i.id !== item.id);
    $q.notify({ type: "positive", message: t("http.success") });
  } catch {
    $q.notify({ type: "negative", message: t("http.errors.failed") });
  } finally {
    togglingId.value = null;
  }
};

onMounted(async () => {
  try {
    items.value = await getMyInterestsAssociado();
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
});
</script>

<style lang="scss" scoped>
.interest-card {
  transition: box-shadow 0.2s;
  &:hover {
    box-shadow: 0 4px 16px rgba(102, 29, 117, 0.12);
  }
}
.ellipsis-3-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* For Firefox */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
