{% extends "base.html" %}

{% block title %}Radiant AI - Studio{% endblock %}
{% block page_title %}Image Studio{% endblock %}

{% block content %}
<style>
    .studio-layout { display: grid; grid-template-columns: 320px 1fr; gap: 25px; height: 100%; min-height: 0; }
    .controls-panel { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding-right: 5px; }
    .icon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .range-wrap { margin-bottom: 15px; }
    .range-header { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-gray); }
    .filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    
    .filter-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; padding: 8px; border-radius: 8px; color: var(--text-gray); cursor: pointer; font-size: 0.85rem; transition: all 0.2s; text-align: center; }
    .filter-btn:hover { background: rgba(255, 255, 255, 0.1); color: white; }
    .filter-btn.active { background: rgba(0, 242, 255, 0.15); border-color: var(--primary-cyan); color: var(--primary-cyan); }

    .canvas-area { position: relative; background: radial-gradient(circle at center, #1a1a24 0%, #0d0d12 100%); border-radius: 20px; border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    #imagePreview { max-width: 95%; max-height: 90%; object-fit: contain; border-radius: 4px; box-shadow: 0 0 40px rgba(0,0,0,0.5); }
    .action-bar { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 10px; background: rgba(0,0,0,0.6); padding: 10px; border-radius: 12px; backdrop-filter: blur(10px); }

    /* Checkbox Style */
    .chain-control { display: flex; align-items: center; gap: 10px; background: rgba(0, 242, 255, 0.1); padding: 10px; border-radius: 8px; border: 1px solid rgba(0, 242, 255, 0.3); margin-bottom: 15px; }
    .chain-control input { width: 18px; height: 18px; accent-color: var(--primary-cyan); cursor: pointer; }
    .chain-control label { font-size: 0.9rem; color: var(--primary-cyan); cursor: pointer; font-weight: 500; }
</style>

<div class="studio-layout">

    <aside class="controls-panel">
        
        <div class="glass-panel" style="padding: 20px;">
            <div class="tool-header">Source</div>
            <input type="file" id="fileInput" accept="image/*" hidden>
            <button class="btn btn-secondary" style="width: 100%;" onclick="document.getElementById('fileInput').click()">
                <i class="ph ph-upload-simple"></i> Upload Image
            </button>
        </div>

        <div class="chain-control">
            <input type="checkbox" id="studioChainingCheckbox" onchange="toggleStudioChaining(this)">
            <label for="studioChainingCheckbox">Bake Edits (Chain)</label>
        </div>

        <div class="glass-panel" style="padding: 20px;">
            <div class="tool-header">Adjustments</div>
            
            <div class="range-wrap">
                <div class="range-header"><span>Brightness</span> <span id="val-brightness">0</span></div>
                <input type="range" id="brightness" min="-100" max="100" value="0" oninput="handleSliderChange('brightness', this.value)">
            </div>

            <div class="range-wrap">
                <div class="range-header"><span>Contrast</span> <span id="val-contrast">0</span></div>
                <input type="range" id="contrast" min="-100" max="100" value="0" oninput="handleSliderChange('contrast', this.value)">
            </div>

            <div class="range-wrap">
                <div class="range-header"><span>Saturation</span> <span id="val-saturation">0</span></div>
                <input type="range" id="saturation" min="-100" max="100" value="0" oninput="handleSliderChange('saturation', this.value)">
            </div>

            <div class="range-wrap">
                <div class="range-header"><span>Sharpness</span> <span id="val-sharpness">0</span></div>
                <input type="range" id="sharpness" min="0" max="100" value="0" oninput="handleSliderChange('sharpness', this.value)">
            </div>
        </div>

        <div class="glass-panel" style="padding: 20px;">
            <div class="tool-header">Geometry</div>
            <div class="icon-grid">
                <button class="filter-btn" onclick="triggerAutoApply('rotate_left')"><i class="ph ph-arrow-counter-clockwise"></i> -90°</button>
                <button class="filter-btn" onclick="triggerAutoApply('rotate_right')"><i class="ph ph-arrow-clockwise"></i> +90°</button>
                <button class="filter-btn" onclick="triggerAutoApply('flip_h')"><i class="ph ph-arrows-left-right"></i> Flip H</button>
                <button class="filter-btn" onclick="triggerAutoApply('flip_v')"><i class="ph ph-arrows-down-up"></i> Flip V</button>
            </div>
        </div>

        <div class="glass-panel" style="padding: 20px;">
            <div class="tool-header">Filters</div>
            <div class="filter-grid">
                <button class="filter-btn active" onclick="handleFilterClick('none')">Normal</button>
                <button class="filter-btn" onclick="handleFilterClick('grayscale')">B&W</button>
                <button class="filter-btn" onclick="handleFilterClick('sepia')">Sepia</button>
                
                <button class="filter-btn" onclick="handleFilterClick('sketch')">Sketch</button>
                <button class="filter-btn" onclick="handleFilterClick('cartoon')">Cartoon</button>
                <button class="filter-btn" onclick="handleFilterClick('hdr')">HDR</button>

                <button class="filter-btn" onclick="handleFilterClick('cyberpunk')">Cyberpunk</button>
                <button class="filter-btn" onclick="handleFilterClick('summer')">Summer</button>
                <button class="filter-btn" onclick="handleFilterClick('winter')">Winter</button>
                
                <button class="filter-btn" onclick="handleFilterClick('posterize')">Posterize</button>
                <button class="filter-btn" onclick="handleFilterClick('negative')">Negative</button>
                <button class="filter-btn" onclick="handleFilterClick('emboss')">Emboss</button>
                
                <button class="filter-btn" onclick="handleFilterClick('blur')">Blur</button>
                <button class="filter-btn" onclick="handleFilterClick('sharpen_filter')">X-Sharp</button>
            </div>
        </div>
        
    </aside>

    <main class="canvas-area">
        <div style="position: absolute; top: 20px; left: 20px; z-index: 10; display: flex; gap: 10px;">
            <button class="btn btn-secondary" onclick="undoEdit()" title="Undo (Ctrl+Z)">
                <i class="ph ph-arrow-u-up-left"></i> Undo
            </button>
            <button class="btn btn-secondary" onclick="redoEdit()" title="Redo (Ctrl+Y)">
                <i class="ph ph-arrow-u-up-right"></i> Redo
            </button>
        </div>

        <div id="placeholderState" class="upload-placeholder">
            <i class="ph ph-image" style="font-size: 3rem;"></i>
            <h3>No Image Selected</h3>
            <p>Upload an image to start editing</p>
        </div>
        
        <div style="flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; position: relative;">
            <div id="processingOverlay" style="position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); display: none; align-items: center; justify-content: center; z-index: 20;">
                <div style="background: #000; padding: 15px 25px; border-radius: 30px; color: var(--primary-cyan); display: flex; align-items: center; gap: 10px; border: 1px solid var(--primary-cyan);">
                    <i class="ph ph-spinner ph-spin" style="font-size: 1.2rem;"></i> Rendering...
                </div>
            </div>
            <img id="imagePreview" src="" alt="Preview" style="display: none;">
        </div>

        <div class="action-bar" id="actionBar" style="display: none;">
            <button class="btn btn-secondary" onclick="resetOriginal()">
                <i class="ph ph-arrow-counter-clockwise"></i> Reset Original
            </button>
            <a id="downloadLink" href="#" download="radiant_edit.png" class="btn btn-primary" style="background: var(--primary-cyan); color: #000;">
                <i class="ph ph-download-simple"></i> Download
            </a>
        </div>
    </main>
</div>
{% endblock %}