<script setup lang="ts">
import { useTerminal } from '~/composables/useTerminal'

const connections = useConnectionStore()
const showHostDialog = ref(false)
const editingHost = ref<any>(null)
const showGroupDialog = ref(false)

// Terminal composable for connect-on-click
const { createTerminal, connectToHost } = useTerminal()

onMounted(async () => {
  await Promise.all([connections.fetchHosts(), connections.fetchTree()])
})

function openNewHost(groupId?: number) {
  editingHost.value = groupId ? { groupId } : null
  showHostDialog.value = true
}

function openEditHost(host: any) {
  editingHost.value = host
  showHostDialog.value = true
}

function connectHost(host: any) {
  if (host.protocol !== 'ssh') {
    // RDP support in Phase 3
    return
  }
  // We connect via useTerminal — TerminalInstance will handle the actual mount
  // Here we just trigger SessionContainer to render a new TerminalInstance
  // The terminal composable is invoked inside TerminalInstance on mount
  // We signal the session store directly to open a pending session slot
  // TerminalInstance picks up the hostId prop and opens the WS connection
  const sessions = useSessionStore()
  const pendingId = `pending-${Date.now()}`
  sessions.addSession({
    id: pendingId,
    hostId: host.id,
    hostName: host.name,
    protocol: 'ssh',
    color: host.color,
    active: true,
  })
}
</script>

<template>
  <div class="flex w-full">
    <!-- Sidebar: Group tree -->
    <aside class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col overflow-y-auto shrink-0">
      <div class="p-3 flex items-center justify-between">
        <span class="text-sm font-medium text-gray-400">Connections</span>
        <div class="flex gap-1">
          <button @click="showGroupDialog = true" class="text-xs text-gray-500 hover:text-wraith-400" title="New Group">+ Group</button>
          <button @click="openNewHost()" class="text-xs text-gray-500 hover:text-wraith-400" title="New Host">+ Host</button>
        </div>
      </div>
      <HostTree :groups="connections.groups" @select-host="openEditHost" @new-host="openNewHost" />
    </aside>

    <!-- Main: host list -->
    <main class="flex-1 p-4 overflow-y-auto">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        <HostCard
          v-for="host in connections.hosts"
          :key="host.id"
          :host="host"
          @connect="connectHost(host)"
          @edit="openEditHost(host)"
          @delete="connections.deleteHost(host.id)"
        />
      </div>
      <p v-if="!connections.hosts.length && !connections.loading" class="text-gray-600 text-center mt-12">
        No hosts yet. Click "+ Host" to add your first connection.
      </p>
    </main>

    <!-- Dialogs -->
    <HostEditDialog v-model:visible="showHostDialog" :host="editingHost" @saved="connections.fetchHosts()" />
    <GroupEditDialog v-model:visible="showGroupDialog" @saved="connections.fetchTree()" />
  </div>
</template>
