<script setup lang="ts">
import { Settings2, ShieldCheck } from '@lucide/vue'
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'

import AdminOptionalFeaturesEditor from '../../components/admin/AdminOptionalFeaturesEditor.vue'
import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import AdminSeasonToolbar from '../../components/admin/AdminSeasonToolbar.vue'
import AdminWorkflowRulesCard from '../../components/admin/AdminWorkflowRulesCard.vue'
import { useAdminOptionalFeatures } from '../../components/admin/useAdminOptionalFeatures'
import { useAdminWorkflowRules } from '../../components/admin/useAdminWorkflowRules'
import { watchAdminToast } from '../../composables/useAdminToast'
import { useAuthStore } from '../../stores/auth'

const authStore = useAuthStore()
const canManageSettings = computed(() => authStore.hasPermission('settings'))

const {
  hasUnsavedWorkflowRuleChanges,
  workflowError,
  workflowLoading,
  workflowRules,
  workflowRuleSummary,
  workflowSaving,
  workflowSuccess,
  saveWorkflowRules,
  updateWorkflowRule,
} = useAdminWorkflowRules()

const {
  hasUnsavedOptionalFeatureChanges,
  optionalFeaturesError,
  optionalFeaturesForm,
  optionalFeaturesSaving,
  optionalFeaturesSuccess,
  saveOptionalFeatureSettings,
} = useAdminOptionalFeatures()

watchAdminToast(workflowSuccess, workflowError)
watchAdminToast(optionalFeaturesSuccess, optionalFeaturesError)

function hasUnsavedChanges() {
  return hasUnsavedWorkflowRuleChanges.value || hasUnsavedOptionalFeatureChanges.value
}

function confirmDiscardSettingsChanges() {
  if (!hasUnsavedChanges()) {
    return true
  }

  return window.confirm('Du hast ungespeicherte Änderungen in der Workflow-Steuerung. Änderungen verwerfen?')
}

function handleBeforeUnload(event: BeforeUnloadEvent) {
  if (!hasUnsavedChanges()) return
  event.preventDefault()
  event.returnValue = ''
}

onBeforeRouteLeave(() => confirmDiscardSettingsChanges())
onMounted(() => window.addEventListener('beforeunload', handleBeforeUnload))
onBeforeUnmount(() => window.removeEventListener('beforeunload', handleBeforeUnload))
</script>

<template>
  <div class="space-y-6">
    <AdminPageHeader
      eyebrow="Workflow-Steuerung"
      description="Saisonregeln und optionale Clip-Workflows zusammengefasst, weil sie fachlich denselben Betriebsbereich betreffen."
      :icon="ShieldCheck"
    />

    <AdminSeasonToolbar />

    <section class="space-y-4">
      <div class="flex items-center gap-2 px-1 text-sm font-semibold text-violet-700">
        <ShieldCheck class="h-4 w-4" />
        Award-Workflow-Regeln
      </div>
      <AdminWorkflowRulesCard
        :rules="workflowRules"
        :loading="workflowLoading"
        :saving="workflowSaving"
        :dirty="hasUnsavedWorkflowRuleChanges"
        :can-manage="canManageSettings"
        :summary="workflowRuleSummary"
        @update-rule="updateWorkflowRule"
        @save="saveWorkflowRules"
      />
    </section>

    <section class="space-y-4">
      <div class="flex items-center gap-2 px-1 text-sm font-semibold text-violet-700">
        <Settings2 class="h-4 w-4" />
        Optionale Workflows
      </div>
      <AdminOptionalFeaturesEditor
        :form="optionalFeaturesForm"
        :saving="optionalFeaturesSaving"
        :dirty="hasUnsavedOptionalFeatureChanges"
        :can-manage="canManageSettings"
        @save="saveOptionalFeatureSettings"
        @update:clip-submissions-enabled="optionalFeaturesForm.clipSubmissionsEnabled = $event"
        @update:clip-review-enabled="optionalFeaturesForm.clipReviewEnabled = $event"
        @update:clip-admin-menu-visible="optionalFeaturesForm.clipAdminMenuVisible = $event"
        @update:clip-submission-disabled-message="optionalFeaturesForm.clipSubmissionDisabledMessage = $event"
      />
    </section>
  </div>
</template>
