<template>
  <div v-if="isTauri()" class="titlebar" data-tauri-drag-region>
    <div class="titlebar-title" data-tauri-drag-region>Fischer AgentKit</div>
    <div class="titlebar-controls">
      <button class="titlebar-btn" @click="minimize" title="最小化">
        <MinusOutlined />
      </button>
      <button class="titlebar-btn" @click="toggleMaximize" title="最大化">
        <BorderOutlined />
      </button>
      <button class="titlebar-btn close-btn" @click="close" title="关闭">
        <CloseOutlined />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MinusOutlined, BorderOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { isTauri } from '../../api/tauri'

async function minimize() {
  if (!isTauri()) return
  const { getCurrentWindow } = await import('@tauri-apps/api/window')
  await getCurrentWindow().minimize()
}

async function toggleMaximize() {
  if (!isTauri()) return
  const { getCurrentWindow } = await import('@tauri-apps/api/window')
  await getCurrentWindow().toggleMaximize()
}

async function close() {
  if (!isTauri()) return
  // Hide to tray instead of closing
  const { getCurrentWindow } = await import('@tauri-apps/api/window')
  await getCurrentWindow().hide()
}
</script>

<style scoped>
.titlebar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-container, #ffffff);
  border-bottom: 1px solid var(--border-color, #ededec);
  user-select: none;
  flex-shrink: 0;
}
.titlebar-title {
  padding-left: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #555);
}
.titlebar-controls {
  display: flex;
  height: 100%;
}
.titlebar-btn {
  width: 46px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #555);
  font-size: 12px;
}
.titlebar-btn:hover {
  background: var(--fill-secondary, #f5f5f5);
}
.close-btn:hover {
  background: #e81123;
  color: white;
}
</style>
