<script setup lang="ts">
import { computed, ref } from 'vue'
import { useFontLoader } from './composables/useFontLoader'
import { useUiStore } from './stores/uiStore'
import { useFontStore } from './stores/fontStore'
import { MAX_CHARS_PER_LINE, wrapTextByChars } from './utils/text-layout'
import FontSelector from './components/FontSelector.vue'
import FavoritesList from './components/FavoritesList.vue'
import SvgPreview from './components/SvgPreview.vue'
import selectAllIcon from './assets/icons/selectall.svg'
import unselectAllIcon from './assets/icons/unselectall.svg'

console.log('App.vue: script setup running...')

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

type SvgPreviewExpose = {
  toggleSelectAllPreviewItems: () => void
}

const svgPreviewRef = ref<SvgPreviewExpose | null>(null)

const fontSizePercent = computed(() => {
  const raw = ((uiStore.fontSize - 10) / (500 - 10)) * 100
  return Math.max(0, Math.min(100, raw))
})

const isAllPreviewSelected = computed(() => {
  const previewIds = fontStore.previewFonts.map(font => font.id)
  if (previewIds.length === 0) {
    return false
  }

  const selectedIds = new Set(uiStore.selectedExportItems.map(item => item.fontInfo.id))
  return previewIds.every(id => selectedIds.has(id))
})

const isAllFavoriteSelected = computed(() => {
  const favoriteIds = fontStore.favoriteFonts.map(font => font.id)
  if (favoriteIds.length === 0) {
    return false
  }

  return favoriteIds.every(id => fontStore.previewFontIds.has(id))
})

const favoriteFontCount = computed(() => fontStore.favoriteFonts.length)

// 加载字体列表
try {
  useFontLoader()
  console.log('App.vue: useFontLoader called successfully')
} catch (error) {
  console.error('App.vue: Error in useFontLoader:', error)
}

const normalizedInitialInput = wrapTextByChars(uiStore.inputText, MAX_CHARS_PER_LINE)
if (normalizedInitialInput !== uiStore.inputText) {
  uiStore.setInputText(normalizedInitialInput)
}

type ExportFormat = 'svg' | 'png'

async function handleExport(format: ExportFormat) {
  uiStore.retainExportItemsByFontIds(fontStore.previewFontIds)
  const selectedItems = uiStore.selectedExportItems
  const inputText = uiStore.inputText.trim()
  
  if (selectedItems.length === 0) {
    alert('请选择需要导出的效果')
    return
  }
  
  if (!inputText) {
    alert('请输入要导出的文字')
    return
  }

  try {
    const { renderSvgByApi } = await import('./utils/render-api')
    const {
      convertSvgToPngBlob,
      downloadSvg,
      downloadMultipleFiles,
      downloadPngFromSvg,
      generatePngFilename,
      generateSvgFilename,
    } = await import('./utils/download')

    const renderByApi = async (fontId: string) => {
      return renderSvgByApi({
        fontId,
        text: inputText,
        fontSize: uiStore.fontSize,
        fillColor: uiStore.textColor,
        letterSpacing: Number(uiStore.letterSpacing) || 0,
        maxCharsPerLine: MAX_CHARS_PER_LINE,
      })
    }
    
    if (selectedItems.length === 1) {
      // 单个字体，直接下载 SVG
      const item = selectedItems[0]
      const fontId = item?.fontInfo?.id
      if (!fontId) {
        alert('选中字体信息无效，请重新选择后重试')
        return
      }

      const svgResult = await renderByApi(fontId)
      
      if (format === 'svg') {
        const filename = generateSvgFilename(inputText, svgResult.fontName)
        downloadSvg(svgResult.svg, filename)
      } else {
        const filename = generatePngFilename(inputText, svgResult.fontName)
        await downloadPngFromSvg(svgResult.svg, filename, {
          width: svgResult.width,
          height: svgResult.height,
        })
      }
      
    } else {
      // 多个字体，打包下载
      const files: Array<{ name: string; content: string | Blob }> = []
      
      for (const item of selectedItems) {
        try {
          const fontId = item?.fontInfo?.id
          if (!fontId) {
            console.warn('发现无效字体项，已跳过')
            continue
          }

          const svgResult = await renderByApi(fontId)
          
          if (format === 'svg') {
            const filename = generateSvgFilename(inputText, svgResult.fontName)
            files.push({
              name: filename,
              content: svgResult.svg
            })
          } else {
            const filename = generatePngFilename(inputText, svgResult.fontName)
            const pngBlob = await convertSvgToPngBlob(svgResult.svg, {
              width: svgResult.width,
              height: svgResult.height,
            })
            files.push({
              name: filename,
              content: pngBlob,
            })
          }
        } catch (error) {
          console.warn(`字体 ${item.fontInfo.name} 导出失败:`, error)
        }
      }
      
      if (files.length > 0) {
        const zipFilename = format === 'svg' ? 'font2svg-svg-export.zip' : 'font2svg-png-export.zip'
        await downloadMultipleFiles(files, zipFilename)
      } else {
        alert(`所有字体${format.toUpperCase()}导出都失败了`)
      }
    }
    
  } catch (error) {
    console.error('导出失败:', error)
    alert(`导出失败: ${error instanceof Error ? error.message : '未知错误'}`)
  }
}

