<template>
  <div class="task-view">
    <MessageBlock v-if="taskCountRef === 0" message="No tasks">
      <span> <button class="round-btn" @click="createTask">Create</button> a task </span>
    </MessageBlock>

    <ItemList
      v-else
      fetchUrl="/api/task/list"
      itemKey="tasks"
      :itemFields="TASK_FIELDS"
      imageField="image_id"
      deletable
      @clicked="(task: Task) => $router.push({ name: 'EditTask', params: { id: task.id } })"
      @delete="confirmDeleteTask"
      @loading-complete="(count) => (taskCountRef = count)"
      :getItemClass="(item) => ({ bad: !item.is_good, good: item.is_good })"
    >
      <template #item="{ item }">
        <img v-if="item.image_url" :src="item.image_url" />
        <span class="name">{{ item.name }}</span>
        <span class="value">{{ item.points }} pts</span>
      </template>
    </ItemList>

    <FloatingActionButton aria-label="Create Task" @click="createTask" />

    <DeleteModal
      :show="showConfirm"
      message="Are you sure you want to delete this task?"
      @confirm="deleteTask"
      @cancel="showConfirm = false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ItemList from '../shared/ItemList.vue'
import MessageBlock from '@/components/shared/MessageBlock.vue'
import '@/assets/button-shared.css'
import FloatingActionButton from '../shared/FloatingActionButton.vue'
import DeleteModal from '../shared/DeleteModal.vue'
import type { Task } from '@/common/models'
import { TASK_FIELDS } from '@/common/models'

const $router = useRouter()

const showConfirm = ref(false)
const taskToDelete = ref<string | null>(null)
const taskListRef = ref()
const taskCountRef = ref<number>(-1)

function confirmDeleteTask(taskId: string) {
  taskToDelete.value = taskId
  showConfirm.value = true
}

const deleteTask = async () => {
  if (!taskToDelete.value) return
  try {
    const resp = await fetch(`/api/task/${taskToDelete.value}`, {
      method: 'DELETE',
    })
    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
    // Refresh the task list after successful delete
    taskListRef.value?.refresh()
  } catch (err) {
    console.error('Failed to delete task:', err)
  } finally {
    showConfirm.value = false
    taskToDelete.value = null
  }
}

// New function to handle task creation
const createTask = () => {
  // Route to your create task page or open a create dialog
  // Example:
  $router.push({ name: 'CreateTask' })
}
</script>

<style scoped>
.task-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  padding: 0;
  min-height: 0;
}
.name {
  flex: 1;
  text-align: left;
  font-weight: 600;
}

.value {
  min-width: 60px;
  text-align: right;
  font-weight: 600;
}

:deep(.good) {
  border-color: var(--list-item-border-good);
  background: var(--list-item-bg-good);
}
:deep(.bad) {
  border-color: var(--list-item-border-bad);
  background: var(--list-item-bg-bad);
}
</style>
