<script setup lang="ts">
import { useSessionStore } from '~/stores/session.store'

const sessions = useSessionStore()

// Sessions with pending-XXX IDs are mounting TerminalInstance which will get a real UUID.
// SFTP sidebar only connects once we have a real (non-pending) backend session ID.
function isRealSession(id: string) {
  return !id.startsWith('pending-')
}
</script>

<template>
  <!-- Session container — always in DOM when sessions exist, uses v-show for persistence -->
  <div v-if="sessions.hasSessions" class="absolute inset-0 flex flex-col z-10 bg-gray-950">
    <!-- Tab bar -->
    <TerminalTabs />

    <!-- Session panels — v-show keeps terminal alive when switching tabs -->
    <div class="flex-1 overflow-hidden relative">
      <div
        v-for="session in sessions.sessions"
        :key="session.id"
        v-show="session.id === sessions.activeSessionId"
        class="absolute inset-0 flex"
      >
        <!-- SSH session: SFTP sidebar + terminal -->
        <template v-if="session.protocol === 'ssh'">
          <!-- SFTP sidebar only renders once we have a real backend sessionId -->
          <SftpSidebar
            v-if="isRealSession(session.id)"
            :session-id="session.id"
          />
          <!-- Terminal — always renders, handles pending→real session ID transition internally -->
          <div class="flex-1 overflow-hidden">
            <TerminalInstance
              :session-id="session.id"
              :host-id="session.hostId"
              :host-name="session.hostName"
              :color="session.color"
            />
          </div>
        </template>

        <!-- RDP session placeholder (Phase 3) -->
        <template v-else-if="session.protocol === 'rdp'">
          <div class="flex-1 flex items-center justify-center text-gray-600">
            RDP — Phase 3
          </div>
        </template>
      </div>
    </div>

    <!-- Transfer status bar -->
    <TransferStatus :transfers="[]" />
  </div>
</template>
