<template>
  <div class="hud-row" :class="{ 'justify-center': !devFlags.showHud }">
    <div class="hud-left">
      <HudControls
        :smState="smState"
        :connected="connected"
        :isAgentRunning="isAgentRunning"
        :handoverPending="handoverPending"
        :isPublic="isPublic"
        @new="$emit('new')"
        @handover="$emit('handover')"
        @stop="$emit('stop')"
        @confirm-new="$emit('confirm-new')"
        @stay="$emit('stay')"
      />
    </div>
    <div v-if="devFlags.showHud" class="hud-center hidden md:flex">
      <HudActions :smState="smState" :smLabel="smLabel" :statusText="statusText" :hudTree="hudTree" />
    </div>
    <div v-if="devFlags.showHud" class="hud-right hidden lg:flex">
      <HudMetrics
        :usage="sessionTotalTokens"
        :finance="finance"
        :selectedAgent="selectedAgent"
        :allAgents="allAgents"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import HudActions from './HudActions.vue'
import HudControls from './HudControls.vue'
import HudMetrics from './HudMetrics.vue'
import { useDevFlags } from '../composables/useDevFlags'

const devFlags = useDevFlags()

defineProps({
  smState: String,
  smLabel: String,
  statusText: String,
  hudTree: Array as () => import('../composables/sessionHistory').HudNode[],
  sessionTotalTokens: Object,
  finance: Object,
  selectedAgent: String,
  allAgents: Array,
  connected: Boolean,
  isAgentRunning: Boolean,
  handoverPending: Boolean,
  isPublic: Boolean,
})

const emit = defineEmits(['new', 'handover', 'stop', 'confirm-new', 'stay'])
</script>

<style scoped>
.hud-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 90px;
  padding: 0 1rem;
  box-sizing: border-box;
  gap: 1rem;
  align-items: center;
  z-index: 100;
}

.hud-left  { flex: 0 0 auto; display: flex; align-items: center; height: 100%; }
.hud-center { flex: 2; min-width: 0; align-items: stretch; height: 100%; overflow: hidden; }
.hud-right  { flex: 1; min-width: 200px; align-items: stretch; height: 100%; }

/* hud-center / hud-right gated by showHud dev flag */
</style>
