<script setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { getToken, setToken } from "../../lib/extStorage";

const router = useRouter();

const token = ref("");
const loggedIn = computed(() => Boolean(token.value));

const webBaseUrl = import.meta.env.VITE_WEB_BASE_URL || "http://localhost:5173";

async function refresh() {
  token.value = await getToken();
}

function openWeb() {
  const url = String(webBaseUrl || "").trim();
  if (!url) return;
  if (typeof chrome !== "undefined" && chrome.tabs?.create) chrome.tabs.create({ url });
  else window.open(url, "_blank", "noopener,noreferrer");
}

async function logout() {
  await setToken("");
  await refresh();
  await router.replace("/login");
}

onMounted(refresh);
</script>

<template>
  <section class="page">
    <h1 class="h1">更多操作</h1>

    <p v-if="!loggedIn" class="muted">当前未登录，将跳转到登录页。</p>

    <div class="card">
      <button class="btn" type="button" @click="openWeb">跳转 Web</button>
      <button class="btn btn--secondary" type="button" @click="logout">退出登录</button>
      <p class="hint">Web 地址来自环境变量：VITE_WEB_BASE_URL</p>
    </div>
  </section>
</template>

<style scoped>
.page { padding: 14px; }
.h1 { margin: 0 0 10px; font-size: 18px; }
.card {
  max-width: 560px;
  border: 1px solid rgba(255,255,255,0.65);
  background: var(--bb-card);
  border-radius: 18px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.btn {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--bb-primary), var(--bb-cta));
  color: white;
  cursor: pointer;
}
.btn--secondary {
  background: rgba(255,255,255,0.55);
  color: var(--bb-text);
  border-color: var(--bb-border);
}
.muted { color: rgba(19, 78, 74, 0.72); font-size: 12px; }
.hint { color: rgba(19, 78, 74, 0.72); font-size: 12px; margin: 0; }
</style>
