<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { isTauri, isMobileTauri, getTauriWindow } from '../lib/tauri'

const isDesktopTauri = isTauri && !isMobileTauri()

const isMaximized = ref(false)
let unlisten: (() => void) | null = null

async function initWindowState() {
  if (!isDesktopTauri) return
  try {
    const win = await getTauriWindow()
    isMaximized.value = await win.isMaximized()
    unlisten = await win.onResized(async () => {
      isMaximized.value = await win.isMaximized()
    })
  } catch (e) {
    console.warn('[WindowControls] init failed:', e)
  }
}

async function minimizeWindow() {
  try {
    const win = await getTauriWindow()
    await win.minimize()
  } catch (e) {
    console.warn('[WindowControls] minimize failed:', e)
  }
}

async function toggleMaximize() {
  try {
    const win = await getTauriWindow()
    await win.toggleMaximize()
  } catch (e) {
    console.warn('[WindowControls] toggleMaximize failed:', e)
  }
}

async function closeWindow() {
  try {
    const win = await getTauriWindow()
    await win.close()
  } catch (e) {
    console.warn('[WindowControls] close failed:', e)
  }
}

onMounted(() => {
  initWindowState()
})

onUnmounted(() => {
  if (unlisten) {
    unlisten()
    unlisten = null
  }
})
</script>

<template>
  <div v-if="isDesktopTauri" class="window-controls">
    <button class="wc-btn wc-minimize" @click="minimizeWindow" title="Minimize">
      <svg width="10" height="1" viewBox="0 0 10 1">
        <rect width="10" height="1" fill="currentColor" />
      </svg>
    </button>
    <button class="wc-btn wc-maximize" @click="toggleMaximize" :title="isMaximized ? 'Restore' : 'Maximize'">
      <svg v-if="!isMaximized" width="10" height="10" viewBox="0 0 10 10">
        <rect x="0.5" y="0.5" width="9" height="9" fill="none" stroke="currentColor" stroke-width="1" />
      </svg>
      <svg v-else width="10" height="10" viewBox="0 0 10 10">
        <rect x="2.5" y="0.5" width="7" height="7" fill="none" stroke="currentColor" stroke-width="1" />
        <rect x="0.5" y="2.5" width="7" height="7" fill="var(--bg-primary, #0f0f14)" stroke="currentColor" stroke-width="1" />
      </svg>
    </button>
    <button class="wc-btn wc-close" @click="closeWindow" title="Close">
      <svg width="10" height="10" viewBox="0 0 10 10">
        <line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.2" />
        <line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.2" />
      </svg>
    </button>
  </div>
</template>

<style scoped>
.window-controls {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin-left: 0.5rem;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

.wc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 100%;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a1a1aa);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
  outline: none;
}

.wc-btn:hover {
  background: var(--bg-hover, #1e1e28);
  color: var(--text-primary, #e4e4e7);
}

.wc-btn:active {
  background: var(--border-color, #2a2a3a);
}

.wc-close:hover {
  background: #e81123;
  color: #ffffff;
}

.wc-close:active {
  background: #c50f1f;
  color: #ffffff;
}
</style>
