{% extends "base.html" %}
{% block title %}Settings - Admin Dashboard{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-gear me-2"></i> Application Settings</h2>
</div>

<div class="row">
    <!-- System Overview -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0"><i class="bi bi-info-circle me-2"></i> System Overview</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Total Tenants
                        <span class="badge bg-primary rounded-pill">{{ tenant_count }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Total Users
                        <span class="badge bg-primary rounded-pill">{{ user_count }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Total Forms
                        <span class="badge bg-primary rounded-pill">{{ form_count }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Total Submissions
                        <span class="badge bg-primary rounded-pill">{{ submission_count }}</span>
                    </li>
                </ul>

                <h6 class="mt-4 mb-3 text-muted">Environment</h6>
                <table class="table table-sm table-borderless">
                    <tbody>
                        <tr>
                            <td class="text-muted" style="width: 150px;">Dev Mode</td>
                            <td>
                                {% if dev_mode %}
                                <span class="badge bg-warning text-dark"><i class="bi bi-bug"></i> Active</span>
                                {% else %}
                                <span class="badge bg-success">Inactive (Production)</span>
                                {% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Security & API -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0"><i class="bi bi-shield-lock me-2"></i> Security & API</h5>
            </div>
            <div class="card-body">
                <p class="text-muted small">Most security settings are configured via environment variables (<code>.env</code> file) and require a server restart to take effect.</p>
                
                <h6 class="mt-3">reCAPTCHA v3 Integration</h6>
                <div class="alert {{ 'alert-success' if config.get('RECAPTCHA_SITE_KEY') or dev_mode else 'alert-warning' }} py-2">
                    <i class="bi {{ 'bi-check-circle' if config.get('RECAPTCHA_SITE_KEY') or dev_mode else 'bi-exclamation-triangle' }} me-2"></i>
                    {% if dev_mode %}
                        Mock Mode Active (Dev Mode)
                    {% elif config.get('RECAPTCHA_SITE_KEY') %}
                        Configured and Active
                    {% else %}
                        Not Configured (Missing Keys)
                    {% endif %}
                </div>

                <h6 class="mt-4">OIDC Authentication (Zitadel)</h6>
                <div class="alert {{ 'alert-warning' if dev_mode else 'alert-success' }} py-2">
                    <i class="bi {{ 'bi-exclamation-triangle' if dev_mode else 'bi-check-circle' }} me-2"></i>
                    {% if dev_mode %}
                        Bypassed (Dev Mode Active)
                    {% else %}
                        Active
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Audit Log -->
    <div class="col-12 mb-4">
        <div class="card shadow-sm">
            <div class="card-header bg-light">
                <h5 class="card-title mb-0"><i class="bi bi-journal-text me-2"></i> Recent Audit Logs</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 400px;">
                    <table class="table table-hover table-sm mb-0">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th>Timestamp</th>
                                <th>Action</th>
                                <th>Resource</th>
                                <th>Details</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for log in audit_logs %}
                            <tr>
                                <td><small>{{ log.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small></td>
                                <td><span class="badge bg-secondary">{{ log.action }}</span></td>
                                <td>{{ log.resource_type }} <code>{{ log.resource_id|truncate(8, true, '') if log.resource_id else '' }}</code></td>
                                <td><small class="text-muted">{{ log.details|tojson if log.details else '' }}</small></td>
                                <td>
                                    {% if log.status == 'success' %}
                                    <i class="bi bi-check-circle text-success"></i>
                                    {% else %}
                                    <i class="bi bi-x-circle text-danger"></i>
                                    {% endif %}
                                </td>
                            </tr>
                            {% else %}
                            <tr><td colspan="5" class="text-center text-muted py-3">No audit logs found.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}