{% extends 'layouts/base.html' %}
{% load social_filters %}
{% load social_icons %}

{% block title %}Dashboard - Social{% endblock %}
{% block page_title %}Social Media Dashboard{% endblock %}
{% block page_subtitle %}Manage all your social media accounts in one place{% endblock %}

{% block content %}

<!-- Statistics Cards -->
<div class="row g-4 mb-4">
    <!-- Total Accounts -->
    <div class="col-md-6 col-xl-3">
        <div class="card hover-lift">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="avatar avatar-lg bg-blue">
                        <i class="bi bi-people"></i>
                    </div>
                    <span class="badge badge-soft-success">Active</span>
                </div>
                <h3 class="stat-value">{{ accounts|length }}</h3>
                <p class="stat-label">Connected Accounts</p>
            </div>
        </div>
    </div>
    
    <!-- Active Platforms -->
    <div class="col-md-6 col-xl-3">
        <div class="card hover-lift">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="avatar avatar-lg bg-success">
                        <i class="bi bi-check-circle"></i>
                    </div>
                    <span class="badge badge-soft-info">Syncing</span>
                </div>
                <h3 class="stat-value">
                    {{ accounts|dictsort:"account.is_active"|length }}
                </h3>
                <p class="stat-label">Active Platforms</p>
            </div>
        </div>
    </div>
    
    <!-- Expired Tokens -->
    <div class="col-md-6 col-xl-3">
        <div class="card hover-lift">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="avatar avatar-lg bg-red">
                        <i class="bi bi-exclamation-triangle"></i>
                    </div>
                    <span class="badge badge-soft-danger">Action</span>
                </div>
                <h3 class="stat-value">
                    {{ accounts|dictsort:"is_expired"|length }}
                </h3>
                <p class="stat-label">Expired Tokens</p>
            </div>
        </div>
    </div>
    
    <!-- Available Platforms -->
    <div class="col-md-6 col-xl-3">
        <div class="card hover-lift">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="avatar avatar-lg bg-blue">
                        <i class="bi bi-plus-circle"></i>
                    </div>
                    <span class="badge badge-soft-primary">Ready</span>
                </div>
                <h3 class="stat-value">{{ platform_names|length }}</h3>
                <p class="stat-label">Available Platforms</p>
            </div>
        </div>
    </div>
</div>

<!-- Connected Accounts -->
{% if accounts %}
<div class="card mb-4">
    <div class="card-header bg-gradient-teal text-white">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h5 class="card-title mb-1">
                    {% if selected_platform %}
                        {{ platform_names|get_item:selected_platform }} Account
                    {% else %}
                        Connected Accounts
                    {% endif %}
                </h5>
                <small class="opacity-75">{{ accounts|length }} account(s) connected</small>
            </div>
            <span class="badge bg-white text-primary fw-bold fs-6">{{ accounts|length }}</span>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Platform</th>
                        <th>Account Name</th>
                        <th>Platform ID</th>
                        <th>Status</th>
                        <th>Last Sync</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for platform, acc_data in accounts.items %}
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                <div class="avatar bg-primary" style="background: var(--platform-{{ platform }});">
                                    {% social_icon platform %}
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ platform_names|get_item:platform }}</div>
                                    {% if acc_data.account.is_active %}
                                        <div class="badge badge-soft-success">
                                            <i class="bi bi-circle-fill me-1"></i>
                                            {% if platform == 'META' %}
                                                Real-time
                                            {% else %}
                                                Polling
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </td>
                        <td>
                            <span class="fw-semibold">{{ acc_data.account.name }}</span>
                        </td>
                        <td>
                            <code class="text-muted">{{ acc_data.account.platform_id|truncatechars:20 }}</code>
                        </td>
                        <td>
                            {% if acc_data.account.is_active %}
                                <span class="badge bg-success">
                                    <i class="bi bi-circle-fill me-1"></i> Active
                                </span>
                            {% else %}
                                <span class="badge bg-secondary">
                                    <i class="bi bi-circle me-1"></i> Inactive
                                </span>
                            {% endif %}
                            {% if acc_data.is_expired %}
                                <span class="badge bg-danger ms-1">
                                    <i class="bi bi-x-circle me-1"></i> Expired
                                </span>
                            {% endif %}
                        </td>
                        <td>
                            {% if acc_data.account.last_synced_at %}
                                <span class="text-muted small">
                                    <i class="bi bi-calendar"></i>
                                    {{ acc_data.account.last_synced_at|date:"M d, H:i" }}
                                </span>
                            {% else %}
                                <span class="text-muted small">Never</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex gap-2">
                                <a href="{% url 'social:comments_list' platform %}" class="btn btn-primary btn-sm">
                                    <i class="bi bi-chat-dots"></i>
                                </a>
                                <a href="{% url 'social:sync' platform %}" class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-arrow-repeat"></i>
                                </a>
                                {% if platform in 'TT,X,YT,META' %}
                                    <a href="{% url 'social:sync_type' platform 'full' %}" class="btn btn-outline-secondary btn-sm">
                                        <i class="bi bi-download"></i>
                                    </a>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<!-- Connect Platforms Section -->
