<script setup lang="ts">
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { Plus, Help, MoreOne, Edit, Copy, ReduceOne, RightOne } from '@icon-park/vue-next'
import MemoryVariableModal, { MemoryVariableForm } from './memory-variable-modal.vue'
import { VariableStructureItem } from '@/store/types/personal-app-config'
import { copyToClip } from '@/utils/copy'

const { t } = useI18n()

const variableStructure = defineModel<VariableStructureItem[] | null>('variableStructure', { required: true })
const isLongMemory = defineModel<string>('isLongMemory', { required: true })

const memoryExpandedNames = ref<string[]>([])
const isOpenLongMemory = ref(false)
const isShowMemoryVariableModal = ref(false)
const memoryVariableModal = ref<InstanceType<typeof MemoryVariableModal> | null>(null)

watch(
  () => isLongMemory.value,
  (newValue) => {
    isOpenLongMemory.value = newValue === 'Y'
  },
  { once: true },
)

watch(
  () => variableStructure.value,
  (newValue) => {
    newValue?.length && (memoryExpandedNames.value = ['memoryVariable'])
  },
)

function handleUpdateMemoryExpandedNames(expandedNames: string[]) {
  memoryExpandedNames.value = expandedNames
}

function handleShowMemoryVariableModal() {
  isShowMemoryVariableModal.value = true
}

function handleAddMemoryVariable() {
  isShowMemoryVariableModal.value = true

  if (memoryVariableModal.value) {
    memoryVariableModal.value.handleAddMemoryVariableItem()
  }
}

function handleCopyMemoryVariableName(memoryVariableItem: MemoryVariableForm) {
  copyToClip(memoryVariableItem.key)
  window.$message.success(t('common_module.copy_success_message'))
}

function handleDeleteMemoryVariableItem(memoryVariable: object) {
  window.$message
    .ctWarning(
      t(
        'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_delete_tip_content',
      ),
      t('common_module.delete_tip_title'),
    )
    .then(() => {
      if (variableStructure.value !== null) {
        const updatedVariableStructure = variableStructure.value.filter((variable) => variable !== memoryVariable)
        variableStructure.value = updatedVariableStructure.length > 0 ? updatedVariableStructure : null
      }

      window.$message.success(t('common_module.delete_success_message'))
    })
}

function handleChangeMemoryFragmentState(value: boolean) {
  isLongMemory.value = value ? 'Y' : 'N'
  isOpenLongMemory.value = value
}
</script>

