<form autocomplete="off" class="ionrift-sound-config"
    style="display: flex; flex-direction: column; height: 100%; overflow: hidden;">

    <!-- Main Layout Container -->
    <div style="display: flex; flex: 1; overflow: hidden;">

        <!-- Sidebar Navigation -->
        <nav class="ionrift-sidebar tabs" style="flex: 0 0 220px; display: flex; flex-direction: column;">

            <!-- Top Group: Tiers -->
            <div class="sidebar-group tiers" style="flex: 0 0 auto;">
                <div class="header">Calibration Tiers</div>
                <div class="group-items" style="display: flex; flex-direction: column; gap: 2px;">
                    <a class="item" data-tab="tier1"><i class="fas fa-cube"></i> Essentials</a>
                    <a class="item" data-tab="tier2"><i class="fas fa-hammer"></i> Combat Actions</a>
                    <a class="item" data-tab="tier3"><i class="fas fa-skull"></i> Monsters</a>
                    {{#if features.sharedMonsterVoices}}
                    <a class="item" data-tab="shared-monster"><i class="fas fa-users"></i> Shared Monster Voices</a>
                    {{/if}}
                    <!-- <a class="item" data-tab="tier4"><i class="fas fa-cloud-showers-heavy"></i> Weather</a> -->
                </div>
            </div>

            <div style="flex: 1;"></div> <!-- Spacer -->

            <!-- Bottom Group: Tools -->
            <div class="sidebar-group tools" style="flex: 0 0 auto; margin-bottom: 10px;">
                <div class="header">Tools</div>
                <div class="group-items">
                    <a class="item auditor-tab" data-tab="auditor"><i class="fas fa-search"></i> Sound Auditor</a>
                    <a class="item" data-tab="orchestrator"><i class="fas fa-sliders-h"></i> Orchestration</a>
                </div>
            </div>
        </nav>

        <!-- Content Area -->
        <section class="content" style="flex: 1; padding: 10px; overflow-y: auto; background: rgba(0,0,0,0.2);">

            <!-- TIER 1: CORE (Hierarchical) -->
            <div class="tab" data-tab="tier1">
                <div class="ionrift-hierarchy">
                    <div class="ionrift-list-header"><i class="fas fa-cube"></i> Essentials</div>

                    {{#each tiers.tier1.paramounts as |group|}}
                    {{> "modules/ionrift-resonance/templates/partials/sound-group.hbs" group}}
                    {{/each}}
                </div>
            </div>

            <!-- TIER 2: ACTIONS (Hierarchical) -->
            <div class="tab" data-tab="tier2">
                <div class="ionrift-hierarchy">
                    <div class="ionrift-list-header"><i class="fas fa-hammer"></i> Action Taxonomy</div>

                    {{#each tiers.tier2.paramounts as |group|}}
                    {{> "modules/ionrift-resonance/templates/partials/sound-group.hbs" group}}
                    {{/each}}
                </div>
            </div>

            <!-- TIER 3: MONSTERS (Hierarchical) -->
            <div class="tab" data-tab="tier3">
                <div class="ionrift-hierarchy">
                    <div class="ionrift-list-header"><i class="fas fa-skull"></i> Monster Taxonomy</div>

                    {{#each tiers.tier3.paramounts as |group|}}
                    {{> "modules/ionrift-resonance/templates/partials/sound-group.hbs" group}}
                    {{/each}}
                </div>
            </div>

            <!-- SHARED MONSTER VOICES -->
            {{#if features.sharedMonsterVoices}}
            <div class="tab" data-tab="shared-monster">
                <div class="ionrift-hierarchy">
                    <div class="ionrift-list-header"><i class="fas fa-users"></i> Shared Monster Voices</div>

                    <p style="font-size:0.85em; opacity:0.65; margin: 0 0 14px 0; padding: 0 4px;">
                        <i class="fas fa-info-circle"></i>
                        These sounds play for monsters with a <strong>Voice Identity</strong> set in their Sound Configuration.
                        They currently inherit from PC pain/death sounds. Bind them here when a dedicated Humanoid Monster voice pack is available.
                    </p>

                    {{#each tiers.sharedMonster.paramounts as |group|}}
                    {{> "modules/ionrift-resonance/templates/partials/sound-group.hbs" group}}
                    {{/each}}
                </div>
            </div>
            {{/if}}

            <!-- AUDITOR -->
            <div class="tab" data-tab="auditor">
                <p class="auditor-description"
                    style="margin: 0 0 10px 0; font-style: italic; opacity: 0.7; font-size: 0.9em; padding: 0 4px;">
                    <i class="fas fa-info-circle"></i> <strong>Central Registry:</strong> Manage all individual sound
                    overrides
                    applied directly to specific Actors or Items.
                </p>
                <div class="auditor-controls"
                    style="display: flex; gap: 10px; margin-bottom: 10px; background: rgba(0,0,0,0.2); padding: 8px; border-radius: 4px; align-items: center;">
                    <div style="flex: 1; position: relative;">
                        <i class="fas fa-search"
                            style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #666;"></i>
                        <input type="text" class="auditor-search-input" placeholder="Search by Name, Sound, or Slot..."
                            value="{{tiers.auditor.items.search}}"
                            style="padding-left: 30px; background: rgba(0,0,0,0.3); border: 1px solid #333; color: #fff; width: 100%;">
                    </div>
                    <div class="pagination" style="display: flex; align-items: center; gap: 5px;">
                        <button type="button" class="auditor-control-btn" data-action="prev" title="Previous Page"
                            style="width: 30px; line-height: 24px;"><i class="fas fa-chevron-left"></i></button>
                        <span class="auditor-page-info"
                            style="font-family: monospace; white-space: nowrap; font-size: 0.9em; min-width: 80px; text-align: center;">
                            Page {{tiers.auditor.items.page}} of {{tiers.auditor.items.totalPages}}
                        </span>
                        <button type="button" class="auditor-control-btn" data-action="next" title="Next Page"
                            style="width: 30px; line-height: 24px;"><i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>

                <div class="auditor-list">
                    {{> "modules/ionrift-resonance/templates/partials/auditor-list.hbs"
                    items=tiers.auditor.items.items}}
                </div>
            </div>

            <!-- ORCHESTRATOR -->
            <div class="tab" data-tab="orchestrator">
                <div class="ionrift-hierarchy">
                    <div class="ionrift-list-header"><i class="fas fa-sliders-h"></i> Orchestration</div>

                    <p style="font-size:0.85em; opacity:0.7; margin: 0 0 16px 0; padding: 0 4px;">
                        <i class="fas fa-info-circle"></i>
                        Budget windows prevent sound spam — sounds in the same category share one window.
                        Leave blank to use the built-in default. Set to <code
                            style="background:rgba(255,255,255,0.12); color:#e0d8ff; padding:1px 5px; border-radius:3px; font-size:0.95em; border:1px solid rgba(255,255,255,0.2);">0</code>
                        to disable throttling.
                    </p>

                    <!-- Feature Toggles -->
                    <div style="margin-bottom: 24px;">
                        <div style="font-size:0.8em; text-transform:uppercase; letter-spacing:0.08em; opacity:0.5; margin-bottom:8px;">
                            Feature Toggles</div>

                        <div class="ionrift-list-item" id="spell-vocal-layer-toggle-row"
                            style="border: 1px solid rgba(255,255,255,0.07); border-radius:4px; background:rgba(0,0,0,0.15); padding: 8px 10px; margin-bottom: 4px;">
                            <div class="entity-info" style="flex: 0 0 auto; display:flex; align-items:center; gap:8px;"
                                title="Play a caster incantation before each spell effect (requires SPELL_VOCAL_CAST binding in a sound pack)">
                                <i class="fas fa-microphone-lines" style="width:16px; text-align:center; opacity:0.8;"></i>
                                <div>
                                    <span class="entity-name" style="display:block;">Spell Vocal Layer</span>
                                    <span style="font-size:0.75em; opacity:0.55;">Plays an incantation before spell effects. Configure timing via Spell Vocal Lead-in below.</span>
                                </div>
                            </div>
                            <div style="flex:1;"></div>
                            <div class="entity-actions" style="flex:0 0 auto; display:flex; align-items:center; gap:8px;">
                                <span class="ionrift-badge {{#if tiers.spellVocalLayer}}success{{else}}loading{{/if}}"
                                    style="font-size:0.8em;">
                                    {{#if tiers.spellVocalLayer}}On{{else}}Off{{/if}}
                                </span>
                                <button type="button" class="orchestrator-toggle-setting" id="spell-vocal-layer-btn"
                                    data-setting="ionrift-resonance.spellVocalLayer"
                                    title="{{#if tiers.spellVocalLayer}}Disable Spell Vocal Layer{{else}}Enable Spell Vocal Layer{{/if}}"
                                    style="{{#if tiers.spellVocalLayer}}background:rgba(124,58,237,0.2); border-color:rgba(124,58,237,0.4);{{/if}}">
                                    <i class="fas {{#if tiers.spellVocalLayer}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"
                                        style="{{#if tiers.spellVocalLayer}}color:rgba(180,160,255,0.9);{{/if}}"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Budget Table -->

                    <div style="margin-bottom: 24px;">
                        <div
                            style="font-size:0.8em; text-transform:uppercase; letter-spacing:0.08em; opacity:0.5; margin-bottom:8px;">
                            Sound Budgets</div>
                        <table style="width:100%; border-collapse:collapse; font-size:0.88em;">
                            <thead>
                                <tr style="opacity:0.5; font-size:0.8em;">
                                    <th style="text-align:left; padding:4px 6px; font-weight:normal;">Category</th>
                                    <th style="text-align:center; padding:4px 6px; font-weight:normal; width:90px;">
                                        Default</th>
                                    <th style="text-align:center; padding:4px 6px; font-weight:normal; width:100px;">
                                        Override (ms)</th>
                                    <th style="width:34px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#each tiers.orchestrator.categories}}
                                <tr style="border-top: 1px solid rgba(255,255,255,0.05); background: transparent;">
                                    <td style="padding: 5px 6px;">{{this.label}}</td>
                                    <td style="text-align:center; padding: 5px 6px; opacity:0.5; font-size:0.9em;">
                                        {{this.defaultLabel}}</td>
                                    <td style="padding: 4px 6px; text-align:center;">
                                        <input type="number" class="orchestrator-budget-input"
                                            data-category="{{this.id}}" value="{{this.overrideMs}}"
                                            placeholder="{{this.placeholderLabel}}" min="0" step="500"
                                            style="width:80px; text-align:center; background:rgba(255,255,255,0.07); border:1px solid {{#if this.accentBorder}}rgba(124,58,237,0.6){{else}}rgba(255,255,255,0.15){{/if}}; color:#fff; padding:2px 4px; border-radius:3px;">
                                    </td>
                                    <td style="text-align:center; padding: 4px 6px;">
                                        <button type="button" class="orchestrator-reset-category"
                                            data-category="{{this.id}}" title="Reset to default"
                                            style="display:{{#if this.hasOverride}}inline-block{{else}}none{{/if}}; width:26px; height:26px; padding:0; font-size:0.8em; background:rgba(200,120,80,0.2); border:1px solid rgba(200,120,80,0.3); color:#c84; border-radius:3px; cursor:pointer;">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                    </td>
                                </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>

                    <!-- Named Offsets (configurable stagger presets) -->
                    <div style="margin-bottom: 24px;">
                        <div
                            style="font-size:0.8em; text-transform:uppercase; letter-spacing:0.08em; opacity:0.5; margin-bottom:6px;">
                            Sound Timing</div>
                        <p style="font-size:0.8em; opacity:0.55; margin:0 0 10px 0;">
                            Controls the delay between layered sounds (e.g. impact → vocal). Leave blank for defaults.
                        </p>
                        <table style="width:100%; border-collapse:collapse; font-size:0.88em;">
                            <thead>
                                <tr style="opacity:0.5; font-size:0.8em;">
                                    <th style="text-align:left; padding:4px 6px; font-weight:normal;">Offset</th>
                                    <th style="text-align:center; padding:4px 6px; font-weight:normal; width:90px;">
                                        Default</th>
                                    <th style="text-align:center; padding:4px 6px; font-weight:normal; width:100px;">
                                        Override (ms)</th>
                                    <th style="width:34px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#each tiers.orchestrator.namedOffsets}}
                                <tr style="border-top: 1px solid rgba(255,255,255,0.05); background: transparent;">
                                    <td style="padding: 5px 6px;">{{this.label}}</td>
                                    <td style="text-align:center; padding: 5px 6px; opacity:0.5; font-size:0.9em;">
                                        {{this.defaultMs}}ms</td>
                                    <td style="padding: 4px 6px; text-align:center;">
                                        <input type="number" class="orchestrator-offset-input" data-offset="{{this.id}}"
                                            value="{{this.overrideMs}}" placeholder="{{this.defaultMs}}" min="0"
                                            step="50"
                                            style="width:80px; text-align:center; background:rgba(255,255,255,0.07); border:1px solid {{#if this.accentBorder}}rgba(124,58,237,0.6){{else}}rgba(255,255,255,0.15){{/if}}; color:#fff; padding:2px 4px; border-radius:3px;">
                                    </td>
                                    <td style="text-align:center; padding: 4px 6px;">
                                        <button type="button" class="orchestrator-reset-offset"
                                            data-offset="{{this.id}}" title="Reset to default"
                                            style="display:{{#if this.hasOverride}}inline-block{{else}}none{{/if}}; width:26px; height:26px; padding:0; font-size:0.8em; background:rgba(200,120,80,0.2); border:1px solid rgba(200,120,80,0.3); color:#c84; border-radius:3px; cursor:pointer;">
                                            <i class="fas fa-undo"></i>
                                        </button>
                                    </td>
                                </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>

                    <!-- Reset All -->
                    <div style="text-align:right; border-top:1px solid rgba(255,255,255,0.08); padding-top:12px;">
                        <button type="button" class="orchestrator-reset-all"
                            style="background:rgba(124,58,237,0.08); border:1px solid rgba(124,58,237,0.2); color:rgba(180,160,255,0.65); padding:4px 12px; border-radius:3px; font-size:0.85em; cursor:pointer;">
                            <i class="fas fa-undo"></i> Reset All to Defaults
                        </button>
                    </div>

                </div>
            </div>

    </div>

    <!-- Footer -->
    <footer class="sheet-footer"
        style="flex: 0 0 auto; background: rgba(20, 20, 30, 0.95); padding: 10px 15px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; gap: 10px;">
        <div class="flexrow" style="gap: 8px; align-items: center;">
            {{#if hasSyrinscape}}
            <button type="button" class="stop-all-sounds" title="Signal Syrinscape to Stop All playing sounds."
                style="background: rgba(185, 28, 28, 0.2); border: 1px solid rgba(185, 28, 28, 0.5); color: #fca5a5; width: auto; font-size: 0.9em; white-space: nowrap; padding: 0 12px;">
                <i class="fas fa-stop-circle"></i> Stop All
            </button>
            {{/if}}
            <!-- Removed floaty separator -->
            <div style="width: 10px;"></div>
            <button type="button" class="load-preset" title="Configure Audio Mode"
                style="background: transparent; border: none; color: #888; width: auto; font-size: 0.9em; transition: color 0.2s;">
                <i class="fas fa-volume-up"></i> Audio Mode
            </button>
            <button type="button" class="import-config" title="Import"
                style="background: transparent; border: none; color: #888; width: auto; font-size: 0.9em; transition: color 0.2s;">
                <i class="fas fa-file-import"></i> Import
            </button>
            <button type="button" class="export-config" title="Export"
                style="background: transparent; border: none; color: #888; width: auto; font-size: 0.9em; transition: color 0.2s;">
                <i class="fas fa-file-export"></i> Export
            </button>
        </div>
        <button type="submit" class="ionrift-save-btn" style="width: auto; white-space: nowrap;">
            <i class="fas fa-check"></i> Close
        </button>
    </footer>
</form>

<style>
    /* Hierarchy Styles */
    .sound-group-container details {
        margin-bottom: 4px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.2);
    }

    .sound-group-container summary {
        padding: 8px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        list-style: none;
        /* Hide default arrow */
    }

    .sound-group-container summary::-webkit-details-marker {
        display: none;
    }

    .sound-group-container summary:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .sound-group-container summary .ionrift-badge {
        font-size: 0.7em;
        padding: 2px 6px;
        border-radius: 4px;
        opacity: 0.8;
    }

    .sound-group-container summary .ionrift-badge.success {
        background: rgba(50, 200, 100, 0.2);
        color: #8f8;
        border: 1px solid rgba(50, 200, 100, 0.3);
    }

    .sound-group-container summary .ionrift-badge.warning {
        background: rgba(200, 150, 50, 0.2);
        color: #fd8;
        border: 1px solid rgba(200, 150, 50, 0.3);
    }

    .sound-group-container summary .ionrift-badge.info {
        background: rgba(100, 100, 100, 0.2);
        color: #ccc;
        border: 1px solid rgba(100, 100, 100, 0.3);
    }

    .sound-group-container .group-content {
        padding: 4px 0 4px 12px;
        /* Indent content */
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Recursive Shading: Each nested group gets slightly darker/lighter? */
    .sound-group-container .group-content .sound-group-container details {
        background: rgba(0, 0, 0, 0.15);
        /* Slightly darker for nested */
        border-color: rgba(255, 255, 255, 0.03);
    }
</style>