<script setup lang="ts">
const input = ref('')
const protocol = ref<'ssh' | 'rdp'>('ssh')

const emit = defineEmits<{
  connect: [{ hostname: string; port: number; username: string; protocol: 'ssh' | 'rdp' }]
}>()

function handleConnect() {
  const raw = input.value.trim()
  if (!raw) return

  // Parse user@hostname:port format
  let username = ''
  let hostname = raw
  let port = protocol.value === 'rdp' ? 3389 : 22

  if (hostname.includes('@')) {
    [username, hostname] = hostname.split('@')
  }
  if (hostname.includes(':')) {
    const parts = hostname.split(':')
    hostname = parts[0]
    port = parseInt(parts[1], 10)
  }

  emit('connect', { hostname, port, username, protocol: protocol.value })
  input.value = ''
}
</script>

<template>
  <div class="flex items-center gap-2 px-3 py-2 bg-gray-800 border-b border-gray-700">
    <select v-model="protocol" class="bg-gray-700 text-gray-300 text-xs rounded px-2 py-1.5 border-none">
      <option value="ssh">SSH</option>
      <option value="rdp">RDP</option>
    </select>
    <input
      v-model="input"
      @keydown.enter="handleConnect"
      :placeholder="`user@hostname:${protocol === 'rdp' ? '3389' : '22'}`"
      class="flex-1 bg-gray-900 text-white px-3 py-1.5 rounded text-sm border border-gray-700 focus:border-wraith-500 focus:outline-none"
    />
    <button @click="handleConnect" class="text-sm text-wraith-400 hover:text-wraith-300 px-2">Connect</button>
  </div>
</template>
