<template>
  <BasicModal
    title="جزئیات خدمت"
    title-en="Service Detail"
    width="95%"
    max-width="64rem"
    min-width="auto"
    :show-close-button="true"
  >
    <template #default>
      <div class="service-details">
        <SkeletonLoaderBlock v-if="isLoading && !service" :rows="3" :cols-per-row="1" />
        <template v-else>
          <div class="service-details__row service-details__row--two">
            <LineInfoBlock title="عنوان خدمت" :desc="serviceTitle" />
            <LineInfoBlock title="نوع خدمت" :desc="serviceTypeLabel" />
          </div>

          <div class="service-details__row">
            <LineInfoBlock title="درخواست" :desc="requestText" />
          </div>

          <div class="service-details__divider" />

          <footer class="service-details__footer">
            <BaseButton
              text="ارسال پیام"
              custom-class="service-details__send-btn"
              @click="onSendMessage"
            >
              <template #appendIcon>
                <SvgIcon name="arrow-left" :size="18" color="#fff" />
              </template>
            </BaseButton>
          </footer>
        </template>
      </div>
    </template>
  </BasicModal>
</template>

<script setup>
import { computed } from 'vue'
import { SERVICE_TYPE } from '@/enums'
import useModal from '@/composables/useModal'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
import { useAdminServiceQuery } from '@/services/query/admin-services'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'

defineOptions({ name: 'ServiceDetailsModal' })

const { openModal, getModal } = useModal()

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

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

// Subject is the canonical title on the new schema; older fixtures used `title`.
const serviceTitle = computed(
  () => service.value?.subject || service.value?.title || service.value?.serviceTitle || '—'
)

const serviceTypeLabel = computed(
  () => service.value?.typeLabel || SERVICE_TYPE[service.value?.type] || '—'
)

// Pre-migration fixtures used `requestText`/`description`; the new schema puts
// the body inside the first message.
const requestText = computed(
  () =>
    service.value?.requestText ||
    service.value?.description ||
    service.value?.messages?.[0]?.message ||
    '—'
)

const onSendMessage = () => {
  openModal('SendMessageModal', { id: serviceId.value })
}
</script>

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

  &__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;

    &--two {
      @media (min-width: 640px) {
        grid-template-columns: 1fr 1fr;
      }
    }
  }

  &__divider {
    border-block-end: 1px solid #ddd;
    margin-block: 0.5rem;
  }

  &__footer {
    display: flex;
    justify-content: center;
  }

  &__send-btn {
    min-width: 17rem;
    padding: 0 1.5rem;
  }
}
</style>
