<!-- Sidebar component for ORA Editor -->

<!-- Scale slider (mobile only) -->
<div x-show="oraPath" class="lg:hidden bg-gray-800 rounded p-3 border border-gray-700 mb-4">
    <div class="flex justify-between mb-2">
        <span class="text-sm text-gray-300">Scale:</span>
        <span class="text-sm text-gray-300" x-text="scale + '%'"></span>
    </div>
    <input 
        type="range" 
        x-model.number="scale" 
        min="10" 
        max="100" 
        step="5"
        class="w-full accent-blue-500 h-2 lg:h-auto mb-2 touch-manipulation"
    >
    <div class="flex gap-2">
        <button @click="scale = 25" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">25%</button>
        <button @click="scale = 50" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">50%</button>
        <button @click="scale = 100" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">100%</button>
    </div>
</div>

<!-- REVIEW MODE SIDEBAR -->
<template x-if="mode === 'review'">
<div>
    <!-- Close dock button (mobile only) -->
    <div class="lg:hidden flex justify-end mb-2">
        <button @click="showDock = false" class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded min-h-[2.5rem] touch-manipulation">✕ Close Dock</button>
    </div>
    
    <!-- Layers panel -->
    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
        <h3 class="font-bold mb-3 text-gray-300">Layers</h3>
        
        <div class="space-y-2 max-h-96 overflow-y-auto">
            <template x-for="layer in layers" :key="layer.name">
                <div 
                    @click="selectedLayer = layer.name"
                    class="flex items-center gap-2 bg-gray-700 hover:bg-gray-650 rounded px-2 py-1 transition cursor-pointer"
                    :class="{ 'bg-gray-600': selectedLayer === layer.name }"
                >
                    <input 
                        type="checkbox"
                        :checked="layer.visible"
                        @change="toggleVisibility(layer.name, $event.target.checked)"
                        class="w-4 h-4 rounded"
                        title="Toggle visibility"
                    >
                    <span class="flex-1 text-sm truncate" x-text="layer.name"></span>
                </div>
            </template>
        </div>
        
        <!-- Layer edit controls -->
        <div x-show="selectedLayer" class="mt-3 pt-3 border-t border-gray-600 space-y-2">
            <div class="grid grid-cols-2 gap-2">
                <button @click="renameLayer()" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">Rename</button>
                <button @click="deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">Delete</button>
            </div>
            <div class="grid grid-cols-2 gap-2">
                <button @click="reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">▲ Up</button>
                <button @click="reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">▼ Down</button>
            </div>
        </div>
    </div>

    <!-- Add masked element button -->
    <button 
        @click="enterAddMode()"
        class="w-full bg-indigo-600 hover:bg-indigo-700 px-4 py-3 rounded-lg font-bold text-lg min-h-[3rem] touch-manipulation"
    >
        + Add Masked Element
    </button>
</div>
</template>

