{% extends 'manager/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "Acquisition Analytics" %}{% endblock %}

{% block sidebar.acquisition %} class="active" {% endblock %}

{% block header.add_script %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
    .metric-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .metric-card.tracked {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    .metric-card.rate {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
    .metric-card.untracked {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
    .metric-value {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 5px;
    }
    .metric-label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    .dashboard-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .source-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        border-bottom: 1px solid #f0f0f0;
    }
    .source-item:last-child {
        border-bottom: none;
    }
    .source-name {
        font-weight: 500;
        font-size: 1rem;
    }
    .source-stats {
        text-align: right;
    }
    .source-count {
        font-size: 1.3rem;
        font-weight: bold;
        color: #667eea;
    }
    .source-percentage {
        font-size: 0.85rem;
        color: #888;
    }
    .progress-bar-wrapper {
        height: 8px;
        background: #f0f0f0;
        border-radius: 4px;
        margin-top: 8px;
        overflow: hidden;
    }
    .progress-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        transition: width 0.3s ease;
    }
    .filter-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .filter-btn {
        padding: 8px 16px;
        border: 2px solid #667eea;
        background: white;
        color: #667eea;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s;
        text-decoration: none;
        font-size: 0.9rem;
    }
    .filter-btn:hover, .filter-btn.active {
        background: #667eea;
        color: white;
    }
    .engagement-badge {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: bold;
    }
    .engagement-high { background: #e8f5e9; color: #2e7d32; }
    .engagement-medium { background: #fff3e0; color: #f57c00; }
    .engagement-low { background: #ffebee; color: #c62828; }
    .recent-user {
        padding: 10px;
        border-left: 3px solid #667eea;
        margin-bottom: 10px;
        background: #f9f9f9;
    }
    .chart-container {
        position: relative;
        height: 300px;
        margin-top: 20px;
    }
</style>
{% endblock %}

{% block content %}
<div class="content container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-sm-12">
                <h3 class="page-title">{% trans "User Acquisition Analytics" %}</h3>
                <ul class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'panel-manager-dashboard' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item active">{% trans "Acquisition Analytics" %}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Time Range Filter -->
    <div class="filter-buttons">
        <a href="?time_range=today" class="filter-btn {% if time_range == 'today' %}active{% endif %}">
            {% trans "Today" %}
        </a>
        <a href="?time_range=week" class="filter-btn {% if time_range == 'week' %}active{% endif %}">
            {% trans "Last 7 Days" %}
        </a>
        <a href="?time_range=month" class="filter-btn {% if time_range == 'month' %}active{% endif %}">
            {% trans "Last 30 Days" %}
        </a>
        <a href="?time_range=3months" class="filter-btn {% if time_range == '3months' %}active{% endif %}">
            {% trans "Last 3 Months" %}
        </a>
        <a href="?time_range=all" class="filter-btn {% if time_range == 'all' %}active{% endif %}">
            {% trans "All Time" %}
        </a>
    </div>

    <!-- Key Metrics Row -->
    <div class="row">
        <div class="col-xl-4 col-md-6">
            <div class="metric-card tracked">
                <div class="metric-value">{{ total_tracked|default:0 }}</div>
                <div class="metric-label">{% trans "Users with Tracked Source" %}</div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6">
            <div class="metric-card rate">
                <div class="metric-value">{{ tracking_rate|default:0 }}%</div>
                <div class="metric-label">{% trans "Tracking Rate" %}</div>
                <small>{{ total_users|default:0 }} {% trans "total users" %}</small>
            </div>
        </div>
        <div class="col-xl-4 col-md-6">
            <div class="metric-card untracked">
                <div class="metric-value">{{ untracked_users|default:0 }}</div>
                <div class="metric-label">{% trans "Untracked Users" %}</div>
                <small>{% trans "Need to ask for source" %}</small>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="row">
        <!-- Acquisition Sources Breakdown -->
        <div class="col-lg-6">
            <div class="dashboard-section">
                <h4>{% trans "Acquisition Sources" %}</h4>
                <div class="chart-container">
                    <canvas id="sourceChart"></canvas>
                </div>
                <div style="margin-top: 20px;">
                    {% for item in acquisition_data %}
                    <div class="source-item">
                        <div>
                            <div class="source-name">{{ item.name }}</div>
                            <div class="progress-bar-wrapper">
                                <div class="progress-bar-fill" style="width: {{ item.percentage }}%"></div>
                            </div>
                        </div>
                        <div class="source-stats">
                            <div class="source-count">{{ item.count }}</div>
                            <div class="source-percentage">{{ item.percentage }}%</div>
                        </div>
                    </div>
                    {% empty %}
                    <p class="text-center text-muted">{% trans "No acquisition data available yet" %}</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <!-- Source Engagement -->
        <div class="col-lg-6">
            <div class="dashboard-section">
                <h4>{% trans "Source Quality - 30-Day Engagement" %}</h4>
                <p class="text-muted small">{% trans "Percentage of users from each source who logged in within the last 30 days" %}</p>
                {% for item in source_engagement %}
                <div class="source-item">
                    <div>
                        <div class="source-name">{{ item.source }}</div>
                        <small class="text-muted">{{ item.active_users }} / {{ item.total_users }} {% trans "users active" %}</small>
                    </div>
                    <div>
                        <span class="engagement-badge {% if item.engagement_rate >= 70 %}engagement-high{% elif item.engagement_rate >= 40 %}engagement-medium{% else %}engagement-low{% endif %}">
                            {{ item.engagement_rate }}%
                        </span>
                    </div>
                </div>
                {% empty %}
                <p class="text-center text-muted">{% trans "No engagement data available" %}</p>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Revenue by Source -->
    <div class="row">
        <div class="col-lg-12">
            <div class="dashboard-section">
                <h4>{% trans "Revenue by Acquisition Source" %}</h4>
                <p class="text-muted small">{% trans "Total revenue and conversion rates from each acquisition channel" %}</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>{% trans "Source" %}</th>
                                <th>{% trans "Total Users" %}</th>
                                <th>{% trans "Paying Users" %}</th>
                                <th>{% trans "Conversion Rate" %}</th>
                                <th>{% trans "Total Revenue" %}</th>
                                <th>{% trans "Revenue per User" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in source_revenue %}
                            <tr>
                                <td><strong>{{ item.source }}</strong></td>
                                <td>{{ item.total_users }}</td>
                                <td>{{ item.paying_users }}</td>
                                <td>
                                    <span class="engagement-badge {% if item.conversion_rate >= 10 %}engagement-high{% elif item.conversion_rate >= 5 %}engagement-medium{% else %}engagement-low{% endif %}">
                                        {{ item.conversion_rate }}%
                                    </span>
                                </td>
                                <td>{{ item.revenue|floatformat:0 }} تومان</td>
                                <td>{{ item.revenue|divisibleby:item.total_users|default:0|floatformat:0 }} تومان</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="6" class="text-center text-muted">{% trans "No revenue data available" %}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Trend Analysis & Other Sources -->
    <div class="row">
        <!-- 30-Day Trend -->
        {% if trend_data %}
        <div class="col-lg-8">
            <div class="dashboard-section">
                <h4>{% trans "30-Day Acquisition Trend" %}</h4>
                <div class="chart-container">
                    <canvas id="trendChart"></canvas>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- "Other" Sources Detail -->
        <div class="col-lg-4">
            <div class="dashboard-section">
                <h4>{% trans '"Other" Sources Detail' %}</h4>
                <p class="text-muted small">{% trans "What users entered when they selected 'Other'" %}</p>
                {% for item in other_sources %}
                <div class="source-item">
                    <div class="source-name" style="font-size: 0.9rem;">{{ item.acquisition_details }}</div>
                    <div class="source-count" style="font-size: 1rem;">{{ item.count }}</div>
                </div>
                {% empty %}
                <p class="text-center text-muted">{% trans "No 'other' sources recorded yet" %}</p>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Recent Acquisitions -->
    <div class="row">
        <div class="col-lg-12">
            <div class="dashboard-section">
                <h4>{% trans "Recent Acquisitions" %}</h4>
                <div class="row">
                    {% for user in recent_acquisitions %}
                    <div class="col-lg-6">
                        <div class="recent-user">
                            <div style="display: flex; justify-content: space-between;">
                                <div>
                                    <strong>{{ user.name }}</strong>
                                    <br>
                                    <small class="text-muted">{{ user.phone }}</small>
                                </div>
                                <div style="text-align: right;">
                                    <span class="badge badge-primary">{{ user.source }}</span>
                                    <br>
                                    <small class="text-muted">{{ user.date|date:"Y-m-d H:i" }}</small>
                                </div>
                            </div>
                            {% if user.details != '-' %}
                            <div style="margin-top: 5px; padding-top: 5px; border-top: 1px solid #e0e0e0;">
                                <small><strong>{% trans "Details:" %}</strong> {{ user.details }}</small>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% empty %}
                    <div class="col-12">
                        <p class="text-center text-muted">{% trans "No recent acquisitions" %}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Pie Chart for Acquisition Sources
const sourceData = [
    {% for item in acquisition_data %}
    { label: '{{ item.name }}', value: {{ item.count }}, percentage: {{ item.percentage }} },
    {% endfor %}
];

const sourceCtx = document.getElementById('sourceChart');
if (sourceCtx && sourceData.length > 0) {
    new Chart(sourceCtx, {
        type: 'doughnut',
        data: {
            labels: sourceData.map(item => item.label),
            datasets: [{
                data: sourceData.map(item => item.value),
                backgroundColor: [
                    '#667eea', '#764ba2', '#f093fb', '#f5576c',
                    '#4facfe', '#00f2fe', '#43e97b', '#38f9d7',
                    '#fa709a', '#fee140'
                ],
                borderWidth: 2,
                borderColor: '#fff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const item = sourceData[context.dataIndex];
                            return item.label + ': ' + item.value + ' (' + item.percentage + '%)';
                        }
                    }
                }
            }
        }
    });
}

// Line Chart for 30-Day Trend
{% if trend_data %}
const trendData = [
    {% for item in trend_data %}
    { date: '{{ item.date }}', count: {{ item.count }} },
    {% endfor %}
];

const trendCtx = document.getElementById('trendChart');
if (trendCtx && trendData.length > 0) {
    new Chart(trendCtx, {
        type: 'line',
        data: {
            labels: trendData.map(item => item.date),
            datasets: [{
                label: '{% trans "New Users" %}',
                data: trendData.map(item => item.count),
                borderColor: '#667eea',
                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}
{% endif %}
</script>
{% endblock %}