<script setup lang="ts">
import { onMounted } from 'vue'

import { hasAdminRole } from '@/utils/admin-auth'

import AdminBindingsLookupSection from './components/AdminBindingsLookupSection.vue'
import AdminBindingsObservedSection from './components/AdminBindingsObservedSection.vue'
import AdminBindingsOverviewSection from './components/AdminBindingsOverviewSection.vue'
import AdminBindingsRuleSection from './components/AdminBindingsRuleSection.vue'
import { useFulfillmentBindings } from './composables/useFulfillmentBindings'
import { useFulfillmentBindingsLookup } from './composables/useFulfillmentBindingsLookup'

const bindings = useFulfillmentBindings()
const lookup = useFulfillmentBindingsLookup(bindings)

onMounted(bindings.loadConfigs)
</script>

<template>
  <section class="admin-panel">
    <div v-if="!hasAdminRole('admin')" class="empty-block">仅管理员可以维护履约配置。</div>

    <template v-else>
      <AdminBindingsOverviewSection
        :file-path="bindings.filePath.value"
        :rule-metrics="bindings.ruleMetrics.value"
        :pending-observed-count="bindings.pendingObservedCount.value"
        :observed-products-length="bindings.observedProducts.value.length"
      />

      <p v-if="bindings.errorMessage.value" class="error-copy">{{ bindings.errorMessage.value }}</p>
      <div v-if="bindings.loading.value" class="empty-block">履约配置加载中</div>

      <template v-else>
        <AdminBindingsRuleSection
          :saving="bindings.saving.value"
          :validation-state="bindings.validationState.value"
          :bindings="bindings.bindings.value"
          :rule-metrics="bindings.ruleMetrics.value"
          :is-binding-collapsed="bindings.isBindingCollapsed"
          :is-editable-binding-complete="bindings.isEditableBindingComplete"
          :get-binding-title="bindings.getBindingTitle"
          :get-binding-status-label="bindings.getBindingStatusLabel"
          :get-binding-summary="bindings.getBindingSummary"
          :is-binding-invalid="bindings.isBindingInvalid"
          :is-field-invalid="bindings.isFieldInvalid"
          @add-binding="bindings.addBinding()"
          @load-configs="bindings.loadConfigs()"
          @save-configs="bindings.saveConfigs()"
          @toggle-collapsed="bindings.toggleBindingCollapsed($event)"
          @clear-validation="bindings.clearValidationState()"
          @remove-binding="bindings.removeBinding($event)"
        />

        <AdminBindingsLookupSection
          :lookup-loading="lookup.lookupLoading.value"
          :lookup-error-message="lookup.lookupErrorMessage.value"
          :lookup-result="lookup.lookupResult.value"
          :lookup-form="lookup.lookupForm"
          :is-lookup-product-imported="lookup.isLookupProductImported"
          @lookup="lookup.lookupOrderProducts()"
          @import-product="lookup.importLookupProduct($event)"
        />

        <AdminBindingsObservedSection
          :observed-products="bindings.observedProducts.value"
          :pending-observed-count="bindings.pendingObservedCount.value"
          @import-product="bindings.importObservedProduct($event)"
        />
      </template>
    </template>
  </section>
</template>

<style scoped src="./AdminFulfillmentBindings.css"></style>
