{% load custom_tags_and_filters %}
<div class="panel-body">
    <h3 class="customization-section-title">MQTT Broker Configuration</h3>
    <p>Configure the MQTT broker connection for publishing NEMO events. Only one MQTT configuration is supported.</p>
    
    <form method="POST" action="{% url 'customize' 'mqtt' %}" class="form-horizontal">
        {% csrf_token %}
        
        <!-- Basic Settings -->
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_enabled">Enable MQTT</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               id="mqtt_enabled" 
                               name="mqtt_enabled" 
                               {% if config.enabled %}checked{% endif %} 
                               value="enabled">
                        Enable MQTT event publishing
                    </label>
                </div>
            </div>
        </div>

        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Event Types</h3>
        <p class="help-block light-grey">
            Select which NEMO events should be published to MQTT. Uncheck any you do not want sent to the broker.
        </p>

        <div class="form-group">
            <label class="control-label col-md-3">Enable / Disable</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="mqtt_event_usage_event_save"
                               {% if mqtt_event_filters.usage_event_save %}checked{% endif %}
                               value="enabled">
                        Publish tool <strong>enabled</strong> and <strong>disabled</strong> events
                        <span class="help-block light-grey">
                            Sent when a user starts or stops using a tool (<code>nemo/tools/{id}/enabled</code>, <code>.../disabled</code>).
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-3">Operational / Non-operational</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="mqtt_event_operational_group"
                               {% if mqtt_event_filters.tool_operational and mqtt_event_filters.tool_non_operational %}checked{% endif %}
                               value="enabled">
                        Publish <strong>operational</strong> and <strong>non-operational</strong> events
                        <span class="help-block light-grey">
                            Sent when a tool transitions between up/down (<code>nemo/tools/{id}/operational</code>, <code>.../non-operational</code>).
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-3">Task created / Task resolved</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="mqtt_event_task_group"
                               {% if mqtt_event_filters.task_created and mqtt_event_filters.task_resolved %}checked{% endif %}
                               value="enabled">
                        Publish <strong>task created</strong> and <strong>task resolved</strong> events
                        <span class="help-block light-grey">
                            Sent when tasks are created or updated for a tool (<code>nemo/tools/{id}/tasks</code>).
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_name">Configuration Name</label>
            <div class="col-md-4">
                <input type="text" 
                       id="mqtt_name" 
                       name="mqtt_name" 
                       class="form-control" 
                       value="{{ config.name }}">
            </div>
            <div class="col-md-5 help-block light-grey">A descriptive name for this MQTT configuration.</div>
        </div>
        
        <!-- Broker Connection -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Broker Connection</h3>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_broker_host">Broker Host</label>
            <div class="col-md-4">
                <input type="text" 
                       id="mqtt_broker_host" 
                       name="mqtt_broker_host" 
                       class="form-control" 
                       value="{{ config.broker_host }}">
            </div>
            <div class="col-md-5 help-block light-grey">The hostname or IP address of the MQTT broker.</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_broker_port">Broker Port</label>
            <div class="col-md-4">
                <input type="number" 
                       id="mqtt_broker_port" 
                       name="mqtt_broker_port" 
                       class="form-control" 
                       value="{{ config.broker_port }}">
            </div>
            <div class="col-md-5 help-block light-grey">The port number of the MQTT broker (typically 1883).</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_keepalive">Keep Alive (seconds)</label>
            <div class="col-md-4">
                <input type="number" 
                       id="mqtt_keepalive" 
                       name="mqtt_keepalive" 
                       class="form-control" 
                       value="{{ config.keepalive }}">
            </div>
            <div class="col-md-5 help-block light-grey">Keep alive interval in seconds (default: 60).</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_client_id">Client ID</label>
            <div class="col-md-4">
                <input type="text" 
                       id="mqtt_client_id" 
                       name="mqtt_client_id" 
                       class="form-control" 
                       value="{{ config.client_id }}">
            </div>
            <div class="col-md-5 help-block light-grey">Unique identifier for this NEMO instance on the MQTT broker.</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_broker_username">Broker username</label>
            <div class="col-md-4">
                <input type="text" 
                       id="mqtt_broker_username" 
                       name="mqtt_broker_username" 
                       class="form-control" 
                       value="{{ config.username|default:'' }}"
                       placeholder="e.g. nemo">
            </div>
            <div class="col-md-5 help-block light-grey">Username sent in the MQTT CONNECT packet. Set with broker password to disable anonymous access.</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_broker_password">Broker password</label>
            <div class="col-md-4">
                <input type="password" 
                       id="mqtt_broker_password" 
                       name="mqtt_broker_password" 
                       class="form-control" 
                       placeholder="Leave blank to keep current password"
                       autocomplete="off">
            </div>
            <div class="col-md-5 help-block light-grey">Password for broker authentication. Leave blank to keep existing password.</div>
        </div>
        
        <!-- HMAC Message Authentication -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">HMAC Message Authentication</h3>
        <p class="help-block light-grey">Sign payloads with HMAC so subscribers can verify authenticity and integrity. Uses a shared secret; transport remains plain TCP.</p>
        
        <div class="form-group">
            <label class="control-label col-md-3">Use HMAC signing</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               id="mqtt_use_hmac" 
                               name="mqtt_use_hmac" 
                               {% if config.use_hmac %}checked{% endif %} 
                               value="enabled"
                               onchange="toggleHmacFields()">
                        Sign MQTT payloads with HMAC
                    </label>
                </div>
            </div>
        </div>
        
        <div id="hmac-fields"{% if not config.use_hmac %} style="display: none;"{% endif %}>
            <div class="form-group">
                <label class="control-label col-md-3" for="mqtt_hmac_secret_key">HMAC secret key</label>
                <div class="col-md-9">
                    <input type="password" 
                           id="mqtt_hmac_secret_key" 
                           name="mqtt_hmac_secret_key" 
                           class="form-control" 
                           placeholder="Shared secret (leave blank to keep current)"
                           autocomplete="off">
                </div>
                <div class="col-md-12 help-block light-grey">Same secret must be configured on subscribers to verify messages. Leave blank when editing to keep existing key.</div>
            </div>
        </div>
        
        <!-- Message Settings -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Message Settings</h3>
        
        <div class="form-group">
            <label class="control-label col-md-3">Message Options</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               name="mqtt_retain_messages" 
                               {% if config.retain_messages %}checked{% endif %} 
                               value="enabled">
                        Retain messages on broker
                    </label>
                    <br />
                    <label>
                        <input type="checkbox" 
                               name="mqtt_clean_session" 
                               {% if config.clean_session %}checked{% endif %} 
                               value="enabled">
                        Clean session on connect
                    </label>
                </div>
            </div>
        </div>
        
        <!-- Connection Management -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Connection Management</h3>
        
        <div class="form-group">
            <label class="control-label col-md-3">Auto-reconnect</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               name="mqtt_auto_reconnect" 
                               {% if config.auto_reconnect %}checked{% endif %} 
                               value="enabled">
                        Automatically reconnect to broker on connection loss
                    </label>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_reconnect_delay">Reconnect Delay (seconds)</label>
            <div class="col-md-4">
                <input type="number" 
                       id="mqtt_reconnect_delay" 
                       name="mqtt_reconnect_delay" 
                       class="form-control" 
                       value="{{ config.reconnect_delay }}">
            </div>
            <div class="col-md-5 help-block light-grey">Delay between reconnection attempts.</div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_max_reconnect_attempts">Max Reconnect Attempts</label>
            <div class="col-md-4">
                <input type="number" 
                       id="mqtt_max_reconnect_attempts" 
                       name="mqtt_max_reconnect_attempts" 
                       class="form-control" 
                       value="{{ config.max_reconnect_attempts }}">
            </div>
            <div class="col-md-5 help-block light-grey">Maximum number of reconnection attempts (0 = unlimited).</div>
        </div>
        
        <!-- Logging -->
        <div class="customization-separation"></div>
        <h3 class="customization-section-title">Logging</h3>
        
        <div class="form-group">
            <label class="control-label col-md-3">Message Logging</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" 
                               name="mqtt_log_messages" 
                               {% if config.log_messages %}checked{% endif %} 
                               value="enabled">
                        Log all MQTT messages to database
                    </label>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <label class="control-label col-md-3" for="mqtt_log_level">Log Level</label>
            <div class="col-md-4">
                <select id="mqtt_log_level" name="mqtt_log_level" class="form-control">
                    <option value="DEBUG" {% if config.log_level == 'DEBUG' %}selected{% endif %}>DEBUG</option>
                    <option value="INFO" {% if config.log_level == 'INFO' %}selected{% endif %}>INFO</option>
                    <option value="WARNING" {% if config.log_level == 'WARNING' %}selected{% endif %}>WARNING</option>
                    <option value="ERROR" {% if config.log_level == 'ERROR' %}selected{% endif %}>ERROR</option>
                </select>
            </div>
            <div class="col-md-5 help-block light-grey">Minimum log level for MQTT messages.</div>
        </div>
        
        <div class="customization-separation" style="margin-bottom: 15px"></div>
        <div class="text-center">{% button type="save" value="Save MQTT Configuration" %}</div>
    </form>
