{% extends "base.html" %}

{% block title %}{{ network_name }} - Messages{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-3xl font-bold">Messages</h1>
    <span class="badge badge-lg">{{ total }} total</span>
</div>

{% if api_error %}
<div class="alert alert-warning mb-6">
    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Could not fetch data from API: {{ api_error }}</span>
</div>
{% endif %}

<!-- Filters -->
<div class="card bg-base-100 shadow mb-6">
    <div class="card-body py-4">
        <form method="GET" action="/messages" class="flex gap-4 flex-wrap items-end">
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Type</span>
                </label>
                <select name="message_type" class="select select-bordered select-sm">
                    <option value="">All Types</option>
                    <option value="direct" {% if message_type == 'direct' %}selected{% endif %}>Direct</option>
                    <option value="channel" {% if message_type == 'channel' %}selected{% endif %}>Channel</option>
                </select>
            </div>
            <div class="form-control">
                <label class="label py-1">
                    <span class="label-text">Channel</span>
                </label>
                <select name="channel_idx" class="select select-bordered select-sm">
                    <option value="">All Channels</option>
                    {% for i in range(8) %}
                    <option value="{{ i }}" {% if channel_idx == i %}selected{% endif %}>Channel {{ i }}</option>
                    {% endfor %}
                </select>
            </div>
            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
            <a href="/messages" class="btn btn-ghost btn-sm">Clear</a>
        </form>
    </div>
</div>

<!-- Messages List - Mobile Card View -->
<div class="lg:hidden space-y-3">
    {% for msg in messages %}
    <div class="card bg-base-100 shadow-sm">
        <div class="card-body p-3">
            <div class="flex items-start justify-between gap-2">
                <div class="flex items-center gap-2 min-w-0">
                    <span class="text-lg flex-shrink-0" title="{{ msg.message_type|capitalize }}">
                        {% if msg.message_type == 'channel' %}📻{% else %}👤{% endif %}
                    </span>
                    <div class="min-w-0">
                        <div class="font-medium text-sm truncate">
                            {% if msg.message_type == 'channel' %}
                            <span class="font-mono">CH{{ msg.channel_idx }}</span>
                            {% else %}
                                {% if msg.sender_tag_name or msg.sender_name %}
                                {{ msg.sender_tag_name or msg.sender_name }}
                                {% else %}
                                <span class="font-mono text-xs">{{ (msg.pubkey_prefix or '-')[:12] }}</span>
                                {% endif %}
                            {% endif %}
                        </div>
                        <div class="text-xs opacity-60">
                            {{ msg.received_at[:16].replace('T', ' ') if msg.received_at else '-' }}
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    {% if msg.snr is not none %}
                    <span class="badge badge-ghost badge-xs">{{ "%.1f"|format(msg.snr) }}dB</span>
                    {% endif %}
                    {% if msg.receivers and msg.receivers|length >= 1 %}
                    <div class="flex gap-0.5">
                        {% for recv in msg.receivers %}
                        <a href="/nodes/{{ recv.public_key }}" class="text-sm hover:opacity-70" title="{{ recv.tag_name or recv.name or recv.public_key[:12] }}">📡</a>
                        {% endfor %}
                    </div>
                    {% elif msg.received_by %}
                    <a href="/nodes/{{ msg.received_by }}" class="text-sm hover:opacity-70" title="{{ msg.receiver_tag_name or msg.receiver_name or msg.received_by[:12] }}">📡</a>
                    {% endif %}
                </div>
            </div>
            <p class="text-sm mt-2 break-words whitespace-pre-wrap">{{ msg.text or '-' }}</p>
        </div>
    </div>
    {% else %}
    <div class="text-center py-8 opacity-70">No messages found.</div>
    {% endfor %}
</div>

<!-- Messages Table - Desktop View -->
<div class="hidden lg:block overflow-x-auto overflow-y-visible bg-base-100 rounded-box shadow">
    <table class="table table-zebra">
        <thead>
            <tr>
                <th>Type</th>
                <th>Time</th>
                <th>From/Channel</th>
                <th>Message</th>
                <th class="text-center">SNR</th>
                <th>Receivers</th>
            </tr>
        </thead>
        <tbody>
            {% for msg in messages %}
            <tr class="hover align-top">
                <td class="text-lg" title="{{ msg.message_type|capitalize }}">
                    {% if msg.message_type == 'channel' %}📻{% else %}👤{% endif %}
                </td>
                <td class="text-sm whitespace-nowrap">
                    {{ msg.received_at[:19].replace('T', ' ') if msg.received_at else '-' }}
                </td>
                <td class="text-sm whitespace-nowrap">
                    {% if msg.message_type == 'channel' %}
                    <span class="font-mono">CH{{ msg.channel_idx }}</span>
                    {% else %}
                        {% if msg.sender_tag_name or msg.sender_name %}
                        <span class="font-medium">{{ msg.sender_tag_name or msg.sender_name }}</span>
                        {% else %}
                        <span class="font-mono text-xs">{{ (msg.pubkey_prefix or '-')[:12] }}</span>
                        {% endif %}
                    {% endif %}
                </td>
                <td class="break-words max-w-md" style="white-space: pre-wrap;">{{ msg.text or '-' }}</td>
                <td class="text-center whitespace-nowrap">
                    {% if msg.snr is not none %}
                    <span class="badge badge-ghost badge-sm">{{ "%.1f"|format(msg.snr) }}</span>
                    {% else %}
                    -
                    {% endif %}
                </td>
                <td>
                    {% if msg.receivers and msg.receivers|length >= 1 %}
                    <div class="flex gap-1">
                        {% for recv in msg.receivers %}
                        <a href="/nodes/{{ recv.public_key }}" class="text-lg hover:opacity-70" data-receiver-tooltip data-name="{{ recv.tag_name or recv.name or recv.public_key[:12] }}" data-timestamp="{{ recv.received_at }}">📡</a>
                        {% endfor %}
                    </div>
                    {% elif msg.received_by %}
                    <a href="/nodes/{{ msg.received_by }}" class="text-lg hover:opacity-70" title="{{ msg.receiver_tag_name or msg.receiver_name or msg.received_by[:12] }}">📡</a>
                    {% else %}
                    <span class="opacity-50">-</span>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" class="text-center py-8 opacity-70">No messages found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Pagination -->
{% if total_pages > 1 %}
<div class="flex justify-center mt-6">
    <div class="join">
        {% if page > 1 %}
        <a href="?page={{ page - 1 }}&message_type={{ message_type }}&channel_idx={{ channel_idx or '' }}&limit={{ limit }}" class="join-item btn btn-sm">Previous</a>
        {% else %}
        <button class="join-item btn btn-sm btn-disabled">Previous</button>
        {% endif %}

        {% for p in range(1, total_pages + 1) %}
            {% if p == page %}
            <button class="join-item btn btn-sm btn-active">{{ p }}</button>
            {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
            <a href="?page={{ p }}&message_type={{ message_type }}&channel_idx={{ channel_idx or '' }}&limit={{ limit }}" class="join-item btn btn-sm">{{ p }}</a>
            {% elif p == 2 or p == total_pages - 1 %}
            <button class="join-item btn btn-sm btn-disabled">...</button>
            {% endif %}
        {% endfor %}

        {% if page < total_pages %}
        <a href="?page={{ page + 1 }}&message_type={{ message_type }}&channel_idx={{ channel_idx or '' }}&limit={{ limit }}" class="join-item btn btn-sm">Next</a>
        {% else %}
        <button class="join-item btn btn-sm btn-disabled">Next</button>
        {% endif %}
    </div>
</div>
{% endif %}
{% endblock %}