<template>
  <BasicModal
    title="جزئیات درخواست"
    title-en="Request details"
    width="95%"
    max-width="58rem"
    min-width="auto"
    :show-close-button="true"
  >
    <template #default>
      <div class="sdm">
        <SkeletonLoaderBlock v-if="isLoading && !service" :rows="2" :cols-per-row="1" />

        <template v-else-if="service">
          <div class="sdm__top">
            <span class="sdm__date">{{ requestDate }}</span>
            <Badge :variant="statusVariant" size="sm" dot :value="statusLabel" />
          </div>

          <div v-if="messages.length > 0" class="sdm__messages">
            <div v-for="message in messages" :key="message.id" class="sdm__bubble">
              <p class="sdm__text">{{ message.message }}</p>
              <span class="sdm__time">{{ messageTime(message) }}</span>
            </div>
          </div>

          <NoItems v-else title="پیامی نیست" desc="هنوز پیامی برای این درخواست ثبت نشده است." />
        </template>
      </div>
    </template>
  </BasicModal>
</template>

<script setup>
import { computed } from 'vue'
import { TICKET_STATUS } from '@/enums'
import Badge from '@/components/Badge.vue'
import useModal from '@/composables/useModal'
import BasicModal from '@/components/BasicModal.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import { formatJalaaliDate } from '@/utils/date-utils'
import { useStudentTicketQuery } from '@/services/query/student-tickets'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'

defineOptions({ name: 'ServiceDetailsModal' })

const STATUS_VARIANT = {
  open: 'neutral',
  answered: 'success',
  closed: 'info',
  approved: 'success',
  rejected: 'danger',
  pending: 'neutral',
}

const { getModal } = useModal()

const modalData = computed(() => getModal('ServiceDetailsModal')?.data ?? {})
const ticketId = computed(() => modalData.value.id ?? null)

const { data: service, isLoading } = useStudentTicketQuery(ticketId, {
  enabled: () => !!ticketId.value,
})

const messages = computed(() => service.value?.messages ?? [])

const statusLabel = computed(() => TICKET_STATUS[service.value?.status] || '—')
const statusVariant = computed(() => STATUS_VARIANT[service.value?.status] || 'neutral')

const requestDate = computed(() => formatJalaaliDate(service.value?.createdAt) || '—')

const messageTime = (message) => {
  if (!message.createdAt) return ''
  const d = new Date(message.createdAt)
  if (Number.isNaN(d.getTime())) return ''
  return d.toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' })
}
</script>

<style lang="scss" scoped>
.sdm {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 0.25rem 0.5rem;
  text-align: start;

  &__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  &__date {
    background: #f5f5f5;
    color: #a3a3a3;
    border-radius: 9999px;
    padding: 0.3rem 0.875rem;
    font-family: var(--font-family-fa);
    font-size: 0.7rem;
    line-height: 1.45;
    white-space: nowrap;
  }

  &__messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  &__bubble {
    position: relative;
    background: #f6f6f6;
    padding: 1rem 1rem 1.5rem;
    border-radius: 0.75rem 0.75rem 0;
    color: #454545;
  }

  &__text {
    font-family: var(--font-family-fa);
    font-weight: 300;
    font-size: 0.8rem;
    line-height: 1.7;
    margin: 0;
    text-align: justify;
    white-space: pre-wrap;
  }

  &__time {
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-end: 0.5rem;
    font-family: var(--font-family-fa);
    font-size: 0.65rem;
    color: #a7a7a7;
    line-height: 1.45;
  }
}
</style>
