<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { usePromptStore, type RemotePresetData } from '@/stores/prompt'

const { t, locale } = useI18n()
const promptStore = usePromptStore()

// Props
const props = defineProps<{
  open: boolean
}>()

// Emits
const emit = defineEmits<{
  'update:open': [value: boolean]
  'preset-added': []
}>()

// 状态
const isLoading = ref(false)
const error = ref('')
const remotePresets = ref<RemotePresetData[]>([])

// 预览状态
const previewPreset = ref<RemotePresetData | null>(null)
const isPreviewLoading = ref(false)
const previewError = ref('')

// 添加状态（跟踪正在添加的预设 ID）
const addingPresetId = ref<string | null>(null)

// 预设分组配置
const presetGroups = computed(() => [
  {
    key: 'common',
    icon: 'i-heroicons-squares-2x2',
    iconColor: 'text-emerald-500',
    titleKey: 'importPreset.commonPresets',
    presets: remotePresets.value.filter((p) => p.chatType === 'common' || !p.chatType),
  },
  {
    key: 'group',
    icon: 'i-heroicons-chat-bubble-left-right',
    iconColor: 'text-violet-500',
    titleKey: 'importPreset.groupPresets',
    presets: remotePresets.value.filter((p) => p.chatType === 'group'),
  },
  {
    key: 'private',
    icon: 'i-heroicons-user',
    iconColor: 'text-blue-500',
    titleKey: 'importPreset.privatePresets',
    presets: remotePresets.value.filter((p) => p.chatType === 'private'),
  },
])

// 加载远程预设索引（不下载内容）
async function loadRemotePresets() {
  isLoading.value = true
  error.value = ''

  try {
    const presets = await promptStore.fetchRemotePresets(locale.value)
    remotePresets.value = presets

    if (presets.length === 0) {
      error.value = t('importPreset.noPresets')
    }
  } catch (e) {
    error.value = t('importPreset.loadError')
  } finally {
    isLoading.value = false
  }
}

// 预览预设（按需下载内容）
async function handlePreview(preset: RemotePresetData) {
  previewError.value = ''

  // 如果已有内容，直接显示
  if (preset.roleDefinition && preset.responseRules) {
    previewPreset.value = preset
    return
  }

  isPreviewLoading.value = true
  previewPreset.value = preset // 先显示基本信息

  const fullPreset = await promptStore.fetchPresetContent(preset)
  if (fullPreset) {
    previewPreset.value = fullPreset
    // 更新列表中的缓存
    const index = remotePresets.value.findIndex((p) => p.id === preset.id)
    if (index !== -1) {
      remotePresets.value[index] = fullPreset
    }
  } else {
    previewError.value = t('importPreset.fetchError')
  }

  isPreviewLoading.value = false
}

// 关闭预览
function closePreview() {
  previewPreset.value = null
  previewError.value = ''
}

// 添加预设（按需下载后再添加）
async function handleAddPreset(preset: RemotePresetData) {
  addingPresetId.value = preset.id

  // 如果还没有内容，先下载
  let fullPreset = preset
  if (!preset.roleDefinition || !preset.responseRules) {
    const fetched = await promptStore.fetchPresetContent(preset)
    if (!fetched) {
      addingPresetId.value = null
      return
    }
    fullPreset = fetched
    // 更新列表中的缓存
    const index = remotePresets.value.findIndex((p) => p.id === preset.id)
    if (index !== -1) {
      remotePresets.value[index] = fullPreset
    }
  }

  const success = promptStore.addRemotePreset(fullPreset)
  if (success) {
    emit('preset-added')
  }
  addingPresetId.value = null
}

// 从预览弹窗添加预设（添加后自动关闭预览）
async function handleAddPresetFromPreview() {
  if (!previewPreset.value) return
  await handleAddPreset(previewPreset.value)
  closePreview()
}

// 关闭弹窗
function closeModal() {
  emit('update:open', false)
  closePreview()
}

// 监听打开状态，打开时加载数据
watch(
  () => props.open,
  (newVal) => {
    if (newVal) {
      loadRemotePresets()
    } else {
      closePreview()
    }
  }
)
</script>

