{% extends "base.html" %}

{% block title %}Dashboard - Digital Branding Management{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="mb-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-2">Content Strategy Dashboard</h2>
        <p class="text-gray-600">Monitor your content progress across all platforms</p>
    </div>

    <!-- Overall Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
        <!-- Total Platforms -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-globe text-2xl text-brand-blue"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500">Active Platforms</p>
                    <p class="text-2xl font-semibold text-gray-900">{{ total_platforms }}</p>
                </div>
            </div>
        </div>

        <!-- Committed -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-clipboard-list text-2xl text-brand-blue"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500">Committed</p>
                    <p class="text-2xl font-semibold text-brand-blue">{{ committed_count }}</p>
                </div>
            </div>
        </div>

        <!-- Drafted -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-edit text-2xl text-brand-orange"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500">Drafted</p>
                    <p class="text-2xl font-semibold text-brand-orange">{{ drafted_count }}</p>
                </div>
            </div>
        </div>

        <!-- Published -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-2xl text-brand-green"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500">Published</p>
                    <p class="text-2xl font-semibold text-brand-green">{{ published_count }}</p>
                </div>
            </div>
        </div>

        <!-- Completion Rate -->
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-chart-line text-2xl text-brand-purple"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm text-gray-500">Completion Rate</p>
                    <p class="text-2xl font-semibold text-brand-purple">{{ overall_completion_rate }}%</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Content by Status Chart -->
    <div class="bg-white rounded-lg shadow p-6 mb-8">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Content Status Overview</h3>
        <div class="w-full bg-gray-200 rounded-full h-6 mb-4">
            {% if total_deliverables > 0 %}
                <div class="bg-gray-200 rounded-full h-6 relative overflow-hidden">
                    <div class="bg-brand-green h-full absolute top-0 left-0" style="width: {{ published_percentage }}%"></div>
                    <div class="bg-brand-orange h-full absolute top-0" style="left: {{ published_percentage }}%; width: {{ drafted_percentage }}%"></div>
                    <div class="bg-brand-blue h-full absolute top-0" style="left: calc({{ published_percentage }}% + {{ drafted_percentage }}%); width: {{ committed_percentage }}%"></div>
                </div>
            {% endif %}
        </div>
        <div class="flex justify-between text-sm text-gray-600">
            <span><i class="fas fa-circle text-brand-blue mr-1"></i>Committed ({{ committed_count }})</span>
            <span><i class="fas fa-circle text-brand-orange mr-1"></i>Drafted ({{ drafted_count }})</span>
            <span><i class="fas fa-circle text-brand-green mr-1"></i>Published ({{ published_count }})</span>
        </div>
    </div>

    <!-- Platform Cards - Kanban Style -->
    <div class="mb-8">
        <h3 class="text-xl font-semibold text-gray-900 mb-6">Platform Progress</h3>
        
        {% if platforms %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            {% for platform in platforms %}
            <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden">
                <!-- Platform Header -->
                <div class="px-6 py-4 bg-gradient-to-r from-brand-blue to-brand-purple">
                    <div class="flex items-center justify-between">
                        <h4 class="text-lg font-semibold text-white truncate">{{ platform.name }}</h4>
                        <span class="px-2 py-1 bg-white bg-opacity-20 rounded-full text-xs text-white">
                            {{ platform.get_platform_type_display }}
                        </span>
                    </div>
                    <p class="text-sm text-blue-100 mt-1">{{ platform.primary_content_type }}</p>
                </div>

                <!-- Platform Stats -->
                <div class="px-6 py-4">
                    <div class="flex justify-between items-center mb-4">
                        <span class="text-sm text-gray-500">Content Progress</span>
                        <span class="text-sm font-semibold text-gray-900">{{ platform.completion_percentage }}%</span>
                    </div>
                    
                    <!-- Progress Bar -->
                    <div class="w-full bg-gray-200 rounded-full h-2 mb-4">
                        <div class="bg-gradient-to-r from-brand-green to-green-400 h-2 rounded-full" 
                             style="width: {{ platform.completion_percentage }}%"></div>
                    </div>

                    <!-- Content Status Breakdown -->
                    <div class="grid grid-cols-3 gap-3 mb-4">
                        <div class="text-center">
                            <div class="text-lg font-semibold text-brand-blue">{{ platform.committed_content }}</div>
                            <div class="text-xs text-gray-500">Committed</div>
                        </div>
                        <div class="text-center">
                            <div class="text-lg font-semibold text-brand-orange">{{ platform.drafted_content }}</div>
                            <div class="text-xs text-gray-500">Drafted</div>
                        </div>
                        <div class="text-center">
                            <div class="text-lg font-semibold text-brand-green">{{ platform.published_content }}</div>
                            <div class="text-xs text-gray-500">Published</div>
                        </div>
                    </div>

                    <!-- Additional Info -->
                    <div class="flex justify-between items-center text-sm text-gray-500 mb-4">
                        <span><i class="fas fa-list-ul mr-1"></i>Total: {{ platform.total_content }}</span>
                        <span><i class="fas fa-lightbulb mr-1"></i>{{ platform.total_strategies }} strategies</span>
                    </div>

                    <!-- Action Button -->
                    <a href="{% url 'platform-detail' platform.id %}" 
                       class="w-full bg-brand-blue text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-blue-700 transition duration-200 flex items-center justify-center">
                        <i class="fas fa-eye mr-2"></i>View Details
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-12 bg-white rounded-lg shadow">
            <i class="fas fa-plus-circle text-4xl text-gray-400 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 mb-2">No platforms yet</h3>
            <p class="text-gray-500 mb-4">Get started by adding your first platform</p>
            <a href="/admin/dashboard/platform/add/" class="bg-brand-blue text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-blue-700">
                Add Platform
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Recent Activity & Alerts -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Recent Deliverables -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Recent Activity</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for deliverable in recent_deliverables|slice:":5" %}
                <div class="px-6 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900 truncate">{{ deliverable.title }}</p>
                            <p class="text-sm text-gray-500">{{ deliverable.platform.name }} • {{ deliverable.get_content_type_display }}</p>
                        </div>
                        <div class="flex items-center">
                            <span class="px-2 py-1 text-xs rounded-full 
                                {% if deliverable.status == 'published' %}bg-green-100 text-green-800
                                {% elif deliverable.status == 'drafted' %}bg-orange-100 text-orange-800
                                {% elif deliverable.status == 'committed' %}bg-blue-100 text-blue-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ deliverable.get_status_display }}
                            </span>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="px-6 py-8 text-center text-gray-500">
                    No recent activity
                </div>
                {% endfor %}
            </div>
        </div>

        <!-- Overdue & Alerts -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Alerts & Overdue</h3>
            </div>
            <div class="divide-y divide-gray-200">
                {% for deliverable in overdue_deliverables|slice:":5" %}
                <div class="px-6 py-4">
                    <div class="flex items-start">
                        <i class="fas fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900">{{ deliverable.title }}</p>
                            <p class="text-sm text-gray-500">{{ deliverable.platform.name }}</p>
                            <p class="text-xs text-red-600 mt-1">Due: {{ deliverable.target_date }}</p>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="px-6 py-8 text-center text-gray-500">
                    <i class="fas fa-check-circle text-green-500 text-2xl mb-2"></i>
                    <p>All caught up! No overdue items</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Add any dashboard-specific JavaScript here
    console.log('Dashboard loaded');
</script>
{% endblock %}