{% extends 'base.html' %}
{% load static %}
{% load json_tags %}
{% block title %}Dashboard -RuralPointADVANCE{% endblock %}
{% block content %}
<!-- Page header -->
<div class="mb-8">
    <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
        Dashboard
    </h2>
</div>

<!-- Stats -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
    <div class="stats-card relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
        <dt>
            <div class="absolute rounded-md bg-primary p-3">
                <i class="fas fa-money-bill-wave h-6 w-6 text-white"></i>
            </div>
            <p class="ml-16 truncate text-sm font-medium text-gray-500">Total Active Loans</p>
        </dt>
        <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
            <p class="text-2xl font-semibold text-gray-900">{{ active_loans }}</p>
            <p class="ml-2 flex items-baseline text-sm font-semibold {% if active_loans_change >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                <span class="sr-only">{% if active_loans_change >= 0 %}Increased{% else %}Decreased{% endif %} by</span>
                {% if active_loans_change >= 0 %}
                <i class="fas fa-arrow-up mr-1"></i>
                {% else %}
                <i class="fas fa-arrow-down mr-1"></i>
                {% endif %}
                {{ active_loans_change|floatformat:1 }}%
            </p>
        </dd>
    </div>

    <div class="stats-card relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
        <dt>
            <div class="absolute rounded-md bg-primary p-3">
                <i class="fas fa-users h-6 w-6 text-white"></i>
            </div>
            <p class="ml-16 truncate text-sm font-medium text-gray-500">Active Clients</p>
        </dt>
        <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
            <p class="text-2xl font-semibold text-gray-900">{{ active_users }}</p>
            <p class="ml-2 flex items-baseline text-sm font-semibold {% if active_users_change >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                <span class="sr-only">{% if active_users_change >= 0 %}Increased{% else %}Decreased{% endif %} by</span>
                {% if active_users_change >= 0 %}
                <i class="fas fa-arrow-up mr-1"></i>
                {% else %}
                <i class="fas fa-arrow-down mr-1"></i>
                {% endif %}
                {{ active_users_change|floatformat:1 }}%
            </p>
        </dd>
    </div>

    <div class="stats-card relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
        <dt>
            <div class="absolute rounded-md bg-primary p-3">
                <i class="fas fa-clock h-6 w-6 text-white"></i>
            </div>
            <p class="ml-16 truncate text-sm font-medium text-gray-500">Pending Applications</p>
        </dt>
        <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
            <p class="text-2xl font-semibold text-gray-900">{{ pending_applications }}</p>
            <p class="ml-2 flex items-baseline text-sm font-semibold {% if pending_applications_change >= 0 %}text-yellow-600{% else %}text-green-600{% endif %}">
                <span class="sr-only">{% if pending_applications_change >= 0 %}Increased{% else %}Decreased{% endif %} by</span>
                {% if pending_applications_change >= 0 %}
                <i class="fas fa-arrow-up mr-1"></i>
                {% else %}
                <i class="fas fa-arrow-down mr-1"></i>
                {% endif %}
                {{ pending_applications_change|floatformat:1 }}%
            </p>
        </dd>
    </div>

    <div class="stats-card relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
        <dt>
            <div class="absolute rounded-md bg-primary p-3">
                <i class="fas fa-exclamation-triangle h-6 w-6 text-white"></i>
            </div>
            <p class="ml-16 truncate text-sm font-medium text-gray-500">Default Rate</p>
        </dt>
        <dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
            <p class="text-2xl font-semibold text-gray-900">{{ default_rate|floatformat:1 }}%</p>
            <p class="ml-2 flex items-baseline text-sm font-semibold {% if default_rate_change <= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                <span class="sr-only">{% if default_rate_change <= 0 %}Decreased{% else %}Increased{% endif %} by</span>
                {% if default_rate_change <= 0 %}
                <i class="fas fa-arrow-down mr-1"></i>
                {% else %}
                <i class="fas fa-arrow-up mr-1"></i>
                {% endif %}
                {{ default_rate_change|floatformat:1 }}%
            </p>
        </dd>
    </div>