<template>
  <UModal :open="open" @update:open="emit('update:open', $event)" :ui="{ content: 'md:w-full max-w-lg' }">
    <template #content>
      <div class="p-6">
        <!-- Header -->
        <div class="mb-4 flex items-center justify-between">
          <div class="flex items-center gap-2">
            <UIcon name="i-heroicons-cloud-arrow-down" class="h-5 w-5 text-primary-500" />
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('importPreset.title') }}</h2>
          </div>
          <UButton icon="i-heroicons-x-mark" variant="ghost" size="sm" @click="closeModal" />
        </div>

        <!-- 描述 -->
        <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ t('importPreset.description') }}</p>

        <!-- 内容区域 -->
        <div class="max-h-[400px] overflow-y-auto">
          <!-- 加载中 -->
          <div v-if="isLoading" class="flex flex-col items-center justify-center py-12">
            <UIcon name="i-heroicons-arrow-path" class="h-8 w-8 animate-spin text-primary-500" />
            <p class="mt-2 text-sm text-gray-500">{{ t('importPreset.loading') }}</p>
          </div>

          <!-- 错误状态 -->
          <div v-else-if="error" class="flex flex-col items-center justify-center py-12">
            <UIcon name="i-heroicons-exclamation-circle" class="h-8 w-8 text-red-500" />
            <p class="mt-2 text-sm text-gray-500">{{ error }}</p>
            <UButton variant="soft" size="sm" class="mt-4" @click="loadRemotePresets">
              {{ t('importPreset.retry') }}
            </UButton>
          </div>

          <!-- 预设列表 -->
          <div v-else class="space-y-4">
            <!-- 预设分组 -->
            <div v-for="group in presetGroups" :key="group.key">
              <div v-if="group.presets.length > 0">
                <h4 class="mb-2 flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                  <UIcon :name="group.icon" class="h-4 w-4" :class="group.iconColor" />
                  {{ t(group.titleKey) }}
                </h4>
                <div class="space-y-2">
                  <div
                    v-for="preset in group.presets"
                    :key="preset.id"
                    class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-3 dark:border-gray-700 dark:bg-gray-800"
                  >
                    <div class="flex-1 min-w-0">
                      <p class="text-sm font-medium text-gray-900 dark:text-white">{{ preset.name }}</p>
                      <p class="mt-0.5 line-clamp-2 text-xs text-gray-500 dark:text-gray-400">
                        {{ preset.description || t('importPreset.noDescription') }}
                      </p>
                    </div>
                    <div class="flex items-center gap-1.5 ml-2 shrink-0">
                      <!-- 预览按钮 -->
                      <UButton color="gray" size="xs" @click="handlePreview(preset)">
                        <UIcon name="i-heroicons-eye" class="mr-1 h-3.5 w-3.5" />
                        {{ t('importPreset.preview') }}
                      </UButton>
                      <!-- 添加按钮 -->
                      <UButton
                        v-if="promptStore.isRemotePresetAdded(preset.id)"
                        variant="soft"
                        color="gray"
                        size="xs"
                        disabled
                      >
                        <UIcon name="i-heroicons-check" class="mr-1 h-3.5 w-3.5" />
                        {{ t('importPreset.added') }}
                      </UButton>
                      <UButton
                        v-else
                        variant="soft"
                        color="primary"
                        size="xs"
                        :loading="addingPresetId === preset.id"
                        @click="handleAddPreset(preset)"
                      >
                        <UIcon v-if="addingPresetId !== preset.id" name="i-heroicons-plus" class="mr-1 h-3.5 w-3.5" />
                        {{ t('importPreset.add') }}
                      </UButton>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </UModal>

  <!-- 预览弹窗 -->
  <UModal :open="!!previewPreset" @update:open="closePreview" :ui="{ content: 'md:w-full max-w-2xl' }">
    <template #content>
      <div class="p-6">
        <div class="mb-4 flex items-center justify-between">
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
            {{ previewPreset?.name }}
          </h3>
          <UButton icon="i-heroicons-x-mark" variant="ghost" size="sm" @click="closePreview" />
        </div>

        <!-- 加载中 -->
        <div v-if="isPreviewLoading" class="flex items-center justify-center py-8">
          <UIcon name="i-heroicons-arrow-path" class="h-6 w-6 animate-spin text-primary-500" />
          <span class="ml-2 text-sm text-gray-500">{{ t('importPreset.fetchingContent') }}</span>
        </div>

        <!-- 错误 -->
        <div v-else-if="previewError" class="text-center py-8">
          <UIcon name="i-heroicons-exclamation-circle" class="h-8 w-8 text-red-500 mx-auto" />
          <p class="mt-2 text-sm text-gray-500">{{ previewError }}</p>
        </div>

        <!-- 内容 -->
        <div v-else-if="previewPreset?.roleDefinition" class="max-h-[60vh] overflow-y-auto space-y-4">
          <div>
            <p class="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
              {{ t('importPreset.roleDefinition') }}
            </p>
            <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800">
              <p class="whitespace-pre-wrap text-sm text-gray-600 dark:text-gray-400">
                {{ previewPreset.roleDefinition }}
              </p>
            </div>
          </div>
          <div>
            <p class="mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
              {{ t('importPreset.responseRules') }}
            </p>
            <div class="rounded-lg bg-gray-50 p-3 dark:bg-gray-800">
              <p class="whitespace-pre-wrap text-sm text-gray-600 dark:text-gray-400">
                {{ previewPreset.responseRules }}
              </p>
            </div>
          </div>
        </div>

        <!-- 底部按钮 -->
        <div
          v-if="previewPreset && !isPreviewLoading && !previewError"
          class="mt-4 flex justify-end gap-2 border-t border-gray-200 pt-4 dark:border-gray-700"
        >
          <UButton variant="ghost" color="gray" @click="closePreview">
            {{ t('importPreset.close') }}
          </UButton>
          <UButton
            v-if="!promptStore.isRemotePresetAdded(previewPreset.id)"
            color="primary"
            :loading="addingPresetId === previewPreset.id"
            @click="handleAddPresetFromPreview"
          >
            <UIcon v-if="addingPresetId !== previewPreset.id" name="i-heroicons-plus" class="mr-1 h-4 w-4" />
            {{ t('importPreset.add') }}
          </UButton>
          <UButton v-else variant="soft" color="gray" disabled>
            <UIcon name="i-heroicons-check" class="mr-1 h-4 w-4" />
            {{ t('importPreset.added') }}
          </UButton>
        </div>
      </div>
    </template>
  </UModal>
