<template>
  <div class="card module wolf-card" :style="{ order: 0 }">
    <div class="module-head">
      <h2>Wolf</h2>
      <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="kv">
      <div class="row">
        <span class="k mono">Moonlight</span>
        <span class="v mono">{{ wolf.moonlightHost }}</span>
      </div>
      <div class="row">
        <span class="k mono">Your IP</span>
        <span class="v mono">{{ wolf.sourceIp || "unknown" }}</span>
      </div>
      <div class="row">
        <span class="k mono">GPU priority</span>
        <span class="v mono">{{ wolf.gpuPriority }}</span>
      </div>
      <div class="row">
        <span class="k mono">Firewall 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">{{ wolf.clients.map((client) => client.name).join(", ") || "none" }}</span>
      </div>
    </div>

    <div class="actions">
      <button class="primary" type="button" :disabled="wolf.unlocking" @click="$emit('unlock')">
        {{ wolf.unlocking ? "Unlocking..." : "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>
      </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>
        </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" ? "Starting..." : "Prioritize Wolf" }}
        </button>
        <button class="copy mono" type="button" :disabled="Boolean(wolf.actioning)" @click="$emit('game-mode', 'stop')">
          {{ wolf.actioning === "stop" ? "Stopping..." : "Restore AI" }}
        </button>
      </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>
defineProps({
  wolf: {
    type: Object,
    required: true,
  },
});

defineEmits(["refresh", "unlock", "pair", "game-mode", "admin-unlock"]);
</script>
