{% extends 'layouts/base.html' %}
{% load i18n %}

{% block title %}{% trans "Complaints Analytics" %} - PX360{% endblock %}

{% block extra_css %}
<style>
    :root {
        --hh-navy: #005696;
        --hh-blue: #007bbd;
        --hh-light: #eef6fb;
        --hh-slate: #64748b;
        --hh-success: #10b981;
        --hh-warning: #f59e0b;
        --hh-danger: #ef4444;
    }

    .page-header {
        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
        color: white;
        padding: 2rem 2.5rem;
        border-radius: 1rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .stat-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        border: 1px solid #e2e8f0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
    }

    .stat-card.blue::before { background: linear-gradient(90deg, #3b82f6, #2563eb); }
    .stat-card.orange::before { background: linear-gradient(90deg, #f97316, #ea580c); }
    .stat-card.red::before { background: linear-gradient(90deg, #ef4444, #dc2626); }
    .stat-card.green::before { background: linear-gradient(90deg, #10b981, #059669); }

    .stat-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stat-icon.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
    .stat-icon.orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); }
    .stat-icon.red { background: linear-gradient(135deg, #fee2e2, #fecaca); }
    .stat-icon.green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); }

    .chart-card {
        background: white;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .chart-card:hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .chart-card .card-header {
        background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
        padding: 1.25rem 1.75rem;
        border-bottom: 1px solid #bae6fd;
        border-radius: 1rem 1rem 0 0;
    }

    .category-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .category-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .category-item:last-child {
        border-bottom: none;
    }

    .category-badge {
        width: 40px;
        height: 40px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.875rem;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .animate-in {
        animation: fadeIn 0.5s ease-out forwards;
    }
</style>
{% endblock %}

{% block content %}
<div class="px-4 py-6">
    <!-- Page Header -->
    <div class="page-header animate-in">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold mb-2">
                    <i data-lucide="circle-help" class="w-7 h-7 inline-block me-2"></i>
                    {% trans "Complaints Analytics" %}
                </h1>
                <p class="text-white/90">{% trans "Comprehensive complaints metrics and insights" %}</p>
            </div>
            <form method="get" class="inline-flex">
                <select name="date_range" class="px-4 py-2.5 bg-white/20 border border-white/30 rounded-xl text-white focus:ring-2 focus:ring-white/50 focus:border-transparent transition" onchange="this.form.submit()">
                    <option value="7" {% if date_range == 7 %}selected{% endif %}>{% trans "Last 7 Days" %}</option>
                    <option value="30" {% if date_range == 30 %}selected{% endif %}>{% trans "Last 30 Days" %}</option>
                    <option value="90" {% if date_range == 90 %}selected{% endif %}>{% trans "Last 90 Days" %}</option>
                </select>
            </form>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div class="stat-card blue animate-in">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-blue-600 uppercase mb-1">{% trans "Total Complaints" %}</p>
                    <p class="text-3xl font-black text-navy mb-2">{{ dashboard_summary.status_counts.total }}</p>
                    <div class="flex items-center gap-1 text-sm">
                        {% if dashboard_summary.trend.percentage_change > 0 %}
                            <i data-lucide="trending-up" class="w-4 h-4 text-red-500"></i>
                            <span class="text-red-500 font-bold">+{{ dashboard_summary.trend.percentage_change }}%</span>
                        {% elif dashboard_summary.trend.percentage_change < 0 %}
                            <i data-lucide="trending-down" class="w-4 h-4 text-green-500"></i>
                            <span class="text-green-500 font-bold">{{ dashboard_summary.trend.percentage_change }}%</span>
                        {% else %}
                            <i data-lucide="minus" class="w-4 h-4 text-slate-400"></i>
                            <span class="text-slate-400 font-bold">0%</span>
                        {% endif %}
                        <span class="text-slate-500">{% trans "vs last period" %}</span>
                    </div>
                </div>
                <div class="stat-icon blue">
                    <i data-lucide="activity" class="text-blue-600 w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="stat-card orange animate-in">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-orange-600 uppercase mb-1">{% trans "Open" %}</p>
                    <p class="text-3xl font-black text-navy">{{ dashboard_summary.status_counts.open }}</p>
                </div>
                <div class="stat-icon orange">
                    <i data-lucide="folder-open" class="text-orange-600 w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="stat-card red animate-in">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-red-600 uppercase mb-1">{% trans "Overdue" %}</p>
                    <p class="text-3xl font-black text-red-500">{{ dashboard_summary.status_counts.overdue }}</p>
                </div>
                <div class="stat-icon red">
                    <i data-lucide="alert-triangle" class="text-red-600 w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="stat-card green animate-in">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-xs font-bold text-green-600 uppercase mb-1">{% trans "Resolved" %}</p>
                    <p class="text-3xl font-black text-navy">{{ dashboard_summary.status_counts.resolved }}</p>
                </div>
                <div class="stat-icon green">
                    <i data-lucide="check-circle" class="text-green-600 w-6 h-6"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <!-- Complaints Trend -->
        <div class="lg:col-span-2 chart-card animate-in">
            <div class="card-header">
                <h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
                    <i data-lucide="trending-up" class="w-5 h-5"></i>
                    {% trans "Complaints Trend" %}
                </h3>
            </div>
            <div class="p-6">
                <div id="trendChart" style="min-height: 300px;"></div>
            </div>
        </div>

        <!-- Top Categories -->
        <div class="chart-card animate-in">
            <div class="card-header">
                <h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
                    <i data-lucide="pie-chart" class="w-5 h-5"></i>
                    {% trans "Top Categories" %}
                </h3>
            </div>
            <div class="p-6">
                <ul class="category-list">
                    {% for category in top_categories %}
                    <li class="category-item">
                        <div class="category-badge bg-blue-100 text-blue-600">
                            {{ forloop.counter }}
                        </div>
                        <div class="flex-1">
                            <p class="font-semibold text-navy text-sm">{{ category.category__name_en|default:"Uncategorized" }}</p>
                            <p class="text-xs text-slate-500">{{ category.count }} complaints</p>
                        </div>
                        <div class="text-right">
                            <p class="font-bold text-navy">{{ category.percentage|floatformat:1 }}%</p>
                        </div>
                    </li>
                    {% empty %}
                    <li class="text-center py-8 text-slate-500">
                        <i data-lucide="pie-chart" class="w-12 h-12 mx-auto mb-2 opacity-30"></i>
                        <p>{% trans "No category data available" %}</p>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <!-- Second Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Department Distribution -->
        <div class="chart-card animate-in">
            <div class="card-header">
                <h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
                    <i data-lucide="building" class="w-5 h-5"></i>
                    {% trans "Department Distribution" %}
                </h3>
            </div>
            <div class="p-6">
                <div id="departmentChart" style="min-height: 250px;"></div>
            </div>
        </div>

        <!-- Severity Breakdown -->
        <div class="chart-card animate-in">
            <div class="card-header">
                <h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
                    <i data-lucide="circle-help" class="w-5 h-5"></i>
                    {% trans "Severity Breakdown" %}
                </h3>
            </div>
            <div class="p-6">
                <div id="severityChart" style="min-height: 250px;"></div>
            </div>
        </div>
    </div>

    <!-- Hospital Performance -->
    <div class="chart-card animate-in">
        <div class="card-header">
            <h3 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
                <i data-lucide="hospital" class="w-5 h-5"></i>
                {% trans "Hospital Performance" %}
            </h3>
        </div>
        <div class="p-0">
            {% if hospital_performance %}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b-2 border-slate-200">
                            <th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</th>
                            <th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Total" %}</th>
                            <th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Open" %}</th>
                            <th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Resolved" %}</th>
                            <th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Overdue" %}</th>
                            <th class="text-center py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Resolution Rate" %}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        {% for hospital in hospital_performance %}
                        <tr class="hover:bg-slate-50 transition">
                            <td class="py-3 px-4">
                                <span class="font-semibold text-navy">{{ hospital.hospital__name }}</span>
                            </td>
                            <td class="py-3 px-4 text-center">
                                <span class="font-bold text-navy">{{ hospital.total }}</span>
                            </td>
                            <td class="py-3 px-4 text-center">
                                <span class="px-2.5 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">{{ hospital.open }}</span>
                            </td>
                            <td class="py-3 px-4 text-center">
                                <span class="px-2.5 py-1 bg-green-100 text-green-700 rounded-full text-xs font-bold">{{ hospital.resolved }}</span>
                            </td>
                            <td class="py-3 px-4 text-center">
                                <span class="px-2.5 py-1 bg-red-100 text-red-700 rounded-full text-xs font-bold">{{ hospital.overdue }}</span>
                            </td>
                            <td class="py-3 px-4 text-center">
                                <div class="flex items-center justify-center gap-2">
                                    <div class="w-24 bg-slate-200 rounded-full h-2">
                                        <div class="bg-green-500 h-2 rounded-full" style="width: {{ hospital.resolution_rate }}%"></div>
                                    </div>
                                    <span class="font-bold text-navy text-sm">{{ hospital.resolution_rate|floatformat:1 }}%</span>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-12">
                <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i data-lucide="hospital" class="w-8 h-8 text-slate-400"></i>
                </div>
                <p class="text-slate font-medium">{% trans "No hospital data available" %}</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.45.1/dist/apexcharts.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();

    // Trend Chart
    const trendOptions = {
        series: [{
            name: '{% trans "Complaints" %}',
            data: {{ trend_data|safe }}
        }],
        chart: {
            type: 'area',
            height: 300,
            fontFamily: 'Inter, sans-serif',
            toolbar: { show: false }
        },
        colors: ['#007bbd'],
        dataLabels: { enabled: false },
        stroke: { curve: 'smooth', width: 3 },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.4,
                opacityTo: 0.1,
            }
        },
        xaxis: {
            categories: {{ trend_labels|safe }},
            labels: { style: { fontSize: '12px', colors: '#64748b' } }
        },
        yaxis: {
            labels: { style: { fontSize: '12px', colors: '#64748b' } }
        },
        grid: { borderColor: '#e2e8f0', strokeDashArray: 4 }
    };
    new ApexCharts(document.querySelector("#trendChart"), trendOptions).render();

    {% if severity_data %}
    // Severity Chart
    const severityOptions = {
        series: {{ severity_data|safe }},
        chart: {
            type: 'donut',
            height: 250,
            fontFamily: 'Inter, sans-serif',
            toolbar: { show: false }
        },
        labels: ['Low', 'Medium', 'High', 'Critical'],
        colors: ['#10b981', '#f59e0b', '#ef4444', '#dc2626'],
        plotOptions: {
            pie: {
                donut: {
                    size: '65%',
                    labels: {
                        show: true,
                        name: { fontSize: '14px', fontWeight: 600 },
                        value: { fontSize: '18px', fontWeight: 700 },
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function(w) {
                                return w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                            }
                        }
                    }
                }
            }
        },
        dataLabels: { enabled: false },
        legend: { position: 'bottom', fontSize: '12px' }
    };
    new ApexCharts(document.querySelector("#severityChart"), severityOptions).render();
    {% endif %}
});
</script>
{% endblock %}