{% 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 %}

<!-- Page Header with Gradient -->
<div class="page-header-gradient">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold mb-1">Social Media Dashboard</h1>
            <p class="text-blue-100 text-sm">Manage all your social media accounts in one place</p>
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="hh-stat-grid mb-6">
    <!-- Total Accounts -->
    <div class="hh-stat-card">
        <div class="hh-stat-header">
            <span class="hh-stat-label">Connected Accounts</span>
            <div class="hh-stat-icon blue">
                <i data-lucide="users" class="w-6 h-6"></i>
            </div>
        </div>
        <div class="hh-stat-value">{{ accounts|length }}</div>
        <span class="hh-badge hh-badge-success">Active</span>
    </div>
    
    <!-- Active Platforms -->
    <div class="hh-stat-card">
        <div class="hh-stat-header">
            <span class="hh-stat-label">Active Platforms</span>
            <div class="hh-stat-icon green">
                <i data-lucide="check-circle" class="w-6 h-6"></i>
            </div>
        </div>
        <div class="hh-stat-value">{{ accounts|dictsort:"account.is_active"|length }}</div>
        <span class="hh-badge hh-badge-info">Syncing</span>
    </div>
    
    <!-- Expired Tokens -->
    <div class="hh-stat-card">
        <div class="hh-stat-header">
            <span class="hh-stat-label">Expired Tokens</span>
            <div class="hh-stat-icon red">
                <i data-lucide="alert-triangle" class="w-6 h-6"></i>
            </div>
        </div>
        <div class="hh-stat-value">{{ accounts|dictsort:"is_expired"|length }}</div>
        <span class="hh-badge hh-badge-danger">Action Required</span>
    </div>
    
    <!-- Available Platforms -->
    <div class="hh-stat-card">
        <div class="hh-stat-header">
            <span class="hh-stat-label">Available Platforms</span>
            <div class="hh-stat-icon blue">
                <i data-lucide="plus-circle" class="w-6 h-6"></i>
            </div>
        </div>
        <div class="hh-stat-value">{{ platform_names|length }}</div>
        <span class="hh-badge hh-badge-info">Ready</span>
    </div>
</div>

<!-- Connected Accounts -->
{% if accounts %}
<div class="hh-section-card">
    <div class="hh-section-header">
        <div class="flex items-center gap-3">
            <div class="hh-section-icon">
                <i data-lucide="link" class="w-5 h-5"></i>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-800">
                    {% if selected_platform %}
                        {{ platform_names|get_item:selected_platform }} Account
                    {% else %}
                        Connected Accounts
                    {% endif %}
                </h3>
                <p class="text-sm text-gray-500">{{ accounts|length }} account(s) connected</p>
            </div>
        </div>
        <span class="hh-badge hh-badge-info">{{ accounts|length }}</span>
    </div>
    
    <div class="hh-table-container">
        <table class="hh-table">
            <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="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center bg-gray-100">
                                {% social_icon platform size=24 %}
                            </div>
                            <div>
                                <div class="font-semibold">{{ platform_names|get_item:platform }}</div>
                                {% if acc_data.account.is_active %}
                                    <span class="hh-badge hh-badge-success">
                                        <i data-lucide="circle-dot" class="w-3 h-3 inline mr-1"></i>
                                        {% if platform == 'META' %}
                                            Real-time
                                        {% else %}
                                            Polling
                                        {% endif %}
                                    </span>
                                {% endif %}
                            </div>
                        </div>
                    </td>
                    <td>
                        <span class="font-semibold">{{ acc_data.account.name }}</span>
                    </td>
                    <td>
                        <code class="text-gray-500 text-sm">{{ acc_data.account.platform_id|truncatechars:20 }}</code>
                    </td>
                    <td>
                        {% if acc_data.account.is_active %}
                            <span class="hh-badge hh-badge-success">
                                <i data-lucide="circle-dot" class="w-3 h-3 inline mr-1"></i> Active
                            </span>
                        {% else %}
                            <span class="hh-badge hh-badge-neutral">
                                <i data-lucide="circle" class="w-3 h-3 inline mr-1"></i> Inactive
                            </span>
                        {% endif %}
                        {% if acc_data.is_expired %}
                            <span class="hh-badge hh-badge-danger ml-1">
                                <i data-lucide="x-circle" class="w-3 h-3 inline mr-1"></i> Expired
                            </span>
                        {% endif %}
                    </td>
                    <td>
                        {% if acc_data.account.last_synced_at %}
                            <span class="text-gray-500 text-sm flex items-center gap-1">
                                <i data-lucide="calendar" class="w-3 h-3"></i>
                                {{ acc_data.account.last_synced_at|date:"M d, H:i" }}
                            </span>
                        {% else %}
                            <span class="text-gray-500 text-sm">Never</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="flex items-center gap-2">
                            <a href="{% url 'social:comments_list' platform %}" class="hh-btn hh-btn-primary hh-btn-sm">
                                <i data-lucide="message-circle" class="w-4 h-4"></i>
                            </a>
                            <a href="{% url 'social:sync' platform %}" class="hh-btn hh-btn-secondary hh-btn-sm">
                                <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                            </a>
                            {% if platform in 'TT,X,YT,META' %}
                                <a href="{% url 'social:sync_type' platform 'full' %}" class="hh-btn hh-btn-secondary hh-btn-sm">
                                    <i data-lucide="download" class="w-4 h-4"></i>
                                </a>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<!-- Connect Platforms Section -->
