{% extends "base.html" %}
{% load static %}

{% block title %}{{ source.name }} - Source Details{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">{{ source.name }}</h1>
                <div class="btn-group">
                    <a href="{% url 'source_update' source.pk %}" class="btn btn-outline-secondary">
                        <i class="fas fa-edit"></i> Edit
                    </a>
                    <a href="{% url 'generate_api_keys' source.pk %}" class="btn btn-warning">
                        <i class="fas fa-key"></i> Generate Keys
                    </a>
                    <button type="button"
                            class="btn btn-outline-warning"
                            hx-post="{% url 'toggle_source_status' source.pk %}"
                            hx-confirm="Are you sure you want to {{ source.is_active|yesno:'deactivate,activate' }} this source?"
                            title="{{ source.is_active|yesno:'Deactivate,Activate' }}">
                        <i class="fas fa-{{ source.is_active|yesno:'pause,play' }}"></i>
                        {{ source.is_active|yesno:'Deactivate,Activate' }}
                    </button>
                    <a href="{% url 'source_delete' source.pk %}" class="btn btn-outline-danger">
                        <i class="fas fa-trash"></i> Delete
                    </a>
                </div>
            </div>

            <!-- Source Information -->
            <div class="row">
                <div class="col-md-8">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">Source Information</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Name</label>
                                        <div class="fw-bold">{{ source.name }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Type</label>
                                        <div>
                                            <span class="badge bg-info">{{ source.get_source_type_display }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% if source.description %}
                                <div class="mb-3">
                                    <label class="form-label text-muted">Description</label>
                                    <div>{{ source.description|linebreaks }}</div>
                                </div>
                            {% endif %}

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Contact Email</label>
                                        <div>
                                            {% if source.contact_email %}
                                                <a href="mailto:{{ source.contact_email }}">{{ source.contact_email }}</a>
                                            {% else %}
                                                <span class="text-muted">Not specified</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Contact Phone</label>
                                        <div>
                                            {% if source.contact_phone %}
                                                {{ source.contact_phone }}
                                            {% else %}
                                                <span class="text-muted">Not specified</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Status</label>
                                        <div>
                                            {% if source.is_active %}
                                                <span class="badge bg-success">Active</span>
                                            {% else %}
                                                <span class="badge bg-secondary">Inactive</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Requires Authentication</label>
                                        <div>
                                            {% if source.requires_auth %}
                                                <span class="badge bg-warning">Yes</span>
                                            {% else %}
                                                <span class="badge bg-secondary">No</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% if source.webhook_url %}
                                <div class="mb-3">
                                    <label class="form-label text-muted">Webhook URL</label>
                                    <div><code>{{ source.webhook_url }}</code></div>
                                </div>
                            {% endif %}

                            {% if source.api_timeout %}
                                <div class="mb-3">
                                    <label class="form-label text-muted">API Timeout</label>
                                    <div>{{ source.api_timeout }} seconds</div>
                                </div>
                            {% endif %}

                            {% if source.notes %}
                                <div class="mb-3">
                                    <label class="form-label text-muted">Notes</label>
                                    <div>{{ source.notes|linebreaks }}</div>
                                </div>
                            {% endif %}

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Created</label>
                                        <div>{{ source.created_at|date:"M d, Y H:i" }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label text-muted">Last Updated</label>
                                        <div>{{ source.updated_at|date:"M d, Y H:i" }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <!-- API Credentials -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">API Credentials</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label text-muted">API Key</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" value="{{ source.api_key }}" readonly>
                                    <button type="button" class="btn btn-outline-secondary"
                                            hx-post="{% url 'copy_to_clipboard' %}"
                                            hx-vals='{"text": "{{ source.api_key }}"}'
                                            title="Copy to clipboard">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">API Secret</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" value="{{ source.api_secret }}" readonly id="api-secret">
                                    <button type="button" class="btn btn-outline-secondary" onclick="toggleSecretVisibility()">
                                        <i class="fas fa-eye" id="secret-toggle-icon"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary"
                                            hx-post="{% url 'copy_to_clipboard' %}"
                                            hx-vals='{"text": "{{ source.api_secret }}"}'
                                            title="Copy to clipboard">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="text-end">
                                <a href="{% url 'generate_api_keys' source.pk %}" class="btn btn-warning btn-sm">
                                    <i class="fas fa-key"></i> Generate New Keys
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Statistics -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">Integration Statistics</h6>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label text-muted">Total API Calls</label>
                                <div class="h5 mb-0">{{ total_logs }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Successful Calls</label>
                                <div class="h5 mb-0 text-success">{{ successful_logs }}</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label text-muted">Failed Calls</label>
                                <div class="h5 mb-0 text-danger">{{ failed_logs }}</div>
                            </div>
                            {% if total_logs > 0 %}
                                <div class="mb-3">
                                    <label class="form-label text-muted">Success Rate</label>
                                    <div class="h5 mb-0">
                                        {% widthratio successful_logs total_logs 100 %}%
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Integration Logs -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Recent Integration Logs</h6>
                    <small class="text-muted">Last 10 logs</small>
                </div>
                <div class="card-body">
                    {% if integration_logs %}
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>Timestamp</th>
                                        <th>Method</th>
                                        <th>Status</th>
                                        <th>Response Time</th>
                                        <th>Details</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for log in integration_logs %}
                                        <tr>
                                            <td>
                                                <small>{{ log.created_at|date:"M d, Y H:i:s" }}</small>
                                            </td>
                                            <td>
                                                <span class="badge bg-secondary">{{ log.method }}</span>
                                            </td>
                                            <td>
                                                {% if log.status_code >= 200 and log.status_code < 300 %}
                                                    <span class="badge bg-success">{{ log.status_code }}</span>
                                                {% elif log.status_code >= 400 %}
                                                    <span class="badge bg-danger">{{ log.status_code }}</span>
                                                {% else %}
                                                    <span class="badge bg-warning">{{ log.status_code }}</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if log.response_time_ms %}
                                                    <small>{{ log.response_time_ms }}ms</small>
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if log.request_data %}
                                                    <button type="button" class="btn btn-sm btn-outline-info"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#logDetailModal{{ log.id }}"
                                                            title="View details">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                {% else %}
                                                    <span class="text-muted">No data</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fas fa-clipboard-list fa-2x text-muted mb-3"></i>
                            <p class="text-muted">No integration logs found</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Log Detail Modals -->
{% for log in integration_logs %}
    {% if log.request_data %}
        <div class="modal fade" id="logDetailModal{{ log.id }}" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Integration Log Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <strong>Timestamp:</strong><br>
                                {{ log.created_at|date:"M d, Y H:i:s" }}
                            </div>
                            <div class="col-md-6">
                                <strong>Method:</strong><br>
                                <span class="badge bg-secondary">{{ log.method }}</span>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <strong>Status Code:</strong><br>
                                {% if log.status_code >= 200 and log.status_code < 300 %}
                                    <span class="badge bg-success">{{ log.status_code }}</span>
                                {% elif log.status_code >= 400 %}
                                    <span class="badge bg-danger">{{ log.status_code }}</span>
                                {% else %}
                                    <span class="badge bg-warning">{{ log.status_code }}</span>
                                {% endif %}
                            </div>
                            <div class="col-md-6">
                                <strong>Response Time:</strong><br>
                                {% if log.response_time_ms %}
                                    {{ log.response_time_ms }}ms
                                {% else %}
                                    -
                                {% endif %}
                            </div>
                        </div>
                        <hr>
                        <div class="mb-3">
                            <strong>Request Data:</strong>
                            <pre class="bg-light p-2 rounded"><code>{{ log.request_data|pprint }}</code></pre>
                        </div>
                        {% if log.response_data %}
                            <div class="mb-3">
                                <strong>Response Data:</strong>
                                <pre class="bg-light p-2 rounded"><code>{{ log.response_data|pprint }}</code></pre>
                            </div>
                        {% endif %}
                        {% if log.error_message %}
                            <div class="mb-3">
                                <strong>Error Message:</strong>
                                <div class="alert alert-danger">{{ log.error_message }}</div>
                            </div>
                        {% endif %}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endfor %}
{% endblock %}

{% block extra_js %}
<script>
function toggleSecretVisibility() {
    const secretInput = document.getElementById('api-secret');
    const toggleIcon = document.getElementById('secret-toggle-icon');

    if (secretInput.type === 'password') {
        secretInput.type = 'text';
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    } else {
        secretInput.type = 'password';
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    }
}

// Handle HTMX copy to clipboard feedback
document.body.addEventListener('htmx:afterRequest', function(evt) {
    if (evt.detail.successful && evt.detail.target.matches('[hx-post*="copy_to_clipboard"]')) {
        const button = evt.detail.target;
        const originalIcon = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check"></i>';
        button.classList.remove('btn-outline-secondary');
        button.classList.add('btn-success');

        setTimeout(() => {
            button.innerHTML = originalIcon;
            button.classList.remove('btn-success');
            button.classList.add('btn-outline-secondary');
        }, 2000);
    }
});

// Auto-refresh after status toggle
document.body.addEventListener('htmx:afterRequest', function(evt) {
    if (evt.detail.successful && evt.detail.target.matches('[hx-post*="toggle_source_status"]')) {
        // Reload the page after a short delay to show updated status
        setTimeout(() => {
            window.location.reload();
        }, 500);
    }
});
</script>
{% endblock %}