<template lang="pug">
  v-container.fill-height.justify-center.pa-4.review-view-container
    v-fade-transition(mode="out-in")
      .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.pa-6.rounded-xl.d-flex.flex-column.align-center.review-card(
        v-else-if="currentItem"
      )
        .d-flex.align-center.w-100.mb-6
          v-btn.mr-2(
            icon="mdi-arrow-left"
            variant="text"
            color="grey"
            to="/"
            density="comfortable"
          )
          .text-caption.text-grey.font-weight-bold
            | {{ sessionDone }} / {{ sessionTotal }}
          v-spacer
          v-chip.font-weight-bold(
            size="small"
            :color="getSRSColor(currentItem.srsLevel)"
            variant="flat"
          ) {{ $t('review.level') }} {{ currentItem.srsLevel }}

        .text-center.mb-6
          .text-caption.text-grey.text-uppercase.tracking-wide.mb-1
            | {{ $t('review.meaning') }}
          .text-h3.font-weight-bold.text-white.text-shadow
            | {{ currentItem.meaning }}

        .review-canvas-area
          KanjiCanvas(
            ref="kanjiCanvasRef"
            :char="currentItem.char"
            @complete="handleComplete"
            @mistake="handleMistake"
          )

          transition(name="scale")
            v-btn.next-fab.glow-btn.text-black(
              v-if="showNext"
              @click="next"
              color="primary"
              icon="mdi-arrow-right"
              size="large"
              elevation="8"
            )

        .mb-4.d-flex.gap-2
          v-btn.text-caption.font-weight-bold.opacity-80(
            variant="text"
            color="amber-lighten-1"
            prepend-icon="mdi-lightbulb-outline"
            size="small"
            :disabled="showNext"
            @click="triggerHint"
          ) {{ $t('review.showHint') }}

        v-sheet.d-flex.align-center.justify-center(
          width="100%"
          height="48"
          color="transparent"
        )
          transition(name="fade-slide" mode="out-in")
            .status-text.text-h6.font-weight-bold(
              :key="statusCode"
              :class="getStatusClass(statusCode)"
            ) {{ $t('review.' + statusCode) }}

        v-progress-linear.mt-4.progress-bar(
          v-model="progressPercent"
          color="primary"
          height="4"
          rounded
        )

      v-card.pa-8.rounded-xl.elevation-10.text-center.review-card(
        v-else-if="sessionTotal > 0 && store.queue.length === 0"
      )
        .mb-6
          v-avatar(color="rgba(0, 206, 201, 0.1)" size="80")
            v-icon(size="40" color="primary") mdi-trophy

        .text-h4.font-weight-bold.mb-2 {{ $t('review.sessionComplete') }}
        .text-body-1.text-grey.mb-8 {{ $t('review.levelup') }}

        v-row.mb-6
          v-col.border-r.border-subtle(cols="6")
            .text-h3.font-weight-bold.text-white {{ accuracy }}%
            .text-caption.text-grey.text-uppercase.mt-1 {{ $t('stats.accuracy') }}
          v-col(cols="6")
            .text-h3.font-weight-bold.text-white {{ sessionCorrect }}
            .text-caption.text-grey.text-uppercase.mt-1 {{ $t('stats.correct') }}

        v-btn.text-black.font-weight-bold.glow-btn(
          to="/"
          block
          color="primary"
          height="50"
          rounded="lg"
        ) {{ $t('review.back') }}

      .text-center(v-else)
        v-icon.mb-4(size="64" color="grey-darken-2") mdi-check-circle-outline
        .text-h4.mb-2.text-white {{ $t('review.caughtUp') }}
        .text-grey.mb-6 {{ $t('review.noReviews') }}
        v-btn.font-weight-bold(
          to="/"
          color="primary"
          variant="tonal"
        ) {{ $t('review.viewCollection') }}
</template>

<script setup>
/* eslint-disable no-unused-vars */
import {
  ref, onMounted, computed, watch,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAppStore } from '@/stores/appStore';
import KanjiCanvas from '@/components/kanji/KanjiCanvas.vue';

const store = useAppStore();
const route = useRoute();
const router = useRouter();

const currentItem = ref(null);
const statusCode = ref('draw');
const showNext = ref(false);
const isFailure = ref(false);
const kanjiCanvasRef = ref(null);
const loading = ref(true);

const sessionTotal = ref(0);
const sessionDone = ref(0);
const sessionCorrect = ref(0);

const accuracy = computed(() => {
  if (sessionDone.value === 0) return 100;
  return Math.round((sessionCorrect.value / sessionDone.value) * 100);
});

const progressPercent = computed(() => {
  if (sessionTotal.value === 0) return 0;
  return (sessionDone.value / sessionTotal.value) * 100;
});

function loadNext() {
  if (store.queue.length === 0) {
    currentItem.value = null;
    return;
  }
  const idx = Math.floor(Math.random() * store.queue.length);
  currentItem.value = store.queue[idx];

  statusCode.value = 'draw';
  showNext.value = false;
  isFailure.value = false;
}

onMounted(async () => {
  loading.value = true;
  const mode = route.query.mode || 'shuffled';
  await store.fetchQueue(mode);

  if (sessionTotal.value === 0 && store.queue.length > 0) {
    sessionTotal.value = store.queue.length;
  }
  loadNext();
  loading.value = false;
});

async function resetSession() {
  loading.value = true;
  sessionDone.value = 0;
  sessionCorrect.value = 0;
  sessionTotal.value = 0;
  currentItem.value = null;
  const mode = route.query.mode || 'shuffled';
  await store.fetchQueue(mode);
  if (store.queue.length > 0) sessionTotal.value = store.queue.length;
  loadNext();
  loading.value = false;
}

watch(() => store.batchSize, async () => {
  resetSession();
});

function triggerHint() {
  if (!kanjiCanvasRef.value) return;

  isFailure.value = true;
  statusCode.value = 'hint';

  kanjiCanvasRef.value.drawGuide(true);
}

function handleMistake(isHint) {
  if (isHint) {
    isFailure.value = true;
    statusCode.value = 'hint';
  } else {
    statusCode.value = 'tryAgain';
  }
}

function handleComplete() {
  statusCode.value = 'correct';
  showNext.value = true;
}

async function next() {
  if (!currentItem.value) return;

  await store.submitReview(currentItem.value.wkSubjectId, !isFailure.value);

  sessionDone.value += 1;
  if (!isFailure.value) sessionCorrect.value += 1;
  // eslint-disable-next-line no-underscore-dangle
  const index = store.queue.findIndex((i) => i._id === currentItem.value._id);
  if (index !== -1) {
    store.queue.splice(index, 1);
  }

  loadNext();
}

function redoLesson() {
  if (!currentItem.value) return;
  router.push({
    path: '/lesson',
    query: { subjectId: currentItem.value.wkSubjectId },
    state: { item: JSON.parse(JSON.stringify(currentItem.value)) },
  });
}

const getSRSColor = (lvl) => {
  const colors = {
    1: '#ff7675', 2: '#fdcb6e', 3: '#55efc4', 4: '#0984e3', 5: '#a29bfe', 6: '#6c5ce7',
  };
  return colors[lvl] || 'grey';
};

const getStatusClass = (status) => {
  switch (status) {
    case 'hint': return 'text-red-lighten-1';
    case 'correct': return 'text-teal-accent-3';
    default: return 'text-grey-lighten-1';
  }
};
</script>

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