<template lang="pug">
  v-container.page-container-center.fill-height
    .d-flex.flex-column.justify-center.align-center.fill-height(v-if="loading")
      v-progress-circular(indeterminate color="primary" size="64")
      .text-body-1.text-grey.mt-4 {{ $t('review.loading') }}

    v-card.lesson-card(
      v-else-if="currentItem"
    )
      .d-flex.align-center.pa-4.border-b-subtle
        v-btn(icon="mdi-close" variant="text" to="/" color="grey")
        v-spacer
        .text-caption.text-grey-darken-1.font-weight-bold
          | {{ sessionDone + 1 }} / {{ sessionTotal }}
        v-spacer
        v-chip.font-weight-bold(
          size="small"
          :color="phaseColor"
          variant="tonal"
        ) {{ phaseLabel }}

      v-window.flex-grow-1(v-model="phase")
        v-window-item(value="primer")
          .d-flex.flex-column.align-center.pa-6
            .hero-wrapper.mb-6
              KanjiSvgViewer(:char="currentItem.char" mode="hero")
            .text-h4.font-weight-bold.text-white.mb-2 {{ currentItem.meaning }}
            .text-body-1.text-grey.text-center.mb-8(
              v-if="currentItem.mnemonic") "{{ currentItem.mnemonic }}"
            .radical-section(v-if="currentItem.radicals?.length")
              .text-caption.text-grey-darken-1.text-uppercase.mb-3.font-weight-bold
                |{{ $t('lesson.components') }}
              .d-flex.flex-wrap.gap-3.justify-center
                v-sheet.radical-chip(
                  v-for="rad in currentItem.radicals" :key="rad.meaning")
                  .d-flex.align-center.gap-2.px-3.py-1
                    v-avatar(size="24" rounded="0")
                      img(v-if="rad.image" :src="rad.image")
                      span.text-h6.font-weight-bold.text-white(v-else) {{ rad.char }}
                    .text-caption.text-grey-lighten-1 {{ rad.meaning }}
            .readings-grid
              .reading-box
                .label {{ $t('collection.onyomi') }}
                .val.text-cyan-lighten-3 {{ currentItem.onyomi[0] || '-' }}
              .reading-box
                .label {{ $t('collection.kunyomi') }}
                .val.text-pink-lighten-3 {{ currentItem.kunyomi[0] || '-' }}

        v-window-item(value="demo")
          .d-flex.flex-column.align-center.justify-center.h-100.pa-6
            .text-subtitle-1.text-grey.mb-6 {{ $t('lesson.observe') }}
            .canvas-wrapper.lesson-canvas-wrapper
              KanjiSvgViewer(ref="demoViewer" :char="currentItem.char" mode="animate")

        v-window-item(value="drawing")
          .d-flex.flex-column.align-center.justify-center.h-100.pa-6
            .text-subtitle-1.text-grey.mb-6
              span(v-if="subPhase === 'guided'") {{ $t('lesson.trace') }}
              span(v-else) Draw ({{ practiceCount }}/3)

            .transition-opacity(
              :style="{ opacity: canvasOpacity }"
              style="transition: opacity 0.3s ease;"
            )
              KanjiCanvas(
                ref="canvas"
                :char="currentItem.char"
                :auto-hint="subPhase === 'guided'"
                :size="300"
                @complete="handleDrawComplete"
                @mistake="handleMistake"
              )

      .pa-6
        v-btn.action-btn(
          v-if="phase === 'primer'"
          @click="phase = 'demo'"
          color="cyan" rounded="pill" size="large" block
        ) {{ $t('lesson.understand') }}
        v-btn.action-btn(
          v-if="phase === 'demo'"
          @click="startDrawing"
          color="cyan" rounded="pill" size="large" block
        ) {{ $t('lesson.ready') }}
        .d-flex.justify-center.gap-4.mt-2(v-if="phase === 'drawing' && subPhase === 'practice'")
          v-btn(
           variant="text" color="amber" @click="useHint"
          ) {{ $t('lesson.hintAction') }}
          v-btn(variant="text" color="grey" @click="phase='demo'") {{ $t('lesson.watchAgain') }}

    v-card.text-center.pa-8.lesson-card(
      v-else
    )
      v-icon.mb-6(size="80" color="purple-accent-2") mdi-check-decagram
      .text-h4.font-weight-bold.text-white.mb-2 {{ $t('lesson.completeTitle') }}
      .text-body-1.text-grey.mb-8 {{ $t('lesson.learned', { n: sessionDone }) }}
      v-btn.glow-btn.text-black.font-weight-bold(
        to="/"
        block
        color="cyan"
        height="50"
        rounded="pill"
      ) {{ $t('lesson.backToDashboard') }}

