<!DOCTYPE html>
<html lang="zh" class="h-full bg-gray-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享地图</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.138.0/build/three.module.js",
            "three/examples/jsm/controls/OrbitControls": "https://unpkg.com/three@0.138.0/examples/jsm/controls/OrbitControls.js"
        }
    }
    </script>
</head>
<body class="h-full" x-data="{ sidebarOpen: true }">
    <div class="flex h-full">
        <!-- Sidebar -->
        <div :class="{'w-80': sidebarOpen, 'w-16': !sidebarOpen}" class="bg-gray-900 shadow-lg transition-all duration-300 ease-in-out flex flex-col">
            <!-- Toggle button -->
            <button @click="sidebarOpen = !sidebarOpen" class="p-4 text-gray-400 hover:text-gray-200 focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                </svg>
            </button>

            <div :class="{'hidden': !sidebarOpen}" class="p-6 flex-grow overflow-y-auto">
                <h2 class="text-2xl font-bold mb-4 text-gray-200">国家列表</h2>
                <ul id="countries" class="mb-4 space-y-2"></ul>
                <div class="mb-4">
                    <input type="text" id="new-country" placeholder="输入国家名称" list="country-suggestions" class="w-full px-3 py-2 bg-gray-800 text-gray-200 border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <datalist id="country-suggestions"></datalist>
                </div>
                <button id="add-country-btn" class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-200 mb-2">添加国家</button>
                <p id="error-message" class="text-red-400 mt-2 mb-4"></p>
                <div class="mb-4">
                    <h3 class="text-lg font-semibold mb-2 text-gray-300">高亮颜色</h3>
                    <div id="color-picker" class="flex justify-around"></div>
                </div>
                <div class="mb-4">
                    <h3 class="text-lg font-semibold mb-2 text-gray-300">地图背景</h3>
                    <div id="map-type-selector" class="flex flex-wrap gap-2">
                        <div class="map-type-option w-16 h-16 cursor-pointer border-2 border-gray-600 rounded-md transition duration-200 hover:border-blue-500" data-map-type="standard"></div>
                        <div class="map-type-option w-16 h-16 cursor-pointer border-2 border-gray-600 rounded-md transition duration-200 hover:border-blue-500" data-map-type="night"></div>
                        <div class="map-type-option w-16 h-16 cursor-pointer border-2 border-gray-600 rounded-md transition duration-200 hover:border-blue-500" data-map-type="gray"></div>
                        <div class="map-type-option w-16 h-16 cursor-pointer border-2 border-gray-600 rounded-md transition duration-200 hover:border-blue-500" data-map-type="satellite"></div>
                    </div>
                </div>
                <button id="share-btn" class="w-full bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition duration-200">创建新的共享地图</button>
            </div>
        </div>

        <!-- Main content -->
        <div class="flex-grow relative">
            <div id="map" class="w-full h-full"></div>
        </div>

        <!-- Map controls -->
        <div id="map-controls" class="fixed top-4 right-4 z-50 flex flex-col space-y-2">
            <button id="zoom-in" class="map-control-button bg-white text-gray-800 p-2 rounded-full shadow-md hover:bg-gray-200">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
            </button>
            <button id="zoom-out" class="map-control-button bg-white text-gray-800 p-2 rounded-full shadow-md hover:bg-gray-200">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                </svg>
            </button>
        </div>
    </div>

    <script type="module">
        import { init, loadSharedMap, addCountry, removeCountry, shareMap } from "{{ url_for('static', filename='js/shared_map.js') }}";

        window.addEventListener('load', () => {
            init();
            loadSharedMap({{ map_data|tojson }});
        });

        window.addCountry = addCountry;
        window.removeCountry = removeCountry;
        window.shareMap = shareMap;

        document.getElementById('add-country-btn').addEventListener('click', addCountry);
        document.getElementById('share-btn').addEventListener('click', shareMap);
    </script>
</body>
</html>
