<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useZxFwPricingStore } from '@/pinia/zxFwPricing'

interface HtBaseInfoState {
  quality: string
  duration: string
}

const { t } = useI18n()
const DEFAULT_QUALITY = t('htBaseInfo.defaultQuality')
const DEFAULT_DURATION = ''

const props = defineProps<{
  contractId: string
}>()

const zxFwPricingStore = useZxFwPricingStore()
const storageKey = () => `ht-base-info-${props.contractId}`
const quality = ref(DEFAULT_QUALITY)
const duration = ref('')
const lastSavedSnapshot = ref('')

const saveForm = (force = false) => {
  const payload: HtBaseInfoState = {
    quality: quality.value,
    duration: duration.value
  }
  const snapshot = JSON.stringify(payload)
  if (!force && snapshot === lastSavedSnapshot.value) return
  zxFwPricingStore.setKeyState(storageKey(), payload)
  lastSavedSnapshot.value = snapshot
}

const loadForm = async () => {
  const data = await zxFwPricingStore.loadKeyState<HtBaseInfoState>(storageKey())
  const hasStoredValue = Boolean(
    data && (Object.prototype.hasOwnProperty.call(data, 'quality') || Object.prototype.hasOwnProperty.call(data, 'duration'))
  )
  quality.value = typeof data?.quality === 'string' && data.quality ? data.quality : DEFAULT_QUALITY
  duration.value = typeof data?.duration === 'string' ? data.duration : (hasStoredValue ? '' : DEFAULT_DURATION)
  lastSavedSnapshot.value = JSON.stringify({ quality: quality.value, duration: duration.value })
  if (!hasStoredValue) saveForm(true)
}

watch([quality, duration], () => {
  saveForm()
})

onMounted(() => {
  void loadForm()
})

onBeforeUnmount(() => {
  saveForm(true)
})
</script>

<template>
  <div class="h-full min-h-0 flex flex-col">
    <div class="rounded-lg border bg-card p-5">
      <div class="mb-4 border-b pb-3">
        <h3 class="text-sm font-semibold text-foreground">{{ t('htBaseInfo.title') }}</h3>
      </div>
      <div class="grid grid-cols-1 gap-5">
        <label class="space-y-1.5">
          <div class="text-xs font-medium text-muted-foreground">{{ t('htBaseInfo.qualityLabel') }}</div>
          <textarea
            v-model="quality"
            rows="3"
            :placeholder="t('htBaseInfo.qualityPlaceholder')"
            class="w-full rounded-md border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-primary/30 resize-none"
          />
        </label>
        <label class="space-y-1.5">
          <div class="text-xs font-medium text-muted-foreground">{{ t('htBaseInfo.durationLabel') }}</div>
          <textarea
            v-model="duration"
            rows="3"
            :placeholder="t('htBaseInfo.durationPlaceholder')"
            class="w-full rounded-md border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-primary/30 resize-none"
          />
        </label>
      </div>
    </div>
  </div>
</template>
