<template>
  <div class="flex items-center bg-[var(--wraith-bg-secondary)] border-b border-[var(--wraith-border)] h-9 shrink-0">
    <!-- Tabs -->
    <div class="flex items-center overflow-x-auto min-w-0">
      <button
        v-for="session in sessionStore.sessions"
        :key="session.id"
        class="group flex items-center gap-1.5 px-3 h-9 text-xs whitespace-nowrap border-r border-[var(--wraith-border)] transition-all duration-500 cursor-pointer shrink-0"
        :class="[
          session.id === sessionStore.activeSessionId
            ? 'bg-[var(--wraith-bg-primary)] text-[var(--wraith-text-primary)] border-b-2 border-b-[var(--wraith-accent-blue)]'
            : 'text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-secondary)] hover:bg-[var(--wraith-bg-tertiary)]',
          isRootUser(session) ? 'border-t-2 border-t-[#f8514966]' : '',
        ]"
        @click="sessionStore.activateSession(session.id)"
      >
        <!-- Badge: protocol dot + root dot + env pills -->
        <TabBadge
          :protocol="session.protocol"
          :username="session.username"
          :tags="getSessionTags(session)"
        />

        <span>{{ session.name }}</span>

        <!-- Close button -->
        <span
          class="ml-1 opacity-0 group-hover:opacity-100 hover:text-[var(--wraith-accent-red)] transition-opacity"
          @click.stop="sessionStore.closeSession(session.id)"
        >
          &times;
        </span>
      </button>
    </div>

    <!-- New tab button -->
    <button
      class="flex items-center justify-center w-9 h-9 text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-primary)] hover:bg-[var(--wraith-bg-tertiary)] transition-colors cursor-pointer shrink-0"
      title="New session"
    >
      +
    </button>
  </div>
</template>

<script setup lang="ts">
import { useSessionStore, type Session } from "@/stores/session.store";
import { useConnectionStore } from "@/stores/connection.store";
import TabBadge from "@/components/session/TabBadge.vue";

const sessionStore = useSessionStore();
const connectionStore = useConnectionStore();

/** Get tags for a session's underlying connection. */
function getSessionTags(session: Session): string[] {
  const conn = connectionStore.connections.find((c) => c.id === session.connectionId);
  return conn?.tags ?? [];
}

/** Check if the connection for this session uses the root user (drives the orange top border). */
function isRootUser(session: Session): boolean {
  if (session.username === "root" || session.username === "Administrator") return true;

  const conn = connectionStore.connections.find((c) => c.id === session.connectionId);
  if (!conn) return false;

  if (conn.options) {
    try {
      const opts = JSON.parse(conn.options);
      if (opts?.username === "root" || opts?.username === "Administrator") return true;
    } catch {
      // ignore malformed options
    }
  }

  return conn.tags?.some((t) => t === "root" || t === "Administrator") ?? false;
}
</script>
