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

{% block content %}
<style>
    /* Main container styling for the request details page */
    .request-details-container {
        max-width: 1200px;
        margin: 20px auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .header {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    /* Shiny back button with custom gradient effect */
    .shiny-back-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom, #333 0%, #000 100%);
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        border-radius: 25px;
        padding: 10px 30px;
        font-size: 18px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        margin-bottom: 20px;
    }

    .shiny-back-button i {
        margin-right: 10px; /* space between icon and text */
        font-size: 22px;    /* slightly larger icon */
    }

    .shiny-back-button::after {
        content: '';
        position: absolute;
        top: 0;
        left: -50%;
        width: 200%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
        transform: skewX(-45deg);
        transition: left 0.5s;
    }

    .shiny-back-button:hover::after {
        left: 100%;
    }

    .shiny-back-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3), inset 0 2px 8px rgba(255, 255, 255, 0.2);
        text-decoration: none;
    }

    .metadata {
        background-color: #f9fafc;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .label {
        font-weight: bold;
        color: #555;
    }

    .value {
        color: #333;
        margin-top: 4px;
    }

    .status-badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: bold;
        color: #fff;
        background-color: #ff9800;
    }

    .method-badge {
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: bold;
        color: #fff;
        background-color: #2196f3;
    }

    .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 10px;
    }

    .tag {
        background-color: #e0e7ff;
        color: #1e3a8a;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
    }

    .tabs {
        display: flex;
        border-bottom: 1px solid #ddd;
        margin-bottom: 0; /* Adjust if needed */
    }

    .tab {
        padding: 10px 20px;
        cursor: pointer;
        font-weight: bold;
        color: #555;
        border: 1px solid #ddd;
        border-bottom: none;
        background-color: #f9fafc;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .tab.active {
        background-color: #fff;
        color: #333;
        border-bottom: 1px solid #fff;
    }

    .tab-content {
        display: none;
        padding: 20px;
        background-color: #333;
        color: #00ff00;
        border-radius: 0 0 8px 8px;
        overflow: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .tab-content.active {
        display: block;
    }

    #responseContainer {
        font-family: monospace;
        white-space: pre;
        margin: 20px;
        padding: 10px;
        border: 1px solid #ddd;
        background-color: #222;
        color: white;
    }

    .key {
        color: white;
    }

    .values {
        color: lightgreen;
    }
</style>

<div class="request-details-container">
    <!-- BACK BUTTON -->
    <a href="{% url 'request_logs' %}" class="shiny-back-button btn">
        <i class="bi bi-arrow-left"></i> BACK
    </a>

    <!-- METADATA SECTION -->
    <div class="metadata">
        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="label">Time</div>
                <div class="value">{{ log.timestamp }} ({{ log.timestamp|timesince }} ago)</div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">Hostname</div>
                <div class="value">{{ log.hostname }}</div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">Method</div>
                <div class="value">
                    <span class="method-badge">{{ log.method }}</span>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">Controller Action</div>
                {% for tag in tags %}
                    <div class="value">{{ tag }}</div>
                {% endfor %}
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">Middleware</div>
                <div class="value">{{ log.middleware }}</div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">Path</div>
                <div class="value">{{ log.path }}</div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">Status</div>
                <div class="value">
                    <span class="status-badge">{{ log.status_code }}</span>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">Duration</div>
                <div class="value">{{ log.duration }} ms</div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">IP Address</div>
                <div class="value">{{ log.ip_address }}</div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="label">Memory Usage</div>
                <div class="value">{{ log.memory_usage }}</div>
            </div>
        </div>
    </div>

    <!-- TAGS SECTION -->
    <div class="tags">
        {% for tag in tags %}
            <span class="tag">{{ tag }}</span>
        {% endfor %}
    </div>

    <!-- TABS -->
    <div class="tabs mt-4">
        <div class="tab active" onclick="showTab('payload')">Payload</div>
        <div class="tab" onclick="showTab('headers')">Headers</div>
        <div class="tab" onclick="showTab('session')">Session</div>
        <div class="tab" onclick="showTab('response')">Response</div>
    </div>

    <!-- TAB CONTENTS -->
    <div id="payload" class="tab-content active">
        <div id="payloadContainer"></div>
    </div>
    <div id="headers" class="tab-content">
        <div id="headersContainer"></div>
    </div>
    <div id="session" class="tab-content">
        <pre>{{ log.session_data|safe }}</pre>
    </div>
    <div id="response" class="tab-content">
        <div id="responseContainer"></div>
    </div>
</div>

<script>
    function showTab(tabId) {
        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
        document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
        document.getElementById(tabId).classList.add('active');
        document.querySelector(`.tab[onclick="showTab('${tabId}')"]`).classList.add('active');
    }

    function renderJSON(containerId, data) {
        const container = document.getElementById(containerId);
        container.textContent = '{\n';

        Object.entries(data).forEach(([key, value], index, array) => {
            const line = document.createElement('div');
            const keySpan = document.createElement('span');
            keySpan.className = 'key';
            keySpan.textContent = `    "${key}": `;
            const valueSpan = document.createElement('span');
            valueSpan.className = 'values';
            valueSpan.textContent = `"${value}"${index < array.length - 1 ? ',' : ''}`;
            line.appendChild(keySpan);
            line.appendChild(valueSpan);
            container.appendChild(line);
        });

        const closingBrace = document.createElement('div');
        closingBrace.textContent = '}';
        container.appendChild(closingBrace);
    }

    const payloadData = {{ payload_json|safe }};
    const headersData = {{ headers_json|safe }};
    const responseData = {{ response_json|safe }};

    renderJSON("payloadContainer", payloadData);
    renderJSON("headersContainer", headersData);
    renderJSON("responseContainer", responseData);
</script>
{% endblock %}
