<template>
  <div class="hud-controls">
    <div class="btn-group primary">
      <button class="control-btn" @click="$emit('new')" :disabled="!connected || isAgentRunning || handoverPending || smState === 'NO_SESSION' || smState === 'RESETTING'">NEW</button>
      <button v-if="!isPublic" class="control-btn" @click="$emit('handover')" :disabled="!connected || isAgentRunning || handoverPending || smState === 'NO_SESSION' || smState === 'RESETTING'">HANDOVER</button>
    </div>
    <div class="btn-group secondary">
      <button class="control-btn confirm-btn" @click="$emit('confirm-new')" :disabled="!handoverPending">YES, NEW</button>
      <button class="control-btn stay-btn" @click="$emit('stay')" :disabled="!handoverPending">STAY</button>
      <button class="control-btn ns-btn" @click="$emit('new')" :disabled="smState !== 'NO_SESSION'">NEW SESSION</button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  smState: String,
  connected: Boolean,
  isAgentRunning: Boolean,
  handoverPending: Boolean,
  isPublic: Boolean,
})
defineEmits(['new', 'handover', 'confirm-new', 'stay'])
</script>

<style scoped>
.hud-controls {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
}
.btn-group {
  display: flex;
  flex-direction: row;
  gap: 0.35rem;
  flex-wrap: nowrap;
}
.control-btn {
  height: 32px;
  min-width: 90px;
  padding: 0 12px;
  background: var(--bg-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.control-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--text-dim);
  color: var(--text);
}
.control-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.stop-btn.stop-active {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}
.confirm-btn:not(:disabled) {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
  color: #22c55e;
}
.stay-btn:not(:disabled) {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
  color: #3b82f6;
}
.ns-btn {
  background: rgba(34, 197, 94, 0.1);
  border-color: #22c55e;
  color: #22c55e;
}
.ns-btn:hover {
  background: rgba(34, 197, 94, 0.2) !important;
}
</style>
