{% extends 'base.html' %}

{% block title %}Dashboard - WhatsApp AI Bot{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2 class="fw-bold">Live Chat Monitor</h2>
        <p class="text-muted">Real-time view of incoming and AI-generated messages.</p>
    </div>
    <div class="col-md-4 text-end">
        <div class="card p-3 d-inline-block">
            <span class="fw-bold me-2">Bot Status:</span>
            {% if settings.is_active %}
                <span class="status-badge status-active">Active</span>
            {% else %}
                <span class="status-badge status-inactive">Paused</span>
            {% endif %}
        </div>
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th style="width: 150px;">Sender</th>
                    <th>Message In</th>
                    <th>AI Response</th>
                    <th style="width: 180px;">Time</th>
                </tr>
            </thead>
            <tbody>
                {% for msg in messages %}
                <tr>
                    <td>
                        <span class="badge bg-light text-dark p-2">{{ msg.sender_number }}</span>
                    </td>
                    <td>{{ msg.message_in }}</td>
                    <td>
                        {% if msg.message_out %}
                            <div class="p-2 rounded bg-light" style="border-left: 4px solid var(--wa-green);">
                                {{ msg.message_out }}
                            </div>
                        {% else %}
                            <span class="text-muted italic">Processing...</span>
                        {% endif %}
                    </td>
                    <td>
                        <small class="text-muted">{{ msg.timestamp|date:"M d, H:i:s" }}</small>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="text-center py-5 text-muted">
                        No messages received yet. Send a message to your WhatsApp number to see it here.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}