<template>
  <div class="flex flex-col h-full p-4 gap-3">
    <div class="flex items-center gap-2">
      <select v-model="mode" class="px-3 py-1.5 text-sm rounded bg-[#161b22] border border-[#30363d] text-[#e0e0e0] outline-none cursor-pointer">
        <option value="speedtest">Internet Speed Test</option>
        <option value="iperf">iperf3 (LAN)</option>
      </select>
      <template v-if="mode === 'iperf'">
        <input v-model="server" type="text" placeholder="iperf3 server IP" class="px-3 py-1.5 text-sm rounded bg-[#161b22] border border-[#30363d] text-[#e0e0e0] outline-none focus:border-[#58a6ff] w-40" />
        <input v-model.number="duration" type="number" min="1" max="60" class="px-3 py-1.5 text-sm rounded bg-[#161b22] border border-[#30363d] text-[#e0e0e0] outline-none focus:border-[#58a6ff] w-16" />
        <span class="text-xs text-[#484f58]">sec</span>
      </template>
      <button class="px-4 py-1.5 text-sm font-bold rounded bg-[#58a6ff] text-black cursor-pointer disabled:opacity-40" :disabled="running" @click="run">
        {{ running ? "Testing..." : "Run Test" }}
      </button>
    </div>
    <pre class="flex-1 overflow-auto bg-[#161b22] border border-[#30363d] rounded p-3 text-xs font-mono whitespace-pre-wrap text-[#e0e0e0]">{{ output || "Select a mode and click Run Test" }}</pre>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { invoke } from "@tauri-apps/api/core";
const props = defineProps<{ sessionId: string }>();
const mode = ref("speedtest");
const server = ref("");
const duration = ref(5);
const output = ref("");
const running = ref(false);

async function run(): Promise<void> {
  running.value = true;
  output.value = mode.value === "iperf" ? `Running iperf3 to ${server.value}...\n` : "Running speed test...\n";
  try {
    if (mode.value === "iperf") {
      if (!server.value) { output.value = "Enter an iperf3 server IP"; running.value = false; return; }
      output.value = await invoke<string>("tool_bandwidth_iperf", { sessionId: props.sessionId, server: server.value, duration: duration.value });
    } else {
      output.value = await invoke<string>("tool_bandwidth_speedtest", { sessionId: props.sessionId });
    }
  } catch (err) { output.value = String(err); }
  running.value = false;
}
</script>
