<script setup lang="ts">
import { computed, onActivated, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { getMajorDictEntries, isMajorIdInIndustryScope } from '@/sql'
import XmFactorGrid from '@/features/shared/components/XmFactorGrid.vue'
import { useKvStore } from '@/pinia/kv'

interface XmBaseInfoState {
  projectIndustry?: string
}

type MajorItem = {
  code: string
  name: string
  defCoe: number | null
  desc?: string | null
  notshowByzxflxs?: boolean
}

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

const PROJECT_INFO_KEY = computed(() => props.projectInfoKey || 'xm-base-info-v1')
const projectIndustry = ref('')
const kvStore = useKvStore()
const { t } = useI18n()

const loadProjectIndustry = async () => {
  try {
    const data = await kvStore.getItem<XmBaseInfoState>(PROJECT_INFO_KEY.value)
    projectIndustry.value =
      typeof data?.projectIndustry === 'string' ? data.projectIndustry.trim() : ''
  } catch (error) {
    console.error('loadProjectIndustry failed:', error)
    projectIndustry.value = ''
  }
}

const filteredMajorDict = computed<Record<string, MajorItem>>(() => {
  const industry = projectIndustry.value
  if (!industry) return {}
  const entries = getMajorDictEntries()
    .filter(({ id }) => isMajorIdInIndustryScope(id, industry))
    .map(({ id, item }) => [id, item as MajorItem] as const)
  return Object.fromEntries(entries)
})

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

onActivated(() => {
  void loadProjectIndustry()
})
</script>

<template>
  <XmFactorGrid
    :title="t('htFactors.majorTitle')"
    :storage-key="`ht-major-factor-v1-${props.contractId}`"
    :parent-storage-key="props.parentStorageKey || 'xm-major-factor-v1'"
    :dict="filteredMajorDict"
    :disable-budget-edit-when-standard-null="true"
    :exclude-notshow-by-zxflxs="true"
    :init-budget-value-from-standard="true"
  />
</template>
