{% extends 'base/layout.html' %}
{% load form_helpers %}

{% block title %}Loki Settings{% endblock %}

{% block header %}
<div class="d-flex justify-content-between align-items-center">
    <h1>Loki Plugin Settings</h1>
</div>
{% endblock header %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-cog"></i> Loki Configuration
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="mdi mdi-information"></i>
                    <strong>Note:</strong> Settings are configured in NetBox's <code>configuration.py</code> or <code>plugins.py</code>.
                    This page shows the active settings shape and lets you test the current connection.
                </div>

                <form method="post">
                    {% csrf_token %}

                    <h6 class="text-muted mb-3">Connection Settings</h6>

                    <div class="mb-3">
                        <label class="form-label">{{ form.loki_url.label }}</label>
                        {{ form.loki_url }}
                        <small class="text-muted">{{ form.loki_url.help_text }}</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ form.loki_external_url.label }}</label>
                        {{ form.loki_external_url }}
                        <small class="text-muted">{{ form.loki_external_url.help_text }}</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ form.loki_tenant.label }}</label>
                        {{ form.loki_tenant }}
                        <small class="text-muted">{{ form.loki_tenant.help_text }}</small>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.loki_username.label }}</label>
                            {{ form.loki_username }}
                            <small class="text-muted">{{ form.loki_username.help_text }}</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.loki_password.label }}</label>
                            {{ form.loki_password }}
                            <small class="text-muted">{{ form.loki_password.help_text }}</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ form.loki_bearer_token.label }}</label>
                        {{ form.loki_bearer_token }}
                        <small class="text-muted">{{ form.loki_bearer_token.help_text }}</small>
                    </div>

                    <hr>
                    <h6 class="text-muted mb-3">Query Settings</h6>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.loki_job.label }}</label>
                            {{ form.loki_job }}
                            <small class="text-muted">{{ form.loki_job.help_text }}</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.device_label.label }}</label>
                            {{ form.device_label }}
                            <small class="text-muted">{{ form.device_label.help_text }}</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">{{ form.stream_selector.label }}</label>
                        {{ form.stream_selector }}
                        <small class="text-muted">{{ form.stream_selector.help_text }}</small>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.log_limit.label }}</label>
                            {{ form.log_limit }}
                            <small class="text-muted">{{ form.log_limit.help_text }}</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.time_range.label }}</label>
                            {{ form.time_range }}
                            <small class="text-muted">{{ form.time_range.help_text }}</small>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.timeout.label }}</label>
                            {{ form.timeout }}
                            <small class="text-muted">{{ form.timeout.help_text }}</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ form.cache_timeout.label }}</label>
                            {{ form.cache_timeout }}
                            <small class="text-muted">{{ form.cache_timeout.help_text }}</small>
                        </div>
                    </div>

                    <hr>
                    <h6 class="text-muted mb-3">Matching Options</h6>

                    <div class="form-check mb-2">
                        {{ form.verify_tls }}
                        <label class="form-check-label">{{ form.verify_tls.label }}</label>
                        <br><small class="text-muted">{{ form.verify_tls.help_text }}</small>
                    </div>

                    <div class="form-check mb-2">
                        {{ form.use_regex_matching }}
                        <label class="form-check-label">{{ form.use_regex_matching.label }}</label>
                        <br><small class="text-muted">{{ form.use_regex_matching.help_text }}</small>
                    </div>

                    <div class="form-check mb-3">
                        {{ form.fallback_to_ip }}
                        <label class="form-check-label">{{ form.fallback_to_ip.label }}</label>
                        <br><small class="text-muted">{{ form.fallback_to_ip.help_text }}</small>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-connection"></i> Connection Test
                </h5>
            </div>
            <div class="card-body">
                <p class="text-muted">Test connectivity to the Loki API using the active NetBox configuration.</p>
                <button type="button" class="btn btn-primary" id="test-connection">
                    <i class="mdi mdi-play"></i> Test Connection
                </button>
                <div id="test-result" class="mt-3" style="display: none;">
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="mdi mdi-help-circle"></i> Configuration Help
                </h5>
            </div>
            <div class="card-body">
                <p>Add to <code>configuration.py</code> or <code>plugins.py</code>:</p>
                <pre class="bg-body-secondary p-2 rounded" style="font-size: 0.8rem;"><code>PLUGINS = ['netbox_loki']

PLUGINS_CONFIG = {
    'netbox_loki': {
        'loki_url': 'http://loki:3100',
        'loki_external_url': 'https://grafana.example.com/explore',
        'loki_tenant': 'docker',
        'loki_job': 'syslog',
        'device_label': 'routerboard',
        'stream_selector': '',
        'fallback_to_ip': True,
    }
}</code></pre>
                <a href="https://grafana.com/docs/loki/latest/api/" target="_blank" class="btn btn-outline-secondary btn-sm">
                    <i class="mdi mdi-book-open-page-variant"></i> Loki API Docs
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('test-connection').addEventListener('click', function() {
        var btn = this;
        var resultDiv = document.getElementById('test-result');

        btn.disabled = true;
        btn.innerHTML = '<i class="mdi mdi-loading mdi-spin"></i> Testing...';
        resultDiv.style.display = 'none';

        fetch('{% url "plugins:netbox_loki:test_connection" %}', {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json',
            },
        })
            .then(response => response.json())
            .then(data => {
                resultDiv.style.display = 'block';
                if (data.success) {
                    resultDiv.className = 'alert alert-success';
                    resultDiv.innerHTML = '<i class="mdi mdi-check-circle"></i> ' + data.message;
                } else {
                    resultDiv.className = 'alert alert-danger';
                    resultDiv.innerHTML = '<i class="mdi mdi-alert-circle"></i> ' + data.error;
                }
            })
            .catch(error => {
                resultDiv.style.display = 'block';
                resultDiv.className = 'alert alert-danger';
                resultDiv.innerHTML = '<i class="mdi mdi-alert-circle"></i> Request failed: ' + error;
            })
            .finally(() => {
                btn.disabled = false;
                btn.innerHTML = '<i class="mdi mdi-play"></i> Test Connection';
            });
    });
</script>
{% endblock %}