<template>
  <UCard>
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <UIcon name="i-heroicons-clock-20-solid" class="h-5 w-5 text-amber-400" />
          <span class="font-semibold">历史记录</span>
        </div>
        <UButton
          size="2xs"
          color="neutral"
          variant="ghost"
          icon="i-heroicons-trash-20-solid"
          @click="clearOpen = true"
        >
          清空
        </UButton>
      </div>
    </template>

    <div class="space-y-2">
      <div v-if="!entries.length" class="rounded border border-slate-800 bg-slate-900/70 px-3 py-4 text-sm text-slate-400">
        暂无历史记录。
      </div>
      <div v-else class="max-h-72 space-y-2 overflow-auto pr-1 text-xs">
        <div
          v-for="entry in entries"
          :key="entry.id"
          class="rounded border border-slate-800 bg-slate-900/70 px-3 py-3"
        >
          <div class="flex items-center justify-between gap-2">
            <span class="font-medium text-slate-200">{{ entry.type }}</span>
            <span class="text-[10px] text-slate-500">{{ formatTime(entry.ts) }}</span>
          </div>
          <div class="mt-1 flex items-center gap-2 text-[11px] text-slate-400">
            <UIcon name="i-heroicons-user-20-solid" class="h-3.5 w-3.5" />
            <span>{{ entry.actor || '系统' }}</span>
          </div>
        </div>
      </div>
    </div>
  </UCard>

  <UModal v-model="clearOpen">
    <UCard>
      <template #header>
        <div class="flex items-center gap-2">
          <UIcon name="i-heroicons-exclamation-triangle-20-solid" class="h-5 w-5 text-amber-400" />
          <span class="font-semibold">清空历史</span>
        </div>
      </template>
      <p class="text-sm text-slate-300">
        清空后将只能在本地重新积累记录。仍然继续吗？
      </p>
      <div class="mt-6 flex justify-end gap-2">
        <UButton color="neutral" variant="ghost" @click="clearOpen = false">取消</UButton>
        <UButton color="rose" @click="clearHistory">确认清空</UButton>
      </div>
    </UCard>
  </UModal>
</template>

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

const store = useBoardStore()
const toast = useToast()

const entries = computed(() => {
  const list = store.board.meta?.history || []
  return list.slice(-200).reverse()
})

function formatTime(ts: string) {
  try {
    return new Intl.DateTimeFormat('zh-CN', { dateStyle: 'short', timeStyle: 'short' }).format(new Date(ts))
  } catch {
    return ts
  }
}

const clearOpen = ref(false)

function clearHistory() {
  clearOpen.value = false
  if (!store.board.meta) return
  store.board.meta.history = []
  store.board.meta.modifiedAt = new Date().toISOString()
  store.log('history-clear', {})
  toast.add({ color: 'neutral', title: '历史记录已清空' })
}
</script>