</div>

<!-- Charts -->
<div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
    <div class="rounded-lg bg-white p-4 sm:p-6 shadow">
        <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Loan Performance</h3>
            <div class="flex items-center space-x-4">
                <button onclick="updateChart('6m')" class="px-3 py-1 text-sm font-medium rounded-md" id="btn6m">6M</button>
                <button onclick="updateChart('1y')" class="px-3 py-1 text-sm font-medium rounded-md" id="btn1y">1Y</button>
                <button onclick="updateChart('all')" class="px-3 py-1 text-sm font-medium rounded-md" id="btnAll">All</button>
            </div>
        </div>
        <div class="mt-5" style="height: 300px;">
            <canvas id="loanChart"></canvas>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="rounded-lg bg-white p-4 sm:p-6 shadow">
        <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Recent Activity</h3>
            <button onclick="refreshActivity()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-sync-alt"></i>
            </button>
        </div>
        <div class="mt-5">
            <div class="flow-root">
                <ul role="list" class="-mb-8" id="activityList">
                    {% for activity in recent_activity %}
                    <li>
                        <div class="relative pb-8">
                            {% if not forloop.last %}
                            <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                            {% endif %}
                            <div class="relative flex space-x-3">
                                <div>
                                    <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white
                                        {% if activity.type == 'delete' %}bg-red-500
                                        {% elif activity.type == 'create' %}bg-green-500
                                        {% elif activity.type == 'update' %}bg-blue-500
                                        {% elif activity.type == 'payment' %}bg-purple-500
                                        {% else %}bg-gray-500{% endif %}">
                                        <i class="fas fa-{{ activity.icon }} h-5 w-5 text-white"></i>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                                    <div>
                                        <p class="text-sm text-gray-500">
                                            <span class="font-medium text-gray-900">{{ activity.user }}</span>
                                            {{ activity.action }}
                                        </p>
                                    </div>
                                    <div class="whitespace-nowrap text-right text-sm text-gray-500">
                                        <time datetime="{{ activity.timestamp|date:'c' }}" class="timeago">{{ activity.timestamp|timesince }} ago</time>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {% empty %}
                    <li>
                        <p class="text-sm text-gray-500 text-center">No recent activity</p>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Additional Charts -->
<div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
    <div class="rounded-lg bg-white p-4 sm:p-6 shadow">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Loan Distribution</h3>
        <div class="mt-5" style="height: 300px;">
            <canvas id="loanDistributionChart"></canvas>
        </div>
    </div>

    <div class="rounded-lg bg-white p-4 sm:p-6 shadow">
        <h3 class="text-lg font-medium leading-6 text-gray-900">Client Growth</h3>
        <div class="mt-5" style="height: 300px;">
            <canvas id="clientGrowthChart"></canvas>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ dashboard_data|json_script:"dashboard-data" }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"></script>
<script>
// Session management
let sessionRefreshInterval;
let lastActivityTime = Date.now();

function setupSessionManagement() {
    // Refresh session every 10 minutes
    sessionRefreshInterval = setInterval(refreshSession, 600000); // 10 minutes

    // Track user activity
    document.addEventListener('mousemove', updateLastActivity);
    document.addEventListener('keypress', updateLastActivity);
    document.addEventListener('click', updateLastActivity);
    document.addEventListener('scroll', updateLastActivity);
}

function updateLastActivity() {
    lastActivityTime = Date.now();
}

function refreshSession() {
    // Only refresh if there was activity in the last hour
    if (Date.now() - lastActivityTime < 3600000) { // 1 hour
        fetch('/api/session-ping/', {
            method: 'POST',
            headers: {
                'X-CSRFToken': getCsrfToken(),
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                if (response.status === 403) {
                    handleSessionTimeout();
                }
            }
        })
        .catch(error => {
            console.warn('Session refresh failed:', error);
        });
    }
}

