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

{% block title %}Dashboard | MCP Slack Bridge{% endblock %}

{% block content %}
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="display-4 fw-bold mb-4">AI &Human Slack Bridge</h1>
                <p class="lead text-secondary mb-5">
                    Bridging the gap between autonomous AI agents and human workers. 
                    Exposing tools to request design, feedback, or any manual task directly via Slack.
                </p>
                <div class="d-flex gap-3">
                    <span class="badge-online d-flex align-items-center">
                        <span class="status-dot online"></span>
                        Server: {{ server_status }}
                    </span>
                    <span class="badge rounded-pill border border-secondary text-secondary d-flex align-items-center px-3">
                        DJANGO 5.2 &bull; MCP v1.0
                    </span>
                </div>
            </div>
            <div class="col-lg-4 d-none d-lg-block">
                <div class="card p-4 text-center shadow">
                    <h5 class="mb-3 text-secondary">MCP Endpoint</h5>
                    <code class="d-block py-2">/mcp/</code>
                    <p class="small text-secondary mt-3 mb-0">Post JSON-RPC here</p>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="container my-5">
    <div class="row">
        <div class="col-md-12">
            {% if not is_slack_configured %}
            <div class="alert alert-warning border-warning bg-opacity-10 bg-warning mb-5">
                <h5 class="alert-heading fw-bold">Configuration Required</h5>
                <p class="mb-0">
                    Set <code>SLACK_BOT_TOKEN</code> in your environment to enable message delivery.
                </p>
            </div>
            {% endif %}

            <div class="card mb-5">
                <div class="card-body p-0">
                    <div class="p-4 border-bottom border-secondary d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0 text-white">Recent Tool Activity</h5>
                        <small class="text-secondary">Showing last 20 requests</small>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-borderless table-hover mb-0">
                            <thead>
                                <tr>
                                    <th class="ps-4">TIMESTAMP</th>
                                    <th>TOOL NAME</th>
                                    <th>CHANNEL</th>
                                    <th>STATUS</th>
                                    <th class="pe-4 text-end">ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for r in requests %}
                                <tr class="log-entry" onclick="location.href='{% url 'request_detail' r.pk %}'">
                                    <td class="ps-4 text-secondary small">{{ r.created_at|date:"Y-m-d H:i" }}</td>
                                    <td><code class="text-info">{{ r.tool_name }}</code></td>
                                    <td class="text-secondary">#{{ r.slack_channel }}</td>
                                    <td>
                                        {% if r.status == 'SENT' %}
                                        <span class="badge-online bg-opacity-25 bg-success text-success border border-success">SENT</span>
                                        {% elif r.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 %}
                                    </td>
                                    <td class="pe-4 text-end">
                                        <a href="{% url 'request_detail' r.pk %}" class="btn btn-sm btn-outline-secondary">Details</a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center py-5 text-secondary italic">
                                        No activity logged yet. Connect an MCP client to start.
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="card h-100 p-4">
                        <h5 class="text-white mb-4 fw-bold">How to use (Tools/Call)</h5>
                        <pre class="small mb-0">
{
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "name": "send_slack_message",
    "arguments": {
      "channel": "C12345",
      "text": "Hello Human!"
    }
  },
  "id": 1
}</pre>
                    </div>
                </div>
                <div class="col-lg-6 mt-4 mt-lg-0">
                    <div class="card h-100 p-4">
                        <h5 class="text-white mb-4 fw-bold">MCP Server Info</h5>
                        <ul class="list-unstyled text-secondary">
                            <li class="mb-3 d-flex justify-content-between">
                                <span>Status:</span>
                                <span class="text-success fw-bold">ONLINE</span>
                            </li>
                            <li class="mb-3 d-flex justify-content-between">
                                <span>Version:</span>
                                <span>1.0.0</span>
                            </li>
                            <li class="mb-3 d-flex justify-content-between">
                                <span>Available Tools:</span>
                                <span>2</span>
                            </li>
                            <li class="mb-0 d-flex justify-content-between">
                                <span>Python:</span>
                                <span>{{ python_version|default:"3.11" }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}