<template>
  <div class="exam-form">
    <BoxedIconTitleBlock
      class="exam-form__heading"
      :title="isEditMode ? 'ویرایش آزمون' : 'طراحی سوال'"
      desc="در این قسمت شما می‌توانید سوالات خود را ایجاد، حذف، ویرایش کنید"
    >
      <template #icon>
        <SvgIcon name="pencil" :size="24" color="var(--color-primary)" />
      </template>
    </BoxedIconTitleBlock>

    <form class="exam-form__form" @submit.prevent="onSubmit">
      <div class="exam-form__card">
        <div class="exam-form__grid">
          <SelectField
            v-model="form.sessionId"
            name="sessionId"
            label="جلسه"
            :options="sessionOptions"
            option-label="title"
            option-value="id"
            :searchable="true"
            :on-search="searchSessions"
            :error="errors.sessionId"
          />
          <TextField
            v-model="form.title"
            name="title"
            label="عنوان آزمون"
            :error="errors.title"
            @blur="validateAt('title', form.title)"
          />
          <TextField
            v-model="form.minimumScore"
            name="minimumScore"
            label="حد نصاب قبولی"
            inputmode="numeric"
            :convert-digits="true"
            :error="errors.minimumScore"
            @blur="validateAt('minimumScore', form.minimumScore)"
          />
          <TextField
            v-model="form.score"
            name="score"
            label="کل نمره آزمون"
            inputmode="numeric"
            :convert-digits="true"
            :error="errors.score"
            @blur="validateAt('score', form.score)"
          />
          <TextField
            v-model="form.durationMinutes"
            name="durationMinutes"
            label="مدت زمان (دقیقه)"
            inputmode="numeric"
            :convert-digits="true"
            :error="errors.durationMinutes"
            @blur="validateAt('durationMinutes', form.durationMinutes)"
          />
          <div class="exam-form__toggle-cell">
            <ToggleSwitch v-model="form.isRandom" label="به صــــورت رندوم باشد." />
          </div>
        </div>
      </div>

      <div class="exam-form__card">
        <TextareaField
          v-model="form.description"
          name="description"
          label="توضیحات آزمون"
          :row="4"
        />
      </div>

      <div>
        <ExamQuestionBuilder v-model="questions" :disabled="submitting" />
        <p v-if="questionError" class="exam-form__error">{{ questionError }}</p>
      </div>

      <div class="exam-form__divider" />

      <div class="exam-form__actions">
        <BaseButton
          variant="transparent"
          text="منصرف شدم"
          custom-class="exam-form__btn-cancel"
          @click="onCancel"
        >
          <template #prependIcon>
            <SvgIcon name="caret-right" :size="14" color="var(--color-sec-gray)" />
          </template>
        </BaseButton>
        <BaseButton
          type="submit"
          :text="isEditMode ? 'ذخیره تغییرات' : 'تایید اطلاعات'"
          :loading="submitting"
          custom-class="exam-form__btn-submit"
        >
          <template #appendIcon>
            <SvgIcon name="arrow-left" :size="20" color="#fff" />
          </template>
        </BaseButton>
      </div>
    </form>
  </div>
</template>

<script setup>
import useYup from '@/composables/useYup'
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useDebounce from '@/composables/useDebounce'
import { useQueryClient } from '@tanstack/vue-query'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import TextField from '@/components/form/TextField.vue'
import { examSchema } from '@/features/admin/exams/schema'
import SelectField from '@/components/form/SelectField.vue'
import ToggleSwitch from '@/components/form/ToggleSwitch.vue'
import TextareaField from '@/components/form/TextareaField.vue'
import { useAdminSessionsListQuery } from '@/services/query/admin-sessions'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import ExamQuestionBuilder from '@/features/admin/exams/components/ExamQuestionBuilder.vue'
import {
  adminExamsKeys,
  useAddAdminExamMutation,
  useAddAdminExamQuestionMutation,
  useAdminExamQuery,
  useUpdateAdminExamMutation,
} from '@/services/query/admin-exams'

const route = useRoute()
const router = useRouter()
const queryClient = useQueryClient()

const examId = computed(() => (route.params.id ? Number(route.params.id) : null))
const isEditMode = computed(() => !!examId.value)

const form = ref({
  title: '',
  sessionId: '',
  minimumScore: '',
  score: '',
  durationMinutes: '',
  isRandom: true,
  description: '',
})

const createId = (prefix) => `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`

const blankOption = () => ({ id: createId('option'), optionText: '', isCorrect: false })

const blankQuestion = () => ({
  id: createId('question'),
  questionText: '',
  score: '',
  options: [blankOption(), { ...blankOption(), id: createId('option') }],
  __local: true,
})

const questions = ref([blankQuestion()])
const questionError = ref('')

const { validate, validateAt, errors } = useYup(examSchema)

const sessionSearch = ref('')
const sessionFilters = computed(() => ({ search: sessionSearch.value }))
const sessionPagination = ref({ page: 1, perPage: 10 })
const { data: sessionsResponse } = useAdminSessionsListQuery(sessionFilters, sessionPagination)
const selectedSession = ref(null)
const sessionOptions = computed(() => {
  const base = sessionsResponse.value?.data ?? []
  if (selectedSession.value && !base.some((s) => s.id === selectedSession.value.id)) {
    return [...base, selectedSession.value]
  }
  return base
})

