{% extends 'base.html' %}

{% block title %}Statistics - Bizness Navigator{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Header -->
    <div class="bg-white rounded-2xl border border-gray-200 p-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">Location Check Statistics</h1>
        <p class="text-gray-600">Analytics and trends of your location checks</p>
    </div>

    <!-- Main Stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                </svg>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ stats.total }}</div>
            <div class="text-sm text-gray-600">Total Checks</div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ stats.by_status.approved }}</div>
            <div class="text-sm text-gray-600">Approved</div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ stats.by_status.conditional }}</div>
            <div class="text-sm text-gray-600">Conditional</div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6">
            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-1">{{ stats.by_status.rejected }}</div>
            <div class="text-sm text-gray-600">Rejected</div>
        </div>
    </div>

    <!-- Average Metrics -->
    <div class="bg-white rounded-2xl border border-gray-200 p-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6">Average Metrics</h2>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center p-6 bg-gray-50 rounded-xl border border-gray-200">
                <div class="text-5xl font-bold text-blue-600 mb-2">{{ stats.avg_score|floatformat:1 }}</div>
                <div class="text-sm text-gray-600 mb-1">out of 100</div>
                <div class="text-lg font-semibold text-gray-900">Average Score</div>
            </div>

            <div class="text-center p-6 bg-gray-50 rounded-xl border border-gray-200">
                <div class="text-3xl font-bold text-purple-600 mb-2">{{ stats.avg_cost|floatformat:0 }}</div>
                <div class="text-sm text-gray-600 mb-1">UZS</div>
                <div class="text-lg font-semibold text-gray-900">Average Cost</div>
            </div>

            <div class="text-center p-6 bg-gray-50 rounded-xl border border-gray-200">
                <div class="text-5xl font-bold text-orange-600 mb-2">{{ stats.avg_time|floatformat:0 }}</div>
                <div class="text-sm text-gray-600 mb-1">days</div>
                <div class="text-lg font-semibold text-gray-900">Average Time</div>
            </div>
        </div>
    </div>

    <!-- Status Distribution -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Chart -->
        <div class="bg-white rounded-2xl border border-gray-200 p-8">
            <h3 class="text-xl font-bold text-gray-900 mb-6">Status Distribution</h3>
            <canvas id="statusChart" style="max-height: 300px;"></canvas>
        </div>

        <!-- Percentages -->
        <div class="bg-white rounded-2xl border border-gray-200 p-8">
            <h3 class="text-xl font-bold text-gray-900 mb-6">Status Breakdown</h3>
            <div class="space-y-4">
                <!-- Approved -->
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-semibold text-gray-900 flex items-center">
                            <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span>
                            Approved
                        </span>
                        <span class="font-bold text-green-600">
                            {{ stats.by_status.approved|default:0 }}
                            {% if stats.total > 0 %}
                            ({{ stats.by_status.approved|default:0|mul:100|div:stats.total|floatformat:1 }}%)
                            {% endif %}
                        </span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-green-500 h-3 rounded-full transition-all"
                             style="width: {% if stats.total > 0 %}{{ stats.by_status.approved|default:0|mul:100|div:stats.total }}{% else %}0{% endif %}%"></div>
                    </div>
                </div>

                <!-- Conditional -->
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-semibold text-gray-900 flex items-center">
                            <span class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></span>
                            Conditional
                        </span>
                        <span class="font-bold text-yellow-600">
                            {{ stats.by_status.conditional|default:0 }}
                            {% if stats.total > 0 %}
                            ({{ stats.by_status.conditional|default:0|mul:100|div:stats.total|floatformat:1 }}%)
                            {% endif %}
                        </span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-yellow-500 h-3 rounded-full transition-all"
                             style="width: {% if stats.total > 0 %}{{ stats.by_status.conditional|default:0|mul:100|div:stats.total }}{% else %}0{% endif %}%"></div>
                    </div>
                </div>

                <!-- Rejected -->
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-semibold text-gray-900 flex items-center">
                            <span class="w-3 h-3 bg-red-500 rounded-full mr-2"></span>
                            Rejected
                        </span>
                        <span class="font-bold text-red-600">
                            {{ stats.by_status.rejected|default:0 }}
                            {% if stats.total > 0 %}
                            ({{ stats.by_status.rejected|default:0|mul:100|div:stats.total|floatformat:1 }}%)
                            {% endif %}
                        </span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-red-500 h-3 rounded-full transition-all"
                             style="width: {% if stats.total > 0 %}{{ stats.by_status.rejected|default:0|mul:100|div:stats.total }}{% else %}0{% endif %}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Business Types -->
    <div class="bg-white rounded-2xl border border-gray-200 p-8">
        <h3 class="text-2xl font-bold text-gray-900 mb-6">Top 5 Business Types</h3>

        {% if stats.by_business_type %}
        <div class="space-y-4">
            {% for item in stats.by_business_type %}
            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
                <div class="flex items-center space-x-4">
                    <div class="w-10 h-10 {% if forloop.counter == 1 %}bg-yellow-100 text-yellow-600{% elif forloop.counter == 2 %}bg-gray-200 text-gray-600{% elif forloop.counter == 3 %}bg-orange-100 text-orange-600{% else %}bg-blue-100 text-blue-600{% endif %} rounded-lg flex items-center justify-center text-lg font-bold">
                        {{ forloop.counter }}
                    </div>
                    <div>
                        <h4 class="text-lg font-semibold text-gray-900">{{ item.business_type }}</h4>
                        <p class="text-sm text-gray-600">Business Type</p>
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-3xl font-bold text-gray-900">{{ item.count }}</div>
                    <div class="text-sm text-gray-600">
                        {% if stats.total > 0 %}
                        {{ item.count|mul:100|div:stats.total|floatformat:0 }}%
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-12 text-gray-500">
            <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
            </svg>
            <p class="text-lg">Insufficient data to display</p>
        </div>
        {% endif %}
    </div>

    <!-- Business Type Chart -->
    {% if stats.by_business_type %}
    <div class="bg-white rounded-2xl border border-gray-200 p-8">
        <h3 class="text-xl font-bold text-gray-900 mb-6">Checks by Business Type</h3>
        <canvas id="businessTypeChart" style="max-height: 400px;"></canvas>
    </div>
    {% endif %}

    <!-- Actions -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <a href="{% url 'locations:history' %}" class="bg-white hover:bg-gray-50 border border-gray-300 rounded-2xl p-8 transition flex items-center justify-between group">
            <div>
                <div class="text-2xl font-bold text-gray-900 mb-2">View History</div>
                <div class="text-gray-600">See all location checks</div>
            </div>
            <svg class="w-8 h-8 text-gray-400 group-hover:text-gray-600 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
        </a>

        <a href="{% url 'locations:search' %}" class="bg-gray-900 hover:bg-gray-800 text-white rounded-2xl p-8 transition flex items-center justify-between group">
            <div>
                <div class="text-2xl font-bold mb-2">New Check</div>
                <div class="text-white/80">Check location now</div>
            </div>
            <svg class="w-8 h-8 text-white/80 group-hover:text-white transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Status pie chart
    const statusCtx = document.getElementById('statusChart');
    if (statusCtx) {
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: ['Approved', 'Conditional', 'Rejected'],
                datasets: [{
                    data: [
                        {{ stats.by_status.approved|default:0 }},
                        {{ stats.by_status.conditional|default:0 }},
                        {{ stats.by_status.rejected|default:0 }}
                    ],
                    backgroundColor: [
                        'rgba(34, 197, 94, 0.8)',
                        'rgba(251, 146, 60, 0.8)',
                        'rgba(239, 68, 68, 0.8)'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: { size: 13, family: 'Inter', weight: '500' },
                            padding: 20,
                            usePointStyle: true
                        }
                    }
                }
            }
        });
    }

    // Business type bar chart
    const businessCtx = document.getElementById('businessTypeChart');
    if (businessCtx) {
        new Chart(businessCtx, {
            type: 'bar',
            data: {
                labels: [
                    {% for item in stats.by_business_type %}
                    '{{ item.business_type|escapejs }}'{% if not forloop.last %},{% endif %}
                    {% endfor %}
                ],
                datasets: [{
                    label: 'Number of Checks',
                    data: [
                        {% for item in stats.by_business_type %}
                        {{ item.count }}{% if not forloop.last %},{% endif %}
                        {% endfor %}
                    ],
                    backgroundColor: 'rgba(99, 102, 241, 0.8)',
                    borderRadius: 6,
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { stepSize: 1 },
                        grid: { color: 'rgba(0, 0, 0, 0.05)' }
                    },
                    x: {
                        grid: { display: false }
                    }
                }
            }
        });
    }
});
</script>

{% load mathfilters %}
{% endblock %}