<div class="mb-4">
    <h5 class="mb-3">
        <i class="bi bi-plug text-primary"></i>
        Connect Your Accounts
    </h5>
    <p class="text-muted mb-4">Connect platforms to start monitoring comments</p>
    
    <div class="row g-4">
        {% for platform_code, platform_name in platform_names.items %}
            {% if not selected_platform or selected_platform == platform_code %}
            <div class="col-md-6 col-xl-4">
                {% if accounts|get_item:platform_code %}
                    <!-- Connected Platform Card -->
                    <div class="card border-success h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="avatar avatar-lg bg-success">
                                    {% social_icon platform_code %}
                                </div>
                                <span class="badge bg-success">Connected</span>
                            </div>
                            <h5 class="card-title">{{ platform_name }}</h5>
                            <p class="text-muted small mb-3">Account is active and syncing</p>
                            
                            <a href="{% url 'social:comments_list' platform_code %}" class="btn btn-primary w-100">
                                <i class="bi bi-chat-dots me-2"></i> View Comments
                            </a>
                        </div>
                    </div>
                {% else %}
                    <!-- Unconnected Platform Card -->
                    <a href="{% url 'social:auth_start' platform_code %}" class="card h-100 text-decoration-none hover-lift">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div class="avatar avatar-lg bg-light text-muted">
                                    {% social_icon platform_code %}
                                </div>
                                <span class="badge bg-secondary">Connect</span>
                            </div>
                            <h5 class="card-title">{{ platform_name }}</h5>
                            <p class="text-muted small mb-3">Click to connect your account</p>
                            
                            <div class="btn btn-primary w-100">
                                <i class="bi bi-plus-lg me-2"></i> Connect
                            </div>
                        </div>
                    </a>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

<!-- Webhook Information -->
<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">
            <i class="bi bi-bolt text-warning me-2"></i>
            Webhook Support Information
        </h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-6">
                <div class="d-flex gap-3 p-3 bg-light rounded">
                    <div class="avatar bg-primary">
                        <i class="bi bi-facebook"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">Meta (Facebook/Instagram)</h6>
                        <div class="d-flex gap-2 align-items-center">
                            <span class="badge bg-success">Webhooks</span>
                            <span class="text-muted small">Real-time updates</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="d-flex gap-3 p-3 bg-light rounded">
                    <div class="avatar bg-primary">
                        <i class="bi bi-linkedin"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">LinkedIn</h6>
                        <div class="d-flex gap-2 align-items-center">
                            <span class="badge bg-primary">Polling</span>
                            <span class="text-muted small">Periodic sync</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="d-flex gap-3 p-3 bg-light rounded">
                    <div class="avatar bg-danger">
                        <i class="bi bi-google"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">Google Reviews</h6>
                        <div class="d-flex gap-2 align-items-center">
                            <span class="badge bg-primary">Polling</span>
                            <span class="text-muted small">Periodic sync</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="d-flex gap-3 p-3 bg-light rounded">
                    <div class="avatar bg-dark">
                        <i class="bi bi-music-note-beamed"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">TikTok</h6>
                        <div class="d-flex gap-2 align-items-center">
                            <span class="badge bg-primary">Polling</span>
                            <span class="text-muted small">Periodic sync</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="d-flex gap-3 p-3 bg-dark text-white rounded">
                    <div class="avatar bg-white text-dark">
                        <i class="bi bi-twitter-x"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">X (Twitter)</h6>
                        <div class="d-flex gap-2 align-items-center">
                            <span class="badge bg-primary">Polling</span>
                            <span class="text-white-50 small">Periodic sync</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="d-flex gap-3 p-3 bg-light rounded">
                    <div class="avatar bg-danger">
                        <i class="bi bi-youtube"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-1">YouTube</h6>
                        <div class="d-flex gap-2 align-items-center">
                            <span class="badge bg-primary">Polling</span>
                            <span class="text-muted small">Periodic sync</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}