{% extends "wagtailadmin/base.html" %}
{% load i18n %}

{% block titletag %}{% trans "Subscription Dashboard" %}{% endblock %}

{% block breadcrumbs %}
{% include "wagtailadmin/shared/breadcrumbs.html" with items=breadcrumb_items %}
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.breadcrumb_items = [
            {"url": "{% url 'wagtailadmin_home' %}", "label": "{% trans 'Home' %}"},
            {"url": "{% url 'wagtail_subscriptions_admin:dashboard' %}", "label": "{% trans 'Subscriptions' %}"},
            {"url": null, "label": "{% trans 'Dashboard' %}"}
        ];
    });
</script>
{% endblock %}

{% block content %}
{% include "wagtailadmin/shared/header.html" with title="Subscription Dashboard" icon="user" %}

<div class="dashboard-content">
    <!-- Key Metrics Cards -->
    <div class="metrics-grid">
        <div class="metric-card revenue">
            <div class="metric-icon">💰</div>
            <div class="metric-content">
                <h3>{% trans "Monthly Revenue" %}</h3>
                <div class="metric-value">${{ mrr|floatformat:2 }}</div>
                <div class="metric-change {% if growth_rate > 0 %}positive{% elif growth_rate < 0 %}negative{% else %}neutral{% endif %}">{{ growth_rate }}% {% trans "growth" %}</div>
            </div>
        </div>
        
        <div class="metric-card subscriptions">
            <div class="metric-icon">👥</div>
            <div class="metric-content">
                <h3>{% trans "Active Subscriptions" %}</h3>
                <div class="metric-value">{{ total_subscriptions }}</div>
                <div class="metric-change positive">+{{ new_subs_this_month }} {% trans "this month" %}</div>
            </div>
        </div>
        
        <div class="metric-card customers">
            <div class="metric-icon">🏢</div>
            <div class="metric-content">
                <h3>{% trans "Total Customers" %}</h3>
                <div class="metric-value">{{ total_customers }}</div>
                <div class="metric-change neutral">{{ churn_rate }}% {% trans "churn rate" %}</div>
            </div>
        </div>
        
        <div class="metric-card plans">
            <div class="metric-icon">📋</div>
            <div class="metric-content">
                <h3>{% trans "Active Plans" %}</h3>
                <div class="metric-value">{{ total_plans }}</div>
                <div class="metric-change neutral">{{ canceled_this_month }} {% trans "canceled" %}</div>
            </div>
        </div>
    </div>
    
    <!-- Plan Distribution -->
    {% if plan_distribution %}
    <div class="panel" style="margin-bottom: 30px;">
        <h2 class="panel-title">{% trans "Plan Distribution" %}</h2>
        <div style="padding: 20px;">
            <div class="plan-stats">
                {% for plan_data in plan_distribution %}
                <div class="plan-stat-item">
                    <div class="plan-stat-info">
                        <strong>{{ plan_data.plan__name }}</strong>
                        <span class="plan-stat-count">{{ plan_data.count }} {% trans "subscribers" %}</span>
                    </div>
                    <div class="plan-stat-revenue">${{ plan_data.revenue|floatformat:2 }}</div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
    
    <div class="row">
        <div class="col6">
            <div class="panel">
                <h2 class="panel-title">{% trans "Recent Subscriptions" %}</h2>
                {% if recent_subscriptions %}
                <table class="listing">
                    <thead>
                        <tr>
                            <th>{% trans "Customer" %}</th>
                            <th>{% trans "Plan" %}</th>
                            <th>{% trans "Status" %}</th>
                            <th>{% trans "Revenue" %}</th>
                            <th>{% trans "Date" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for subscription in recent_subscriptions %}
                        <tr>
                            <td>
                                <div class="customer-info">
                                    <strong>{{ subscription.user.get_full_name|default:subscription.user.username }}</strong>
                                    <br><small>{{ subscription.user.email }}</small>
                                </div>
                            </td>
                            <td><span class="plan-badge">{{ subscription.plan.name }}</span></td>
                            <td><span class="status-badge status-{{ subscription.status }}">{{ subscription.get_status_display }}</span></td>
                            <td><strong>${{ subscription.plan.price }}</strong></td>
                            <td>{{ subscription.created_at|date:"M j, Y" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="empty-state">
                    <div class="empty-icon">📊</div>
                    <h3>{% trans "No subscriptions yet" %}</h3>
                    <p>{% trans "Recent subscription activity will appear here" %}</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <div class="col6">
            <div class="panel">
                <h2 class="panel-title">{% trans "Recent Cancellations" %}</h2>
                {% if recent_cancellations %}
                <table class="listing">
                    <thead>
                        <tr>
                            <th>{% trans "Customer" %}</th>
                            <th>{% trans "Plan" %}</th>
                            <th>{% trans "Date" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for subscription in recent_cancellations %}
                        <tr>
                            <td>
                                <div class="customer-info">
                                    <strong>{{ subscription.user.get_full_name|default:subscription.user.username }}</strong>
                                    <br><small>{{ subscription.user.email }}</small>
                                </div>
                            </td>
                            <td><span class="plan-badge">{{ subscription.plan.name }}</span></td>
                            <td>{{ subscription.canceled_at|date:"M j, Y" }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="empty-state">
                    <div class="empty-icon">✅</div>
                    <h3>{% trans "No recent cancellations" %}</h3>
                    <p>{% trans "Great! No cancellations this month" %}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="row" style="margin-top: 30px;">
        <div class="col12">
            <div class="panel">
                <h2 class="panel-title">{% trans "Quick Actions" %}</h2>
                <div class="action-grid">
                    <a href="{% url 'wagtail_subscriptions_admin:plans' %}" class="action-card">
                        <div class="action-icon">📋</div>
                        <div class="action-content">
                            <h4>{% trans "Manage Plans" %}</h4>
                            <p>{% trans "Create and edit subscription plans" %}</p>
                        </div>
                    </a>
                    
                    <a href="{% url 'wagtail_subscriptions_admin:features' %}" class="action-card">
                        <div class="action-icon">⚙️</div>
                        <div class="action-content">
                            <h4>{% trans "Manage Features" %}</h4>
                            <p>{% trans "Configure modules and features" %}</p>
                        </div>
                    </a>
                    
                    <a href="{% url 'wagtail_subscriptions_admin:customers' %}" class="action-card">
                        <div class="action-icon">👥</div>
                        <div class="action-content">
                            <h4>{% trans "View Customers" %}</h4>
                            <p>{% trans "Manage customer accounts" %}</p>
                        </div>
                    </a>
                    
                    <a href="{% url 'wagtail_subscriptions_admin:settings' %}" class="action-card">
                        <div class="action-icon">🔧</div>
                        <div class="action-content">
                            <h4>{% trans "Settings" %}</h4>
                            <p>{% trans "Configure payment processors" %}</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: white;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
}

.metric-card.revenue { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.metric-card.subscriptions { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.metric-card.customers { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.metric-card.plans { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

.metric-icon {
    font-size: 2.5em;
    margin-right: 20px;
    opacity: 0.9;
}

.metric-content h3 {
    margin: 0 0 8px 0;
    font-size: 0.9em;
    opacity: 0.9;
    font-weight: 500;
}

.metric-value {
    font-size: 2.2em;
    font-weight: bold;
    margin: 0 0 4px 0;
}

.metric-change {
    font-size: 0.8em;
    opacity: 0.8;
}

.metric-change.positive { color: #28a745; }
.metric-change.negative { color: #dc3545; }
.metric-change.neutral { color: rgba(255,255,255,0.8); }

.plan-stats {
    display: grid;
    gap: 15px;
}

.plan-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #007bff;
}

.plan-stat-info strong {
    display: block;
    margin-bottom: 4px;
}

.plan-stat-count {
    font-size: 0.85em;
    color: #6c757d;
}

.plan-stat-revenue {
    font-weight: bold;
    color: #28a745;
    font-size: 1.1em;
}

.panel {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.panel-title {
    background: #f8f9fa;
    padding: 16px 20px;
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    border-bottom: 1px solid #e9ecef;
}

.action-grid {
    padding: 20px;
}

.action-card {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease;
    margin-bottom: 12px;
    border: 1px solid #e9ecef;
}

.action-card:hover {
    background-color: #f8f9fa;
    text-decoration: none;
}

.action-icon {
    font-size: 1.8em;
    margin-right: 16px;
    opacity: 0.8;
}

.action-content h4 {
    margin: 0 0 4px 0;
    font-size: 0.95em;
    font-weight: 600;
}

.action-content p {
    margin: 0;
    font-size: 0.85em;
    color: #6c757d;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active { background: #d4edda; color: #155724; }
.status-trialing { background: #cce7ff; color: #004085; }
.status-canceled { background: #f8d7da; color: #721c24; }

.plan-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

.customer-info strong {
    color: #333;
}

.customer-info small {
    color: #6c757d;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.empty-icon {
    font-size: 3em;
    margin-bottom: 16px;
}

.help-text {
    color: #6c757d;
    margin: 0;
    font-size: 0.9em;
}

.dashboard-content {
    padding: 0 50px 20px 50px;
}
</style>
{% endblock %}