const fs = require('fs');
const path = 'c:/Users/JohannesBaumeister/Enwelo GmbH & Co. KG/1.016_BW_Scheddebrock - General/07 AutoCAD_QGis/Planungstool/index.html';
let content = fs.readFileSync(path, 'utf8');

// 1. Move/Add Checkbox above Search
const searchBlock = `<div id="owner-search-container" style="margin-top: 0px; margin-bottom: 15px;">`;
const newToggleBlock = `
            <div id="quick-toggles" style="padding: 0 0 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 15px;">
                <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; color: white; font-size: 13px; font-weight: 600; padding: 4px 0;">
                    <input type="checkbox" id="sidebar-toggle-owner-status" checked onchange="document.getElementById('toggle-owner-status').checked = this.checked; toggleLayer('ownerStatus', this.checked)" style="width: 16px; height: 16px; cursor: pointer;"> 
                    <span style="display: flex; align-items: center; gap: 8px;">
                        <i data-lucide="shield-check" style="width: 18px; color: var(--info);"></i> Sicherungsstand anzeigen
                    </span>
                </label>
            </div>
            ` + searchBlock;

if (!content.includes('id="sidebar-toggle-owner-status"')) {
    content = content.replace(searchBlock, newToggleBlock);
}

// 2. Add Legend Container below Owner List
const ownerListEnd = `</div>\n        </div>\n        <div\n            style="padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1);`;
const legendBlock = `
            <!-- Legend Container -->
            <div id="status-legend" style="margin: 15px 12px 0 12px; padding: 12px; background: rgba(0,0,0,0.25); border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); display: none;">
                <h5 style="margin: 0 0 12px 0; color: white; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; display: flex; align-items: center; gap: 8px;">
                    <i data-lucide="info" style="width: 14px;"></i> Legende
                </h5>
                <div id="legend-items" style="display: flex; flex-direction: column; gap: 8px;">
                    <!-- Legend items will be injected here -->
                </div>
            </div>
        </div>
        <div
            style="padding: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1);`;

if (!content.includes('id="status-legend"')) {
    content = content.replace(/<\/div>\s+<\/div>\s+<div\s+style="padding: 20px; border-top: 1px solid rgba\(255, 255, 255, 0.1\);/, (match) => {
        return legendBlock;
    });
}

// Ensure owner-list is scrollable and sidebar is flex
content = content.replace('id="owner-list">', 'id="owner-list" style="flex: 1; overflow-y: auto;">');

fs.writeFileSync(path, content);
console.log("UI layout for Sicherungsstand toggle and Legend applied.");