{% extends "admin/base.html" %}
{% block title %}Edit Section{% endblock %}

{% block content %}
<style>
    .selected-element {
        outline: 2px dashed #00f3ff !important;
        outline-offset: 2px;
    }

    #visualEditor .terminal-box {
        background: rgba(5, 5, 5, 0.95);
        border: 1px solid #222;
    }

    #visualEditor .border-cyan {
        border-color: #00f3ff;
    }

    #visualEditor .border-pink {
        border-color: #ff0055;
    }

    #visualEditor .border-green {
        border-color: #00ff88;
    }

    #visualEditor .border-red {
        border-color: #ff4444;
    }

    #visualEditor .border-yellow {
        border-color: #ffcc00;
    }

    #visualEditor .border-amber {
        border-color: #ffbf00;
    }

    #visualEditor .border-purple {
        border-color: #a855f7;
    }

    #visualEditor .text-cyan {
        color: #00f3ff;
    }

    #visualEditor .text-pink {
        color: #ff0055;
    }

    #visualEditor .text-green {
        color: #00ff88;
    }

    #visualEditor .text-red {
        color: #ff4444;
    }

    #visualEditor .text-yellow {
        color: #ffcc00;
    }

    .color-btn {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        cursor: pointer;
        border: 2px solid transparent;
    }

    .color-btn:hover {
        border-color: white;
    }

    /* Drag-drop styles */
    .editor-block {
        cursor: grab;
        position: relative;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .editor-block:hover {
        box-shadow: 0 0 0 2px rgba(0, 243, 255, 0.3);
    }

    .editor-block.dragging {
        opacity: 0.4;
        transform: scale(0.98);
    }

    .drop-indicator {
        height: 4px;
        background: linear-gradient(90deg, #00f3ff, #ff0055);
        margin: 4px 0;
        border-radius: 2px;
        display: none;
    }

    .drop-indicator.visible {
        display: block;
        animation: pulse 0.5s ease-in-out infinite alternate;
    }

    @keyframes pulse {
        from {
            opacity: 0.5;
        }

        to {
            opacity: 1;
        }
    }

    /* Insert button styles */
    .insert-bar {
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s;
        margin: 2px 0;
    }

    .insert-bar:hover {
        opacity: 1;
    }

    .insert-btn {
        background: #00f3ff;
        color: black;
        border: none;
        border-radius: 12px;
        padding: 2px 12px;
        font-size: 12px;
        cursor: pointer;
        font-weight: bold;
    }

    .insert-btn:hover {
        background: white;
    }

    /* Modal */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal-overlay.visible {
        display: flex;
    }

    .modal-content {
        background: #111;
        border: 1px solid #333;
        border-radius: 8px;
        padding: 20px;
        min-width: 300px;
    }
</style>

<div class="mb-6">
    <div class="flex items-center gap-2 mb-2">
        <a href="/admin/profile" class="text-white/40 hover:text-white text-xs uppercase tracking-wider">← Back to
            Profile</a>
    </div>
    <h1 class="text-2xl font-bold text-white">Edit Custom Section</h1>
</div>

<form method="POST" action="/admin/custom-sections/save-editor" id="pageForm">
    <input type="hidden" name="id" value="{{ section.id }}">
    <input type="hidden" name="content" id="hiddenContent">

    <div class="grid md:grid-cols-3 gap-6" style="height: calc(100vh - 200px);">

        <!-- Left: Visual Editor -->
        <div class="md:col-span-2 flex flex-col h-full">
            <div class="terminal-box p-4 flex-1 flex flex-col overflow-hidden">

                <!-- Title Input -->
                <div class="mb-4">
                    <label class="block text-white/60 text-xs mb-2 uppercase">Section Title *</label>
                    <input type="text" name="title" id="titleInput" value="{{ section.title }}" required
                        class="w-full bg-black border border-white/20 text-white px-4 py-3 text-lg focus:border-cyan focus:outline-none"
                        placeholder="e.g. My Activities">
                </div>

                <!-- Toolbar -->
                <div class="flex flex-wrap gap-2 mb-3 p-2 bg-white/5 border border-white/10 rounded">
                    <span class="text-white/40 text-xs uppercase tracking-wider self-center mr-2">Add:</span>
                    <button type="button" onclick="promptAndAddGrid()"
                        class="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-xs rounded border border-white/10">⊞
                        Grid</button>
                    <button type="button" onclick="addBlockAtEnd('card')"
                        class="px-3 py-1 bg-cyan/20 hover:bg-cyan/30 text-cyan text-xs rounded border border-cyan/20">Card</button>
                    <button type="button" onclick="addBlockAtEnd('title')"
                        class="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-xs rounded border border-white/10">H2
                        Title</button>
                    <button type="button" onclick="addBlockAtEnd('text')"
                        class="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-xs rounded border border-white/10">¶
                        Text</button>
                    <button type="button" onclick="addBlockAtEnd('button')"
                        class="px-3 py-1 bg-amber/20 hover:bg-amber/30 text-amber text-xs rounded border border-amber/20">Button</button>
                    <button type="button" onclick="addBlockAtEnd('table')"
                        class="px-3 py-1 bg-green/20 hover:bg-green/30 text-green text-xs rounded border border-green/20">Table</button>
                </div>

                <div class="text-xs text-gray-500 mb-2">Drag blocks to reorder. Click to edit. Hover between blocks to
                    insert.</div>

                <!-- Visual Editor -->
                <div id="visualEditor"
                    class="flex-1 w-full bg-black border border-white/20 text-white p-6 overflow-y-auto">
                    {{ section.content|safe if section.content else '' }}
                </div>
            </div>
        </div>

        <!-- Right: Sidebar -->
        <div class="flex flex-col h-full gap-4 overflow-y-auto pr-1">

            <!-- Element Settings Panel -->
            <div class="terminal-box p-4" id="elementSettings" style="display:none;">
                <h3 class="text-white font-bold mb-3 text-sm uppercase tracking-wider border-b border-white/10 pb-2">
                    Element Settings</h3>

                <!-- Text Content -->
                <div class="mb-3">
                    <label class="block text-white/60 text-xs mb-1 uppercase">Text Content</label>
                    <textarea id="textEditor" rows="3"
                        class="w-full bg-black border border-white/20 text-white text-sm p-2 focus:border-cyan focus:outline-none resize-y"></textarea>
                </div>

                <!-- Controls for Alignment, Color, etc. (Same as Page Editor) -->
                <div class="mb-3">
                    <label class="block text-white/60 text-xs mb-1 uppercase">Alignment</label>
                    <div class="flex gap-2">
                        <button type="button" onclick="setAlignment('left')"
                            class="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-xs rounded">Left</button>
                        <button type="button" onclick="setAlignment('center')"
                            class="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-xs rounded">Center</button>
                        <button type="button" onclick="setAlignment('right')"
                            class="px-3 py-1 bg-white/10 hover:bg-white/20 text-white text-xs rounded">Right</button>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="block text-white/60 text-xs mb-1 uppercase">Text Color</label>
                    <div class="flex gap-2 mb-2">
                        <button type="button" onclick="setColor('cyan')" class="color-btn"
                            style="background:#00f3ff;"></button>
                        <button type="button" onclick="setColor('pink')" class="color-btn"
                            style="background:#ff0055;"></button>
                        <button type="button" onclick="setColor('green')" class="color-btn"
                            style="background:#00ff88;"></button>
                        <button type="button" onclick="setColor('yellow')" class="color-btn"
                            style="background:#ffcc00;"></button>
                        <button type="button" onclick="setColor('white')" class="color-btn"
                            style="background:#ffffff;"></button>
                    </div>
                    <div class="relative">
                        <input type="text" id="customTextColor" placeholder="Custom class e.g. text-blue-400"
                            class="w-full bg-black border border-white/20 text-white text-xs px-2 py-1 focus:border-cyan focus:outline-none"
                            onchange="setCustomColor(this.value)">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="block text-white/60 text-xs mb-1 uppercase">Background</label>
                    <div class="flex gap-2 flex-wrap mb-2">
                        <button type="button" onclick="setBgColor('bg-black')" class="color-btn"
                            style="background:#000000; border:1px solid #333;"></button>
                        <button type="button" onclick="setBgColor('bg-cyan/20')" class="color-btn"
                            style="background:rgba(0,243,255,0.2);"></button>
                        <button type="button" onclick="setBgColor('bg-pink/20')" class="color-btn"
                            style="background:rgba(255,0,85,0.2);"></button>
                        <button type="button" onclick="setBgColor('bg-white/5')" class="color-btn"
                            style="background:rgba(255,255,255,0.05); border:1px solid #333;"></button>
                    </div>
                    <div class="relative">
                        <input type="text" id="customBgColor" placeholder="Custom class e.g. bg-blue-900/50"
                            class="w-full bg-black border border-white/20 text-white text-xs px-2 py-1 focus:border-cyan focus:outline-none"
                            onchange="setBgColor(this.value)">
                    </div>
                </div>

                <!-- Link/Button Controls -->
                <div class="mb-3" id="linkInput">
                    <label class="block text-white/60 text-xs mb-1 uppercase">Link URL</label>
                    <input type="text" id="linkUrl"
                        class="w-full bg-black border border-white/20 text-white text-sm p-2 focus:border-cyan focus:outline-none">
                    <button type="button" onclick="applyLink()"
                        class="mt-2 px-3 py-1 bg-cyan/20 hover:bg-cyan/30 text-cyan text-xs rounded">Apply Link</button>
                </div>

                <!-- Table Controls -->
                <div class="mb-3" id="tableControlsSection" style="display:none;">
                    <label class="block text-white/60 text-xs mb-2 uppercase">Table Controls</label>
                    <div class="flex gap-2">
                        <button type="button" onclick="addTableRow()"
                            class="flex-1 px-3 py-1 bg-cyan/20 text-cyan text-xs rounded">+ Row</button>
                        <button type="button" onclick="addTableCol()"
                            class="flex-1 px-3 py-1 bg-cyan/20 text-cyan text-xs rounded">+ Col</button>
                    </div>
                </div>

                <!-- Delete -->
                <button type="button" onclick="deleteElement()"
                    class="w-full mt-2 px-3 py-1 bg-red-500/20 hover:bg-red-500/30 text-red-400 text-xs rounded border border-red-500/20">🗑
                    Delete Element</button>
            </div>

            <!-- Source Code -->
            <div class="terminal-box p-4">
                <div class="flex justify-between items-center cursor-pointer" onclick="toggleSourceCode()">
                    <h3 class="text-white font-bold text-sm uppercase tracking-wider">Source Code</h3>
                    <span id="sourceToggleIcon" class="text-white/60 text-xs">▼ Show</span>
                </div>
                <div id="sourceCodePanel" class="hidden mt-3">
                    <textarea id="sourceEditor" rows="8"
                        class="w-full bg-black border border-white/20 text-green-400 font-mono text-xs p-3 resize-none"></textarea>
                </div>
            </div>

            <!-- Section Settings -->
            <div class="terminal-box p-4">
                <h3 class="text-white font-bold mb-3 text-sm uppercase tracking-wider border-b border-white/10 pb-2">
                    Section Settings</h3>

                <div class="mb-3">
                    <label class="block text-white/60 text-xs mb-1 uppercase">Subtitle</label>
                    <input type="text" name="subtitle" value="{{ section.subtitle or '' }}"
                        class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                </div>

                <div class="grid grid-cols-2 gap-4 mb-3">
                    <div>
                        <label class="block text-white/60 text-xs mb-1 uppercase">Year</label>
                        <input type="text" name="year" value="{{ section.year or '' }}"
                            class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-white/60 text-xs mb-1 uppercase">Order</label>
                        <input type="number" name="order" value="{{ section.order }}"
                            class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="block text-white/60 text-xs mb-1 uppercase">Tags (comma separated)</label>
                    <input type="text" name="tags" value="{{ section.tags or '' }}" placeholder="e.g. Design, UI/UX"
                        class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                </div>

                <div class="grid grid-cols-2 gap-4 mb-3">
                    <div>
                        <label class="block text-white/60 text-xs mb-1 uppercase">Color</label>
                        <div class="relative">
                            <input type="text" name="color" list="colors-list" value="{{ section.color or 'cyan' }}"
                                class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                            <span class="absolute right-3 top-2.5 text-white/20 pointer-events-none">+</span>
                        </div>
                        <datalist id="colors-list">
                            <option value="cyan">
                            <option value="pink">
                            <option value="green">
                            <option value="amber">
                            <option value="purple">
                            <option value="red">
                        </datalist>
                    </div>
                    <div>
                        <label class="block text-white/60 text-xs mb-1 uppercase">Alignment</label>
                        <div class="relative">
                            <input type="text" name="alignment" list="alignments-list"
                                value="{{ section.alignment or 'left' }}"
                                class="w-full bg-black border border-white/20 text-white px-3 py-2 text-sm focus:border-cyan focus:outline-none">
                            <span class="absolute right-3 top-2.5 text-white/20 pointer-events-none">+</span>
                        </div>
                        <datalist id="alignments-list">
                            <option value="left">
                            <option value="center">
                            <option value="right">
                        </datalist>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="is_visible" class="accent-cyan h-4 w-4" {% if section.is_visible
                            %}checked{% endif %}>
                        <span class="text-white text-sm">Visible</span>
                    </label>
                </div>
            </div>

            <button type="submit"
                class="w-full bg-cyan text-black font-bold py-3 hover:bg-white transition-colors uppercase tracking-wider">Save
                Section</button>
        </div>
    </div>
</form>

<!-- Grid Modal -->
<div id="gridModal" class="modal-overlay">
    <div class="modal-content">
        <h3 class="text-white font-bold mb-4">Grid Columns</h3>
        <div class="mb-4">
            <label class="block text-white/60 text-xs mb-2 uppercase">Number of Columns</label>
            <input type="number" id="gridColsModal" value="2" min="1" max="4"
                class="w-full bg-black border border-white/20 text-white px-3 py-2 text-lg focus:border-cyan focus:outline-none text-center">
        </div>
        <div class="flex gap-2">
            <button type="button" onclick="confirmGrid()" class="flex-1 bg-cyan text-black font-bold py-2 rounded">Add
                Grid</button>
            <button type="button" onclick="closeGridModal()"
                class="flex-1 bg-white/10 text-white font-bold py-2 rounded">Cancel</button>
        </div>
    </div>
</div>

<script src="/admin/assets/custom-section-editor.js"></script>
{% endblock %}