<template>
  <div class="grid" style="grid-template-rows: auto 1fr; height: calc(100vh);">
    <Toolbar v-model:query="query" v-model:category="category" @open-merge="openMerge" />
    <div class="grid" style="grid-template-columns: 280px 1fr;">
      <aside class="overflow-auto p-3 border-r border-border bg-panel">
        <section class="mb-4">
          <h3 class="text-sm font-semibold text-slate-400 mb-2">类别</h3>
          <div class="flex flex-col gap-2">
            <div v-for="c in store.board.categories" :key="c.uuid" class="flex items-center gap-2 p-2 rounded border border-border bg-slate-900">
              <span class="w-4 h-4 rounded" :style="{ background: '#'+(c.color||'888888') }" />
              <input v-model="c.title" class="flex-1 px-2 py-1 rounded bg-slate-950 border border-border" @change="onCatChange(c)" />
              <input v-model="c.color" placeholder="hex" class="w-24 px-2 py-1 rounded bg-slate-950 border border-border" @change="onCatChange(c)" />
              <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="delCat(c.uuid)">删除</button>
            </div>
            <button class="px-3 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="addCat">添加类别</button>
          </div>
        </section>
        <section class="mb-4 text-sm text-slate-400">
          <h3 class="text-sm font-semibold text-slate-400 mb-2">布局</h3>
          <div>列数：{{ store.board.layout.columns.length }}</div>
          <div>阶段总数：{{ store.board.stages.length }}</div>
        </section>
        <section>
          <h3 class="text-sm font-semibold text-slate-400 mb-2">历史</h3>
          <div class="flex flex-col gap-2 text-xs max-h-[40vh] overflow-auto">
            <div v-for="h in (store.board.meta?.history||[]).slice().reverse().slice(0,200)" :key="h.id" class="p-2 rounded border border-border bg-slate-900">{{ h.ts }} {{ h.actor?('@'+h.actor):'' }} {{ h.type }}</div>
          </div>
          <div class="mt-2">
            <button class="px-2 py-1 rounded bg-slate-800/60 border border-border hover:bg-slate-800" @click="clearHistory">清空历史（写入本地）</button>
          </div>
        </section>
      </aside>
      <main>
        <Board :query="query" :category="category" />
      </main>
    </div>

    <!-- Merge modal -->
    <MergeModal v-model:open="mergeOpen" v-model:imported="imported" v-model:diff="diff" v-model:name="name" />
  </div>
</template>

<script setup lang="ts">
import Toolbar from '~/components/Toolbar.vue'
import Board from '~/components/Board.vue'
import MergeModal from '~/components/MergeModal.vue'
import { useBoardStore } from '~/stores/board'

const store = useBoardStore()
const config = useRuntimeConfig().public

// Try load from query or config
onMounted(async () => {
  const qp = new URL(window.location.href).searchParams.get('file')
  const fileToLoad = qp || config.autoLoadFile || ''
  if (fileToLoad) {
    try {
      const res = await fetch(fileToLoad, { cache: 'no-store' })
      if (res.ok) {
        store.setBoard(await res.json(), fileToLoad)
        store.log('load-file', { name: fileToLoad, via: qp ? 'query' : 'config' })
        return
      }
    } catch (e) {}
  }
  // else try local storage
  if (!store.loadFromLocal()) {
    // else set empty
    store.setBoard({ categories: [], stages: [], tasks: [], layout: { columns: [] }, meta: { id: 'open-kanban', version: '1.0.0', createdAt: new Date().toISOString(), modifiedAt: new Date().toISOString(), actor: '', history: [] } }, '')
  }
})

const query = ref('')
const category = ref('')

function addCat(){
  const title = prompt('类别名称？'); if (!title) return
  const color = prompt('颜色 hex（不含 #）？', '70bafa') || '70bafa'
  store.board.categories.push({ uuid: crypto.randomUUID?.() || Math.random().toString(36).slice(2), title: title.trim(), color: color.replace(/#/g,'').slice(0,6) })
  store.log('category-add', {})
}
function delCat(id: string){
  // prevent delete if used
  const used = store.board.tasks.some(t => t.category === id)
  if (used) return alert('该类别已被任务引用，无法删除')
  store.board.categories = store.board.categories.filter(c => c.uuid !== id)
  store.log('category-delete', { id })
}
function onCatChange(c: any){ store.log('category-update', { id: c.uuid }) }
function clearHistory(){
  if (!store.board.meta) return
  if (confirm('清空历史记录？将写入本地。')){
    store.board.meta.history = []
    store.board.meta.modifiedAt = new Date().toISOString()
    store.log('history-clear', {})
  }
}

// Merge modal state
const mergeOpen = ref(false)
const imported = ref<any>({})
const diff = ref<any>({})
const name = ref('导入文件')
function openMerge(data: any, d: any, n: string){ imported.value = data; diff.value = d; name.value = n; mergeOpen.value = true }
</script>

