<template>
  <q-card flat bordered class="notification-card">
    <div class="notification-card__image">
      <img
        v-if="imageUrl"
        :src="imageUrl"
        alt=""
        class="notification-card__img"
      />
      <div v-if="!imageUrl" class="notification-card__img-placeholder flex flex-center">
        <q-icon name="mdi-bell-outline" size="40px" color="violet-normal" />
      </div>
    </div>

    <q-card-section class="notification-card__body q-pt-sm q-pb-xs">
      <div class="notification-card__title text-violet-normal text-weight-bold ellipsis">
        {{ notification.title }}
      </div>
      <div class="notification-card__message text-caption text-grey-7 q-mt-xs">
        {{ notification.message }}
      </div>
    </q-card-section>

    <q-card-actions class="notification-card__actions q-pt-xs q-pb-sm q-px-md flex justify-between items-center">
      <div class="text-caption text-grey-6">
        {{ formatDate(notification.created_at) }}
      </div>

      <q-btn
        unelevated
        dense
        color="violet-normal"
        text-color="white"
        :label="$t('notification.details')"
        size="sm"
        padding="4px 10px"
        class="notification-card__details-btn"
      >
        <q-menu anchor="bottom right" self="top right" class="notification-card__menu">
          <q-list dense style="min-width: 200px">
            <q-item>
              <q-item-section avatar>
                <q-icon name="mdi-send-outline" color="violet-normal" size="18px" />
              </q-item-section>
              <q-item-section>
                <q-item-label class="text-body2">
                  {{ $t('notification.sent_to', { count: notification.sent_count ?? 0 }) }}
                </q-item-label>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section avatar>
                <q-icon name="mdi-eye-outline" color="violet-normal" size="18px" />
              </q-item-section>
              <q-item-section>
                <q-item-label class="text-body2">
                  {{ $t('notification.seen_by', { count: notification.seen_count ?? 0 }) }}
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </q-card-actions>
  </q-card>
</template>

<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const { notification } = defineProps({
  notification: {
    type: Object,
    required: true,
  },
});

const imageUrl = computed(() => {
  if (!notification.image_url) return null;
  if (notification.image_url.startsWith("http")) return notification.image_url;
  return process.env.API_URL + notification.image_url;
});

const formatDate = (dateStr) => {
  if (!dateStr) return "";
  const date = new Date(dateStr);
  const today = new Date();
  const isToday =
    date.getDate() === today.getDate() &&
    date.getMonth() === today.getMonth() &&
    date.getFullYear() === today.getFullYear();
  if (isToday) return t("common.terms.today");
  return date.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric" });
};
</script>

<style scoped lang="scss">
.notification-card {
  border-radius: 8px;
  overflow: hidden;

  &__image {
    width: 100%;
    height: 120px;
    overflow: hidden;
  }

  &__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &__img-placeholder {
    width: 100%;
    height: 100%;
    background: #f0e8f1;
  }

  &__title {
    font-size: 14px;
    line-height: 1.3;
  }

  &__message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
  }

  &__menu {
    border-radius: 8px;
  }
}
</style>
