<template>
  <BasicModal
    title="جزئیات آزمون"
    title-en="Details"
    width="95%"
    max-width="64rem"
    min-width="auto"
    :show-close-button="true"
  >
    <template #default="{ close }">
      <div class="exam-details">
        <SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
        <template v-else-if="exam">
          <div class="exam-details__summary">
            <div class="exam-details__summary-grid">
              <div v-for="summary in summaryItems" :key="summary.title" class="exam-details__cell">
                <LineInfoBlock
                  :title="summary.title"
                  :desc="summary.numeric ? '' : summary.value"
                  :numeric-desc="summary.numeric ? summary.value : ''"
                />
              </div>
            </div>
            <div class="exam-details__description">
              <LineInfoBlock title="توضیحات آزمون" :desc="exam.description || '—'" />
            </div>
          </div>

          <div class="exam-details__questions">
            <div
              v-for="question in displayQuestions"
              :key="question.id"
              class="exam-details__question"
            >
              <div class="exam-details__question-head">
                <p class="exam-details__question-title">
                  <span class="exam-details__question-order">{{ question.order }} :</span>
                  {{ question.title }}
                </p>
                <span v-if="question.score" class="exam-details__question-score">
                  {{ question.score }} نمره
                </span>
              </div>
              <div class="exam-details__answers">
                <div
                  v-for="answer in question.answers"
                  :key="answer.id"
                  class="exam-details__answer"
                >
                  <span
                    class="exam-details__answer-dot"
                    :class="{ 'exam-details__answer-dot--correct': answer.isCorrect }"
                  />
                  <p class="exam-details__answer-text">{{ answer.title }}</p>
                </div>
              </div>
            </div>
          </div>
        </template>
        <NoItems v-else title="یافت نشد" desc="اطلاعات این آزمون در دسترس نیست." />

        <div class="exam-details__divider" />

        <div class="exam-details__footer">
          <BaseButton text="تایید" custom-class="exam-details__confirm-btn" @click="close">
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="18" color="#fff" />
            </template>
          </BaseButton>
        </div>
      </div>
    </template>
  </BasicModal>
</template>

<script setup>
import { computed } from 'vue'
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 NoItems from '@/components/blocks/NoItems.vue'
import { useAdminExamQuery } from '@/services/query/admin-exams'
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'

defineOptions({ name: 'ExamDetailsModal' })

const { getModal } = useModal()

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

const { data: exam, isLoading } = useAdminExamQuery(examId, {
  enabled: () => !!examId.value,
})

const summaryItems = computed(() => {
  const e = exam.value || {}
  const course = e.session?.course || e.course
  return [
    { title: 'عنوان آزمون', value: e.title || '—', numeric: false },
    {
      title: 'جلسه مرتبط',
      value: e.session?.title || e.sessionTitle || '—',
      numeric: false,
    },
    {
      title: 'دوره مرتبط',
      value: course?.title || e.courseTitle || '—',
      numeric: false,
    },
    {
      title: 'نمره کل',
      value: e.score == null ? '—' : `${e.score} نمره`,
      numeric: true,
    },
    {
      title: 'حد نصاب قبولی',
      value: e.minimumScore == null ? '—' : `${e.minimumScore} نمره`,
      numeric: true,
    },
    {
      title: 'تعداد سوالات',
      value:
        e.questionsCount == null
          ? e.questions?.length
            ? `${e.questions.length} سوال`
            : '—'
          : `${e.questionsCount} سوال`,
      numeric: true,
    },
  ]
})

const displayQuestions = computed(() => {
  const raw = exam.value?.questions || []
  return raw.map((question, index) => {
    const optionsSource = Array.isArray(question.options) ? question.options : []
    const answers = optionsSource.map((option, ai) => ({
      id: option?.id ?? `${question?.id || index + 1}-${ai + 1}`,
      title: option?.optionText || '—',
      isCorrect: !!option?.isCorrect,
    }))
    return {
      id: question?.id ?? `question-${index + 1}`,
      order: question?.position ?? index + 1,
      title: question?.questionText || '—',
      score: question?.score ?? '',
      answers,
    }
  })
})
</script>

<style lang="scss" scoped>
.exam-details {
  width: 100%;
  text-align: start;

  &__summary {
    margin-block: 0.5rem 0.75rem;
    padding: 1rem 0.875rem;
    border-radius: 1.25rem;
  }

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

    @media (min-width: 640px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1280px) {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  &__cell :deep(.line-info__title),
  &__cell :deep(.line-info__value) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &__description {
    margin-top: 0.75rem;
    padding-top: 0.75rem;

    :deep(.line-info__title),
    :deep(.line-info__desc) {
      white-space: normal;
      word-break: break-word;
    }
  }

  &__questions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block: 1rem;
    border-block-start: 1px solid #eaeaea;
    padding-block-start: 1.25rem;
  }

  &__question {
    background: #fff;
    border-radius: 1.25rem;
    padding: 0.875rem 1rem;
  }

  &__question-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
  }

  &__question-title {
    font-family: var(--font-family-fa);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #a7a7a7;
    margin: 0;
    flex: 1;
    min-width: 0;
  }

  &__question-order {
    margin-inline-end: 0.25rem;
  }

  &__question-score {
    flex-shrink: 0;
    font-family: var(--font-family-en);
    font-size: 0.75rem;
    color: #9c9c9c;
  }

  &__answers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 3rem;
  }

  &__answer {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
  }

  &__answer-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    border: 1px solid #b1b1b1;
    background: transparent;
    flex-shrink: 0;

    &--correct {
      border-color: #007074;
      background: #007074;
    }
  }

  &__answer-text {
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    line-height: 1.6;
    color: #4b4b4b;
    margin: 0;
  }

  &__divider {
    border-block-end: 1px solid var(--color-thd-gray);
    margin-block: 1.25rem;
  }

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

  &__confirm-btn {
    min-width: 10rem;
    padding: 0 2rem;
  }
}
</style>
