<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LED Controller - Tab Mode</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="app-container">
        <header>
            <h1>LED Controller - Tab Mode</h1>
            <div class="header-actions">
                <button class="btn btn-secondary" id="tabs-btn">Tabs</button>
                <button class="btn btn-secondary" id="color-palette-btn">Color Palette</button>
                <button class="btn btn-secondary" id="presets-btn">Presets</button>
                <button class="btn btn-secondary" id="patterns-btn">Patterns</button>
                <button class="btn btn-secondary" id="profiles-btn">Profiles</button>
                <button class="btn btn-secondary" id="help-btn">Help</button>
            </div>
        </header>

        <div class="main-content">
            <div class="tabs-container">
                <div id="tabs-list">
                    Loading tabs...
                </div>
            </div>

            <div id="tab-content" class="tab-content">
                <div style="padding: 2rem; text-align: center; color: #aaa;">
                    Select a tab to get started
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs Modal -->
    <div id="tabs-modal" class="modal">
        <div class="modal-content">
            <h2>Tabs</h2>
            <div class="profiles-actions">
                <input type="text" id="new-tab-name" placeholder="Tab name">
                <input type="text" id="new-tab-ids" placeholder="Device IDs (1,2,3)" value="1">
                <button class="btn btn-primary" id="create-tab-btn">Create</button>
            </div>
            <div id="tabs-list-modal" class="profiles-list"></div>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="tabs-close-btn">Close</button>
            </div>
        </div>
    </div>

    <!-- Edit Tab Modal -->
    <div id="edit-tab-modal" class="modal">
        <div class="modal-content">
            <h2>Edit Tab</h2>
            <form id="edit-tab-form">
                <input type="hidden" id="edit-tab-id">
                <label>Tab Name:</label>
                <input type="text" id="edit-tab-name" placeholder="Enter tab name" required>
                <label>Device IDs (comma-separated):</label>
                <input type="text" id="edit-tab-ids" placeholder="1,2,3" required>
                <div class="modal-actions">
                    <button type="submit" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-secondary" onclick="document.getElementById('edit-tab-modal').classList.remove('active')">Cancel</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Profiles Modal -->
    <div id="profiles-modal" class="modal">
        <div class="modal-content">
            <h2>Profiles</h2>
            <div class="profiles-actions">
                <input type="text" id="new-profile-name" placeholder="Profile name">
                <button class="btn btn-primary" id="create-profile-btn">Create</button>
            </div>
            <div id="profiles-list" class="profiles-list"></div>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="profiles-close-btn">Close</button>
            </div>
        </div>
    </div>

    <!-- Presets Modal -->
    <div id="presets-modal" class="modal">
        <div class="modal-content">
            <h2>Presets</h2>
            <div class="modal-actions">
                <button class="btn btn-primary" id="preset-add-btn">Add</button>
            </div>
            <div id="presets-list" class="profiles-list"></div>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="presets-close-btn">Close</button>
            </div>
        </div>
    </div>

    <!-- Preset Editor Modal -->
    <div id="preset-editor-modal" class="modal">
        <div class="modal-content">
            <h2>Preset</h2>
            <div class="profiles-actions">
                <input type="text" id="preset-name-input" placeholder="Preset name">
                <select id="preset-pattern-input">
                    <option value="">Pattern</option>
                </select>
            </div>
            <label>Colors</label>
            <div id="preset-colors-container" class="preset-colors-container"></div>
            <div class="profiles-actions" style="margin-top: 0.5rem;">
                <input type="color" id="preset-new-color" value="#ffffff">
                <button class="btn btn-secondary btn-small" id="preset-add-color-btn">Add Color</button>
                <button class="btn btn-secondary btn-small" id="preset-add-from-palette-btn">Add from Palette</button>
            </div>
            <div class="profiles-actions">
                <input type="number" id="preset-brightness-input" placeholder="Brightness" min="0" max="255" value="0">
                <input type="number" id="preset-delay-input" placeholder="Delay" min="0" max="10000" value="0">
            </div>
            <div class="n-params-grid">
                <div class="n-param-group">
                    <label for="preset-n1-input" id="preset-n1-label">n1:</label>
                    <input type="number" id="preset-n1-input" min="0" max="255" value="0" class="n-input">
                </div>
                <div class="n-param-group">
                    <label for="preset-n2-input" id="preset-n2-label">n2:</label>
                    <input type="number" id="preset-n2-input" min="0" max="255" value="0" class="n-input">
                </div>
                <div class="n-param-group">
                    <label for="preset-n3-input" id="preset-n3-label">n3:</label>
                    <input type="number" id="preset-n3-input" min="0" max="255" value="0" class="n-input">
                </div>
                <div class="n-param-group">
                    <label for="preset-n4-input" id="preset-n4-label">n4:</label>
                    <input type="number" id="preset-n4-input" min="0" max="255" value="0" class="n-input">
                </div>
                <div class="n-param-group">
                    <label for="preset-n5-input" id="preset-n5-label">n5:</label>
                    <input type="number" id="preset-n5-input" min="0" max="255" value="0" class="n-input">
                </div>
                <div class="n-param-group">
                    <label for="preset-n6-input" id="preset-n6-label">n6:</label>
                    <input type="number" id="preset-n6-input" min="0" max="255" value="0" class="n-input">
                </div>
                <div class="n-param-group">
                    <label for="preset-n7-input" id="preset-n7-label">n7:</label>
                    <input type="number" id="preset-n7-input" min="0" max="255" value="0" class="n-input">
                </div>
                <div class="n-param-group">
                    <label for="preset-n8-input" id="preset-n8-label">n8:</label>
                    <input type="number" id="preset-n8-input" min="0" max="255" value="0" class="n-input">
                </div>
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="preset-send-btn">Try</button>
                <button class="btn btn-primary" id="preset-save-btn">Save &amp; Send</button>
                <button class="btn btn-danger" id="preset-remove-from-tab-btn">Remove from Tab</button>
                <button class="btn btn-secondary" id="preset-clear-btn">Clear</button>
                <button class="btn btn-secondary" id="preset-editor-close-btn">Close</button>
            </div>
        </div>
    </div>

    <!-- Patterns Modal -->
    <div id="patterns-modal" class="modal">
        <div class="modal-content">
            <h2>Patterns</h2>
            <div id="patterns-list" class="profiles-list"></div>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="patterns-close-btn">Close</button>
            </div>
        </div>
    </div>

    <!-- Color Palette Modal -->
    <div id="color-palette-modal" class="modal">
        <div class="modal-content">
            <h2>Color Palette</h2>
            <p class="muted-text">Profile: <span id="palette-current-profile-name">None</span></p>
            <div id="palette-container" class="profiles-list"></div>
            <div class="profiles-actions">
                <input type="color" id="palette-new-color" value="#ffffff">
                <button class="btn btn-primary" id="palette-add-color-btn">Add Color</button>
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" id="color-palette-close-btn">Close</button>
            </div>
        </div>
    </div>

    <!-- Help Modal -->
    <div id="help-modal" class="modal">
        <div class="modal-content">
            <h2>Help</h2>
            <p class="muted-text">How to use the LED controller UI.</p>

            <h3>Tabs & devices</h3>
            <ul>
                <li><strong>Select tab</strong>: left-click a tab button in the top bar.</li>
                <li><strong>Edit tab</strong>: right-click a tab button, or click <strong>Edit</strong> in the Tabs modal.</li>
                <li><strong>Send all presets</strong>: use the <strong>Send Presets</strong> button in the tab header to push every preset used in that tab to all devices.</li>
            </ul>

            <h3>Presets in a tab</h3>
            <ul>
                <li><strong>Select preset</strong>: left-click a preset tile to select it and send a <code>select</code> message to all devices in the tab.</li>
                <li><strong>Edit preset</strong>: right-click a preset tile and choose <strong>Edit preset…</strong>.</li>
                <li><strong>Remove from tab</strong>: right-click a preset tile and choose <strong>Remove from this tab</strong> (the preset itself is not deleted, only its link from this tab).</li>
                <li><strong>Reorder presets</strong>: drag preset tiles to change their order; the new layout is saved automatically.</li>
            </ul>

            <h3>Presets, profiles & colors</h3>
            <ul>
                <li><strong>Presets</strong>: use the <strong>Presets</strong> button in the header to create and manage reusable presets.</li>
                <li><strong>Profiles</strong>: use <strong>Profiles</strong> to save and recall groups of settings.</li>
                <li><strong>Color Palette</strong>: use <strong>Color Palette</strong> to build a reusable set of colors you can pull into presets.</li>
            </ul>

            <div class="modal-actions">
                <button class="btn btn-secondary" id="help-close-btn">Close</button>
            </div>
        </div>
    </div>

    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
        }
        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background-color: #2e2e2e;
            padding: 2rem;
            border-radius: 8px;
            min-width: 400px;
            max-width: 600px;
        }
        .modal-content label {
            display: block;
            margin-top: 1rem;
            margin-bottom: 0.5rem;
        }
        .modal-content input[type="text"] {
            width: 100%;
            padding: 0.5rem;
            background-color: #3a3a3a;
            border: 1px solid #4a4a4a;
            border-radius: 4px;
            color: white;
        }
        .profiles-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        .profiles-actions input[type="text"] {
            flex: 1;
        }
        .profiles-list {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-top: 1rem;
            max-height: 50vh;
            overflow-y: auto;
        }
        .profiles-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.5rem;
            background-color: #3a3a3a;
            border-radius: 4px;
        }
        /* Hide any text content in palette rows - only show color swatches */
        #palette-container .profiles-row {
            font-size: 0; /* Hide any text nodes */
        }
        #palette-container .profiles-row > * {
            font-size: 1rem; /* Restore font size for buttons */
        }
        #palette-container .profiles-row > span:not(.btn),
        #palette-container .profiles-row > label,
        #palette-container .profiles-row::before,
        #palette-container .profiles-row::after {
            display: none !important;
            content: none !important;
        }
        /* Preset colors container */
        #preset-colors-container {
            min-height: 80px;
            padding: 0.5rem;
            background-color: #2a2a2a;
            border-radius: 4px;
            margin-bottom: 0.5rem;
        }
        #preset-colors-container .muted-text {
            color: #888;
            font-size: 0.9rem;
            padding: 1rem;
            text-align: center;
        }
        .muted-text {
            text-align: center;
            color: #888;
        }
        .modal-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 1.5rem;
            justify-content: flex-end;
        }
        .error {
            color: #d32f2f;
            padding: 0.5rem;
            background-color: #3a1a1a;
            border-radius: 4px;
            margin-top: 0.5rem;
        }
        /* Drag and drop styles for presets */
        .draggable-preset {
            cursor: move;
            transition: opacity 0.2s, transform 0.2s;
        }
        .draggable-preset.dragging {
            opacity: 0.5;
            transform: scale(0.95);
        }
        .draggable-preset:hover {
            opacity: 0.8;
        }
        /* Drag and drop styles for color swatches */
        .draggable-color-swatch {
            transition: opacity 0.2s, transform 0.2s;
        }
        .draggable-color-swatch.dragging-color {
            opacity: 0.5;
            transform: scale(0.9);
        }
        .draggable-color-swatch.drag-over-color {
            transform: scale(1.1);
        }
        .color-swatches-container {
            min-height: 80px;
        }
        /* Ensure presets list uses grid layout */
        #presets-list-tab {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 0.75rem;
            width: 100%;
        }
        /* Help modal readability */
        #help-modal .modal-content h2 {
            margin-bottom: 0.5rem;
        }
        #help-modal .modal-content ul {
            margin-top: 0.75rem;
            margin-left: 1.5rem;
            padding-left: 0;
            text-align: left;
        }
        #help-modal .modal-content li {
            margin: 0.25rem 0;
            line-height: 1.4;
        }
    </style>
    <script src="/static/tabs.js"></script>
    <script src="/static/help.js"></script>
    <script src="/static/color_palette.js"></script>
    <script src="/static/profiles.js"></script>
    <script src="/static/tab_palette.js"></script>
    <script src="/static/patterns.js"></script>
    <script src="/static/presets.js"></script>
</body>
</html>
