<script setup lang="ts">
defineProps<{
  waitingForToken?: boolean
  showStart?: boolean
  showRestart?: boolean
}>()

defineEmits<{
  requestToken: []
  runClaude: []
  runClaudeContinue: []
  runClaudeResume: []
  clearBuffer: []
  refresh: []
  restart: []
  sendKey: [key: string]
  scroll: [direction: 'up' | 'down' | 'end']
}>()
</script>

<template>
  <div class="tnb-bar">
    <!-- Agent lifecycle -->
    <button v-if="showStart" class="tnb-btn start" title="Start Agent" @click="$emit('restart')">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
      <span class="tnb-label">Start</span>
    </button>
    <button v-if="showRestart" class="tnb-btn restart" title="Restart Agent" @click="$emit('restart')">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
      <span class="tnb-label">Restart</span>
    </button>
    <span v-if="showStart || showRestart" class="tnb-sep"></span>
    <!-- Action buttons -->
    <button class="tnb-btn mcp" :class="{ waiting: waitingForToken }" title="Connect MCP" @click="$emit('requestToken')">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
      <span class="tnb-label">MCP</span>
    </button>
    <button class="tnb-btn claude" title="Run Claude" @click="$emit('runClaude')">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
      <span class="tnb-label">Claude</span>
    </button>
    <button class="tnb-btn continue" title="Continue" @click="$emit('runClaudeContinue')">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
      <span class="tnb-label">Cont</span>
    </button>
    <button class="tnb-btn resume-btn" title="Resume" @click="$emit('runClaudeResume')">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/><path d="M21 3v6h-6"/></svg>
      <span class="tnb-label">Resume</span>
    </button>
    <button class="tnb-btn clear" title="Clear Buffer" @click="$emit('clearBuffer')">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14"/></svg>
      <span class="tnb-label">Clear</span>
    </button>
    <button class="tnb-btn refresh-btn" title="Refresh Screen" @click="$emit('refresh')">
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
      <span class="tnb-label">Refresh</span>
    </button>

    <span class="tnb-sep"></span>

    <!-- Special keys -->
    <button class="tnb-btn key esc" title="Escape" @click="$emit('sendKey', 'esc')">Esc</button>
    <button class="tnb-btn key tab" title="Tab" @click="$emit('sendKey', 'tab')">Tab</button>
    <button class="tnb-btn key ctrl-c" title="Ctrl+C" @click="$emit('sendKey', 'ctrl-c')">^C</button>
    <button class="tnb-btn key alt-m" title="Alt+M" @click="$emit('sendKey', 'alt-m')">Alt+M</button>

    <span class="tnb-sep"></span>

    <!-- Scroll buttons -->
    <div class="tnb-group">
      <button class="tnb-btn scroll-btn" title="Scroll up" @click="$emit('scroll', 'up')">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M18 15l-6-6-6 6"/></svg>
      </button>
      <button class="tnb-btn scroll-btn end" title="Scroll to bottom" @click="$emit('scroll', 'end')">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M7 7l5 5 5-5"/><path d="M7 13l5 5 5-5"/></svg>
      </button>
      <button class="tnb-btn scroll-btn" title="Scroll down" @click="$emit('scroll', 'down')">
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
      </button>
    </div>

    <!-- Arrow keys -->
    <div class="tnb-group arrows">
      <button class="tnb-btn arrow" title="Up" @click="$emit('sendKey', 'up')">▲</button>
      <div class="tnb-arrow-row">
        <button class="tnb-btn arrow" title="Left" @click="$emit('sendKey', 'left')">◀</button>
        <button class="tnb-btn arrow" title="Down" @click="$emit('sendKey', 'down')">▼</button>
        <button class="tnb-btn arrow" title="Right" @click="$emit('sendKey', 'right')">▶</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tnb-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: wrap;
}
.tnb-bar::-webkit-scrollbar { display: none; }

.tnb-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 3px;
  flex-shrink: 0;
}

.tnb-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 10px;
  font-family: system-ui, sans-serif;
  white-space: nowrap;
  transition: all 0.12s;
  flex-shrink: 0;
}
.tnb-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
.tnb-btn:active {
  transform: scale(0.96);
}

.tnb-label {
  font-weight: 500;
}

/* Agent lifecycle */
.tnb-btn.start { color: #10b981; border-color: rgba(16, 185, 129, 0.2); }
.tnb-btn.start:hover { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.3); color: #34d399; }
.tnb-btn.restart { color: rgba(245, 158, 11, 0.8); border-color: rgba(245, 158, 11, 0.2); }
.tnb-btn.restart:hover { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.3); color: #f59e0b; }

/* Action button variants */
.tnb-btn.mcp:hover { background: rgba(236, 72, 153, 0.2); border-color: rgba(236, 72, 153, 0.3); color: #ec4899; }
.tnb-btn.mcp.waiting { background: rgba(16, 185, 129, 0.2); border-color: #10b981; color: #10b981; animation: tnb-pulse 0.8s infinite; }
.tnb-btn.claude:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.3); color: #8b5cf6; }
.tnb-btn.continue:hover { background: rgba(6, 182, 212, 0.2); border-color: rgba(6, 182, 212, 0.3); color: #06b6d4; }
.tnb-btn.resume-btn:hover { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.3); color: #10b981; }
.tnb-btn.clear:hover { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.3); color: #f59e0b; }
.tnb-btn.refresh-btn:hover { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.3); color: #3b82f6; }

/* Key buttons */
.tnb-btn.key {
  padding: 3px 6px;
  font-weight: 600;
  font-size: 9px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}
.tnb-btn.ctrl-c:hover { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.3); color: #ef4444; }
.tnb-btn.alt-m:hover { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.3); color: #3b82f6; }

/* Scroll buttons */
.tnb-btn.scroll-btn {
  padding: 2px 5px;
}
.tnb-btn.scroll-btn:hover { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.3); color: #10b981; }
.tnb-btn.scroll-btn.end:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.3); color: #8b5cf6; }

/* Arrow buttons */
.tnb-btn.arrow {
  padding: 1px 4px;
  font-size: 8px;
  min-width: 20px;
  justify-content: center;
}

/* Groups */
.tnb-group {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.tnb-group.arrows {
  flex-direction: column;
  gap: 1px;
}

.tnb-arrow-row {
  display: flex;
  gap: 1px;
}

@keyframes tnb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
</style>
