<template>
  <div class="flex flex-col h-full p-4 gap-4">
    <h2 class="text-sm font-bold text-[#58a6ff]">Wake on LAN</h2>
    <p class="text-xs text-[#8b949e]">Send a magic packet through the remote host to wake a machine on the same network.</p>

    <div class="flex items-center gap-2">
      <input v-model="macAddress" type="text" placeholder="MAC address (AA:BB:CC:DD:EE:FF)" class="px-3 py-1.5 text-sm rounded bg-[#161b22] border border-[#30363d] text-[#e0e0e0] outline-none focus:border-[#58a6ff] flex-1 font-mono" @keydown.enter="wake" />
      <button class="px-4 py-1.5 text-sm font-bold rounded bg-[#58a6ff] text-black cursor-pointer disabled:opacity-40" :disabled="sending" @click="wake">Wake</button>
    </div>

    <pre v-if="result" class="bg-[#161b22] border border-[#30363d] rounded p-3 text-xs font-mono text-[#e0e0e0]">{{ result }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";

const props = defineProps<{ sessionId: string }>();
const macAddress = ref("");
const result = ref("");
const sending = ref(false);

async function wake(): Promise<void> {
  if (!macAddress.value) return;
  sending.value = true;
  try {
    result.value = await invoke<string>("tool_wake_on_lan", { sessionId: props.sessionId, macAddress: macAddress.value });
  } catch (err) { result.value = String(err); }
  sending.value = false;
}
</script>
