<template>
  <footer
    class="flex h-[var(--ide-statusbar-h)] shrink-0 items-center gap-3 border-t border-border bg-surface-1 px-3 text-[11px] text-fg-muted"
  >
    <span class="flex items-center gap-1.5" :title="wsStatus">
      <span class="h-2 w-2 rounded-full" :class="wsDot" />
      {{ t('common.appName') }}
    </span>
    <GitStatusBadge v-if="activeWt" :git="activeWt.git" :branch="activeWt.branch" />
    <span v-else class="text-fg-subtle">{{ t('ide.ready') }}</span>
    <button
      type="button"
      class="ml-auto rounded px-1.5 py-0.5 transition-colors hover:bg-surface-2 hover:text-fg"
      :class="ide.bottomVisible ? 'text-fg' : ''"
      :title="t('ide.terminals')"
      @click="ide.toggleBottom()"
    >
      <span class="inline-flex items-center gap-1"><SquareTerminal :size="12" /> {{ dockCount }}</span>
    </button>
  </footer>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { SquareTerminal } from '@lucide/vue';
import { useIdeStore } from '../../stores/ide';
import { useWorktreesStore } from '../../stores/worktrees';
import { wsClient } from '../../lib/ws-client';
import GitStatusBadge from '../workspace/GitStatusBadge.vue';

const { t } = useI18n();
const ide = useIdeStore();
const worktrees = useWorktreesStore();

const activeWt = computed(() => {
  const c = ide.activeContext;
  if (!c) return null;
  return worktrees.worktrees.find((w) => w.repoId === c.repoId && w.path === c.wtPath) ?? null;
});

const wsStatus = computed(() => wsClient.status.value);
const wsDot = computed(() =>
  wsStatus.value === 'open'
    ? 'bg-emerald-500'
    : wsStatus.value === 'reconnecting' || wsStatus.value === 'connecting'
      ? 'bg-amber-500'
      : 'bg-zinc-600',
);
const dockCount = computed(() => ide.dockSessionIds.length);
</script>
