<template>
  <div class="todo-tab">
    <div v-if="loading" class="loading-container">
      <n-spin size="medium" />
    </div>
    <div v-else>
      <div v-if="todos.length" class="item-list">
        <div
          v-for="item in todos"
          :key="item.name"
          class="list-item"
          @click="handleClick(item)"
        >
          <div class="item-title">
            <span class="priority-dot" :class="priorityClass(item.priority)" />
            {{ item.title }}
          </div>
          <div class="item-time text-muted">{{ formatDate(item.modified) }}</div>
        </div>
      </div>
      <div v-else class="empty-state">
        <n-icon size="64" color="#d1d8dd">
          <Icon icon="tabler:checklist" />
        </n-icon>
        <div class="empty-text text-muted">{{ t('No ToDos') }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { NSpin, NIcon } from 'naive-ui'
import { Icon } from '@iconify/vue'
import { getToDoList, type ToDoItem } from '../api/notifications'
import { t } from '../i18n'
import { pageTypeToSlug } from '../utils/slug'

const emit = defineEmits<{ (e: 'close'): void }>()
const router = useRouter()
const todos = ref<ToDoItem[]>([])
const loading = ref(true)

onMounted(async () => { await loadTodos() })

const loadTodos = async () => {
  loading.value = true
  const result = await getToDoList(20)
  if (result.success && result.data) todos.value = result.data
  loading.value = false
}

const priorityClass = (p: string | null): string => {
  if (p === 'High') return 'priority-high'
  if (p === 'Medium') return 'priority-medium'
  return 'priority-low'
}

const formatDate = (d: string | null): string => {
  if (!d) return ''
  const date = new Date(d.replace(/-/g, '/'))
  if (isNaN(date.getTime())) return ''
  const pad = (n: number) => n.toString().padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}

const handleClick = (item: ToDoItem) => {
  if (item.reference_type && item.reference_name) {
    router.push(`/app/${pageTypeToSlug(item.reference_type)}/${encodeURIComponent(item.reference_name)}`)
  } else {
    router.push(`/app/${pageTypeToSlug('ToDo')}/${encodeURIComponent(item.name)}`)
  }
  emit('close')
}

defineExpose({ loadTodos })
</script>

<style scoped>
.todo-tab { width: 100%; max-height: 450px; overflow-y: auto; }
.loading-container { display: flex; justify-content: center; align-items: center; min-height: 300px; }
.empty-state { min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.empty-text { margin-top: 8px; font-size: 14px; }
.item-list { padding: 4px 0; }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; transition: background-color 0.2s; border-bottom: 1px solid var(--n-border-color, #f0f0f0); }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background-color: var(--n-color-hover); }
.item-title { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 12px; display: flex; align-items: center; gap: 8px; }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.priority-high { background: #e74c3c; }
.priority-medium { background: #f39c12; }
.priority-low { background: #2ecc71; }
.item-time { font-size: 12px; flex-shrink: 0; }
.text-muted { color: var(--n-text-color-disabled); }
</style>
