{% extends 'base.html' %}
{% load static %}

{% block page_title %}Analytics Dashboard{% endblock %}

{% block header_actions %}
<div class="btn-group me-2">
    <button type="button" class="btn btn-sm btn-primary" onclick="refreshAnalytics()">
        <i class="fas fa-sync-alt me-1"></i> Refresh
    </button>
    <button type="button" class="btn btn-sm btn-success" onclick="exportAnalytics()">
        <i class="fas fa-file-export me-1"></i> Export
    </button>
    <a href="{% url 'dashboard' %}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back
    </a>
</div>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <!-- Key Metrics -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-primary h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-primary text-uppercase mb-1">
                            Total Products
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ total_products|default:"0" }}</div>
                        <div class="text-muted">In inventory</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-primary text-white">
                            <i class="fas fa-boxes"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-success h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-success text-uppercase mb-1">
                            Total Customers
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ total_customers|default:"0" }}</div>
                        <div class="text-muted">Unique buyers</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-success text-white">
                            <i class="fas fa-users"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-warning h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-warning text-uppercase mb-1">
                            Stock Value
                        </div>
                        <div class="h5 mb-0 fw-bold">KSh {{ stock_value|default:"0"|floatformat:2 }}</div>
                        <div class="text-muted">Inventory worth</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-warning text-white">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card stat-card border-left-danger h-100">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs fw-bold text-danger text-uppercase mb-1">
                            Overdue Loans
                        </div>
                        <div class="h5 mb-0 fw-bold">{{ overdue_loans.count|default:"0" }}</div>
                        <div class="text-muted">Require attention</div>
                    </div>
                    <div class="col-auto">
                        <div class="stat-icon bg-danger text-white">
                            <i class="fas fa-exclamation-triangle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Sales Trend Chart -->
    <div class="col-lg-8 mb-4">
        <div class="card shadow h-100">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>Sales Trend - Last 30 Days</h5>
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="chartPeriod" data-bs-toggle="dropdown">
                        30 Days
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" onclick="changeChartPeriod(7)">7 Days</a></li>
                        <li><a class="dropdown-item" href="#" onclick="changeChartPeriod(30)">30 Days</a></li>
                        <li><a class="dropdown-item" href="#" onclick="changeChartPeriod(90)">90 Days</a></li>
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container" style="height: 300px;">
                    <canvas id="salesTrendChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Top Products -->
    <div class="col-lg-4 mb-4">
        <div class="card shadow h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-trophy me-2"></i>Top 5 Products</h5>
            </div>
            <div class="card-body">
                <div class="list-group list-group-flush">
                    {% for product in top_products|slice:":5" %}
                    <div class="list-group-item px-0">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">{{ product.product__name|truncatechars:20 }}</h6>
                                <small class="text-muted">{{ product.total_sold }} units sold</small>
                            </div>
                            <div class="text-end">
                                <strong>KSh {{ product.total_revenue|floatformat:2 }}</strong>
                                <div class="progress mt-1" style="width: 100px; height: 5px;">
                                    <div class="progress-bar bg-success" style="width: {{ product.percentage|default:0 }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="text-center py-4">
                        <i class="fas fa-chart-bar fa-3x text-muted mb-3"></i>
                        <p class="text-muted">No sales data available</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Category Distribution -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>Category Distribution</h5>
            </div>
            <div class="card-body">
                <div class="chart-container" style="height: 250px;">
                    <canvas id="categoryChart"></canvas>
                </div>
                <div class="mt-3">
                    <div class="row">
                        {% for category in category_distribution|slice:":4" %}
                        <div class="col-6 mb-2">
                            <div class="d-flex align-items-center">
                                <div class="rounded-circle me-2" style="width: 10px; height: 10px; background-color: {{ category.color }}"></div>
                                <small>{{ category.name|truncatechars:15 }}</small>
                                <small class="ms-auto">{{ category.percentage|floatformat:1 }}%</small>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Payment Method Distribution -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow h-100">
            <div class="card-header bg-white">
                <h5 class="mb-0"><i class="fas fa-credit-card me-2"></i>Payment Methods</h5>
            </div>
            <div class="card-body">
                <div class="chart-container" style="height: 250px;">
                    <canvas id="paymentChart"></canvas>
                </div>
                <div class="mt-3">
                    <table class="table table-sm">
                        <tbody>
                            <tr>
                                <td>Cash</td>
                                <td class="text-end">{{ payment_stats.cash|default:"0" }}%</td>
                            </tr>
                            <tr>
                                <td>M-Pesa</td>
                                <td class="text-end">{{ payment_stats.mpesa|default:"0" }}%</td>
                            </tr>
                            <tr>
                                <td>Card</td>
                                <td class="text-end">{{ payment_stats.card|default:"0" }}%</td>
                            </tr>
                            <tr>
                                <td>Credit</td>
                                <td class="text-end">{{ payment_stats.credit|default:"0" }}%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Overdue Loans -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow">
            <div class="card-header bg-danger text-white">
                <h5 class="mb-0"><i class="fas fa-exclamation-triangle me-2"></i>Overdue Loans</h5>
            </div>
            <div class="card-body">
                {% if overdue_loans %}
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Borrower</th>
                                <th>Amount</th>
                                <th>Due Date</th>
                                <th>Days Overdue</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for loan in overdue_loans|slice:":5" %}
                            <tr>
                                <td>{{ loan.borrower_name|truncatechars:15 }}</td>
                                <td>KSh {{ loan.total_due|floatformat:2 }}</td>
                                <td>{{ loan.due_date|date:"M d, Y" }}</td>
                                <td>
                                    <span class="badge bg-danger">
                                        {% if loan.days_remaining < 0 %}
                                            {{ loan.days_remaining|stringformat:"d"|slice:"1:" }} days
                                        {% else %}
                                            0 days
                                        {% endif %}
                                    </span>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if overdue_loans.count > 5 %}
                <div class="text-center mt-2">
                    <a href="{% url 'loans_dashboard' %}?status=active" class="btn btn-sm btn-outline-danger">
                        View All Overdue Loans
                    </a>
                </div>
                {% endif %}
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                    <p class="text-muted">No overdue loans</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Low Stock Products -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow">
            <div class="card-header bg-warning text-white">
                <h5 class="mb-0"><i class="fas fa-exclamation-circle me-2"></i>Low Stock Alert</h5>
            </div>
            <div class="card-body">
                {% if low_stock_products %}
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Current Stock</th>
                                <th>Min Level</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for product in low_stock_products|slice:":5" %}
                            <tr>
                                <td>{{ product.name|truncatechars:20 }}</td>
                                <td>{{ product.quantity_in_stock }}</td>
                                <td>{{ product.minimum_stock_level }}</td>
                                <td>
                                    {% if product.quantity_in_stock == 0 %}
                                    <span class="badge bg-danger">Out of Stock</span>
                                    {% else %}
                                    <span class="badge bg-warning">Low Stock</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% if low_stock_products.count > 5 %}
                <div class="text-center mt-2">
                    <a href="{% url 'product_list' %}?stock_status=low" class="btn btn-sm btn-outline-warning">
                        View All Low Stock
                    </a>
                </div>
                {% endif %}
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                    <p class="text-muted">All products are well stocked</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Insights Section -->
<div class="row">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-lightbulb me-2"></i>Business Insights</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <div class="card h-100 border-info">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="fas fa-chart-line text-info me-2"></i>Sales Insights
                                </h6>
                                <p class="card-text small">
                                    {% if daily_sales|length > 0 %}
                                    Average daily sales: KSh {{ average_daily_sales|default:"0"|floatformat:2 }}
                                    {% else %}
                                    Start recording sales to generate insights.
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card h-100 border-success">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="fas fa-box text-success me-2"></i>Inventory Insights
                                </h6>
                                <p class="card-text small">
                                    {{ low_stock_products.count|default:"0" }} products need restocking.
                                    Total inventory value: KSh {{ stock_value|default:"0"|floatformat:2 }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card h-100 border-warning">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <i class="fas fa-hand-holding-usd text-warning me-2"></i>Loan Insights
                                </h6>
                                <p class="card-text small">
                                    {{ overdue_loans.count|default:"0" }} overdue loans require attention.
                                    Total active loans: KSh {{ total_active_loans|default:"0"|floatformat:2 }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .stat-card {
        border-radius: 10px;
        border: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .chart-container {
        position: relative;
    }
    .card {
        border-radius: 10px;
    }
</style>

<script>
    // Helper function to show notifications
    function showNotification(message, type = 'success', duration = 5000) {
        const alertClass = {
            'success': 'alert-success',
            'danger': 'alert-danger',
            'warning': 'alert-warning',
            'info': 'alert-info'
        }[type] || 'alert-info';
        
        const alertId = 'alert-' + Date.now();
        const alertHtml = `
            <div id="${alertId}" class="alert ${alertClass} alert-dismissible fade show" role="alert" 
                 style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                ${message}
                <button type="button" class="btn-close" onclick="$('#${alertId}').alert('close')"></button>
            </div>
        `;
        
        $('body').append(alertHtml);
        
        setTimeout(function() {
            $(`#${alertId}`).alert('close');
        }, duration);
    }
    
    // Initialize charts
    let salesTrendChart;
    let categoryChart;
    let paymentChart;
    
    $(document).ready(function() {
        initializeCharts();
    });
    
    function initializeCharts() {
        // Sales Trend Chart
        const salesCtx = document.getElementById('salesTrendChart').getContext('2d');
        
        // Prepare data for sales trend
        const salesDates = [];
        const salesAmounts = [];
        
        {% for day in daily_sales %}
        salesDates.push('{{ day.date|date:"M d" }}');
        salesAmounts.push({{ day.total_amount|default:0 }});
        {% endfor %}
        
        // If no data, show sample data
        if (salesDates.length === 0) {
            salesDates.push('No data');
            salesAmounts.push(0);
        }
        
        salesTrendChart = new Chart(salesCtx, {
            type: 'line',
            data: {
                labels: salesDates,
                datasets: [{
                    label: 'Daily Sales (KSh)',
                    data: salesAmounts,
                    borderColor: '#007bff',
                    backgroundColor: 'rgba(0, 123, 255, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'top'
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return 'KSh ' + value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });
        
        // Category Distribution Chart
        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
        
        const categoryLabels = [];
        const categoryData = [];
        const categoryColors = [];
        
        {% for category in category_distribution %}
        categoryLabels.push('{{ category.name }}');
        categoryData.push({{ category.count|default:0 }});
        categoryColors.push('{{ category.color }}');
        {% endfor %}
        
        // If no category data, show sample
        if (categoryLabels.length === 0) {
            categoryLabels.push('No categories');
            categoryData.push(1);
            categoryColors.push('#6c757d');
        }
        
        categoryChart = new Chart(categoryCtx, {
            type: 'doughnut',
            data: {
                labels: categoryLabels,
                datasets: [{
                    data: categoryData,
                    backgroundColor: categoryColors,
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
        
        // Payment Method Chart
        const paymentCtx = document.getElementById('paymentChart').getContext('2d');
        
        const paymentData = [
            {{ payment_stats.cash|default:0 }},
            {{ payment_stats.mpesa|default:0 }},
            {{ payment_stats.card|default:0 }},
            {{ payment_stats.credit|default:0 }}
        ];
        
        paymentChart = new Chart(paymentCtx, {
            type: 'pie',
            data: {
                labels: ['Cash', 'M-Pesa', 'Card', 'Credit'],
                datasets: [{
                    data: paymentData,
                    backgroundColor: [
                        '#28a745', // green
                        '#007bff', // blue
                        '#ffc107', // yellow
                        '#6c757d'  // gray
                    ]
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    }
    
    // Change chart period
    function changeChartPeriod(days) {
        // Update button text
        $('#chartPeriod').text(days + ' Days');
        
        // In a real implementation, you would fetch new data for the selected period
        showNotification('Loading data for last ' + days + ' days...', 'info');
        
        // For now, just show a message
        // You would typically make an AJAX call here to get new data
        setTimeout(function() {
            showNotification('Chart period updated to ' + days + ' days', 'success');
        }, 1000);
    }
    
    // Refresh analytics
    function refreshAnalytics() {
        showNotification('Refreshing analytics data...', 'info');
        
        // Reload the page after a short delay
        setTimeout(function() {
            location.reload();
        }, 1000);
    }
    
    // Export analytics
    function exportAnalytics() {
        showNotification('Exporting analytics data...', 'info');
        
        // Create a simple report
        const report = `
            Analytics Report - ${new Date().toLocaleDateString()}
            ============================================
            
            Key Metrics:
            - Total Products: {{ total_products|default:"0" }}
            - Total Customers: {{ total_customers|default:"0" }}
            - Stock Value: KSh {{ stock_value|default:"0"|floatformat:2 }}
            - Overdue Loans: {{ overdue_loans.count|default:"0" }}
            
            Top Products:
            {% for product in top_products|slice:":5" %}
            - {{ product.product__name }}: {{ product.total_sold }} units, KSh {{ product.total_revenue|floatformat:2 }}
            {% endfor %}
            
            Generated on: ${new Date().toLocaleString()}
        `;
        
        // Create download link
        const blob = new Blob([report], { type: 'text/plain' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `analytics_report_${new Date().toISOString().split('T')[0]}.txt`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        
        showNotification('Analytics report downloaded', 'success');
    }
    
    // Generate random colors for charts
    function getRandomColor() {
        const colors = [
            '#007bff', '#28a745', '#ffc107', '#dc3545',
            '#6c757d', '#17a2b8', '#6610f2', '#fd7e14',
            '#20c997', '#e83e8c'
        ];
        return colors[Math.floor(Math.random() * colors.length)];
    }
</script>
{% endblock %}