<template>
  <div class="terminal-panel">
    <!-- Mode switcher tabs -->
    <div class="terminal-panel__header">
      <div class="terminal-panel__tabs">
        <button
          :class="[
            'terminal-panel__tab',
            { 'terminal-panel__tab--active': terminalStore.terminalMode === 'local' },
          ]"
          @click="terminalStore.switchMode('local')"
        >
          <DesktopOutlined />
          <span>本地终端</span>
        </button>
        <button
          v-if="authStore.canUseServerTerminal()"
          :class="[
            'terminal-panel__tab',
            { 'terminal-panel__tab--active': terminalStore.terminalMode === 'server' },
          ]"
          @click="terminalStore.switchMode('server')"
        >
          <CloudServerOutlined />
          <span>服务端终端</span>
        </button>
      </div>
      <div class="terminal-panel__status">
        <span
          :class="[
            'terminal-panel__indicator',
            { 'terminal-panel__indicator--connected': terminalStore.isWsConnected },
          ]"
        >
          {{ terminalStore.isWsConnected ? '已连接' : '未连接' }}
        </span>
      </div>
    </div>

    <!-- Terminal emulator -->
    <div class="terminal-panel__body">
      <TerminalEmulator />
    </div>

    <!-- Server terminal approval waiting overlay -->
    <div v-if="terminalStore.isWaitingForApproval" class="terminal-panel__approval-overlay">
      <div class="terminal-panel__approval-card">
        <div class="terminal-panel__approval-icon">
          <ClockCircleOutlined />
        </div>
        <div class="terminal-panel__approval-title">等待管理员审批</div>
        <div class="terminal-panel__approval-command">
          {{ terminalStore.pendingApproval?.command }}
        </div>
        <div class="terminal-panel__approval-reason">
          {{ terminalStore.pendingApproval?.reason }}
        </div>
        <div class="terminal-panel__approval-timer">
          超时倒计时: {{ terminalStore.pendingApproval?.expires_in }}s
        </div>
        <a-button size="small" @click="terminalStore.cancelApproval()">
          取消等待
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DesktopOutlined, CloudServerOutlined, ClockCircleOutlined } from '@ant-design/icons-vue'
import { Button as AButton } from 'ant-design-vue'
import { useTerminalStore } from '@/stores/terminal'
import { useAuthStore } from '@/stores/auth'
import TerminalEmulator from './TerminalEmulator.vue'

const terminalStore = useTerminalStore()
const authStore = useAuthStore()
</script>

<style scoped>
.terminal-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.terminal-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.terminal-panel__tabs {
  display: flex;
  gap: var(--space-1);
}

.terminal-panel__tab {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  transition: all var(--transition-fast);
}

.terminal-panel__tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.terminal-panel__tab--active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 500;
}

.terminal-panel__status {
  display: flex;
  align-items: center;
}

.terminal-panel__indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

.terminal-panel__indicator--connected {
  color: var(--success-color, #52c41a);
}

.terminal-panel__body {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Approval overlay ────────────────────────────────────────────── */

.terminal-panel__approval-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 100;
}

.terminal-panel__approval-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  max-width: 400px;
  text-align: center;
}

.terminal-panel__approval-icon {
  font-size: 32px;
  color: var(--warning-color, #faad14);
}

.terminal-panel__approval-title {
  font-size: var(--font-md);
  font-weight: 600;
  color: var(--text-primary);
}

.terminal-panel__approval-command {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: var(--font-sm);
  color: var(--text-primary);
  background: var(--bg-tertiary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  word-break: break-all;
  width: 100%;
}

.terminal-panel__approval-reason {
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

.terminal-panel__approval-timer {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}
</style>