function handleFontSizeChange(size: number) {
  uiStore.setFontSize(size)
}

function handleSliderInput(event: Event) {
  const target = event.target as HTMLInputElement
  const value = Number(target.value)
  if (!Number.isNaN(value)) {
    uiStore.setFontSize(value)
  }
}

function handleTextInput(event: Event) {
  const target = event.target as HTMLTextAreaElement
  const wrappedText = wrapTextByChars(target.value, MAX_CHARS_PER_LINE)
  if (wrappedText !== target.value) {
    target.value = wrappedText
  }
  uiStore.setInputText(wrappedText)
}

function handleTogglePreviewSelectAll() {
  svgPreviewRef.value?.toggleSelectAllPreviewItems()
}

function handleToggleFavoriteSelectAll() {
  const favoriteIds = fontStore.favoriteFonts.map(font => font.id)
  if (favoriteIds.length === 0) {
    return
  }

  if (isAllFavoriteSelected.value) {
    favoriteIds.forEach(id => fontStore.removeFromPreview(id))
    return
  }

  favoriteIds.forEach(id => fontStore.addToPreview(id))
}

console.log('App.vue: script setup completed')
</script>

<template>
  <div class="w-screen h-screen box-border p-8px bg-white flex flex-col overflow-hidden">
    <!-- Frame 7: 顶部工具栏 -->
    <div class="flex gap-2 items-center shrink-0 h-24 px-2 py-1">
      <!-- webicon - 48x48 -->
      <div class="w-12 h-12 rounded-xl overflow-hidden shrink-0">
        <img src="./assets/webicon.svg" alt="logo" class="w-full h-full object-cover" />
      </div>

      <!-- 星程字体转换 - 弹性宽度 -->
      <div class="shrink-0 max-w-[225px] min-w-[120px]" style="height: 72px;">
        <img src="./assets/icons/星程字体转换.svg" alt="星程SVG文字生成 TEXT to SVG" class="w-full h-full object-contain" />
      </div>

      <!-- slider - 增加宽度 -->
      <div class="flex items-center gap-3 px-2 shrink-0 relative" style="width: 280px; height: 32px;">
        <button 
          @click="handleFontSizeChange(uiStore.fontSize - 10)"
          class="w-4 h-4 shrink-0 cursor-pointer hover:opacity-70 transition-opacity flex items-center justify-center p-0 border-0 bg-transparent"
          title="减小字体"
        >
          <img src="./assets/icons/icons_idx%20_38.svg" alt="A-" class="w-4 h-4 object-contain" />
        </button>
        <div class="flex-1 h-6 flex items-center relative">
          <input 
            type="range" 
            min="10" 
            max="500" 
            step="1"
            :value="uiStore.fontSize"
            @input="handleSliderInput"
            class="font-size-range w-full h-6 cursor-pointer"
            :style="{ background: `linear-gradient(to right, #9b6bc2 0%, #9b6bc2 ${fontSizePercent}%, #e5e6eb ${fontSizePercent}%, #e5e6eb 100%)` }"
          />
          <!-- 字体大小数字显示 -->
          <div 
            class="absolute pointer-events-none -top-4"
            :style="{ left: `calc(${fontSizePercent}% - 7px)` }"
          >
            <div class="text-[#8552A1] text-[12px] font-medium text-center w-6">
              {{ uiStore.fontSize }}
            </div>
          </div>
        </div>
        <button 
          @click="handleFontSizeChange(uiStore.fontSize + 10)"
          class="w-6 h-6 shrink-0 cursor-pointer hover:opacity-70 transition-opacity flex items-center justify-center p-0 border-0 bg-transparent"
          title="增大字体"
        >
          <img src="./assets/icons/icons_idx%20_33.svg" alt="A+" class="w-6 h-6 object-contain" />
        </button>
      </div>

      <!-- 文字颜色选择 -->
      <div class="shrink-0 relative w-9 h-9">
        <label class="w-full h-full flex items-center justify-center cursor-pointer">
          <img src="./assets/icons/choose-color.svg" alt="颜色" class="w-9 h-9 object-contain" />
          <input
            type="color"
            :value="uiStore.textColor"
            @input="uiStore.setTextColor(($event.target as HTMLInputElement).value)"
            class="absolute inset-0 opacity-0 cursor-pointer"
            aria-label="选择文字颜色"
          />
        </label>
      </div>

      <!-- Frame 14: 输入框 - 弹性宽度 -->
      <div class="flex-1 min-w-[80px] bg-[#f7f8fa] rounded-lg px-2 py-1 h-12">
        <textarea
          :value="uiStore.inputText"
          @input="handleTextInput"
          placeholder="此处输入内容"
          class="w-full h-full bg-transparent border-none outline-none text-base text-[#4e5969] placeholder-[#4e5969] resize-none leading-5 overflow-y-auto"
        />
      </div>

      <!-- Export Group -->
      <div class="flex items-center gap-1 shrink-0 border border-[#8552A1] rounded-lg px-1 py-1 bg-[#f7f8fa] shadow-sm">
        <div class="w-[18px] h-[42px] shrink-0 pointer-events-none">
          <img src="./assets/icons/export.svg" alt="导出" class="w-full h-full object-contain" />
        </div>

        <button
          @click="handleExport('svg')"
          class="w-12 h-12 shrink-0 cursor-pointer hover:opacity-85 transition-opacity flex items-center justify-center p-0 border-0 bg-transparent"
          title="导出 SVG"
        >
          <img src="./assets/icons/export-svg.svg" alt="导出SVG" class="w-12 h-12 object-contain" />
        </button>

        <button
          @click="handleExport('png')"
          class="w-12 h-12 shrink-0 cursor-pointer hover:opacity-85 transition-opacity flex items-center justify-center p-0 border-0 bg-transparent"
          title="导出 PNG"
        >
          <img src="./assets/icons/export-png.svg" alt="导出PNG" class="w-12 h-12 object-contain" />
        </button>
      </div>
    </div>

    <!-- Frame 9: 主内容区 -->
    <div class="flex-1 flex gap-2 min-h-0 overflow-hidden px-2">
      <!-- Frame 15: 左侧栏 - 弹性宽度 -->
      <div class="flex flex-col gap-2 shrink-0 overflow-hidden" style="flex-basis: 400px; max-width: 480px; min-width: 320px;">
        <!-- Frame 5: 字体选择 - 弹性高度 -->
        <div class="flex-[2] border border-solid border-[#f7e0e0] rounded-lg p-1.5 flex flex-col gap-2 overflow-hidden min-h-0">
          <div v-overflow-aware class="scrollbar-hover flex-1 overflow-y-auto overflow-x-hidden pr-2">
            <FontSelector />
          </div>
        </div>

        <!-- Frame 5: 已收藏字体 - 弹性高度 -->
        <div class="border border-solid border-[#f7e0e0] rounded-lg p-1.5 flex flex-col gap-2 flex-1 overflow-hidden min-h-[120px]">
          <div class="flex items-center pr-[9px]">
            <h2 class="text-base text-black shrink-0 leading-none flex-1">
              已收藏字体（{{ favoriteFontCount }}字体）
            </h2>
            <button
              @click="handleToggleFavoriteSelectAll"
              class="w-4 h-4 shrink-0 p-0 border-0 bg-transparent cursor-pointer hover:opacity-85 transition-opacity"
              title="已收藏字体全选/全不选"
            >
              <img
                :src="isAllFavoriteSelected ? unselectAllIcon : selectAllIcon"
                alt="已收藏字体全选/全不选"
                class="w-full h-full"
              />
            </button>
          </div>
          <div v-overflow-aware class="scrollbar-hover flex-1 overflow-y-auto overflow-x-hidden pr-2">
            <FavoritesList />
          </div>
        </div>
      </div>

      <!-- Frame 8: 右侧预览区 - 弹性宽度 -->
      <div class="flex-1 border border-solid border-[#f7e0e0] rounded-lg p-1.5 flex flex-col gap-2 overflow-hidden min-w-0">
        <div class="flex items-center pr-[9px]">
          <h2 class="text-base text-black shrink-0 leading-none flex-1">效果预览</h2>
          <button
            @click="handleTogglePreviewSelectAll"
            class="w-4 h-4 shrink-0 p-0 border-0 bg-transparent cursor-pointer hover:opacity-85 transition-opacity"
            title="效果预览全选/全不选"
          >
            <img
              :src="isAllPreviewSelected ? unselectAllIcon : selectAllIcon"
              alt="效果预览全选/全不选"
              class="w-full h-full"
            />
          </button>
        </div>
        <div v-overflow-aware class="scrollbar-hover flex-1 min-h-0 py-2 overflow-y-auto overflow-x-hidden">
          <SvgPreview ref="svgPreviewRef" />
        </div>
      </div>
    </div>

    <!-- 底部版权 -->
    <div class="text-[#86909c] text-xs text-center shrink-0 h-6 pt-4 flex items-center justify-center px-2">
      @版权说明：所有字体来源互联网分享，仅供效果预览，不做下载传播，如有侵权，请告知douboer@gmail.com
    </div>
  </div>
</template>

<style scoped>
.font-size-range {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 10px;
  background: #e5e6eb;
}

.font-size-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e6eb;
  cursor: pointer;
}

.font-size-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e6eb;
  cursor: pointer;
}

.font-size-range::-moz-range-track {
  height: 3px;
  border-radius: 10px;
  background: transparent;
}
</style>
