<div id="game-integration-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="gi-title">
    <div class="modal-content modal-lg">
        <div class="modal-header">
            <h2 id="gi-title" data-i18n="game_integration.add">Add Game Integration</h2>
            <button class="modal-close-btn" onclick="closeGameIntegrationModal()" data-i18n-aria-label="aria.close">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="gi-id">
            <div id="gi-error" class="modal-error" style="display:none"></div>

            <!-- Name + Tags -->
            <div class="form-group">
                <div class="label-row">
                    <label for="gi-name" data-i18n="game_integration.name">Name:</label>
                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                </div>
                <small class="input-hint" style="display:none" data-i18n="game_integration.name.hint">A descriptive name for this game integration</small>
                <input type="text" id="gi-name" required>
                <div id="gi-tags-container"></div>
            </div>

            <!-- Description -->
            <div class="form-group">
                <div class="label-row">
                    <label for="gi-description" data-i18n="game_integration.description">Description:</label>
                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                </div>
                <small class="input-hint" style="display:none" data-i18n="game_integration.description.hint">Optional description of what this integration does</small>
                <input type="text" id="gi-description">
            </div>

            <!-- Enabled -->
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" id="gi-enabled" checked>
                    <span data-i18n="game_integration.enabled">Enabled</span>
                </label>
            </div>

            <!-- Game / Adapter picker -->
            <div class="form-group">
                <div class="label-row">
                    <label for="gi-adapter-type" data-i18n="game_integration.adapter_type">Game / Adapter:</label>
                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                </div>
                <small class="input-hint" style="display:none" data-i18n="game_integration.adapter_type.hint">Select the game or adapter type for this integration</small>
                <select id="gi-adapter-type"></select>
            </div>

            <!-- Adapter config (auto-generated) -->
            <div class="form-group">
                <div class="label-row">
                    <label data-i18n="game_integration.adapter_config">Adapter Configuration</label>
                </div>
                <div id="gi-adapter-config-fields"></div>
            </div>

            <!-- Setup instructions + Auto Setup buttons -->
            <div id="gi-setup-instructions-btn-wrapper" style="display:none">
                <button type="button" class="btn btn-secondary btn-sm" onclick="openSetupInstructions()" data-i18n="game_integration.setup_instructions">Setup Instructions</button>
                <button type="button" id="gi-auto-setup-btn" class="btn btn-primary btn-sm" onclick="autoSetupGameIntegration()" style="display:none" data-i18n="game_integration.auto_setup">Auto Setup</button>
            </div>

            <!-- Event Mapping Editor -->
            <div class="form-group">
                <div class="label-row">
                    <label data-i18n="game_integration.event_mappings">Event Mappings</label>
                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                </div>
                <small class="input-hint" style="display:none" data-i18n="game_integration.event_mappings.hint">Map game events to LED effects. Each event type can trigger a different visual effect.</small>

                <div class="gi-mapping-toolbar">
                    <select id="gi-mapping-preset" onchange="onMappingPresetChange()">
                        <option value="" data-i18n="game_integration.preset.select">Load preset...</option>
                        <option value="fps_combat" data-i18n="game_integration.preset.fps_combat">FPS Combat</option>
                        <option value="moba_health" data-i18n="game_integration.preset.moba_health">MOBA Health</option>
                    </select>
                    <button class="btn btn-secondary btn-sm" onclick="addGameMapping()" data-i18n="game_integration.mapping.add">+ Add Mapping</button>
                </div>
                <div id="gi-mappings-list" class="gi-mappings-list"></div>
            </div>

            <!-- Live Event Monitor -->
            <div class="form-group">
                <div class="label-row">
                    <label data-i18n="game_integration.events.title">Live Events</label>
                </div>
                <div id="gi-event-feed" class="gi-event-feed"></div>
            </div>

            <!-- Connection Test -->
            <div class="form-group">
                <button class="btn btn-secondary" onclick="testGameConnection()" data-i18n="game_integration.test.button">Test Connection</button>
                <div id="gi-test-panel" style="display:none" class="gi-test-panel"></div>
            </div>

        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeGameIntegrationModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="saveGameIntegration()" title="Save" data-i18n-title="settings.button.save" data-i18n-aria-label="aria.save">&#x2713;</button>
        </div>
    </div>
</div>

<!-- Setup Instructions Overlay (full-screen, same pattern as release notes) -->
<div id="gi-setup-overlay" class="log-overlay" style="display:none;">
    <button class="log-overlay-close" onclick="closeSetupInstructions()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
    <div class="log-overlay-toolbar">
        <h3 id="gi-setup-overlay-title" data-i18n="game_integration.setup_instructions">Setup Instructions</h3>
    </div>
    <div id="gi-setup-overlay-content" class="release-notes-content"></div>
</div>
