<template>
  <div class="card module wolf-card" :style="{ order: 0 }">
    <div class="module-head">
      <div>
        <h2>Wolf</h2>
        <p class="muted wolf-subtitle">Game streaming access for Moonlight.</p>
      </div>
      <span
        class="pill mono"
        :class="
          wolf.status === 'ready'
            ? 'pill-ok'
            : wolf.status === 'degraded'
              ? 'pill-warn'
              : wolf.status === 'unavailable' || wolf.status === 'error'
                ? 'pill-bad'
                : ''
        "
      >
        {{ wolf.loading ? "loading..." : wolf.status }}
      </span>
    </div>
    <div class="wolf-connection">
      <div>
        <span class="k mono">Moonlight host</span>
        <div class="wolf-host mono">{{ wolf.moonlightHost }}</div>
      </div>
      <button class="copy mono" type="button" @click="copyHost">
        {{ copiedHost ? "copied" : "copy" }}
      </button>
    </div>

    <div class="wolf-summary">
      <div class="wolf-summary-item">
        <span class="k mono">GPU</span>
        <strong class="mono">{{ wolf.gpuPriority }}</strong>
      </div>
      <div class="wolf-summary-item">
        <span class="k mono">Hermes</span>
        <strong class="mono" :class="wolf.localInferenceReady ? 'ok-text' : 'warn-text'">
          {{ wolf.inferencePath }}
        </strong>
      </div>
      <div class="wolf-summary-item">
        <span class="k mono">Firewall</span>
        <strong class="mono" :class="currentIpUnlocked ? 'ok-text' : 'warn-text'">
          {{ currentIpUnlocked ? "open" : "locked" }}
        </strong>
      </div>
      <div class="wolf-summary-item">
        <span class="k mono">Sessions</span>
        <strong class="mono">{{ wolf.sessions.length }}</strong>
      </div>
    </div>

    <div class="kv wolf-detail">
      <div class="row">
        <span class="k mono">Current IP</span>
        <span class="v mono">{{ wolf.sourceIp || "unknown" }}</span>
      </div>
      <div class="row">
        <span class="k mono">Active unlocks</span>
        <span class="v mono">{{ wolf.activeUnlocks.length }}</span>
      </div>
      <div class="row">
        <span class="k mono">Paired devices</span>
        <span class="v mono">{{ pairedDeviceNames }}</span>
      </div>
      <div class="row">
        <span class="k mono">GPU owner</span>
        <span class="v mono">{{ wolf.gpuOwner }}</span>
      </div>
      <div class="row">
        <span class="k mono">Local model</span>
        <span class="v mono">{{ wolf.localModel }} · {{ wolf.localModelLoaded ? "loaded" : "unloaded" }}</span>
      </div>
    </div>

    <div class="actions">
      <button class="primary" type="button" :disabled="wolf.unlocking" @click="$emit('unlock')">
        {{ wolf.unlocking ? "Unlocking..." : currentIpUnlocked ? "Refresh unlock" : "Unlock Moonlight" }}
      </button>
      <button class="copy mono" type="button" :disabled="wolf.loading" @click="$emit('refresh')">Refresh</button>
    </div>

    <div v-if="wolf.pendingPairRequests.length" class="secret-box">
      <div class="secret-head">
        <div class="pill mono">Pairing</div>
      </div>
      <div v-for="req in wolf.pendingPairRequests" :key="req.pair_secret || req.name" class="pair-row">
        <div class="mono pair-name">{{ req.name || "pending device" }}</div>
        <input
          v-model="wolf.pinInputs[req.pair_secret]"
          class="input mono"
          type="text"
          inputmode="numeric"
          autocomplete="one-time-code"
          placeholder="PIN"
          :disabled="wolf.pairing[req.pair_secret]"
        />
        <button class="primary" type="button" :disabled="wolf.pairing[req.pair_secret]" @click="$emit('pair', req.pair_secret)">
          {{ wolf.pairing[req.pair_secret] ? "Pairing..." : "Pair" }}
        </button>
      </div>
    </div>

    <div v-if="wolf.canControlGpu" class="secret-box">
      <div class="secret-head">
        <div class="pill mono">Admin</div>
        <span class="hint mono">RTX 3080 checkout</span>
      </div>
      <div class="wolf-controls">
        <select v-model="wolf.selectedGame" class="input mono">
          <option value="steam">Steam</option>
          <option value="arc-raiders">Arc Raiders</option>
          <option value="satisfactory">Satisfactory</option>
          <option value="wolf">Wolf</option>
          <option value="desktop">Desktop + Wolf</option>
        </select>
        <input v-model="wolf.note" class="input mono" type="text" placeholder="note" />
        <button class="primary" type="button" :disabled="Boolean(wolf.actioning)" @click="$emit('game-mode', 'start')">
          {{ wolf.actioning === "start" ? "Reserving..." : "Reserve RTX 3080" }}
        </button>
        <button class="copy mono" type="button" :disabled="Boolean(wolf.actioning)" @click="$emit('game-mode', 'stop')">
          {{ wolf.actioning === "stop" ? "Releasing..." : "Release for images" }}
        </button>
      </div>
      <div class="hint mono">
        Desktop and Wolf may share this reservation. Local image generation waits until it is released.
      </div>
      <div class="wolf-controls manual-unlock">
        <input v-model="wolf.manualIp" class="input mono" type="text" placeholder="IP address" />
        <input v-model="wolf.manualUser" class="input mono" type="text" placeholder="user" />
        <button class="primary" type="button" :disabled="wolf.manualUnlocking" @click="$emit('admin-unlock')">
          {{ wolf.manualUnlocking ? "Unlocking..." : "Unlock IP" }}
        </button>
      </div>
    </div>

    <div v-if="wolf.sessions.length" class="hint mono">Active sessions: {{ wolf.sessions.length }}</div>
    <div v-if="wolf.error" class="error-box">
      <div class="mono">{{ wolf.error }}</div>
    </div>
  </div>
</template>

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

const props = defineProps({
  wolf: {
    type: Object,
    required: true,
  },
});

defineEmits(["refresh", "unlock", "pair", "game-mode", "admin-unlock"]);

const copiedHost = ref(false);

const currentIpUnlocked = computed(() => {
  const sourceIp = props.wolf.sourceIp;
  if (!sourceIp) return false;
  return props.wolf.activeUnlocks.some((unlock) => unlock?.ip === sourceIp);
});

const pairedDeviceNames = computed(() => {
  const names = props.wolf.clients.map((client) => client.name).filter(Boolean);
  return names.length ? names.join(", ") : "none";
});

async function copyHost() {
  try {
    await navigator.clipboard?.writeText(props.wolf.moonlightHost || "moonlight.bstein.dev");
  } catch {
    return;
  }
  copiedHost.value = true;
  window.setTimeout(() => {
    copiedHost.value = false;
  }, 1600);
}
</script>

<style scoped src="../styles/account.css"></style>