<div class="hh-section-card">
    <div class="hh-section-header">
        <div class="flex items-center gap-3">
            <div class="hh-section-icon">
                <i data-lucide="plug" class="w-5 h-5"></i>
            </div>
            <div>
                <h3 class="text-lg font-semibold text-gray-800">Connect Your Accounts</h3>
                <p class="text-sm text-gray-500">Connect platforms to start monitoring comments</p>
            </div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% for platform_code, platform_name in platform_names.items %}
            {% if not selected_platform or selected_platform == platform_code %}
            <div>
                {% if accounts|get_item:platform_code %}
                    <!-- Connected Platform Card -->
                    <div class="hh-card border-l-4 border-l-green-500">
                        <div class="hh-card-body">
                            <div class="flex items-center justify-between mb-4">
                                <div class="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center">
                                    {% social_icon platform_code size=28 %}
                                </div>
                                <span class="hh-badge hh-badge-success">Connected</span>
                            </div>
                            <h4 class="text-lg font-semibold mb-2">{{ platform_name }}</h4>
                            <p class="text-sm text-gray-500 mb-4">Account is active and syncing</p>
                            
                            <a href="{% url 'social:comments_list' platform_code %}" class="hh-btn hh-btn-primary hh-btn-block">
                                <i data-lucide="message-circle" class="w-4 h-4"></i>
                                View Comments
                            </a>
                        </div>
                    </div>
                {% else %}
                    <!-- Unconnected Platform Card -->
                    <a href="{% url 'social:auth_start' platform_code %}" class="hh-card block hover:shadow-md transition-shadow">
                        <div class="hh-card-body">
                            <div class="flex items-center justify-between mb-4">
                                <div class="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center">
                                    {% social_icon platform_code size=28 %}
                                </div>
                                <span class="hh-badge hh-badge-neutral">Connect</span>
                            </div>
                            <h4 class="text-lg font-semibold mb-2">{{ platform_name }}</h4>
                            <p class="text-sm text-gray-500 mb-4">Click to connect your account</p>
                            
                            <div class="hh-btn hh-btn-primary hh-btn-block">
                                <i data-lucide="plus" class="w-4 h-4"></i>
                                Connect
                            </div>
                        </div>
                    </a>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
    </div>
</div>

<!-- Webhook Information -->
<div class="hh-section-card">
    <div class="hh-section-header">
        <div class="flex items-center gap-3">
            <div class="hh-section-icon">
                <i data-lucide="zap" class="w-5 h-5"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-800">Webhook Support Information</h3>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Meta -->
        <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                {% social_icon 'META' size=20 %}
            </div>
            <div>
                <h6 class="font-bold text-sm">Meta (Facebook/Instagram)</h6>
                <div class="flex items-center gap-2 mt-1">
                    <span class="hh-badge hh-badge-success">Webhooks</span>
                    <span class="text-xs text-gray-500">Real-time updates</span>
                </div>
            </div>
        </div>
        
        <!-- LinkedIn -->
        <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
                {% social_icon 'LI' size=20 %}
            </div>
            <div>
                <h6 class="font-bold text-sm">LinkedIn</h6>
                <div class="flex items-center gap-2 mt-1">
                    <span class="hh-badge hh-badge-info">Polling</span>
                    <span class="text-xs text-gray-500">Periodic sync</span>
                </div>
            </div>
        </div>
        
        <!-- Google Reviews -->
        <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center">
                {% social_icon 'GO' size=20 %}
            </div>
            <div>
                <h6 class="font-bold text-sm">Google Reviews</h6>
                <div class="flex items-center gap-2 mt-1">
                    <span class="hh-badge hh-badge-info">Polling</span>
                    <span class="text-xs text-gray-500">Periodic sync</span>
                </div>
            </div>
        </div>
        
        <!-- TikTok -->
        <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-gray-800 flex items-center justify-center">
                {% social_icon 'TT' size=20 %}
            </div>
            <div>
                <h6 class="font-bold text-sm">TikTok</h6>
                <div class="flex items-center gap-2 mt-1">
                    <span class="hh-badge hh-badge-info">Polling</span>
                    <span class="text-xs text-gray-500">Periodic sync</span>
                </div>
            </div>
        </div>
        
        <!-- X (Twitter) -->
        <div class="flex items-center gap-4 p-4 bg-gray-900 text-white rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
                {% social_icon 'X' size=20 %}
            </div>
            <div>
                <h6 class="font-bold text-sm">X (Twitter)</h6>
                <div class="flex items-center gap-2 mt-1">
                    <span class="hh-badge hh-badge-info">Polling</span>
                    <span class="text-xs text-gray-400">Periodic sync</span>
                </div>
            </div>
        </div>
        
        <!-- YouTube -->
        <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
            <div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center">
                {% social_icon 'YT' size=20 %}
            </div>
            <div>
                <h6 class="font-bold text-sm">YouTube</h6>
                <div class="flex items-center gap-2 mt-1">
                    <span class="hh-badge hh-badge-info">Polling</span>
                    <span class="text-xs text-gray-500">Periodic sync</span>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}