<template>
  <UModal v-model="open" :ui="{ width: 'max-w-3xl' }">
    <UCard>
      <template #header>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2">
            <UIcon name="i-heroicons-arrow-down-tray-20-solid" class="h-5 w-5 text-sky-400" />
            <span class="font-semibold">导入/合并预览</span>
          </div>
          <UBadge color="neutral" variant="soft">来源文件：{{ name || '未命名' }}</UBadge>
        </div>
      </template>

      <div class="space-y-6">
        <UAlert
          color="primary"
          variant="soft"
          title="合并前请确认策略"
          description="导入文件将与当前看板数据对比。请选择冲突策略及是否删除缺失项目。"
        />

        <div class="flex flex-wrap items-center gap-4">
          <UFormGroup label="冲突策略" name="policy" class="w-64">
            <USelectMenu
              v-model="policy"
              :options="policies"
              value-attribute="value"
              option-attribute="label"
            />
          </UFormGroup>
          <UCheckbox v-model="removeMissing">
            同步删除在导入文件中不存在的任务/阶段
          </UCheckbox>
        </div>

        <div class="grid gap-3 md:grid-cols-3">
          <UCard variant="soft" class="border border-emerald-500/20 bg-emerald-500/5 text-emerald-200">
            <p class="text-xs uppercase tracking-wide opacity-70">任务新增</p>
            <p class="text-3xl font-semibold">{{ diff?.tasks?.added?.length || 0 }}</p>
          </UCard>
          <UCard variant="soft" class="border border-rose-500/20 bg-rose-500/5 text-rose-200">
            <p class="text-xs uppercase tracking-wide opacity-70">任务删除</p>
            <p class="text-3xl font-semibold">{{ diff?.tasks?.removed?.length || 0 }}</p>
          </UCard>
          <UCard variant="soft" class="border border-amber-500/20 bg-amber-500/5 text-amber-200">
            <p class="text-xs uppercase tracking-wide opacity-70">任务修改</p>
            <p class="text-3xl font-semibold">{{ diff?.tasks?.modified?.length || 0 }}</p>
          </UCard>
        </div>

        <UCard variant="soft" class="border border-slate-800 bg-slate-900/70 text-xs text-slate-300">
          <div class="space-y-1">
            <div class="flex items-center gap-2">
              <UIcon name="i-heroicons-document-duplicate-20-solid" class="h-4 w-4 text-slate-500" />
              <span>Tasks: +{{ diff?.tasks?.added?.length || 0 }} / -{{ diff?.tasks?.removed?.length || 0 }} / ~{{ diff?.tasks?.modified?.length || 0 }}</span>
            </div>
            <div class="flex items-center gap-2">
              <UIcon name="i-heroicons-queue-list-20-solid" class="h-4 w-4 text-slate-500" />
              <span>Stages: +{{ diff?.stages?.added?.length || 0 }} / -{{ diff?.stages?.removed?.length || 0 }} / ~{{ diff?.stages?.modified?.length || 0 }}</span>
            </div>
            <div class="flex items-center gap-2">
              <UIcon name="i-heroicons-view-columns-20-solid" class="h-4 w-4 text-slate-500" />
              <span>布局是否变化：{{ diff?.layout?.changed ? '是' : '否' }}</span>
            </div>
          </div>
        </UCard>

        <div class="flex justify-end gap-2">
          <UButton color="neutral" variant="ghost" @click="open = false">取消</UButton>
          <UButton color="primary" icon="i-heroicons-arrow-up-tray-20-solid" @click="apply">应用合并</UButton>
        </div>
      </div>
    </UCard>
  </UModal>
</template>

<script setup lang="ts">
import { useBoardStore } from '~/stores/board'

const store = useBoardStore()

const open = defineModel<boolean>('open', { required: true })
const imported = defineModel<any>('imported', { required: true })
const diff = defineModel<any>('diff', { required: true })
const name = defineModel<string>('name', { required: true })

const policy = ref<'prefer-import' | 'prefer-current'>('prefer-import')
const removeMissing = ref(false)

const policies = [
  { label: '冲突优先：导入文件', value: 'prefer-import' },
  { label: '冲突优先：当前看板', value: 'prefer-current' }
]

function apply() {
  store.applyMerge(imported.value, policy.value, removeMissing.value)
  open.value = false
}
</script>
