<script lang="ts" setup>
import type { GenSettings, Region, TemplateInfo } from '../types'
import { Icon } from '@iconify/vue'
import { NButton, NForm, NFormItem, NGrid, NGridItem, NInput, NInputNumber } from 'naive-ui'
import { computed } from 'vue'

const props = defineProps<{
  templateInfo: TemplateInfo
  genSettings: GenSettings
  regions: Region[]
  selectedRegionIds: Set<string>
}>()

const emit = defineEmits<{
  (e: 'update:templateInfo', info: TemplateInfo): void // 更新模版基础信息
  (e: 'update:genSettings', settings: GenSettings): void // 更新生成设置
  (e: 'generate'): void // 触发生成
  (e: 'deleteRegion', id: string): void // 删除指定区域
  (e: 'clearAll'): void // 清除所有区域
  (e: 'update:selectedRegionIds', ids: Set<string>): void // 更新选中区域 ID 集合
}>()

const localTemplateInfo = computed({
  get: () => props.templateInfo,
  set: val => emit('update:templateInfo', val),
})

const localGenSettings = computed({
  get: () => props.genSettings,
  set: val => emit('update:genSettings', val),
})

/** 处理列表项点击选中 */
function handleSelect(region: Region, e: MouseEvent) {
  const isModifierDown = e.shiftKey || e.ctrlKey || e.metaKey
  const current = new Set(props.selectedRegionIds)
  if (isModifierDown) {
    if (current.has(region.id)) {
      current.delete(region.id)
    }
    else {
      current.add(region.id)
    }
    emit('update:selectedRegionIds', current)
  }
  else {
    emit('update:selectedRegionIds', new Set([region.id]))
  }
}
</script>

<template>
  <div class="w-[360px] flex flex-col shrink-0 overflow-y-auto border-l bg-white">
    <div class="border-b p-4">
      <h3 class="mb-4 flex items-center gap-2 text-gray-700 font-medium">
        <span class="h-4 w-1 rounded bg-gray-400" /> 模版基础信息
      </h3>
      <NForm label-placement="top" size="small">
        <NFormItem label="模版名称">
          <NInput v-model:value="localTemplateInfo.name" />
        </NFormItem>
        <NFormItem label="页码(PageNo)">
          <NInput v-model:value="localTemplateInfo.pageNo" placeholder="请输入页码" />
        </NFormItem>
        <NGrid :cols="2" :x-gap="12">
          <NGridItem>
            <NFormItem label="画布宽 (px)">
              <NInputNumber v-model:value="localTemplateInfo.width" />
            </NFormItem>
          </NGridItem>
          <NGridItem>
            <NFormItem label="画布高 (px)">
              <NInputNumber v-model:value="localTemplateInfo.height" />
            </NFormItem>
          </NGridItem>
        </NGrid>
      </NForm>
    </div>

    <div class="border-b p-4">
      <h3 class="mb-4 flex items-center gap-2 text-gray-700 font-medium">
        <span class="h-4 w-1 rounded bg-gray-400" /> 区域批量生成
      </h3>
      <NForm label-placement="top" size="small">
        <NGrid :cols="2" :x-gap="12">
          <NGridItem>
            <NFormItem label="列数 (Cols)">
              <NInputNumber v-model:value="localGenSettings.cols" :min="1" />
            </NFormItem>
          </NGridItem>
          <NGridItem>
            <NFormItem label="行数 (Rows)">
              <NInputNumber v-model:value="localGenSettings.rows" :min="1" />
            </NFormItem>
          </NGridItem>
          <NGridItem>
            <NFormItem label="单框宽 (W)">
              <NInputNumber v-model:value="localGenSettings.w" :min="1" />
            </NFormItem>
          </NGridItem>
          <NGridItem>
            <NFormItem label="单框高 (H)">
              <NInputNumber v-model:value="localGenSettings.h" :min="1" />
            </NFormItem>
          </NGridItem>
          <NGridItem>
            <NFormItem label="左右间距">
              <NInputNumber v-model:value="localGenSettings.gapX" :min="0" />
            </NFormItem>
          </NGridItem>
          <NGridItem>
            <NFormItem label="上下间距">
              <NInputNumber v-model:value="localGenSettings.gapY" :min="0" />
            </NFormItem>
          </NGridItem>
        </NGrid>
        <NButton block type="primary" class="mt-4" :disabled="!templateInfo.backGroundUrl" @click="$emit('generate')">
          <template #icon>
            <Icon icon="carbon:add" />
          </template>

          新增题目组 (默认横向)
        </NButton>
      </NForm>
    </div>

    <div class="max-h-[520px] flex-1 overflow-auto bg-gray-50 p-4">
      <div class="mb-2 flex items-center justify-between">
        <span class="text-xs text-gray-500">已生成布局列表</span>
        <NButton v-if="regions.length" text type="error" size="tiny" @click="$emit('clearAll')">
          清空全部
        </NButton>
      </div>

      <div v-if="regions.length === 0" class="flex flex-col items-center justify-center py-10 text-gray-400">
        <Icon icon="carbon:image" class="mb-2 text-4xl opacity-20" />
        <span class="text-xs">列表为空，点击上方生成区域</span>
      </div>

      <div class="space-y-2">
        <div
          v-for="region in regions"
          :key="region.id"
          class="group-item relative max-h-[120px] overflow-auto border rounded bg-white p-3 shadow-sm transition hover:shadow-md"
          :class="props.selectedRegionIds.has(region.id) ? 'border-blue-400 ring-2 ring-blue-200' : 'border-gray-200'"
          @click="handleSelect(region, $event)"
        >
          <div class="flex items-start justify-between">
            <div>
              <div class="text-sm font-medium">
                {{ region.label }}
              </div>
              <div class="mt-1 text-xs text-gray-500">
                w:{{ region.w }},h:{{ region.h }},x:{{ region.x }},y:{{ region.y }}
              </div>
            </div>
            <NButton size="tiny" quaternary circle type="error" @click.stop="$emit('deleteRegion', region.id)">
              <template #icon>
                <Icon icon="carbon:trash-can" />
              </template>
            </NButton>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