</template>

<i18n>
{
  "zh-CN": {
    "importPreset": {
      "title": "导入预设",
      "description": "从远程获取推荐的系统提示词预设",
      "loading": "正在加载远程预设...",
      "loadError": "加载远程预设失败",
      "noPresets": "暂无可用的远程预设",
      "retry": "重试",
      "commonPresets": "通用预设",
      "groupPresets": "群聊专用预设",
      "privatePresets": "私聊专用预设",
      "add": "添加",
      "added": "已添加",
      "preview": "预览",
      "roleDefinition": "角色定义",
      "responseRules": "回复规则",
      "noDescription": "暂无描述",
      "fetchingContent": "正在加载内容...",
      "fetchError": "加载内容失败",
      "close": "关闭"
    }
  },
  "en-US": {
    "importPreset": {
      "title": "Import Presets",
      "description": "Get recommended system prompt presets from remote",
      "loading": "Loading remote presets...",
      "loadError": "Failed to load remote presets",
      "noPresets": "No remote presets available",
      "retry": "Retry",
      "commonPresets": "Universal Presets",
      "groupPresets": "Group Chat Only",
      "privatePresets": "Private Chat Only",
      "add": "Add",
      "added": "Added",
      "preview": "Preview",
      "roleDefinition": "Role Definition",
      "responseRules": "Response Rules",
      "noDescription": "No description",
      "fetchingContent": "Loading content...",
      "fetchError": "Failed to load content",
      "close": "Close"
    }
  }
}
</i18n>
