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

import AdminDemoPreviewCard from '../../components/admin/AdminDemoPreviewCard.vue'
import AdminMaintenanceModeCard from '../../components/admin/AdminMaintenanceModeCard.vue'
import AdminPageHeader from '../../components/admin/AdminPageHeader.vue'
import { useAdminOperationalSettings } from '../../components/admin/useAdminOperationalSettings'
import { watchAdminToast } from '../../composables/useAdminToast'
import Button from '../../components/ui/Button.vue'
import { useAuthStore } from '../../stores/auth'

const authStore = useAuthStore()
const canManageOperationalSettings = computed(() => authStore.canManageOperationalSettings)

const {
  operationalLoading,
  operationalSaving,
  operationalError,
  operationalSuccess,
  operationalForm,
  demoPasswordSet,
  demoManagedByDatabase,
  demoPasswordInput,
  demoPasswordHint,
  demoCredentialsComplete,
  hasUnsavedOperationalChanges,
  saveOperationalSettings,
} = useAdminOperationalSettings()

watchAdminToast(operationalSuccess, operationalError)

function confirmDiscardSettingsChanges() {
  if (!hasUnsavedOperationalChanges.value) {
    return true
  }

  return window.confirm('Du hast ungespeicherte Änderungen in Demo und Wartung. Änderungen verwerfen?')
}

function handleBeforeUnload(event: BeforeUnloadEvent) {
  if (!hasUnsavedOperationalChanges.value) 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="Demo & Wartung"
      description="Bündelt Demo-Schutz und Wartungsmodus an einem sinnvollen Betriebsort."
      :icon="Wrench"
    />

    <div class="flex justify-end">
      <Button class="gap-2 rounded-2xl px-5" :disabled="operationalLoading || operationalSaving || !canManageOperationalSettings || !hasUnsavedOperationalChanges" @click="saveOperationalSettings">
        <Save class="h-4 w-4" />
        {{ operationalSaving ? 'Speichert ...' : 'Betriebseinstellungen speichern' }}
      </Button>
    </div>

    <section class="grid gap-6 xl:grid-cols-2">
      <div class="space-y-4">
        <div class="flex items-center gap-2 px-1 text-sm font-semibold text-violet-700">
          <KeyRound class="h-4 w-4" />
          Demo-Vorschau
        </div>
        <AdminDemoPreviewCard
          :form="operationalForm"
          :saving="operationalSaving"
          :can-manage="canManageOperationalSettings"
          :demo-password="demoPasswordInput"
          :demo-password-hint="demoPasswordHint"
          :demo-password-set="demoPasswordSet"
          :demo-managed-by-database="demoManagedByDatabase"
          :demo-credentials-complete="demoCredentialsComplete"
          @update:demo-password="demoPasswordInput = $event"
        />
      </div>

      <div class="space-y-4">
        <div class="flex items-center gap-2 px-1 text-sm font-semibold text-amber-700">
          <Wrench class="h-4 w-4" />
          Wartungsmodus
        </div>
        <AdminMaintenanceModeCard
          :form="operationalForm"
          :saving="operationalSaving"
          :can-manage="canManageOperationalSettings"
        />
      </div>
    </section>
  </div>
</template>
