<template>
  <div class="page">
    <section class="card">
      <h1>Monero node (monerod)</h1>
      <p>
        monerod runs in the atlas cluster (ns: <span class="mono">crypto</span>). Use the external RPC endpoint below; no cluster access or
        port-forwarding is required.
      </p>
      <div class="panel">
        <div class="label">Live status</div>
        <div v-if="loading" class="mono">Loading...</div>
        <div v-else-if="error" class="mono error">{{ error }}</div>
        <div v-else class="grid">
          <div class="kv"><span class="k">net</span><span class="v mono">{{ info.nettype }}</span></div>
          <div class="kv"><span class="k">status</span><span class="v mono">{{ info.status }}</span></div>
          <div class="kv"><span class="k">height</span><span class="v mono">{{ info.height }}</span></div>
          <div class="kv"><span class="k">target</span><span class="v mono">{{ info.target_height }}</span></div>
        </div>
      </div>
      <div class="panel">
        <div class="label">External RPC (TLS)</div>
        <code>monero.bstein.dev:443</code>
        <div class="note">
          Use SSL/TLS. If credentials are provided, set daemon login in your wallet; otherwise leave blank. If you need access, request a wallet
          RPC user/pass.
        </div>
      </div>
      <div class="panel">
        <div class="label">Wallet config (GUI)</div>
        <ul>
          <li>Settings → Node → Address: <span class="mono">monero.bstein.dev</span></li>
          <li>Port: <span class="mono">443</span></li>
          <li>Use SSL/TLS: enabled</li>
          <li>Daemon username/password: only if you were given credentials</li>
        </ul>
      </div>
      <div class="panel">
        <div class="label">Wallet config (CLI)</div>
        <code>monero-wallet-cli --daemon-address monero.bstein.dev:443 --daemon-ssl enabled --daemon-login &lt;user:pass&gt;</code>
        <div class="note">Omit <span class="mono">--daemon-login</span> if the endpoint does not require authentication.</div>
      </div>
      <p class="note">
        If you cannot connect, reach out for RPC credentials or allowlisting. The node stays on {{ info.nettype || "mainnet" }} and exposes
        standard RPC at <span class="mono">/json_rpc</span>.
      </p>
    </section>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";

const info = ref({});
const loading = ref(true);
const error = ref("");

onMounted(async () => {
  try {
    const { data } = await axios.get("/api/monero/get_info", { timeout: 2500 });
    info.value = data || {};
  } catch (e) {
    error.value = "Could not reach monerod from this site yet.";
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 22px 72px;
}

.panel {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

.label {
  font-weight: 700;
  color: var(--text-strong);
}

.note {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 8px;
}

code {
  display: block;
  margin-top: 6px;
  color: var(--accent-cyan);
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.kv {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.panel ul {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
}

.panel li {
  margin: 0 0 4px;
}

.k {
  display: block;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.v {
  display: block;
  color: var(--text-strong);
  font-weight: 700;
  margin-top: 6px;
}

.error {
  color: var(--accent-rose);
}
</style>