function getCsrfToken() {
    const name = 'csrftoken';
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

function handleSessionTimeout() {
    // Clear intervals
    if (sessionRefreshInterval) clearInterval(sessionRefreshInterval);
    if (refreshInterval) clearInterval(refreshInterval);
    
    // Show session timeout message
    const mainContent = document.querySelector('main') || document.body;
    mainContent.innerHTML = `
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
        <div class="fixed inset-0 z-10 overflow-y-auto">
            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
                    <div>
                        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
                            <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                            </svg>
                        </div>
                        <div class="mt-3 text-center sm:mt-5">
                            <h3 class="text-base font-semibold leading-6 text-gray-900">Session Expired</h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">Your session has expired. Please refresh the page to continue.</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-6">
                        <button type="button"
                                onclick="window.location.reload()"
                                class="inline-flex w-full justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                            Refresh Page
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
}

// Initialize dashboard data safely with better error handling
var DASHBOARD_DATA = (function() {
    try {
        var dataElement = document.getElementById('dashboard-data');
        if (!dataElement) {
            console.warn('Dashboard data element not found, using defaults');
            return getDefaultData();
        }
        var data = JSON.parse(dataElement.textContent);
        return {
            monthlyData: Array.isArray(data.monthlyData) ? data.monthlyData : [],
            distributionData: {
                labels: Array.isArray(data.distributionData?.labels) ? data.distributionData.labels : [],
                data: Array.isArray(data.distributionData?.data) ? data.distributionData.data : [],
                colors: Array.isArray(data.distributionData?.colors) ? data.distributionData.colors : []
            },
            clientGrowth: Array.isArray(data.clientGrowth) ? data.clientGrowth : []
        };
    } catch (e) {
        console.error('Error parsing dashboard data:', e);
        return getDefaultData();
    }
})();

function getDefaultData() {
    return {
        monthlyData: [],
        distributionData: { labels: [], data: [], colors: [] },
        clientGrowth: []
    };
}

// Wait for DOM and Chart.js to be ready
document.addEventListener('DOMContentLoaded', function() {
    if (!window.Chart) {
        console.warn('Chart.js not loaded, dashboard functionality will be limited');
        return;
    }

    try {
        // Initialize timeago with error handling
        initializeTimeago();
        
        // Initialize charts with error handling
        initializeCharts();
        
        // Set up activity refresh with error handling
        setupActivityRefresh();
        
        // Initialize session management
        setupSessionManagement();
        
    } catch (e) {
        console.error('Error initializing dashboard:', e);
        // Don't let the error propagate and crash the page
    }
});

function initializeTimeago() {
    try {
        var timeagoElements = document.querySelectorAll('.timeago');
        timeagoElements.forEach(function(node) {
            try {
                var datetime = node.getAttribute('datetime');
                if (datetime) {
                    node.textContent = timeago.format(datetime);
                }
            } catch (e) {
                console.warn('Error formatting timeago for element:', e);
                // Keep the original text if formatting fails
            }
        });
    } catch (e) {
        console.error('Error initializing timeago:', e);
    }
}

function initializeCharts() {
    try {
        initializeLoanChart();
        initializeDistributionChart();
        initializeGrowthChart();
        
        // Set initial active period
        var initialPeriodBtn = document.getElementById('btn6m');
        if (initialPeriodBtn) {
            initialPeriodBtn.classList.add('bg-primary', 'text-white');
        }
    } catch (e) {
        console.error('Error initializing charts:', e);
    }
}

function initializeLoanChart() {
    var loanChartEl = document.getElementById('loanChart');
    if (!loanChartEl) return;

    try {
        var ctx = loanChartEl.getContext('2d');
        var monthlyData = DASHBOARD_DATA.monthlyData || [];
        
        var chartData = {
            labels: monthlyData.map(function(data) { return data.month; }),
            datasets: [
                {
                    label: 'Loan Disbursements',
                    data: monthlyData.map(function(data) { return parseFloat(data.disbursed) || 0; }),
                    borderColor: '#3C9EBD',
                    backgroundColor: 'rgba(60, 158, 189, 0.1)',
                    tension: 0.1,
                    fill: true
                },
                {
                    label: 'Repayments',
                    data: monthlyData.map(function(data) { return parseFloat(data.repaid) || 0; }),
                    borderColor: '#0A3D62',
                    backgroundColor: 'rgba(10, 61, 98, 0.1)',
                    tension: 0.1,
                    fill: true
                }
            ]
        };

        window.loanChart = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top' }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return 'KES ' + value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });
    } catch (e) {
        console.error('Error initializing loan chart:', e);
        showChartError(loanChartEl);
    }
}

function initializeDistributionChart() {
    var distributionChartEl = document.getElementById('loanDistributionChart');
    if (!distributionChartEl) return;

    try {
        var distributionCtx = distributionChartEl.getContext('2d');
        var distributionData = DASHBOARD_DATA.distributionData || { labels: [], data: [], colors: [] };
        
        new Chart(distributionCtx, {
            type: 'doughnut',
            data: {
                labels: distributionData.labels || [],
                datasets: [{
                    data: (distributionData.data || []).map(function(val) { return parseFloat(val) || 0; }),
                    backgroundColor: distributionData.colors || []
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'right' }
                }
            }
        });
    } catch (e) {
        console.error('Error initializing distribution chart:', e);
        showChartError(distributionChartEl);
    }
}

function initializeGrowthChart() {
    var growthChartEl = document.getElementById('clientGrowthChart');
    if (!growthChartEl) return;

    try {
        var growthCtx = growthChartEl.getContext('2d');
        var clientGrowthData = DASHBOARD_DATA.clientGrowth || [];
        
        new Chart(growthCtx, {
            type: 'line',
            data: {
                labels: clientGrowthData.map(function(data) { return data.month; }),
                datasets: [{
                    label: 'New Clients',
                    data: clientGrowthData.map(function(data) { return parseInt(data.new_clients) || 0; }),
                    borderColor: '#2ECC71',
                    backgroundColor: 'rgba(46, 204, 113, 0.1)',
                    tension: 0.1,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top' }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { stepSize: 1 }
                    }
                }
            }
        });
    } catch (e) {
        console.error('Error initializing growth chart:', e);
        showChartError(growthChartEl);
    }
}

function showChartError(element) {
    if (element && element.parentElement) {
        element.parentElement.innerHTML = '<p class="text-center text-gray-500 mt-4">Unable to load chart</p>';
    }
}

function setupActivityRefresh() {
    // Initial refresh
    refreshActivity();
    
    // Set up periodic refresh every 60 seconds instead of 30
    var refreshInterval = setInterval(refreshActivity, 60000);

    // Clean up interval when leaving the page
    window.addEventListener('beforeunload', function() {
        if (refreshInterval) {
            clearInterval(refreshInterval);
        }
    });
}

function refreshActivity() {
    var button = document.querySelector('button i.fa-sync-alt');
    if (button) button.classList.add('fa-spin');

    fetch('/api/recent-activity/', {
        headers: {
            'X-CSRFToken': getCsrfToken()
        }
    })
    .then(response => {
        if (!response.ok) {
            if (response.status === 403) {
                throw new Error('session_timeout');
            }
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(updateActivityList)
    .catch(error => {
        if (error.message === 'session_timeout') {
            handleSessionTimeout();
        } else {
            handleActivityError(error);
        }
    })
    .finally(function() {
        if (button) button.classList.remove('fa-spin');
    });
}

function handleResponse(response) {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
}

function updateActivityList(data) {
    var activityList = document.getElementById('activityList');
    if (!activityList) return;

    try {
        if (!data.activities || !data.activities.length) {
            activityList.innerHTML = '<li><p class="text-sm text-gray-500 text-center">No recent activity</p></li>';
            return;
        }

        activityList.innerHTML = data.activities.map(createActivityHTML).join('');
        updateTimeagoElements(activityList);
    } catch (e) {
        console.error('Error updating activity list:', e);
        throw e;
    }
}

function createActivityHTML(activity) {
    if (!activity) return '';
    
    var color = getActivityColor(activity.type);
    var icon = activity.icon || 'info';
    var user = activity.user || 'Unknown';
    var action = activity.action || '';
    var timestamp = activity.timestamp;

    return `
        <li>
            <div class="relative pb-8">
                <span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-200"></span>
                <div class="relative flex space-x-3">
                    <div>
                        <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white ${color}">
                            <i class="fas fa-${icon} h-5 w-5 text-white"></i>
                        </span>
                    </div>
                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                        <div>
                            <p class="text-sm text-gray-500">
                                <span class="font-medium text-gray-900">${user}</span> ${action}
                            </p>
                        </div>
                        <div class="whitespace-nowrap text-right text-sm text-gray-500">
                            <time datetime="${timestamp}" class="timeago">${timeago.format(timestamp)}</time>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    `;
}

function updateTimeagoElements(container) {
    container.querySelectorAll('.timeago').forEach(function(node) {
        try {
            var datetime = node.getAttribute('datetime');
            if (datetime) {
                node.textContent = timeago.format(datetime);
            }
        } catch (e) {
            console.warn('Error updating timeago element:', e);
        }
    });
}

function handleActivityError(error) {
    console.error('Error refreshing activity:', error);
    var activityList = document.getElementById('activityList');
    if (activityList) {
        activityList.innerHTML = '<li><p class="text-sm text-gray-500 text-center">Error loading activities</p></li>';
    }
}

function getActivityColor(type) {
    var colors = {
        delete: 'bg-red-500',
        create: 'bg-green-500',
        update: 'bg-blue-500',
        payment: 'bg-purple-500'
    };
    return colors[type] || 'bg-gray-500';
}

// Make updateChart available globally with error handling
window.updateChart = function(period) {
    if (!window.loanChart || period === window.currentPeriod) return;

    try {
        updatePeriodButtons(period);
        window.currentPeriod = period;
        fetchChartData(period);
    } catch (e) {
        console.error('Error in updateChart:', e);
    }
};

function updatePeriodButtons(period) {
    var periodButtons = document.querySelectorAll('#btn6m, #btn1y, #btnAll');
    periodButtons.forEach(function(btn) {
        if (btn) {
            btn.classList.remove('bg-primary', 'text-white');
            btn.classList.add('text-gray-700');
        }
    });

    var periodBtn = document.getElementById('btn' + period);
    if (periodBtn) {
        periodBtn.classList.add('bg-primary', 'text-white');
        periodBtn.classList.remove('text-gray-700');
    }
}

function fetchChartData(period) {
    fetch('/api/loan-data/?period=' + period, {
        headers: {
            'X-CSRFToken': getCsrfToken()
        }
    })
    .then(response => {
        if (!response.ok) {
            if (response.status === 403) {
                throw new Error('session_timeout');
            }
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(function(data) {
        if (!window.loanChart) return;
        
        window.loanChart.data.labels = data.labels || [];
        window.loanChart.data.datasets[0].data = (data.disbursements || []).map(function(val) { return parseFloat(val) || 0; });
        window.loanChart.data.datasets[1].data = (data.repayments || []).map(function(val) { return parseFloat(val) || 0; });
        window.loanChart.update();
    })
    .catch(function(error) {
        if (error.message === 'session_timeout') {
            handleSessionTimeout();
        } else {
            console.error('Error updating chart:', error);
        }
    });
}
</script>
{% endblock %}