const searchSessions = useDebounce((q) => {
  sessionSearch.value = q || ''
}, 400)

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

const normalizeExistingQuestions = (raw = []) => {
  if (!Array.isArray(raw) || raw.length === 0) return [blankQuestion()]
  return raw.map((q, qIdx) => {
    const options = Array.isArray(q.options) ? q.options : []
    return {
      id: q.id ?? createId(`question-${qIdx}`),
      questionText: q.questionText || '',
      score: q.score ?? '',
      options: options.map((o, oIdx) => ({
        id: o.id ?? createId(`option-${qIdx}-${oIdx}`),
        optionText: o.optionText || '',
        isCorrect: !!o.isCorrect,
      })),
      // No `__local` flag — these came from the server, so the builder will lock them.
    }
  })
}

watch(
  existingExam,
  (exam) => {
    if (!exam) return
    if (exam.session) selectedSession.value = exam.session
    form.value = {
      title: exam.title || '',
      sessionId: exam.session?.id || exam.sessionId || '',
      minimumScore: exam.minimumScore ?? exam.passScore ?? '',
      score: exam.score ?? '',
      durationMinutes: exam.durationMinutes ?? '',
      isRandom: exam.isRandom ?? true,
      description: exam.description || '',
    }
    questions.value = normalizeExistingQuestions(exam.questions)
  },
  { immediate: true }
)

const validateLocalQuestions = () => {
  const localOnes = questions.value.filter((q) => q.__local === true)
  if (!isEditMode.value && localOnes.length === 0) {
    questionError.value = 'حداقل یک سوال اضافه کنید.'
    return null
  }
  for (const q of localOnes) {
    if (!String(q.questionText || '').trim()) {
      questionError.value = 'متن همه سوالات را وارد کنید.'
      return null
    }
    const validOptions = q.options.filter((o) => String(o.optionText || '').trim())
    if (validOptions.length < 2) {
      questionError.value = 'برای هر سوال حداقل دو گزینه وارد کنید.'
      return null
    }
    if (!validOptions.some((o) => o.isCorrect)) {
      questionError.value = 'گزینه صحیح هر سوال را انتخاب کنید.'
      return null
    }
  }
  questionError.value = ''
  return localOnes.map((q, idx) => ({
    questionText: q.questionText.trim(),
    position: idx + 1,
    score: Number(q.score) || 0,
    options: q.options
      .filter((o) => String(o.optionText || '').trim())
      .map((o) => ({
        optionText: o.optionText.trim(),
        isCorrect: !!o.isCorrect,
      })),
  }))
}

const buildExamPayload = (values) => ({
  sessionId: values.sessionId,
  title: values.title,
  description: values.description,
  minimumScore: Number(values.minimumScore) || 0,
  score: Number(values.score) || 0,
  durationMinutes: Number(values.durationMinutes) || 0,
  isRandom: values.isRandom,
})

const addExamMutation = useAddAdminExamMutation()
const updateExamMutation = useUpdateAdminExamMutation()
const addQuestionMutation = useAddAdminExamQuestionMutation()

const submitting = computed(
  () =>
    addExamMutation.isPending.value ||
    updateExamMutation.isPending.value ||
    addQuestionMutation.isPending.value
)

const postQuestionsSequentially = async (id, list) => {
  for (const payload of list) {
    // Sequential so question position ordering is preserved on the backend.
    // eslint-disable-next-line no-await-in-loop
    await addQuestionMutation.mutateAsync({ examId: id, payload })
  }
}

const onSubmit = async () => {
  const { isValid } = await validate(form.value)
  const newQuestions = validateLocalQuestions()
  if (!isValid || !newQuestions) return

  const examPayload = buildExamPayload(form.value)
  let targetExamId = examId.value
  if (isEditMode.value) {
    await updateExamMutation.mutateAsync({ id: targetExamId, payload: examPayload })
  } else {
    const created = await addExamMutation.mutateAsync(examPayload)
    targetExamId = created?.data?.id ?? created?.id ?? targetExamId
  }
  if (targetExamId && newQuestions.length > 0) {
    await postQuestionsSequentially(targetExamId, newQuestions)
  }
  await queryClient.invalidateQueries({ queryKey: adminExamsKeys.all })
  router.push({ name: 'admin-exams' })
}

const onCancel = () => router.push({ name: 'admin-exams' })
</script>

<style lang="scss" scoped>
.exam-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  &__heading {
    margin-bottom: 0.75rem;
  }

  &__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  &__card {
    border-radius: 1.5rem;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 2.5%);
  }

  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;

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

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

  &__toggle-cell {
    display: flex;
    align-items: flex-end;
    min-height: 4.25rem;
    margin-right: 40px;
    margin-top: 10px;

    > div {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  &__error {
    margin-top: 0.5rem;
    padding-inline: 0.5rem;
    color: var(--color-error);
    font-family: var(--font-family-fa);
    font-size: 0.75rem;
  }

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

  &__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.625rem;
  }

  &__btn-cancel {
    min-width: 9rem;
  }

  &__btn-submit {
    min-width: 13rem;
  }
}
</style>
