<script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useNodeStore } from "@/stores/node";
import InfoCard from "@/components/InfoCard.vue";

const node = useNodeStore();
const { info, status } = storeToRefs(node);

const copiedField = ref<string | null>(null);
async function copy(field: string, value: string) {
  try {
    await navigator.clipboard.writeText(value);
    copiedField.value = field;
    setTimeout(() => {
      if (copiedField.value === field) copiedField.value = null;
    }, 1200);
  } catch {
    /* clipboard unavailable */
  }
}
</script>

<template>
  <div v-if="info" class="max-w-3xl space-y-4">
    <InfoCard
      v-if="status?.overlayIp"
      label="Overlay IP — use this when sending messages"
      :value="status.overlayIp"
      :copied="copiedField === 'ip'"
      @copy="copy('ip', status.overlayIp!)"
    />
    <InfoCard
      label="Overlay subnet"
      :value="info.nodeSubnet"
      :copied="copiedField === 'subnet'"
      @copy="copy('subnet', info.nodeSubnet)"
    />
    <InfoCard
      label="Public key"
      :value="info.nodePubkey"
      :copied="copiedField === 'pk'"
      @copy="copy('pk', info.nodePubkey)"
    />
    <InfoCard
      v-if="status?.apiUrl"
      label="API endpoint"
      :value="status.apiUrl"
      :copied="copiedField === 'api'"
      @copy="copy('api', status.apiUrl!)"
    />
    <InfoCard
      v-if="status?.keyPath"
      label="Identity file"
      :value="status.keyPath"
      :copied="copiedField === 'kp'"
      @copy="copy('kp', status.keyPath!)"
    />
  </div>

  <p v-else class="text-sm text-muted-foreground">
    The daemon is not running. Start it from the sidebar.
  </p>
</template>
