<script lang="ts">
	import { getCurrentWindow } from '@tauri-apps/api/window';


	const win = getCurrentWindow();

	const minimize = () => win.minimize();
	const closeWindow = () => win.close();
	const maximize = () => win.toggleMaximize();

</script>

<header class="custom-titlebar" data-tauri-drag-region>
	<div class="app-title" data-tauri-drag-region>

	</div>

	<div class="window-controls">
		<button type="button" aria-label="最小化窗口" data-tauri-drag-region="false" class="h-btn btn-minimize" on:click={minimize}></button>
		<button
			type="button"
			data-tauri-drag-region="false"
			class="h-btn btn-max"
			aria-label="最大化窗口"
			on:click={maximize}></button>
		<button type="button"
						data-tauri-drag-region="false"
						class="h-btn btn-close"
						aria-label="关闭窗口"
						on:click={closeWindow}></button>
	</div>
</header>

<style>
    .custom-titlebar {
        height: 30px;
        background-color: #1f1f1f;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        user-select: none;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .window-controls {
        display: flex;
        gap: 10px;
    }

    .window-controls button {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* 🟡 最小化按钮 */
    .window-controls button.btn-minimize {
        background-color: #febc2e;
    }
    .window-controls button.btn-minimize:hover {
        background-color: #ffca45;
        box-shadow: 0 0 4px #ffca45;
    }
    .window-controls button.btn-minimize:active {
        background-color: #d9a323;
    }

    /* 🔴 关闭按钮 */
    .window-controls button.btn-close {
        background-color: #ff5f57;
    }
    .window-controls button.btn-close:hover {
        background-color: #ff7b73;
        box-shadow: 0 0 4px #ff7b73;
    }
    .window-controls button.btn-close:active {
        background-color: #e0463c;
    }

    /* 🟢 最大化按钮（未最大化状态） */
    .window-controls button.btn-max {
        background-color: #28c940;
    }
    .window-controls button.btn-max:hover {
        background-color: #34d058;
        box-shadow: 0 0 4px #34d058;
    }
    .window-controls button.btn-max:active {
        background-color: #1fae39;
    }

</style>
