<template>
  <form class="skill-seven" @submit.prevent="onSubmit">
    <div class="skill-seven__grid">
      <div class="skill-seven__media-col">
        <MediaRecorder
          v-model="video"
          kind="video"
          sub-type="video"
          context="verification"
          :max-seconds="180"
          :error="errors.leaderMessageVideo"
        />
      </div>
      <div class="skill-seven__content-col">
        <LineTitleBlock title="مهارت‌ها و تخصص‌ها" title-en="Skills & Expertise" />
        <p class="skill-seven__intro">
          لطفا درک و برداشت خود را از پیام رهبری به کنگره ۷ هزار زن شهید را در قالب یک ویدیو برای ما
          ضبط کنید.
        </p>
        <div v-if="videoUrl" class="skill-seven__video-wrap">
          <video :src="videoUrl" controls playsinline class="skill-seven__video" />
        </div>
        <div v-else class="skill-seven__video-placeholder">
          <p>ویدیوی راهنما هنوز بارگذاری نشده است.</p>
          <p>تا زمان انتشار ویدیو، ارسال پاسخ در این مرحله اختیاری است.</p>
        </div>
      </div>
    </div>

    <div class="skill-seven__divider" />
    <StepActions
      :loading="saveRegisterMutation.isPending.value"
      next-text="تایید اطلاعات"
      @back="store.goToPrevStep()"
    />
  </form>
</template>

<script setup>
import { toast } from 'vue3-toastify'
import useYup from '@/composables/useYup'
import { computed, ref, watch } from 'vue'
import { STUDENT_REGISTRATION } from '@/enums'
import LineTitleBlock from '@/components/LineTitleBlock.vue'
import { useSaveRegisterDataMutation } from '@/services/query/auth'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { skillAssessmentPart7Schema } from '@/features/auth/schema/student-register'
import MediaRecorder from '@/features/auth/components/studentRegister/MediaRecorder.vue'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'

const store = useStudentRegistrationStore()

const video = ref(store.skill7.leaderMessageVideo || null)

const form = ref({
  leaderMessageVideo: store.skill7.leaderMessageVideo || null,
  leaderMessageId: store.skill7.leaderMessageId || '',
})

const { validate, errors } = useYup(skillAssessmentPart7Schema)

watch(video, (value) => {
  form.value.leaderMessageVideo = value
  form.value.leaderMessageId = value?.uploadId || ''
})

watch(form, (value) => store.updateSection('skill7', value), { deep: true })

const videoUrl = computed(() => store.registrationMedia.leaderMessageVideoUrl || '')

const saveRegisterMutation = useSaveRegisterDataMutation()

const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  try {
    await saveRegisterMutation.mutateAsync(payload)
    store.skill7 = { ...store.skill7, ...payload }
    store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7)
    store.isProfileCompleted = true
  } catch (error) {
    toast.error(error?.response?.data?.message || 'عملیات با خطا مواجه شد')
  }
}
</script>

<style lang="scss" scoped>
.skill-seven {
  &__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

    @media (min-width: 1024px) {
      grid-template-columns: 3fr 9fr;
    }
  }

  &__media-col {
    // Recorder/uploader stays first: top of the stack on mobile, left on desktop.
    order: 1;

    @media (min-width: 1024px) {
      padding: 0.5rem;
    }
  }

  &__content-col {
    order: 2;

    @media (min-width: 1024px) {
      padding-inline-start: 1.25rem;
    }
  }

  &__intro {
    font-family: var(--font-family-fa);
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0 0 0.75rem;
    text-align: justify;
  }

  &__video-wrap {
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background: #000;
  }

  &__video {
    width: 100%;
    height: auto;
    display: block;
  }

  &__video-placeholder {
    border-radius: 1rem;
    background: #f3f4f6;
    color: #666;
    padding: 2rem;
    text-align: center;
    font-family: var(--font-family-fa);
    font-size: 0.9375rem;
    font-weight: 400;

    p + p {
      margin-top: 0.5rem;
    }
  }

  &__divider {
    border-block-end: 1px solid var(--color-thd-gray);
    margin: 1rem 0 1.5rem;
  }
}
</style>
