<script setup lang="ts">
import { ref } from "vue";
import { useNotesStore, type ChecklistItem } from "../stores/notes";

const props = defineProps<{ noteId: string; items: ChecklistItem[]; editable?: boolean }>();
const notes = useNotesStore();
const newItem = ref("");

async function addItem() {
  const text = newItem.value.trim();
  if (!text) return;
  await notes.addItem(props.noteId, text);
  newItem.value = "";
}

function toggle(item: ChecklistItem) {
  void notes.updateItem(props.noteId, item.id, { checked: !item.checked });
}

function editText(item: ChecklistItem, value: string) {
  if (value !== item.text) void notes.updateItem(props.noteId, item.id, { text: value });
}

function remove(item: ChecklistItem) {
  void notes.deleteItem(props.noteId, item.id);
}
</script>

<template>
  <div class="flex flex-col gap-1">
    <div v-for="item in items" :key="item.id" class="group/item flex items-center gap-2">
      <input
        type="checkbox"
        class="h-4 w-4 shrink-0 accent-brand"
        :checked="item.checked"
        @change="toggle(item)"
        @click.stop
      />
      <input
        v-if="editable"
        :value="item.text"
        class="min-w-0 flex-1 bg-transparent text-sm outline-none"
        :class="item.checked ? 'text-neutral-400 line-through' : ''"
        @change="editText(item, ($event.target as HTMLInputElement).value)"
      />
      <span
        v-else
        class="min-w-0 flex-1 truncate text-sm"
        :class="item.checked ? 'text-neutral-400 line-through' : 'text-neutral-700 dark:text-neutral-300'"
        >{{ item.text }}</span
      >
      <button
        v-if="editable"
        type="button"
        class="hover-reveal text-neutral-300 opacity-0 hover:text-neutral-600 group-hover/item:opacity-100 dark:hover:text-neutral-200"
        aria-label="Delete item"
        @click="remove(item)"
      >
        ×
      </button>
    </div>

    <form v-if="editable" class="mt-1 flex items-center gap-2" @submit.prevent="addItem">
      <span class="h-4 w-4 shrink-0" />
      <input
        v-model="newItem"
        type="text"
        placeholder="+ List item"
        class="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-neutral-400"
      />
    </form>

    <p v-if="!editable && items.length === 0" class="text-sm italic text-neutral-400">Empty checklist</p>
  </div>
</template>
