<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useFontStore } from '../stores/fontStore'
import { useUiStore } from '../stores/uiStore'
import { generateSvg } from '../utils/svg-builder'
import type { PreviewItem as PreviewItemType } from '../types/font'

const fontStore = useFontStore()
const uiStore = useUiStore()

const previewItems = ref<PreviewItemType[]>([])
const isGenerating = ref(false)

const previewFonts = computed(() => fontStore.previewFonts)
const inputText = computed(() => uiStore.inputText)
const fontSize = computed(() => uiStore.fontSize)
const fillColor = computed(() => uiStore.textColor)

watch(
  [previewFonts, inputText, fontSize, fillColor],
  async () => {
    await generatePreviews()
  },
  { immediate: true }
)

async function generatePreviews() {
  const validPreviewFontIds = new Set(previewFonts.value.map(font => font.id))
  uiStore.retainExportItemsByFontIds(validPreviewFontIds)

  if (!inputText.value || inputText.value.trim() === '') {
    previewItems.value = []
    return
  }

  const fonts = previewFonts.value
  if (fonts.length === 0) {
    previewItems.value = []
    return
  }

  isGenerating.value = true

  try {
    const items: PreviewItemType[] = []

    for (const fontInfo of fonts) {
      if (!fontInfo.loaded) {
        await fontStore.loadFont(fontInfo)
      }

      if (fontInfo.font) {
        try {
          const svgResult = await generateSvg({
            text: inputText.value,
            font: fontInfo.font,
            fontSize: fontSize.value,
            fillColor: fillColor.value,
          })

          items.push({
            fontInfo,
            svgResult,
            selected: uiStore.selectedExportItems.some(item => item.fontInfo.id === fontInfo.id)
          })
        } catch (error) {
          console.error(`Failed to generate SVG for ${fontInfo.name}:`, error)
        }
      }
    }

    previewItems.value = items
  } catch (error) {
    console.error('Failed to generate previews:', error)
  } finally {
    isGenerating.value = false
  }
}

function toggleSelectItem(item: PreviewItemType) {
  item.selected = !item.selected
  uiStore.toggleExportItem(item)
}
</script>

<template>
  <div class="flex flex-col gap-2">
    <div v-if="previewItems.length === 0" class="text-[#86909c] text-center py-20">
      {{ isGenerating ? '生成预览中...' : '请选择字体并输入内容' }}
    </div>

    <div v-else class="flex flex-col gap-2">
      <div
        v-for="item in previewItems"
        :key="item.fontInfo.id"
        class="flex flex-col gap-2"
      >
        <div class="flex items-center gap-[8px] border-b border-[#c9cdd4] pb-[8px] pr-[8px]">
          <div class="w-[24px] h-[24px] shrink-0">
            <img src="../assets/icons/icons_idx%20_32.svg" alt="字体" class="w-full h-full" />
          </div>

          <div class="flex-1 text-xs text-[#86909c]">
            {{ item.fontInfo.name }}
          </div>

          <button
            @click="toggleSelectItem(item)"
            class="w-[18px] h-[18px] shrink-0 border rounded-full flex items-center justify-center p-0 bg-transparent"
            :class="item.selected ? 'bg-[#9b6bc2] border-[#9b6bc2]' : 'border-[#c9cdd4]'"
          >
            <img v-if="item.selected" src="../assets/icons/checkbox.svg" alt="选中" class="w-[11px] h-[9px]" />
          </button>
        </div>

        <div 
          @click="toggleSelectItem(item)"
          class="bg-white px-[8px] py-[8px] cursor-pointer"
        >
          <div v-html="item.svgResult.svg" class="svg-preview-container"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.svg-preview-container {
  width: fit-content;
  max-width: 100%;
}

.svg-preview-container :deep(svg) {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: none;
}
</style>
