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

{% block title %}Request Details | MCP Slack Bridge{% endblock %}

{% block content %}
<div class="container my-5 py-5">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <nav aria-label="breadcrumb" class="mb-4">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'home' %}">Dashboard</a></li>
                    <li class="breadcrumb-item active text-secondary" aria-current="page">Request: {{ req.id|truncatechars:12 }}</li>
                </ol>
            </nav>

            <div class="card p-4 p-md-5">
                <div class="d-flex justify-content-between align-items-center mb-5">
                    <h2 class="text-white fw-bold mb-0">Tool Call Details</h2>
                    {% if req.status == 'SENT' %}
                    <span class="badge-online bg-opacity-25 bg-success text-success border border-success">SENT</span>
                    {% elif req.status == 'ERROR' %}
                    <span class="badge-error bg-opacity-25 bg-danger text-danger border border-danger">ERROR</span>
                    {% else %}
                    <span class="badge-pending bg-opacity-25 bg-warning text-warning border border-warning">PENDING</span>
                    {% endif %}
                </div>

                <div class="row g-4">
                    <div class="col-md-4">
                        <p class="small text-secondary fw-bold text-uppercase">Tool Name</p>
                        <h5 class="text-info">{{ req.tool_name }}</h5>
                    </div>
                    <div class="col-md-4">
                        <p class="small text-secondary fw-bold text-uppercase">Slack Channel</p>
                        <h5 class="text-white">#{{ req.slack_channel|default:"N/A" }}</h5>
                    </div>
                    <div class="col-md-4">
                        <p class="small text-secondary fw-bold text-uppercase">Slack Timestamp</p>
                        <h5 class="text-white">{{ req.slack_ts|default:"N/A" }}</h5>
                    </div>
                </div>

                <hr class="my-5 border-secondary opacity-25">

                <div class="mb-5">
                    <h5 class="text-white mb-4">Arguments</h5>
                    <pre class="small bg-dark p-4 rounded-3 text-info"><code>{{ req.arguments|json_script:"args-data" }}</code>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const data = JSON.parse(document.getElementById('args-data').textContent);
        document.querySelector('pre code').textContent = JSON.stringify(data, null, 2);
    });
</script></pre>
                </div>

                <div class="mb-5">
                    <h5 class="text-white mb-4">Slack API Response</h5>
                    <pre class="small bg-dark p-4 rounded-3 text-secondary"><code>{{ req.response_json|json_script:"resp-data" }}</code>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const data = JSON.parse(document.getElementById('resp-data').textContent);
        document.querySelectorAll('pre code')[1].textContent = JSON.stringify(data, null, 2);
    });
</script></pre>
                </div>

                <div class="responses-section">
                    <h5 class="text-white mb-4 d-flex align-items-center">
                        Human Responses
                        <span class="ms-3 badge rounded-pill bg-primary fs-6">{{ responses.count }}</span>
                    </h5>
                    
                    {% for r in responses %}
                    <div class="card bg-opacity-10 bg-info border-info border-opacity-25 p-4 mb-3">
                        <div class="d-flex justify-content-between mb-3">
                            <span class="fw-bold text-info">{{ r.user_name|default:"Human" }}</span>
                            <span class="small text-secondary">{{ r.created_at|date:"Y-m-d H:i" }}</span>
                        </div>
                        <p class="mb-0 text-white">{{ r.text }}</p>
                        {% if r.file_url %}
                        <div class="mt-3">
                            <a href="{{ r.file_url }}" target="_blank" class="btn btn-sm btn-outline-info">View Attachment</a>
                        </div>
                        {% endif %}
                    </div>
                    {% empty %}
                    <div class="text-center py-5 border border-dashed border-secondary rounded-3">
                        <p class="text-secondary italic mb-0">No responses recorded yet.</p>
                        <small class="text-secondary">AI agent can check for updates using <code>list_responses</code></small>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}