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

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-12">
            <h2 class="section-title">Command Center</h2>
            <p class="text-muted">Welcome to your secure unified messaging hub.</p>
        </div>
    </div>

    <div class="row g-4">
        <!-- Status Cards -->
        <div class="col-md-4">
            <div class="stats-card">
                <div class="card-body">
                    <span class="stats-label">Active Integrations</span>
                    <h3 class="stats-value">{{ total_active }}</h3>
                    <div class="stats-subtext">of {{ all_channels.count }} services</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stats-card">
                <div class="card-body">
                    <span class="stats-label">Unread Messages</span>
                    <h3 class="stats-value">0</h3>
                    <div class="stats-subtext">Across all platforms</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stats-card">
                <div class="card-body">
                    <span class="stats-label">Security Status</span>
                    <h3 class="stats-value text-success">Secure</h3>
                    <div class="stats-subtext">256-bit AES Active</div>
                </div>
            </div>
        </div>

        <!-- Recent Activity -->
        <div class="col-md-8">
            <div class="glass-card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Recent Conversations</h5>
                    <a href="#" class="btn btn-sm btn-link text-decoration-none">View All</a>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush bg-transparent">
                        {% for conv in recent_conversations %}
                        <div class="list-group-item bg-transparent border-secondary text-light px-4 py-3 d-flex align-items-center">
                            <div class="avatar-circle me-3">{{ conv.participant_name|first }}</div>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between">
                                    <h6 class="mb-0">{{ conv.participant_name }}</h6>
                                    <small class="text-muted">{{ conv.last_message_at|timesince }} ago</small>
                                </div>
                                <div class="text-muted small">{{ conv.channel.get_name_display }}</div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="p-5 text-center text-muted">
                            <p>No recent conversations found.</p>
                            <a href="{% url 'integrations' %}" class="btn btn-outline-primary btn-sm">Connect a Channel</a>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="col-md-4">
            <div class="glass-card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-3">
                        <a href="{% url 'integrations' %}" class="action-btn">
                            <span class="action-icon">➕</span>
                            <span class="action-text">Add Connection</span>
                        </a>
                        <button class="action-btn">
                            <span class="action-icon">🔍</span>
                            <span class="action-text">Global Search</span>
                        </button>
                        <button class="action-btn">
                            <span class="action-icon">🔒</span>
                            <span class="action-text">Security Settings</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
