<script setup lang="ts">
import { onMounted, ref } from "vue";
import BaseModal from "./BaseModal.vue";
import BaseButton from "./BaseButton.vue";
import { isDesktop, desktop } from "../desktop/bridge";
import { useUiStore } from "../stores/ui";

// First-run prompt (Linux AppImage only) offering to add ThoughtSync to the
// applications menu so it behaves like an installed app instead of a loose file.
// Shown once; the choice is remembered. Users who decline can integrate later from
// Account. No-op on the web build and on already-integrated / non-AppImage runs.
const DISMISS_KEY = "desktop.integration.prompted";

const ui = useUiStore();
const show = ref(false);
const working = ref(false);

onMounted(async () => {
  if (!isDesktop() || localStorage.getItem(DISMISS_KEY)) return;
  try {
    const status = await desktop.integrationStatus();
    if (status.is_appimage && !status.is_integrated) show.value = true;
  } catch {
    /* not an AppImage / no bridge — just don't prompt */
  }
});

function dismiss() {
  localStorage.setItem(DISMISS_KEY, "1");
  show.value = false;
}

async function integrate() {
  working.value = true;
  try {
    await desktop.integrate();
    localStorage.setItem(DISMISS_KEY, "1");
    show.value = false;
    ui.showToast("ThoughtSync added to your applications menu.");
  } catch (e) {
    ui.showToast((e as { message?: string }).message ?? "Couldn't add to applications.");
  } finally {
    working.value = false;
  }
}
</script>

<template>
  <BaseModal
    v-if="show"
    align="center"
    panel-class="w-full max-w-md shadow-xl"
    aria-label="Add ThoughtSync to your applications"
    @close="dismiss"
  >
    <div class="p-6">
      <h2 class="text-lg font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
        Add ThoughtSync to your applications?
      </h2>
      <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
        We'll add a menu entry so you can launch ThoughtSync from your app launcher, and keep a stable
        copy in <code class="font-mono text-xs">~/Applications</code> so it isn't lost from Downloads.
        You can undo this any time from your account.
      </p>
      <div class="mt-6 flex justify-end gap-3">
        <BaseButton variant="ghost" :disabled="working" @click="dismiss">Not now</BaseButton>
        <BaseButton :loading="working" @click="integrate">Add to applications</BaseButton>
      </div>
    </div>
  </BaseModal>
</template>
