<template>
  <div class="h-8 bg-base-300 border-b border-base-content/10 flex items-center justify-between px-4 select-none" style="-webkit-app-region: drag;">
    <div class="flex items-center gap-2">
      <div class="text-primary">
        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
        </svg>
      </div>
      <span class="text-base-content text-sm font-medium">Ziya</span>
    </div>

    <div class="flex items-center gap-1" style="-webkit-app-region: no-drag;">
      <!-- Theme Switcher -->
      <ThemeSwitcher />

      <!-- Window Controls -->
      <button
        class="w-8 h-8 flex items-center justify-center text-base-content/60 hover:text-base-content hover:bg-base-200 transition-colors duration-150 rounded"
        title="Minimize"
        @click="minimizeWindow"
      >
        <svg class="w-3 h-3" viewBox="0 0 12 12" fill="none">
          <rect x="2" y="5.5" width="8" height="1" fill="currentColor" />
        </svg>
      </button>

      <button
        class="w-8 h-8 flex items-center justify-center text-base-content/60 hover:text-base-content hover:bg-base-200 transition-colors duration-150 rounded"
        :title="isMaximized ? 'Restore' : 'Maximize'"
        @click="maximizeWindow"
      >
        <svg v-if="isMaximized" class="w-3 h-3" viewBox="0 0 12 12" fill="none">
          <rect x="2" y="2" width="6" height="6" stroke="currentColor" stroke-width="1" fill="none" />
          <path d="M4 4V1h7v7h-3" stroke="currentColor" stroke-width="1" fill="none" />
        </svg>
        <svg v-else class="w-3 h-3" viewBox="0 0 12 12" fill="none">
          <rect x="2" y="2" width="8" height="8" stroke="currentColor" stroke-width="1" fill="none" />
        </svg>
      </button>

      <button
        class="w-8 h-8 flex items-center justify-center text-base-content/60 hover:text-error hover:bg-error/10 transition-colors duration-150 rounded"
        title="Close"
        @click="closeWindow"
      >
        <svg class="w-3 h-3" viewBox="0 0 12 12" fill="none">
          <path d="M9 3L3 9M3 3l6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import ThemeSwitcher from './ThemeSwitcher.vue';

const isMaximized = ref(false);

// Window control methods
const minimizeWindow = async () => {
  if (window.electronAPI) {
    await window.electronAPI.minimizeWindow();
  }
};

const maximizeWindow = async () => {
  if (window.electronAPI) {
    await window.electronAPI.maximizeWindow();
    // Update maximized state
    isMaximized.value = await window.electronAPI.isMaximized();
  }
};

const closeWindow = async () => {
  if (window.electronAPI) {
    await window.electronAPI.closeWindow();
  }
};

// Listen for maximize state changes
const handleMaximizeChange = (event: any, maximized: boolean) => {
  isMaximized.value = maximized;
};

onMounted(async () => {
  if (window.electronAPI) {
    // Get initial maximized state
    isMaximized.value = await window.electronAPI.isMaximized();

    // Listen for maximize state changes
    window.electronAPI.onMaximizeChange(handleMaximizeChange);
  }
});

onUnmounted(() => {
  if (window.electronAPI) {
    window.electronAPI.removeMaximizeListener(handleMaximizeChange);
  }
});
</script>
