<template>
  <div class="terminal-view">
    <div class="terminal-view__main">
      <TerminalPanel />
    </div>
    <div :class="['terminal-view__sidebar', { 'terminal-view__sidebar--collapsed': sidebarCollapsed }]">
      <button class="terminal-view__sidebar-toggle" @click="sidebarCollapsed = !sidebarCollapsed">
        <HistoryOutlined />
      </button>
      <div v-if="!sidebarCollapsed" class="terminal-view__sidebar-content">
        <CommandHistory @select="handleHistorySelect" />
      </div>
    </div>

    <!-- Whitelist management button -->
    <button class="terminal-view__whitelist-btn" @click="showWhitelist = true">
      <SafetyOutlined />
    </button>

    <!-- Confirmation dialog (local terminal mode) -->
    <a-modal
      v-model:open="showConfirmation"
      title="命令确认"
      :ok-text="'确认执行'"
      :cancel-text="'拒绝'"
      @ok="approveConfirmation"
      @cancel="rejectConfirmation"
      :ok-button-props="{ danger: true }"
    >
      <div class="terminal-view__modal-body">
        <div class="terminal-view__modal-command">
          {{ terminalStore.pendingConfirmation?.command }}
        </div>
        <div class="terminal-view__modal-reason">
          {{ terminalStore.pendingConfirmation?.reason }}
        </div>
        <a-checkbox v-model:checked="addToWhitelist">
          添加到会话白名单
        </a-checkbox>
      </div>
    </a-modal>

    <!-- Whitelist management drawer -->
    <a-drawer
      v-model:open="showWhitelist"
      title="终端白名单管理"
      placement="right"
      :width="640"
    >
      <WhitelistManager />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue'
import {
  Modal as AModal,
  Checkbox as ACheckbox,
  Drawer as ADrawer,
} from 'ant-design-vue'
import { HistoryOutlined, SafetyOutlined } from '@ant-design/icons-vue'
import { useTerminalStore } from '@/stores/terminal'
import TerminalPanel from '@/components/terminal/TerminalPanel.vue'
import CommandHistory from '@/components/terminal/CommandHistory.vue'
import WhitelistManager from '@/components/terminal/WhitelistManager.vue'

const terminalStore = useTerminalStore()
const addToWhitelist = ref(false)
const sidebarCollapsed = ref(true)
const showWhitelist = ref(false)

const showConfirmation = computed({
  get: () => !!terminalStore.pendingConfirmation,
  set: () => { /* modal handles close via cancel */ },
})

onUnmounted(() => {
  terminalStore.disconnectWebSocket()
})

function handleHistorySelect(command: string): void {
  terminalStore.sendCommand(command)
}

function approveConfirmation(): void {
  const confirmation = terminalStore.pendingConfirmation
  if (confirmation) {
    terminalStore.confirmCommand(confirmation.confirmation_id, true, addToWhitelist.value)
    addToWhitelist.value = false
  }
}

function rejectConfirmation(): void {
  const confirmation = terminalStore.pendingConfirmation
  if (confirmation) {
    terminalStore.confirmCommand(confirmation.confirmation_id, false)
    addToWhitelist.value = false
  }
}
</script>

<style scoped>
.terminal-view {
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.terminal-view__main {
  flex: 1;
  overflow: hidden;
  padding: var(--space-2);
  position: relative;
}

.terminal-view__sidebar {
  display: flex;
  border-left: 1px solid var(--border-color);
  background: var(--bg-primary);
  transition: width var(--transition-normal);
  overflow: hidden;
}

.terminal-view__sidebar--collapsed {
  width: 32px;
}

.terminal-view__sidebar:not(.terminal-view__sidebar--collapsed) {
  width: 240px;
}

.terminal-view__sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

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

.terminal-view__sidebar-content {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.terminal-view__whitelist-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-4);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

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

.terminal-view__modal-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);
  margin-bottom: var(--space-3);
  word-break: break-all;
}

.terminal-view__modal-reason {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
</style>