<!-- ADD MASKED ELEMENT MODE SIDEBAR -->
<template x-if="mode === 'add'">
<div>
    <!-- Close dock button (mobile only) -->
    <div class="lg:hidden flex justify-end mb-2">
        <button @click="showDock = false" class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded min-h-[2.5rem] touch-manipulation">✕ Close Dock</button>
    </div>
    
    <!-- Entity name input -->
    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
        <h3 class="font-bold mb-3 text-gray-300">New Element</h3>
        <input 
            type="text"
            x-model="entityName"
            placeholder="Element name (e.g., 'door')"
            class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none"
        >
        <p class="text-xs text-gray-400 mt-1">Will create layer: <span x-text="entityName ? entityName + '_0' : 'element_0'"></span></p>
    </div>

    <!-- SAM Rough Mask -->
    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
        <h3 class="font-bold mb-3 text-gray-300">Step 1: Rough Mask (Optional)</h3>
        
        <div class="space-y-3">
            <p class="text-xs text-gray-400">Click to mark include points (green). Right-click for exclude (red).</p>
            
            <div x-show="samIncludePoints.length > 0 || samExcludePoints.length > 0" class="text-xs text-gray-300 space-y-1">
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 bg-green-500 rounded-full"></span>
                    <span>Include: <span x-text="samIncludePoints.length"></span></span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="w-3 h-3 bg-red-500 rounded-full"></span>
                    <span>Exclude: <span x-text="samExcludePoints.length"></span></span>
                </div>
            </div>
            
            <div class="flex gap-2">
                <button 
                    @click="startSamMode()" 
                    :disabled="isSamMode"
                    class="flex-1 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-600 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation"
                >
                    Start
                </button>
                <button 
                    @click="clearSamPoints()" 
                    :disabled="samIncludePoints.length === 0 && samExcludePoints.length === 0"
                    class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation"
                >
                    Clear
                </button>
            </div>
            
            <button 
                @click="generateSamMask()"
                :disabled="samIncludePoints.length === 0 || isSamGenerating"
                class="w-full bg-teal-600 hover:bg-teal-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2 min-h-[2.5rem] touch-manipulation"
            >
                <span x-show="isSamGenerating" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
                <span x-show="!isSamGenerating">Generate Rough Mask</span>
                <span x-show="isSamGenerating">Generating...</span>
            </button>
            
            <div x-show="roughMaskUrl" class="space-y-2 bg-gray-700 rounded p-3 border border-green-600">
                <p class="text-xs text-green-400 font-semibold">Rough mask generated!</p>
                
                <!-- Thumbnail preview with same scale as main view -->
                <div 
                    class="relative flex items-center justify-center bg-gray-800 rounded overflow-auto cursor-pointer" 
                    style="height: 200px;"
                    @click.prevent="openRoughMaskInNewWindow()"
                >
                    <div 
                        class="relative opacity-70 hover:opacity-100 transition"
                        :style="`transform: scale(${roughMaskThumbnailScale / 100}); transform-origin: center center;`"
                    >
                        <img 
                            :src="roughMaskUrl" 
                            class="object-contain"
                            style="width: ${imageWidth * roughMaskThumbnailScale / 100}px; height: ${imageHeight * roughMaskThumbnailScale / 100}px;"
                            alt="Rough mask preview"
                        >
                    </div>
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <span class="text-xs text-white bg-black bg-opacity-60 px-2 py-1 rounded">Click to view full size</span>
                    </div>
                </div>
                
                <button 
                    @click="discardRoughMask()"
                    class="w-full bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded text-sm min-h-[2.5rem] touch-manipulation"
                >
                    Discard & Start Over
                </button>
            </div>
        </div>
    </div>

    <!-- Polygon tool -->
    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
        <h3 class="font-bold mb-3 text-gray-300">Step 2: Polygon (Optional)</h3>
        
        <div class="space-y-3">
            <p class="text-xs text-gray-400">Draw polygon to hint AI where subject is. Skip if rough mask is clear enough.</p>
            
            <label class="block text-xs text-gray-400 mb-1">Color: <input type="color" x-model="polygonColor" class="h-8 w-full rounded cursor-pointer"></label>
            <label class="block text-xs text-gray-400 mb-1">Width: <input type="number" x-model.number="polygonWidth" min="1" max="10" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1"></label>
            
            <div class="flex gap-2">
                <button @click="startDrawing()" :disabled="isDrawing" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">Start Drawing</button>
                <button @click="finishDrawing()" :disabled="!isDrawing || polygonPoints.length < 3" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">Done</button>
            </div>
            
            <div x-show="polygonPoints.length > 0">
                <span class="text-xs text-gray-400">Points: </span><span x-text="polygonPoints.length"></span>
            </div>
            
            <button @click="clearPolygon()" :disabled="!isDrawing && polygonPoints.length === 0" class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">Clear</button>
        </div>
    </div>

    <!-- Mask extraction -->
    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
        <h3 class="font-bold mb-3 text-gray-300">Step 3: Generate Final Mask</h3>
        
        <div class="space-y-3">
            <input 
                type="text"
                x-model="maskSubject"
                placeholder="e.g., 'the wooden door'"
                :disabled="isExtracting"
                class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none disabled:bg-gray-800"
            >
            
            <label class="flex items-center gap-2 cursor-pointer">
                <input 
                    type="checkbox"
                    x-model="usePolygonHint"
                    :disabled="isExtracting || polygonPoints.length < 3"
                    class="w-4 h-4 rounded"
                >
                <span class="text-sm">Use polygon hint</span>
            </label>
            
            <!-- Denoise strength slider (only shown when rough mask exists) -->
            <div x-show="roughMaskPath" class="bg-teal-900 bg-opacity-30 border border-teal-600 rounded p-3">
                <div class="flex items-center justify-between mb-2">
                    <label class="text-xs text-teal-400 font-semibold">Denoise Strength</label>
                    <span class="text-xs text-teal-300" x-text="denoiseStrength + '%'"></span>
                </div>
                <input 
                    type="range" 
                    x-model.number="denoiseStrength" 
                    min="10" 
                    max="100" 
                    step="5"
                    class="w-full accent-teal-500"
                >
                <p class="text-xs text-gray-400 mt-1">Lower = stick closer to rough mask. Higher = more AI creativity.</p>
            </div>
            
            <!-- Auto-mode indicator when rough mask exists -->
            <div x-show="roughMaskPath" class="flex items-center gap-2 text-xs text-teal-400">
                <span class="w-2 h-2 bg-teal-500 rounded-full animate-pulse"></span>
                <span>Using rough mask as starting point</span>
            </div>
            
             <!-- Count selector -->
            <div class="flex items-center gap-2">
                <label class="text-sm text-gray-400">Generate:</label>
                <select 
                    x-model.number="maskCount"
                    :disabled="isExtracting"
                    class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-white disabled:bg-gray-800"
                >
                    <option value="1">1 mask</option>
                    <option value="2">2 masks</option>
                    <option value="3">3 masks</option>
                    <option value="4">4 masks</option>
                    <option value="5">5 masks</option>
                    <option value="6">6 masks</option>
                    <option value="7">7 masks</option>
                    <option value="8">8 masks</option>
                    <option value="9">9 masks</option>
                    <option value="10">10 masks</option>
                </select>
                <span class="text-xs text-gray-500">(different seeds)</span>
            </div>
            
            <button 
                @click="extractMask()"
                :disabled="!maskSubject.trim() || isExtracting"
                class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2 min-h-[2.5rem] touch-manipulation"
            >
                <span x-show="isExtracting" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
                <span x-show="!isExtracting">Generate Mask<span x-show="maskCount > 1">s</span></span>
                <span x-show="isExtracting">Generating...</span>
            </button>
            
            <div x-show="lastError" class="text-red-400 text-xs" x-text="lastError"></div>
        </div>
    </div>

    <!-- Back to review mode -->
    <button 
        @click="cancelAddMode()"
        class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg min-h-[2.5rem] touch-manipulation"
    >
        ← Back to Review Mode
    </button>
</div>
</template>
