<script setup lang="ts">
import { onMounted } from "vue";
import { useNotesStore, type Note } from "../stores/notes";
import { useReminderStore } from "../stores/reminders";
import { formatReminder, isOverdue } from "../notes/datetime";
import { useNoteList } from "../composables/useNoteList";
import { useNoteEditor } from "../composables/useNoteEditor";
import AsyncState from "../components/AsyncState.vue";
import EmptyState from "../components/EmptyState.vue";
import NoteEditor from "../components/NoteEditor.vue";

const notes = useNotesStore();
const reminders = useReminderStore();

const { items, loading, error, load } = useNoteList(() => reminders.fetchReminders(), "Couldn't load reminders.");

const { editing, open: openEditor, close: closeEditor, navigate: onNavigate } = useNoteEditor({
  list: () => items.value,
  onClose: load,
});

async function done(n: Note) {
  await notes.completeReminder(n.id);
  await load();
}
async function snooze(n: Note, minutes: number) {
  await notes.snoozeReminder(n.id, minutes);
  await load();
}

onMounted(load);
</script>

<template>
  <div class="mx-auto w-full max-w-2xl px-4 py-6">
    <div class="mb-2 flex items-center justify-between gap-3">
      <h1 class="text-lg font-semibold">Reminders</h1>
      <button
        v-if="reminders.osSupported && !reminders.osEnabled"
        type="button"
        class="rounded-md border border-neutral-300 px-2.5 py-1 text-xs hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:hover:bg-neutral-800"
        @click="reminders.enableOs()"
      >
        Enable notifications
      </button>
      <span v-else-if="reminders.osEnabled" class="text-xs text-neutral-400">Notifications on ✓</span>
    </div>
    <p class="mb-5 text-xs text-neutral-400">
      Due reminders pop up while ThoughtSync is open. Background alerts arrive with the desktop &amp; mobile apps.
    </p>

    <AsyncState :loading="loading" :error="error || undefined" error-title="Couldn't load reminders" @retry="load">
      <EmptyState
        v-if="items.length === 0"
        title="No reminders"
        subtitle="Set a reminder on a note (in its editor) to see it here."
      />
      <ul v-else class="divide-y divide-neutral-100 dark:divide-neutral-800">
        <li v-for="n in items" :key="n.id" class="flex items-center gap-3 py-3">
          <button
            type="button"
            class="min-w-0 flex-1 rounded text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
            @click="openEditor(n)"
          >
            <p class="truncate text-sm font-medium text-neutral-800 dark:text-neutral-100">
              {{ n.display_title || "Untitled" }}
            </p>
            <p class="text-xs" :class="isOverdue(n.remind_at) ? 'text-red-500 dark:text-red-400' : 'text-neutral-400'">
              {{ formatReminder(n.remind_at) }}<span v-if="n.recurrence"> · ↻ {{ n.recurrence }}</span>
            </p>
          </button>
          <button
            type="button"
            class="shrink-0 rounded-md border border-neutral-300 px-2 py-1 text-xs text-neutral-600 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
            @click="done(n)"
          >
            Done
          </button>
          <button
            type="button"
            class="shrink-0 text-xs text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
            title="Snooze 1 hour"
            @click="snooze(n, 60)"
          >
            1h
          </button>
          <button
            type="button"
            class="shrink-0 text-xs text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
            title="Snooze 1 day"
            @click="snooze(n, 1440)"
          >
            1d
          </button>
        </li>
      </ul>
    </AsyncState>

    <template v-if="editing">
      <NoteEditor :note="editing" @close="closeEditor" @navigate="onNavigate" />
    </template>
  </div>
</template>