</div>

<!-- Status and Recent Messages -->
<div class="panel-body">
    <h3 class="customization-section-title">Status & Recent Messages</h3>
    
    {% if config.enabled %}
        <div class="alert alert-success">
            <strong>MQTT is enabled</strong> - Events will be published to the broker.
        </div>
    {% else %}
        <div class="alert alert-warning">
            <strong>MQTT is disabled</strong> - No events will be published.
        </div>
    {% endif %}
    
    {% if recent_messages %}
        <h4>Recent MQTT Messages</h4>
        <div class="table-responsive">
            <table class="table table-striped table-condensed">
                <thead>
                    <tr>
                        <th>Topic</th>
                        <th>Status</th>
                        <th>QoS</th>
                        <th>Sent At</th>
                    </tr>
                </thead>
                <tbody>
                    {% for message in recent_messages %}
                    <tr>
                        <td>{{ message.topic }}</td>
                        <td>
                            {% if message.success %}
                                <span class="label label-success">Success</span>
                            {% else %}
                                <span class="label label-danger">Failed</span>
                            {% endif %}
                        </td>
                        <td>{{ message.qos }}</td>
                        <td>{{ message.sent_at|date:"M d, Y H:i:s" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <p class="text-muted">No recent MQTT messages found.</p>
    {% endif %}
</div>

<script>
function toggleHmacFields() {
    var hmacCheckbox = document.getElementById('mqtt_use_hmac');
    var hmacFields = document.getElementById('hmac-fields');
    
    if (hmacCheckbox.checked) {
        hmacFields.style.display = 'block';
    } else {
        hmacFields.style.display = 'none';
    }
}
</script>