<template>
  <div class="h-9 flex items-center justify-between px-4 bg-[var(--wraith-bg-secondary)] border-t border-[var(--wraith-border)] text-sm text-[var(--wraith-text-muted)] shrink-0">
    <!-- Left: connection info -->
    <div class="flex items-center gap-3">
      <template v-if="sessionStore.activeSession">
        <span class="flex items-center gap-1">
          <span
            class="w-1.5 h-1.5 rounded-full"
            :class="sessionStore.activeSession.protocol === 'ssh' ? 'bg-[#3fb950]' : 'bg-[#1f6feb]'"
          />
          {{ sessionStore.activeSession.protocol.toUpperCase() }}
        </span>
        <span class="text-[var(--wraith-text-secondary)]">&middot;</span>
        <span>{{ connectionInfo }}</span>
      </template>
      <template v-else>
        <span>Ready</span>
      </template>
    </div>

    <!-- Right: terminal info -->
    <div class="flex items-center gap-3">
      <button
        class="hover:text-[var(--wraith-text-primary)] transition-colors cursor-pointer"
        title="Change terminal theme"
        @click="emit('open-theme-picker')"
      >
        Theme: {{ activeThemeName }}
      </button>
      <span>UTF-8</span>
      <span v-if="sessionStore.activeDimensions">
        {{ sessionStore.activeDimensions.cols }}&times;{{ sessionStore.activeDimensions.rows }}
      </span>
      <span v-else>120&times;40</span>
    </div>
  </div>
</template>

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

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

const activeThemeName = ref("Default");

const emit = defineEmits<{
  "open-theme-picker": [];
}>();

const connectionInfo = computed(() => {
  const session = sessionStore.activeSession;
  if (!session) return "";

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

  const user = session.username ? `${session.username}@` : "";
  return `${user}${conn.hostname}:${conn.port}`;
});

function setThemeName(name: string): void {
  activeThemeName.value = name;
}

defineExpose({ setThemeName, activeThemeName });
</script>