<template>
  <section class="border-b border-[#e8e9eb] px-5">
    <div class="pt-4">
      <h2 class="my-3 text-[#84868c]">
        {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory') }}
      </h2>
      <NCollapse
        :expanded-names="memoryExpandedNames"
        :trigger-areas="['main', 'arrow']"
        @update:expanded-names="handleUpdateMemoryExpandedNames"
      >
        <template #arrow>
          <RightOne theme="multi-color" size="17" :fill="['#333', '#333', '#333', '#333']" />
        </template>
        <NCollapseItem name="memoryVariable" class="my-[13px]!">
          <template #header>
            <span class="mr-[5px] min-w-[60px]">
              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable') }}
            </span>
            <n-popover trigger="hover" placement="top-start" class="p-[12px]! left-[-120px]!" :show-arrow="false">
              <template #trigger>
                <Help theme="outline" size="15" fill="#333" :stroke-width="3" class="mt-[2px]" />
              </template>
              <div class="w-[650px] text-[14px]">
                <div class="m-w-[100%] mb-[16px] mt-[0px] leading-[22px]">
                  {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_message') }}
                </div>
                <div>
                  <img src="@/assets/images/memory-variableLabels.png" width="650" height="206" />
                </div>
              </div>
            </n-popover>
          </template>
          <template #header-extra>
            <NTooltip trigger="hover">
              <template #trigger>
                <Plus
                  theme="outline"
                  size="22"
                  :stroke-width="3"
                  class="text-theme-color cursor-pointer"
                  @click="handleAddMemoryVariable"
                />
              </template>
              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.add_memory_variable') }}
            </NTooltip>
          </template>
          <div class="text-xs text-[#84868c]">
            {{
              t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_message')
            }}
          </div>
          <div
            v-show="variableStructure?.length && variableStructure !== null"
            class="mt-4 flex flex-1 flex-wrap items-center gap-[12px] overflow-hidden"
          >
            <div
              v-for="(memoryVariableItem, index) in variableStructure"
              :key="index"
              class="font-400 line-height-[20px] flex cursor-pointer items-center rounded-[4px] bg-[#f2f5f9] py-[2px] pl-[8px] text-[12px] hover:bg-[#e3e8f0]"
              @click="handleShowMemoryVariableModal"
            >
              <n-popover v-if="memoryVariableItem.key.length > 8" trigger="hover" class="max-w-[250px]!">
                <template #trigger>
                  <div class="max-w-[105px] truncate text-[#151b26]">{{ memoryVariableItem.key }}</div>
                </template>
                {{ memoryVariableItem.key }}
              </n-popover>
              <div v-else class="max-w-[105px] truncate text-[#151b26]">{{ memoryVariableItem.key }}</div>

              <n-popover placement="bottom" trigger="hover" :show-arrow="false" class="p-[4px]!">
                <template #trigger>
                  <MoreOne theme="outline" size="14" fill="#333" :stroke-width="3" class="mr-[4px] mt-[2px]" />
                </template>
                <div class="text-[12px]">
                  <div
                    class="flex h-[30px] w-[90px] cursor-pointer items-center justify-start px-[8px] py-[5px] hover:rounded-[4px] hover:bg-[#f2f5f9]"
                    @click="handleShowMemoryVariableModal"
                  >
                    <Edit theme="outline" size="16" fill="#333" :stroke-width="3" /><span class="ml-[4px]">
                      {{
                        t(
                          'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_action_edit',
                        )
                      }}
                    </span>
                  </div>
                  <div
                    class="flex h-[30px] w-[90px] cursor-pointer items-center justify-start px-[8px] py-[5px] hover:rounded-[4px] hover:bg-[#f2f5f9]"
                    @click="handleCopyMemoryVariableName(memoryVariableItem)"
                  >
                    <Copy theme="outline" size="16" fill="#333" :stroke-width="3" />
                    <span class="ml-[4px]">
                      {{
                        t(
                          'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_variable_action_copy',
                        )
                      }}
                    </span>
                  </div>
                  <n-space>
                    <div
                      class="flex h-[30px] w-[90px] cursor-pointer items-center justify-start px-[8px] py-[5px] hover:rounded-[4px] hover:bg-[#f2f5f9]"
                      @click="handleDeleteMemoryVariableItem(memoryVariableItem)"
                    >
                      <ReduceOne theme="outline" size="16" fill="#333" :stroke-width="3" />
                      <span class="ml-[4px]">
                        {{ t('common_module.delete') }}
                      </span>
                    </div>
                  </n-space>
                </div>
              </n-popover>
            </div>
          </div>
        </NCollapseItem>

        <NCollapseItem name="memoryFragment" class="my-[13px]!">
          <template #header>
            <span class="mr-[5px] min-w-[60px]">
              {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_fragment') }}
            </span>
            <n-popover trigger="hover" placement="top-start" class="p-[12px]! left-[-120px]!" :show-arrow="false">
              <template #trigger>
                <Help theme="outline" size="15" fill="#333" :stroke-width="3" class="mt-[2px]" />
              </template>
              <div class="w-[650px] text-[14px]">
                <div class="m-w-[100%] mb-[16px] mt-[0px] leading-[22px]">
                  {{
                    t(
                      'personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_fragment_message',
                    )
                  }}
                </div>
                <div>
                  <img src="@/assets/images/memory-fragment.png" width="650" height="206" />
                </div>
              </div>
            </n-popover>
          </template>

          <template #header-extra>
            <n-switch v-model:value="isOpenLongMemory" size="small" @update:value="handleChangeMemoryFragmentState">
              <template #checked> {{ t('common_module.open') }} </template>
              <template #unchecked> {{ t('common_module.close') }} </template>
            </n-switch>
          </template>

          <div>
            <div class="text-xs text-[#84868c]">
              {{
                t('personal_space_module.agent_module.agent_setting_module.agent_config_module.memory_fragment_content')
              }}
            </div>
            <div class="flex flex-1 flex-wrap items-center gap-[12px] overflow-hidden"></div>
          </div>
        </NCollapseItem>
      </NCollapse>
    </div>
  </section>

  <MemoryVariableModal ref="memoryVariableModal" v-model="isShowMemoryVariableModal" />
</template>
