<template>
  <div class="flex-1 flex flex-col bg-[var(--wraith-bg-primary)] min-h-0 relative">
    <!-- Terminal views — v-show keeps them alive across tab switches -->
    <div
      v-for="session in sshSessions"
      :key="session.id"
      v-show="session.id === sessionStore.activeSessionId"
      class="absolute inset-0"
    >
      <TerminalView
        :session-id="session.id"
        :is-active="session.id === sessionStore.activeSessionId"
      />
    </div>

    <!-- RDP views — v-show keeps them alive across tab switches -->
    <div
      v-for="session in rdpSessions"
      :key="session.id"
      v-show="session.id === sessionStore.activeSessionId"
      class="absolute inset-0"
    >
      <RdpView
        :session-id="session.id"
        :is-active="session.id === sessionStore.activeSessionId"
      />
    </div>

    <!-- No session placeholder -->
    <div
      v-if="!sessionStore.activeSession"
      class="flex-1 flex items-center justify-center"
    >
      <div class="text-center">
        <p class="text-[var(--wraith-text-muted)] text-sm">
          No active session
        </p>
        <p class="text-[var(--wraith-text-muted)] text-xs mt-1">
          Double-click a connection to start a session
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useSessionStore } from "@/stores/session.store";
import TerminalView from "@/components/terminal/TerminalView.vue";
import RdpView from "@/components/rdp/RdpView.vue";

const sessionStore = useSessionStore();

const sshSessions = computed(() =>
  sessionStore.sessions.filter((s) => s.protocol === "ssh"),
);

const rdpSessions = computed(() =>
  sessionStore.sessions.filter((s) => s.protocol === "rdp"),
);
</script>
