<script setup>
import { computed, onMounted, ref } from "vue";
import { apiFetch } from "../../lib/api";
import { getToken } from "../../lib/extStorage";
import { listLocalBookmarks, markLocalDeleted, upsertLocalBookmark } from "../../lib/localData";

const token = ref("");
const loggedIn = computed(() => Boolean(token.value));
const items = ref([]);
const error = ref("");
const mode = computed(() => (loggedIn.value ? "cloud" : "local"));

const title = ref("");
const url = ref("");

async function load() {
  error.value = "";
  try {
    token.value = await getToken();
    if (!token.value) {
      items.value = await listLocalBookmarks();
      return;
    }
    items.value = await apiFetch("/bookmarks");
  } catch (e) {
    error.value = e.message || String(e);
  }
}

async function add() {
  if (!title.value || !url.value) return;
  if (mode.value === "cloud") {
    await apiFetch("/bookmarks", {
      method: "POST",
      body: JSON.stringify({ folderId: null, title: title.value, url: url.value, visibility: "public" })
    });
  } else {
    await upsertLocalBookmark({ title: title.value, url: url.value, visibility: "public" });
  }
  title.value = "";
  url.value = "";
  await load();
}

async function remove(id) {
  if (mode.value !== "local") return;
  await markLocalDeleted(id);
  await load();
}

onMounted(load);
</script>

<template>
  <section>
    <h1>我的书签（{{ mode === 'cloud' ? '云端' : '本地' }}）</h1>
    <p v-if="!loggedIn" class="muted">未登录时，书签保存在扩展本地（可在登录后自动合并上云）。</p>

    <div class="form">
      <input v-model="title" class="input" placeholder="标题" />
      <input v-model="url" class="input" placeholder="链接" />
      <button class="btn" @click="add">添加</button>
    </div>

    <p v-if="error" class="error">{{ error }}</p>

    <ul class="list">
      <li v-for="b in items" :key="b.id" class="card">
        <div class="row">
          <a :href="b.url" target="_blank" rel="noopener" class="title">{{ b.title }}</a>
          <button v-if="mode === 'local'" class="ghost" @click.prevent="remove(b.id)">删除</button>
        </div>
        <div class="muted">{{ b.url }}</div>
      </li>
    </ul>
  </section>
</template>

<style scoped>
.form { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 12px 0; }
@media (min-width: 900px) { .form { grid-template-columns: 2fr 3fr auto; } }
.input { padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; }
.btn { padding: 10px 12px; border: 1px solid #111827; border-radius: 10px; background: #111827; color: white; cursor: pointer; }
.row { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.ghost { border: 1px solid #e5e7eb; background: #f8fafc; border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .list { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 12px; background: white; }
.title { color: #111827; font-weight: 700; text-decoration: none; }
.muted { color: #475569; font-size: 12px; overflow-wrap: anywhere; margin-top: 6px; }
.error { color: #b91c1c; }
.muted { color: #475569; font-size: 12px; }
</style>
