<template>
  <template v-if="dialogType">
    <SettingDialog v-if="dialogType === 'settings'" />
    <HistoryDialog v-if="dialogType === 'history'" />
    <TemplateDialog v-if="dialogType === 'templates'" />
    <RubricEditor v-if="dialogType === 'rubric'" />
    <ResultDrawer v-if="dialogType === 'result'" />
  </template>
  <template v-else>
    <router-view />
  </template>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useAppStore } from '@/stores/app'
import { useSettingsStore } from '@/stores/settings'
import { useGradingStore } from '@/stores/grading'
import ResultDrawer from '@/components/ResultDrawer.vue'
import SettingDialog from '@/components/SettingDialog.vue'
import HistoryDialog from '@/pages/HistoryDialog.vue'
import TemplateDialog from '@/pages/TemplateDialog.vue'
import RubricEditor from '@/components/RubricEditor.vue'

const appStore = useAppStore()
const settingsStore = useSettingsStore()
const gradingStore = useGradingStore()

const dialogType = new URLSearchParams(window.location.search).get('dialog')

onMounted(async () => {
  if (dialogType === 'result') {
    const data = await window.electronAPI?.grading.getData()
    if (data) {
      if (data.image) gradingStore.setImage(data.image)
      if (data.questions) gradingStore.setQuestions(data.questions)
      if (data.result) gradingStore.setResult(data.result)
      if (data.currentQuestionIndex !== undefined) gradingStore.setCurrentQuestionIndex(data.currentQuestionIndex)
    }
    appStore.openResultDrawer()
  } else if (dialogType) {
    if (dialogType === 'settings') await settingsStore.loadSettings()
    const actions: Record<string, () => void> = {
      settings: () => appStore.openSettingDialog(),
      history: () => appStore.openHistoryDialog(),
      templates: () => appStore.openTemplateDialog(),
      rubric: () => appStore.openRubricEditor()
    }
    actions[dialogType]?.()
  } else {
    settingsStore.loadSettings()
  }
})
</script>