</template>

<script setup>
/* eslint-disable no-unused-vars */

import {
  ref, computed, onMounted, nextTick, watch,
} from 'vue';
import { useI18n } from 'vue-i18n';
import { useAppStore } from '@/stores/appStore';
import KanjiCanvas from '@/components/kanji/KanjiCanvas.vue';
import KanjiSvgViewer from '@/components/kanji/KanjiSvgViewer.vue';

const { t } = useI18n();
const store = useAppStore();
const currentItem = ref(null);
const phase = ref('primer');
const subPhase = ref('guided');
const practiceCount = ref(0);
const sessionDone = ref(0);
const sessionTotal = ref(0);
const canvasOpacity = ref(1);
const loading = ref(true);

const canvas = ref(null);
const demoViewer = ref(null);

const phaseLabel = computed(() => {
  if (phase.value === 'primer') return t('lesson.phasePrimer');
  if (phase.value === 'demo') return t('lesson.phaseDemo');
  return subPhase.value === 'guided' ? t('lesson.phaseGuided') : t('lesson.phasePractice');
});

const phaseColor = computed(() => (phase.value === 'primer' ? 'blue' : 'purple'));

watch(phase, (val) => {
  if (val === 'demo') nextTick(() => demoViewer.value?.playAnimation());
});

function loadNext() {
  if (store.lessonQueue.length === 0) {
    currentItem.value = null;
    return;
  }
  [currentItem.value] = store.lessonQueue;
  phase.value = 'primer';
  subPhase.value = 'guided';
  practiceCount.value = 0;
}

function startDrawing() {
  phase.value = 'drawing';
  subPhase.value = 'guided';
  nextTick(() => canvas.value?.reset());
}

async function handleDrawComplete() {
  await new Promise((r) => { setTimeout(r, 400); });

  if (subPhase.value === 'guided') {
    canvasOpacity.value = 0;
    await new Promise((r) => { setTimeout(r, 300); });

    subPhase.value = 'practice';
    await nextTick();
    canvas.value?.reset();

    canvasOpacity.value = 1;
  } else {
    practiceCount.value += 1;

    if (practiceCount.value < 3) {
      canvasOpacity.value = 0;
      await new Promise((r) => { setTimeout(r, 300); });
      canvas.value?.reset();
      canvasOpacity.value = 1;
    } else {
      await store.submitLesson(currentItem.value.wkSubjectId);
      sessionDone.value += 1;
      store.lessonQueue.shift();
      loadNext();
    }
  }
}

function handleMistake() {
  if (subPhase.value === 'practice') practiceCount.value = 0;
}

function useHint() {
  canvas.value?.showHint();
  if (subPhase.value === 'practice') {
    practiceCount.value = 0;
  }
}

onMounted(async () => {
  loading.value = true;
  await store.fetchLessonQueue();
  sessionTotal.value = store.lessonQueue.length;
  loadNext();
  loading.value = false;
});
</script>

<style lang="scss" scoped>
.page-container-center {
  min-height: 100%;
}
</style>
