<template>
  <q-card
    flat
    bordered
    class="notification-card"
    :class="{ 'notification-card--unread': unread === true, 'notification-card--clickable': clickable }"
    @click="handleClick"
  >
    <q-badge
      v-if="unread === true"
      color="violet-normal"
      rounded
      class="notification-card__badge"
    />

    <div class="notification-card__image">
      <img
        v-if="imgSrc && !imgError"
        :src="imgSrc"
        alt=""
        class="notification-card__img"
        @error="imgError = true"
      />
      <div v-else class="notification-card__img-placeholder flex flex-center">
        <q-icon name="mdi-bell-outline" size="32px" :color="unread === false ? 'grey-4' : 'violet-normal'" />
      </div>
    </div>

    <q-card-section class="notification-card__body q-pt-sm q-pb-xs">
      <div
        class="notification-card__title"
        :class="{ 'notification-card__title--read': unread === false }"
      >
        {{ notification.title }}
      </div>
      <div class="notification-card__message">
        {{ 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="notification-card__date">
        {{ formattedDate }}
      </div>
      <q-icon
        v-if="showReadIcon && unread === false"
        name="mdi-check-circle"
        color="positive"
        size="18px"
      />
    </q-card-actions>
  </q-card>
</template>

<script setup>
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { resolveNotificationImageUrl, formatNotificationDate } from "src/helpers/notification";

const { t } = useI18n();

const props = defineProps({
  notification: { type: Object, required: true },
  unread: { type: Boolean, default: null },
  clickable: { type: Boolean, default: true },
  showReadIcon: { type: Boolean, default: false },
  date: { type: String, default: null },
});

const emit = defineEmits(["click"]);

const imgError = ref(false);
const imgSrc = computed(() => resolveNotificationImageUrl(props.notification));
const formattedDate = computed(() =>
  formatNotificationDate(props.date ?? props.notification.created_at, t("common.terms.today"))
);

const handleClick = () => {
  if (props.clickable) emit("click");
};
</script>

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

.notification-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  min-width: 0;
  max-width: 100%;

  &__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
  }

  &--clickable {
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.15s;

    &:hover {
      box-shadow: 0 4px 14px rgba(102, 29, 117, 0.14);
      transform: translateY(-2px);
    }

    &:active {
      opacity: 0.9;
    }
  }

  &--unread {
    border-top: 3px solid vars.$violet-normal;
  }

  &__image {
    width: 100%;
    height: 84px;
    overflow: hidden;
    background: vars.$violet-light;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

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

  &__body {
    min-width: 0;
    overflow: hidden;
  }

  &__actions {
    gap: 8px;
    min-width: 0;
  }

  // `nowrap` faria o título ter largura mínima igual ao texto inteiro e empurrar
  // o card para fora da tela; o clamp trunca em 2 linhas sem pressionar a largura.
  &__title {
    max-width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: vars.$violet-normal;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    &--read {
      color: vars.$violet-dark;
    }
  }

  &__message {
    max-width: 100%;
    font-size: 13px;
    color: vars.$color-text-2;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  &__date {
    font-size: 11px;
    color: vars.$violet-normal;
    opacity: 0.75;
  }
}
</style>
