<template>
  <header class="window-titlebar" :class="{ 'window-titlebar--macos': isMacos }">
    <div class="window-titlebar__drag" data-tauri-drag-region>
      <span class="window-titlebar__title">YwYMusic</span>
    </div>

    <div class="window-titlebar__controls">
      <n-button
        class="window-titlebar__control"
        quaternary
        :bordered="false"
        aria-label="最小化"
        @click.stop="minimizeWindow"
      >
        <template #icon>
          <n-icon :component="MinimizeOutlined" :size="18" />
        </template>
      </n-button>

      <n-button
        class="window-titlebar__control window-titlebar__control--close"
        quaternary
        :bordered="false"
        aria-label="关闭"
        @click.stop="closeWindow"
      >
        <template #icon>
          <n-icon :component="CloseOutlined" :size="18" />
        </template>
      </n-button>
    </div>
  </header>
</template>

<script setup lang="ts">
import { getCurrentWindow } from "@tauri-apps/api/window"
import { NButton, NIcon } from "naive-ui"
import { CloseOutlined, MinimizeOutlined } from "@vicons/material"

const appWindow = getCurrentWindow()
const isMacos = navigator.userAgent.includes("Mac OS X")

function minimizeWindow() {
  void appWindow.minimize()
}

function closeWindow() {
  void appWindow.close()
}
</script>

<style scoped>
.window-titlebar {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  height: var(--titlebar-height);
  overflow: hidden;
  user-select: none;
  background: rgba(234, 220, 200, 0.86);
  backdrop-filter: blur(16px);
}

.window-titlebar__drag {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  gap: 8px;
  padding-left: 14px;
}

.window-titlebar__title {
  min-width: 0;
  overflow: hidden;
  color: var(--app-text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-titlebar__controls {
  display: flex;
  height: 100%;
}

.window-titlebar__control {
  width: 46px;
  height: var(--titlebar-height);
  --n-border-radius: 0 !important;
  --n-color-hover: rgba(180, 83, 42, 0.1) !important;
  --n-color-pressed: rgba(180, 83, 42, 0.16) !important;
  --n-text-color: var(--app-text-secondary) !important;
  --n-text-color-hover: var(--app-text) !important;
  --n-text-color-pressed: var(--app-text) !important;
}

.window-titlebar__control--close {
  --n-color-hover: #d83b32 !important;
  --n-color-pressed: #c43129 !important;
  --n-text-color-hover: #fffaf0 !important;
  --n-text-color-pressed: #fffaf0 !important;
}

.window-titlebar--macos {
  background: rgba(244, 237, 223, 0.72);
}

.window-titlebar--macos .window-titlebar__drag {
  padding-left: 78px;
}

.window-titlebar--macos .window-titlebar__controls,
.window-titlebar--macos {
  display: none;
}

.window-titlebar--macos .window-titlebar__title {
  color: var(--app-text-muted);
}
</style>
