{% extends 'base.html' %}

{% block title %}Dashboard | FlowBot{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row mb-4">
        <div class="col">
            <h2 class="fw-bold">Welcome back, {{ user.username }}!</h2>
            <p class="text-muted">Here's what's happening with your bots today.</p>
        </div>
        <div class="col-auto">
            <a href="/admin/core/fanpage/add/" class="btn btn-coral px-4">Connect Page</a>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card p-4 text-center">
                <h6 class="text-uppercase text-muted small fw-bold">Active Pages</h6>
                <div class="display-4 fw-bold text-indigo">{{ fanpage_count }}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card p-4 text-center">
                <h6 class="text-uppercase text-muted small fw-bold">Total Flows</h6>
                <div class="display-4 fw-bold text-indigo">{{ flow_count }}</div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card p-4 text-center">
                <h6 class="text-uppercase text-muted small fw-bold">Today's Messages</h6>
                <div class="display-4 fw-bold text-coral">0</div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card p-4 mb-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0 fw-bold">Connected Fanpages</h5>
                    <a href="{% url 'fanpage_list' %}" class="btn btn-sm btn-link text-indigo">View All</a>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Page Name</th>
                                <th>Status</th>
                                <th>Active Flow</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for page in fanpages %}
                            <tr>
                                <td>
                                    <div class="fw-bold">{{ page.name }}</div>
                                    <small class="text-muted">ID: {{ page.page_id }}</small>
                                </td>
                                <td>
                                    {% if page.is_active %}
                                        <span class="badge bg-success-subtle text-success">Active</span>
                                    {% else %}
                                        <span class="badge bg-danger-subtle text-danger">Paused</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% with page.flows.first as flow %}
                                        {% if flow %}{{ flow.name }}{% else %}<span class="text-muted italic">None</span>{% endif %}
                                    {% endwith %}
                                </td>
                                <td>
                                    <a href="/admin/core/fanpage/{{ page.id }}/change/" class="btn btn-sm btn-outline-indigo">Manage</a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">No pages connected yet.</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card p-4">
                <h5 class="mb-4 fw-bold">Recent Activity</h5>
                <div class="activity-feed">
                    {% for log in recent_logs %}
                    <div class="mb-3 border-bottom pb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="badge {% if log.sender_type == 'user' %}bg-info-subtle text-info{% else %}bg-indigo-subtle text-indigo{% endif %} px-2">
                                {{ log.sender_type|upper }}
                            </span>
                            <small class="text-muted">{{ log.timestamp|timesince }} ago</small>
                        </div>
                        <p class="small mb-0 text-truncate">{{ log.message_text }}</p>
                    </div>
                    {% empty %}
                    <p class="text-center text-muted py-5">No recent activity found.</p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
