<template>
  <q-dialog :model-value="modelValue" persistent>
    <q-card class="unread-dialog-card">
      <q-card-section class="q-pb-sm">
        <div class="text-h6 text-violet-normal">
          {{ $t('notification.pending_read_title') }}
        </div>
        <div class="text-caption text-grey-6 q-mt-xs">
          {{ $t('notification.pending_read_subtitle') }}
        </div>
        <div class="text-caption text-grey-5 q-mt-xs">
          {{ $t('notification.pending_read_hint') }}
        </div>
      </q-card-section>

      <q-separator />

      <q-card-section class="unread-dialog-card__scroll">
        <div v-if="loading" class="flex flex-center q-pa-xl">
          <q-spinner color="violet-normal" size="50px" />
        </div>

        <div v-else class="row q-col-gutter-md q-pt-xs">
          <div
            v-for="item in notifications"
            :key="item.id"
            class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12"
          >
            <q-card
              flat
              bordered
              class="notif-card"
              :class="{ 'notif-card--unread': !item.read }"
              @click="openDetail(item)"
            >
              <div class="notif-card__image">
                <img
                  v-if="imageUrl(item)"
                  :src="imageUrl(item)"
                  alt=""
                  class="notif-card__img"
                />
                <div v-else class="notif-card__placeholder flex flex-center">
                  <q-icon
                    name="mdi-bell-outline"
                    size="40px"
                    :color="item.read ? 'grey-4' : 'violet-normal'"
                  />
                </div>
              </div>

              <q-card-section class="q-pt-sm q-pb-xs">
                <div class="row items-start justify-between no-wrap q-mb-xs">
                  <div
                    class="notif-card__title text-weight-bold ellipsis"
                    :class="item.read ? 'text-grey-7' : 'text-violet-normal'"
                  >
                    {{ item.notification?.title }}
                  </div>
                  <q-badge
                    v-if="!item.read"
                    color="violet-normal"
                    rounded
                    class="q-ml-xs"
                    style="flex-shrink: 0"
                  />
                </div>
                <div class="notif-card__message text-caption text-grey-7">
                  {{ item.notification?.message }}
                </div>
              </q-card-section>

              <q-card-actions class="q-pt-xs q-pb-sm q-px-md">
                <div class="text-caption text-grey-6">
                  {{ formatDate(item.created_at) }}
                </div>
                <q-space />
                <q-icon
                  v-if="item.read"
                  name="mdi-check-circle"
                  color="positive"
                  size="18px"
                />
              </q-card-actions>
            </q-card>
          </div>
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right" class="q-pa-md">
        <div class="text-caption text-grey-6 q-mr-auto">
          {{ localUnreadCount > 0 ? $t('notification.pending_read_hint') : '' }}
        </div>
        <q-btn
          v-if="localUnreadCount === 0"
          color="violet-normal"
          :label="$t('notification.pending_read_close')"
          @click="close"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>

</template>

<script setup>
import { ref, computed, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";
import { userStore } from "src/stores/user";
import {
  getMyUnreadNotificationsAssociado,
  getMyUnreadNotificationsParceiro,
} from "src/api/notification";
import NotificationDetailDialog from "src/components/NotificationDetailDialog.vue";

const props = defineProps({
  modelValue: { type: Boolean, required: true },
});

const emit = defineEmits(["update:modelValue"]);

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

const loading = ref(false);
const notifications = ref([]);

const localUnreadCount = computed(() => notifications.value.filter((n) => !n.read).length);

const fetchUnread = async () => {
  loading.value = true;
  try {
    if (store.isAssociado) {
      notifications.value = await getMyUnreadNotificationsAssociado();
    } else if (store.isParceiro) {
      notifications.value = await getMyUnreadNotificationsParceiro();
    }
  } catch (e) {
    console.error(e);
  } finally {
    loading.value = false;
  }
};

const imageUrl = (item) => {
  const media = item.notification?.media?.[0]?.url;
  if (media) return media;
  const direct = item.notification?.image_url;
  if (!direct) return null;
  return direct.startsWith("http") ? direct : process.env.API_URL + direct;
};

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" });
};

const openDetail = (item) => {
  $q.dialog({
    component: NotificationDetailDialog,
    componentProps: { item },
  }).onOk((id) => {
    if (!id) return;
    const found = notifications.value.find((n) => n.id === id);
    if (found) found.read = true;
  });
};

const close = () => {
  store.clearUnreadCount();
  emit("update:modelValue", false);
};

watch(
  () => props.modelValue,
  (val) => {
    if (val) fetchUnread();
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
.unread-dialog-card {
  width: 90vw;
  max-width: 900px;
  min-width: 320px;

  &__scroll {
    max-height: 60vh;
    overflow-y: auto;
  }
}

.notif-card {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s;

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

  &--unread {
    border-top: 3px solid #7b2d97;
  }

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

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

  &__placeholder {
    width: 100%;
    height: 100%;
    background: #f0e8f1;
  }

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

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