<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { api } from "../api/client";
import { useNotesStore, type Note } from "../stores/notes";
import NoteCard from "../components/NoteCard.vue";
import NoteEditor from "../components/NoteEditor.vue";

const route = useRoute();
const notes = useNotesStore();

const results = ref<Note[]>([]);
const loading = ref(false);
const error = ref("");
const editing = ref<Note | null>(null);

const query = computed(() => (typeof route.query.q === "string" ? route.query.q : ""));

async function run() {
  const q = query.value.trim();
  if (!q) {
    results.value = [];
    return;
  }
  loading.value = true;
  error.value = "";
  try {
    const res = await api.get<{ notes: Note[] }>(`/api/notes/search?q=${encodeURIComponent(q)}`);
    results.value = res.notes;
  } catch (e) {
    error.value = (e as { error?: string }).error ?? "Search failed.";
    results.value = [];
  } finally {
    loading.value = false;
  }
}

watch(query, run, { immediate: true });

function openEditor(n: Note) {
  editing.value = n;
}
async function closeEditor() {
  editing.value = null;
  await run(); // reflect any edits made from a result
}
async function onNavigate(id: string) {
  const found = results.value.find((n) => n.id === id);
  if (found) {
    editing.value = found;
    return;
  }
  const fetched = await notes.fetchOne(id);
  if (fetched) editing.value = fetched;
}
</script>

<template>
  <div class="mx-auto w-full max-w-6xl px-4 py-6">
    <p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">
      <template v-if="query"
        >Results for <span class="font-semibold text-neutral-800 dark:text-neutral-200">{{ query }}</span></template
      >
      <template v-else>Type in the search box to find your notes.</template>
    </p>

    <div v-if="loading" class="py-20 text-center text-sm text-neutral-400">Searching…</div>

    <div v-else-if="error" class="py-20 text-center">
      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">Couldn't search</h2>
      <p class="mt-1 text-sm text-neutral-400">{{ error }}</p>
      <button
        type="button"
        class="mt-3 rounded-md border border-neutral-300 px-3 py-1.5 text-sm 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="run"
      >
        Retry
      </button>
    </div>

    <div v-else-if="query && results.length === 0" class="py-20 text-center">
      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">No matches</h2>
      <p class="mt-1 text-sm text-neutral-400">Nothing found for "{{ query }}".</p>
    </div>

    <div v-else class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
      <NoteCard v-for="n in results" :key="n.id" :note="n" @open="openEditor" />
    </div>
  </div>

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