{% extends "layouts/base.html" %}
{% load i18n %}
{% load static %}

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

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

    /* Page Header */
    .page-header-gradient {
        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, 86, 150, 0.2);
        position: relative;
        overflow: hidden;
    }

    .page-header-gradient::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    }

    /* Section Cards */
    .section-card {
        background: white;
        border-radius: 1rem;
        border: 2px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .section-card:hover {
        border-color: #005696;
        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
    }

    .section-header {
        padding: 1rem 1.5rem;
        border-bottom: 2px solid #e2e8f0;
        background: linear-gradient(to right, #f8fafc, #f1f5f9);
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .section-icon {
        width: 48px;
        height: 48px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* KPI Cards */
    .kpi-card {
        background: white;
        border-radius: 1rem;
        border: 2px solid #e2e8f0;
        padding: 1.25rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        height: 100%;
    }
    .kpi-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        border-color: #005696;
    }

    .kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .kpi-value {
        font-size: 1.75rem;
        font-weight: 800;
        color: #1e293b;
    }

    .kpi-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    /* Chart Cards */
    .chart-card {
        background: white;
        border-radius: 1rem;
        border: 2px solid #e2e8f0;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    .chart-card:hover {
        border-color: #005696;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .chart-header {
        background: linear-gradient(135deg, #f8fafc, #eef6fb);
        padding: 1rem 1.25rem;
        border-bottom: 2px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .chart-header h3 {
        color: #005696;
        font-weight: 700;
        margin: 0;
    }

    /* Form Styling - PX360 Theme */
    .form-select-px360 {
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 0.75rem;
        padding: 0.625rem 1rem;
        color: #1e293b;
        font-size: 0.875rem;
        min-width: 200px;
        cursor: pointer;
        transition: all 0.2s;
    }
    .form-select-px360:hover {
        border-color: #005696;
    }
    .form-select-px360:focus {
        outline: none;
        border-color: #005696;
        box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
    }

    /* Data Tables */
    .data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .data-table th {
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
        padding: 0.875rem 1rem;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748b;
        text-align: left;
    }
    .data-table td {
        border-bottom: 1px solid #e2e8f0;
        padding: 0.875rem 1rem;
        color: #1e293b;
    }
    .data-table tr:hover td {
        background: #f8fafc;
    }

    /* Status Badges */
    .badge {
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .badge-blue { background: #dbeafe; color: #1d4ed8; }
    .badge-green { background: #d1fae5; color: #047857; }
    .badge-orange { background: #fef3c7; color: #b45309; }
    .badge-red { background: #fee2e2; color: #b91c1c; }
    .badge-purple { background: #f3e8ff; color: #7c3aed; }

    /* Progress Bars */
    .progress-bar {
        height: 8px;
        border-radius: 4px;
        background: #e2e8f0;
        overflow: hidden;
    }
    .progress-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    /* Animations */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-in {
        animation: fadeIn 0.4s ease-out forwards;
    }
    .delay-100 { animation-delay: 100ms; }
    .delay-200 { animation-delay: 200ms; }
    .delay-300 { animation-delay: 300ms; }
    .delay-400 { animation-delay: 400ms; }
</style>
{% endblock %}

{% block content %}
<div class="px-4 py-6 max-w-[1600px] mx-auto">
    
    <!-- Page Header -->
    <div class="page-header-gradient animate-in">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 relative z-10">
            <div>
                <h1 class="text-2xl font-bold flex items-center gap-3">
                    <i data-lucide="bar-chart-3" class="w-8 h-8"></i>
                    {% trans "Analytics Dashboard" %}
                </h1>
                <p class="mt-1 opacity-90">{% trans "Comprehensive overview of patient experience metrics" %}</p>
            </div>
            <div class="flex items-center gap-3">
                <button id="refreshAiBtn" onclick="refreshAiAnalytics()" class="px-4 py-2.5 bg-white/20 hover:bg-white/30 rounded-xl transition text-sm font-medium flex items-center gap-2" title="{% trans 'Refresh AI Analytics' %}">
                    <i data-lucide="sparkles" class="w-4 h-4 text-white"></i>
                    <span>{% trans "Refresh AI" %}</span>
                </button>
                <button onclick="refreshDashboard()" class="p-2.5 bg-white/20 hover:bg-white/30 rounded-xl transition" title="{% trans 'Refresh' %}">
                    <i data-lucide="refresh-cw" class="w-5 h-5 text-white"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- KPI Grid Row 1 -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
        <!-- Total Complaints -->
        <div class="kpi-card animate-in">
            <div class="flex items-start justify-between mb-3">
                <div class="kpi-icon" style="background: linear-gradient(135deg, #fee2e2, #fecaca);">
                    <i data-lucide="message-square-warning" class="w-5 h-5 text-red-600"></i>
                </div>
                <span class="badge badge-red">{{ kpis.open_complaints }} {% trans "open" %}</span>
            </div>
            <p class="kpi-value">{{ kpis.total_complaints }}</p>
            <p class="kpi-label mt-1">{% trans "Total Complaints" %}</p>
        </div>

        <!-- Resolution Rate -->
        <div class="kpi-card animate-in delay-100">
            <div class="flex items-start justify-between mb-3">
                <div class="kpi-icon" style="background: linear-gradient(135deg, #d1fae5, #a7f3d0);">
                    <i data-lucide="check-circle" class="w-5 h-5 text-emerald-600"></i>
                </div>
            </div>
            <p class="kpi-value">{{ kpis.sla_compliance }}%</p>
            <p class="kpi-label mt-1">{% trans "SLA Compliance" %}</p>
        </div>

        <!-- Avg Resolution -->
        <div class="kpi-card animate-in delay-200">
            <div class="flex items-start justify-between mb-3">
                <div class="kpi-icon" style="background: linear-gradient(135deg, #f3e8ff, #e9d5ff);">
                    <i data-lucide="clock" class="w-5 h-5 text-purple-600"></i>
                </div>
            </div>
            <p class="kpi-value">{{ kpis.avg_resolution_hours }}h</p>
            <p class="kpi-label mt-1">{% trans "Avg Resolution" %}</p>
        </div>

        <!-- Total Actions -->
        <div class="kpi-card animate-in delay-300">
            <div class="flex items-start justify-between mb-3">
                <div class="kpi-icon" style="background: linear-gradient(135deg, #fef3c7, #fde68a);">
                    <i data-lucide="zap" class="w-5 h-5 text-orange-600"></i>
                </div>
                <span class="badge badge-orange">{{ kpis.open_actions }} {% trans "open" %}</span>
            </div>
            <p class="kpi-value">{{ kpis.total_actions }}</p>
            <p class="kpi-label mt-1">{% trans "Total Actions" %}</p>
        </div>

        <!-- Survey Score -->
        <div class="kpi-card animate-in delay-400">
            <div class="flex items-start justify-between mb-3">
                <div class="kpi-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe);">
                    <i data-lucide="star" class="w-5 h-5 text-blue-600"></i>
                </div>
            </div>
            <p class="kpi-value">{{ kpis.avg_survey_score }}</p>
            <p class="kpi-label mt-1">{% trans "Avg Survey Score" %}</p>
        </div>

        <!-- NPS Score -->
        <div class="kpi-card animate-in">
            <div class="flex items-start justify-between mb-3">
                <div class="kpi-icon" style="background: linear-gradient(135deg, #005696, #007bbd);">
                    <i data-lucide="thumbs-up" class="w-5 h-5 text-white"></i>
                </div>
            </div>
            <p class="kpi-value">{{ kpis.nps_score }}</p>
            <p class="kpi-label mt-1">{% trans "NPS Score" %}</p>
        </div>
    </div>

    <!-- Charts Section: Complaints -->
    <div class="section-card mb-6 animate-in delay-100">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #fee2e2, #fecaca);">
                <i data-lucide="message-square-warning" class="w-6 h-6 text-red-600"></i>
            </div>
            <div>
                <h2 class="text-xl font-bold text-navy">{% trans "Complaints Analytics" %}</h2>
                <p class="text-sm text-slate">{% trans "Status, sources, and severity breakdown" %}</p>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Status Distribution -->
                <div class="chart-card">
                    <div class="chart-header">
                        <i data-lucide="pie-chart" class="w-5 h-5 text-navy"></i>
                        <h3>{% trans "Status Distribution" %}</h3>
                    </div>
                    <div class="p-4">
                        <canvas id="complaintStatusChart" class="h-64 w-full"></canvas>
                    </div>
                </div>

                <!-- Sources -->
                <div class="chart-card">
                    <div class="chart-header">
                        <i data-lucide="git-branch" class="w-5 h-5 text-navy"></i>
                        <h3>{% trans "Complaint Sources" %}</h3>
                    </div>
                    <div class="p-4">
                        <canvas id="complaintSourcesChart" class="h-64 w-full"></canvas>
                    </div>
                </div>

                <!-- Severity -->
                <div class="chart-card">
                    <div class="chart-header">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-navy"></i>
                        <h3>{% trans "Severity Levels" %}</h3>
                    </div>
                    <div class="p-4">
                        <canvas id="severityChart" class="h-64 w-full"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section: Actions -->
    <div class="section-card mb-6 animate-in delay-200">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #fef3c7, #fde68a);">
                <i data-lucide="zap" class="w-6 h-6 text-orange-600"></i>
            </div>
            <div>
                <h2 class="text-xl font-bold text-navy">{% trans "PX Actions Analytics" %}</h2>
                <p class="text-sm text-slate">{% trans "Action status and categories" %}</p>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Action Status -->
                <div class="chart-card">
                    <div class="chart-header">
                        <i data-lucide="layers" class="w-5 h-5 text-navy"></i>
                        <h3>{% trans "Action Status" %}</h3>
                    </div>
                    <div class="p-4">
                        <canvas id="actionStatusChart" class="h-64 w-full"></canvas>
                    </div>
                </div>

                <!-- Action Categories -->
                <div class="chart-card">
                    <div class="chart-header">
                        <i data-lucide="tag" class="w-5 h-5 text-navy"></i>
                        <h3>{% trans "Action Categories" %}</h3>
                    </div>
                    <div class="p-4">
                        <canvas id="actionCategoriesChart" class="h-64 w-full"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section: Surveys -->
    <div class="section-card mb-6 animate-in delay-300">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #f3e8ff, #e9d5ff);">
                <i data-lucide="clipboard-check" class="w-6 h-6 text-purple-600"></i>
            </div>
            <div>
                <h2 class="text-xl font-bold text-navy">{% trans "Survey Analytics" %}</h2>
                <p class="text-sm text-slate">{% trans "Patient satisfaction and NPS trends" %}</p>
            </div>
        </div>

        <div class="p-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- NPS Card -->
                <div class="chart-card flex flex-col justify-center items-center">
                    <div class="chart-header w-full">
                        <i data-lucide="thumbs-up" class="w-5 h-5 text-navy"></i>
                        <h3>{% trans "Net Promoter Score" %}</h3>
                    </div>
                    <div class="p-6 text-center">
                        <div class="text-6xl font-bold text-purple-600 mb-2">{{ kpis.nps_score }}</div>
                        <div class="text-sm text-slate mb-4">{% trans "Industry Avg: +32" %}</div>
                        <div class="w-full bg-slate-200 h-2 rounded-full overflow-hidden" style="width: 200px;">
                            {% widthratio kpis.nps_score|add:100 2 1 as nps_width %}
                            <div class="bg-purple-500 h-full" style="width: {{ nps_width }}%"></div>
                        </div>
                    </div>
                </div>

                <!-- Score Trend -->
                <div class="chart-card lg:col-span-2">
                    <div class="chart-header">
                        <i data-lucide="trending-up" class="w-5 h-5 text-navy"></i>
                        <h3>{% trans "Survey Score Trend" %}</h3>
                    </div>
                    <div class="p-4">
                        <canvas id="surveyTrendChart" class="h-64 w-full"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Performance Table -->
    <div class="section-card animate-in delay-400">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe);">
                <i data-lucide="building-2" class="w-6 h-6 text-blue-600"></i>
            </div>
            <div>
                <h2 class="text-xl font-bold text-navy">{% trans "Department Performance" %}</h2>
                <p class="text-sm text-slate">{% trans "Performance metrics by department" %}</p>
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>{% trans "Department" %}</th>
                        <th class="text-center">{% trans "Complaints" %}</th>
                        <th class="text-center">{% trans "Actions" %}</th>
                        <th class="text-center">{% trans "Survey Avg" %}</th>
                        <th class="text-center">{% trans "Resolution Rate" %}</th>
                        <th class="text-center">{% trans "Status" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dept in department_stats %}
                    <tr>
                        <td class="font-medium text-navy">{{ dept.name_ar }}</td>
                        <td class="text-center">{{ dept.complaints }}</td>
                        <td class="text-center">{{ dept.actions }}</td>
                        <td class="text-center">{{ dept.survey_avg }}</td>
                        <td class="text-center">
                            <div class="flex items-center justify-center gap-2">
                                <div class="progress-bar" style="width: 60px;">
                                    <div class="progress-fill {% if dept.resolution_rate >= 80 %}bg-emerald-500{% elif dept.resolution_rate >= 60 %}bg-blue-500{% else %}bg-orange-500{% endif %}" style="width: {{ dept.resolution_rate }}%"></div>
                                </div>
                                <span class="text-sm">{{ dept.resolution_rate }}%</span>
                            </div>
                        </td>
                        <td class="text-center">
                            {% if dept.resolution_rate >= 80 %}
                            <span class="badge badge-green">{% trans "Excellent" %}</span>
                            {% elif dept.resolution_rate >= 60 %}
                            <span class="badge badge-blue">{% trans "Good" %}</span>
                            {% else %}
                            <span class="badge badge-orange">{% trans "Needs Work" %}</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-8 text-slate">
                            {% trans "No department data available" %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- ====== AI-POWERED ANALYTICS SECTION ====== -->
    <div class="flex items-center gap-3 mb-6 mt-8 animate-in">
        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
            <i data-lucide="brain" class="w-5 h-5 text-white"></i>
        </div>
        <div>
            <h2 class="text-xl font-bold text-navy">{% trans "AI-Powered Insights" %}</h2>
            <p class="text-sm text-slate">{% trans "Predictive analytics and intelligent recommendations" %}</p>
        </div>
    </div>

    <!-- 1. Executive Summary Card -->
    {% if exec_summary %}
    <div class="section-card mb-6 animate-in">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #f3e8ff, #e9d5ff);">
                <i data-lucide="file-text" class="w-6 h-6 text-purple-600"></i>
            </div>
            <div class="flex-1">
                <h2 class="text-xl font-bold text-navy">{% trans "AI Executive Summary" %}</h2>
                <p class="text-sm text-slate">{% trans "Auto-generated analysis of the past 30 days" %}</p>
            </div>
            <span class="badge {% if exec_summary.risk_level == 'high' %}badge-red{% elif exec_summary.risk_level == 'medium' %}badge-orange{% else %}badge-green{% endif %}">
                {% if exec_summary.risk_level == 'high' %}{% trans "High Risk" %}{% elif exec_summary.risk_level == 'medium' %}{% trans "Medium Risk" %}{% else %}{% trans "Low Risk" %}{% endif %}
            </span>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- English Summary -->
                <div>
                    <h3 class="font-semibold text-navy mb-2 flex items-center gap-2">
                        <i data-lucide="globe" class="w-4 h-4"></i> {% trans "English Summary" %}
                    </h3>
                    <p class="text-slate leading-relaxed">{{ exec_summary.summary_en }}</p>
                    {% if exec_summary.key_findings_en %}
                    <ul class="mt-3 space-y-1">
                        {% for finding in exec_summary.key_findings_en %}
                        <li class="flex items-start gap-2 text-sm text-slate">
                            <i data-lucide="check-circle" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
                            <span>{{ finding }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
                <!-- Arabic Summary -->
                <div dir="rtl">
                    <h3 class="font-semibold text-navy mb-2 flex items-center gap-2">
                        <i data-lucide="globe" class="w-4 h-4"></i> {% trans "الملخص العربي" %}
                    </h3>
                    <p class="text-slate leading-relaxed font-arabic">{{ exec_summary.summary_ar }}</p>
                    {% if exec_summary.key_findings_ar %}
                    <ul class="mt-3 space-y-1">
                        {% for finding in exec_summary.key_findings_ar %}
                        <li class="flex items-start gap-2 text-sm text-slate">
                            <i data-lucide="check-circle" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
                            <span>{{ finding }}</span>
                        </li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                </div>
            </div>
            {% if exec_summary.recommendations_en %}
            <div class="mt-4 pt-4 border-t border-slate-200">
                <h4 class="font-semibold text-navy mb-2">{% trans "Recommended Actions" %}</h4>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                    {% for rec in exec_summary.recommendations_en %}
                    <div class="flex items-start gap-2 p-3 bg-slate-50 rounded-lg">
                        <i data-lucide="arrow-right" class="w-4 h-4 text-purple-500 mt-0.5 flex-shrink-0"></i>
                        <span class="text-sm text-slate">{{ rec }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- 2. Early Warning System -->
    {% if early_warnings %}
    <div class="section-card mb-6 animate-in delay-100">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #fee2e2, #fecaca);">
                <i data-lucide="alert-triangle" class="w-6 h-6 text-red-600"></i>
            </div>
            <div class="flex-1">
                <h2 class="text-xl font-bold text-navy">{% trans "Early Warning System" %}</h2>
                <p class="text-sm text-slate">{% trans "Departments showing risk signals across multiple channels" %}</p>
            </div>
            <span class="badge badge-red">{{ early_warnings|length }} {% trans "at risk" %}</span>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>{% trans "Department" %}</th>
                        <th class="text-center">{% trans "Risk Score" %}</th>
                        <th class="text-center">{% trans "Risk Level" %}</th>
                        <th class="text-center">{% trans "Active Signals" %}</th>
                        <th class="text-center">{% trans "Complaint Δ" %}</th>
                        <th class="text-center">{% trans "Survey Δ" %}</th>
                        <th class="text-center">{% trans "SLA Δ" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for dept in early_warnings %}
                    <tr>
                        <td class="font-medium text-navy">{{ dept.department_name }}</td>
                        <td class="text-center">
                            <div class="flex items-center justify-center gap-2">
                                <div class="progress-bar" style="width: 80px;">
                                    <div class="progress-fill {% if dept.risk_score >= 70 %}bg-red-500{% elif dept.risk_score >= 50 %}bg-orange-500{% elif dept.risk_score >= 30 %}bg-blue-500{% else %}bg-slate-400{% endif %}" style="width: {{ dept.risk_score }}%"></div>
                                </div>
                                <span class="text-sm font-semibold">{{ dept.risk_score }}%</span>
                            </div>
                        </td>
                        <td class="text-center">
                            <span class="badge {% if dept.risk_level == 'critical' %}badge-red{% elif dept.risk_level == 'high' %}badge-orange{% elif dept.risk_level == 'medium' %}badge-blue{% else %}badge-green{% endif %}">
                                {{ dept.risk_level|title }}
                            </span>
                        </td>
                        <td class="text-center font-semibold">{{ dept.active_signals }}/5</td>
                        <td class="text-center {% if dept.complaint_volume_spike.change_pct > 20 %}text-red-600 font-semibold{% elif dept.complaint_volume_spike.change_pct < -10 %}text-green-600{% endif %}">
                            {% if dept.complaint_volume_spike.change_pct > 0 %}+{% endif %}{{ dept.complaint_volume_spike.change_pct }}%
                        </td>
                        <td class="text-center {% if dept.survey_score_decline.change_pct < -10 %}text-red-600 font-semibold{% elif dept.survey_score_decline.change_pct > 5 %}text-green-600{% endif %}">
                            {{ dept.survey_score_decline.change_pct }}%
                        </td>
                        <td class="text-center {% if dept.sla_breach_increase.change_pp > 10 %}text-red-600 font-semibold{% endif %}">
                            +{{ dept.sla_breach_increase.change_pp }}pp
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- 3. Predictive Complaint Volume -->
    {% if complaint_forecast.labels %}
    <div class="section-card mb-6 animate-in delay-200">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #dbeafe, #bfdbfe);">
                <i data-lucide="trending-up" class="w-6 h-6 text-blue-600"></i>
            </div>
            <div class="flex-1">
                <h2 class="text-xl font-bold text-navy">{% trans "Predicted Complaint Volume" %}</h2>
                <p class="text-sm text-slate">{% trans "30-day forecast with confidence bands" %}</p>
            </div>
            <div class="flex items-center gap-4">
                <div class="text-center">
                    <p class="text-xs text-slate">{% trans "Predicted" %}</p>
                    <p class="text-lg font-bold text-blue-600">{{ complaint_forecast.total_predicted_30d }}</p>
                </div>
                <div class="text-center">
                    <p class="text-xs text-slate">{% trans "vs Recent" %}</p>
                    <p class="text-lg font-bold {% if complaint_forecast.change_pct > 10 %}text-red-600{% elif complaint_forecast.change_pct < -10 %}text-green-600{% else %}text-slate{% endif %}">
                        {% if complaint_forecast.change_pct > 0 %}+{% endif %}{{ complaint_forecast.change_pct }}%
                    </p>
                </div>
                <span class="badge {% if complaint_forecast.confidence_level == 'high' %}badge-green{% elif complaint_forecast.confidence_level == 'medium' %}badge-orange{% else %}badge-red{% endif %}">
                    {% if complaint_forecast.confidence_level == 'high' %}{% trans "High Confidence" %}{% elif complaint_forecast.confidence_level == 'medium' %}{% trans "Medium Confidence" %}{% else %}{% trans "Low Confidence" %}{% endif %}
                </span>
            </div>
        </div>
        <div class="p-6">
            <div class="chart-card">
                <div class="p-4">
                    <canvas id="forecastChart" class="h-72 w-full"></canvas>
                </div>
            </div>
            {% if complaint_forecast.day_of_week_pattern %}
            <div class="mt-4 p-4 bg-slate-50 rounded-lg">
                <h4 class="font-semibold text-navy mb-2 text-sm">{% trans "Day-of-Week Pattern Detected" %}</h4>
                <div class="flex flex-wrap gap-2">
                    {% for day, pattern in complaint_forecast.day_of_week_pattern.items %}
                    <span class="px-3 py-1 rounded-full text-xs font-semibold {% if pattern == 'above_average' %}bg-red-100 text-red-700{% elif pattern == 'below_average' %}bg-green-100 text-green-700{% else %}bg-slate-200 text-slate-600{% endif %}">
                        {{ day }}: {{ pattern|title }}
                    </span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- 4. SLA Breach Predictions -->
    {% if sla_breach_predictions %}
    <div class="section-card mb-6 animate-in delay-300">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #fef3c7, #fde68a);">
                <i data-lucide="clock-alert" class="w-6 h-6 text-orange-600"></i>
            </div>
            <div class="flex-1">
                <h2 class="text-xl font-bold text-navy">{% trans "SLA Breach Risk" %}</h2>
                <p class="text-sm text-slate">{% trans "Complaints at risk of breaching SLA deadline" %}</p>
            </div>
            <span class="badge badge-orange">{{ sla_breach_predictions|length }} {% trans "at risk" %}</span>
        </div>
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>{% trans "Complaint" %}</th>
                        <th class="text-center">{% trans "Breach Risk" %}</th>
                        <th class="text-center">{% trans "Severity" %}</th>
                        <th class="text-center">{% trans "Hours Left" %}</th>
                        <th class="text-center">{% trans "Department" %}</th>
                        <th>{% trans "Risk Factors" %}</th>
                        <th>{% trans "Recommendation" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for pred in sla_breach_predictions %}
                    <tr>
                        <td class="font-medium text-navy text-sm max-w-xs truncate" title="{{ pred.title }}">{{ pred.title }}</td>
                        <td class="text-center">
                            <div class="flex items-center justify-center gap-2">
                                <div class="progress-bar" style="width: 60px;">
                                    <div class="progress-fill {% if pred.breach_probability >= 80 %}bg-red-500{% elif pred.breach_probability >= 60 %}bg-orange-500{% elif pred.breach_probability >= 40 %}bg-blue-500{% else %}bg-slate-400{% endif %}" style="width: {{ pred.breach_probability }}%"></div>
                                </div>
                                <span class="text-sm font-semibold">{{ pred.breach_probability }}%</span>
                            </div>
                        </td>
                        <td class="text-center">
                            <span class="badge {% if pred.severity == 'critical' %}badge-red{% elif pred.severity == 'high' %}badge-orange{% elif pred.severity == 'medium' %}badge-blue{% else %}badge-green{% endif %}">
                                {{ pred.severity|title }}
                            </span>
                        </td>
                        <td class="text-center {% if pred.hours_remaining < 4 %}text-red-600 font-bold{% elif pred.hours_remaining < 12 %}text-orange-600{% endif %}">
                            {% if pred.hours_remaining < 0 %}{% trans "EXPIRED" %}{% else %}{{ pred.hours_remaining }}h{% endif %}
                        </td>
                        <td class="text-sm">{{ pred.department|default:"—" }}</td>
                        <td class="text-sm max-w-xs">
                            <ul class="list-disc list-inside space-y-0.5 text-xs text-slate">
                                {% for factor in pred.risk_factors %}
                                <li>{{ factor }}</li>
                                {% endfor %}
                            </ul>
                        </td>
                        <td class="text-sm font-medium text-navy">{{ pred.recommendation }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- 5. AI Action Recommendations -->
    {% if action_recommendations %}
    <div class="section-card mb-6 animate-in delay-400">
        <div class="section-header">
            <div class="section-icon" style="background: linear-gradient(135deg, #d1fae5, #a7f3d0);">
                <i data-lucide="lightbulb" class="w-6 h-6 text-emerald-600"></i>
            </div>
            <div class="flex-1">
                <h2 class="text-xl font-bold text-navy">{% trans "AI-Recommended Actions" %}</h2>
                <p class="text-sm text-slate">{% trans "Systemic issues identified from complaint pattern analysis" %}</p>
            </div>
            {% if action_recommendations.0.source == "ai_generated" %}
            <span class="badge badge-purple">{% trans "AI Generated" %}</span>
            {% else %}
            <span class="badge badge-blue">{% trans "Rule-Based" %}</span>
            {% endif %}
        </div>
        <div class="p-6 space-y-4">
            {% for rec in action_recommendations %}
            <div class="border border-slate-200 rounded-xl p-4 hover:border-blue-300 transition">
                <div class="flex items-start justify-between mb-2">
                    <div class="flex items-center gap-3">
                        <span class="badge {% if rec.priority == 'critical' %}badge-red{% elif rec.priority == 'high' %}badge-orange{% elif rec.priority == 'medium' %}badge-blue{% else %}badge-green{% endif %}">
                            {{ rec.priority|title }}
                        </span>
                        <span class="text-sm text-slate">{{ rec.category }}</span>
                    </div>
                    <span class="text-sm font-semibold text-slate">{{ rec.complaint_count }} {% trans "complaints" %}</span>
                </div>
                <h4 class="font-semibold text-navy mb-1">{{ rec.problem_summary_en }}</h4>
                {% if rec.recommended_actions_en %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mt-3">
                    {% for action in rec.recommended_actions_en %}
                    <div class="flex items-start gap-2 p-2.5 bg-emerald-50 rounded-lg text-sm">
                        <i data-lucide="zap" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
                        <span>{{ action }}</span>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
                {% if rec.expected_impact_en %}
                <p class="text-xs text-slate mt-2 flex items-center gap-1">
                    <i data-lucide="target" class="w-3 h-3"></i>
                    {{ rec.expected_impact_en }}
                </p>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

</div>

<script>
function refreshDashboard() {
    const icon = document.querySelector('[data-lucide="refresh-cw"]');
    icon.classList.add('animate-spin');
    setTimeout(() => {
        window.location.reload();
    }, 500);
}

function refreshAiAnalytics() {
    const btn = document.getElementById('refreshAiBtn');
    const icon = btn.querySelector('[data-lucide="sparkles"]');
    icon.classList.add('animate-spin');
    btn.disabled = true;
    btn.classList.add('opacity-60');

    // POST to trigger refresh
    fetch('{% url "analytics:refresh_ai_analytics" %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/json',
        },
    })
    .then(r => r.json())
    .then(data => {
        // Show toast notification
        showToast(data.message || 'AI analytics refresh triggered');
        // Poll for completion
        setTimeout(() => pollAiReady(), 10000);
    })
    .catch(err => {
        console.error('Failed to trigger AI refresh:', err);
        showToast('Failed to trigger AI refresh');
    })
    .finally(() => {
        icon.classList.remove('animate-spin');
        btn.disabled = false;
        btn.classList.remove('opacity-60');
    });
}

function pollAiReady(retries = 6) {
    if (retries <= 0) return;
    fetch('{% url "analytics:refresh_ai_analytics" %}')
        .then(r => r.json())
        .then(data => {
            if (data.cached && data.cached.executive_summary) {
                showToast('AI analytics updated — refresh the page to see new data', 'success');
            } else {
                setTimeout(() => pollAiReady(retries - 1), 10000);
            }
        })
        .catch(() => {});
}

function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-xl shadow-lg text-white text-sm z-50 transition-all ${type === 'success' ? 'bg-emerald-600' : 'bg-blue-600'}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => toast.remove(), 300);
    }, 5000);
}

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

    // Initialize charts
    initCharts();
});

function initCharts() {
    // Check if Chart.js loaded from CDN
    if (typeof Chart === 'undefined') {
        console.error('Chart.js failed to load from CDN. Charts will not render.');
        showChartError();
        return;
    }

    Chart.defaults.color = '#64748b';
    Chart.defaults.borderColor = '#e2e8f0';

    // Helper: build labels and data from JSON passed by view
    function buildChartData(jsonStr) {
        try {
            return JSON.parse(jsonStr || '[]');
        } catch (e) {
            console.error('Failed to parse chart data:', e);
            return [];
        }
    }

    // 1. Complaint Status Chart (doughnut)
    const statusCtx = document.getElementById('complaintStatusChart');
    if (statusCtx) {
        const statusData = [
            { label: 'Open', value: {{ kpis.open_complaints|default:0 }} },
            { label: 'In Progress', value: {{ kpis.in_progress_complaints|default:0 }} },
            { label: 'Resolved', value: {{ kpis.resolved_complaints|default:0 }} },
            { label: 'Closed', value: {{ kpis.closed_complaints|default:0 }} },
        ];
        // Filter out zero values for cleaner chart
        const filtered = statusData.filter(d => d.value > 0);
        new Chart(statusCtx, {
            type: 'doughnut',
            data: {
                labels: filtered.map(d => d.label),
                datasets: [{
                    data: filtered.map(d => d.value),
                    backgroundColor: ['#f59e0b', '#3b82f6', '#10b981', '#64748b'].slice(0, filtered.length),
                    borderColor: '#ffffff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { padding: 15, usePointStyle: true } }
                }
            }
        });
    }

    // 2. Complaint Sources Chart (pie) - dynamic from PXSource data
    const sourcesCtx = document.getElementById('complaintSourcesChart');
    if (sourcesCtx) {
        const sourcesData = buildChartData('{{ complaint_sources|escapejs }}');
        if (sourcesData.length > 0) {
            const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
            new Chart(sourcesCtx, {
                type: 'pie',
                data: {
                    labels: sourcesData.map((s, i) => s.source__name_en || 'Unknown'),
                    datasets: [{
                        data: sourcesData.map(s => s.count),
                        backgroundColor: colors.slice(0, sourcesData.length),
                        borderColor: '#ffffff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { padding: 10, usePointStyle: true, boxWidth: 10 } }
                    }
                }
            });
        } else {
            // Fallback to internal/external breakdown
            new Chart(sourcesCtx, {
                type: 'pie',
                data: {
                    labels: ['Internal', 'External'],
                    datasets: [{
                        data: [{{ kpis.internal_complaints|default:0 }}, {{ kpis.external_complaints|default:0 }}],
                        backgroundColor: ['#3b82f6', '#10b981'],
                        borderColor: '#ffffff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'bottom', labels: { padding: 10, usePointStyle: true, boxWidth: 10 } }
                    }
                }
            });
        }
    }

    // 3. Severity Chart (bar)
    const severityCtx = document.getElementById('severityChart');
    if (severityCtx) {
        new Chart(severityCtx, {
            type: 'bar',
            data: {
                labels: ['Critical', 'High', 'Medium', 'Low'],
                datasets: [{
                    label: 'Complaints',
                    data: [{{ kpis.critical_complaints|default:0 }}, {{ kpis.high_complaints|default:0 }}, {{ kpis.medium_complaints|default:0 }}, {{ kpis.low_complaints|default:0 }}],
                    backgroundColor: ['#ef4444', '#f97316', '#f59e0b', '#10b981'],
                    borderRadius: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
                    x: { grid: { display: false } }
                }
            }
        });
    }

    // 4. Action Status Chart (doughnut)
    const actionStatusCtx = document.getElementById('actionStatusChart');
    if (actionStatusCtx) {
        const actionStatusData = [
            { label: 'Open', value: {{ kpis.open_actions|default:0 }} },
            { label: 'In Progress', value: {{ kpis.in_progress_actions|default:0 }} },
            { label: 'Pending Approval', value: {{ kpis.pending_actions|default:0 }} },
            { label: 'Closed', value: {{ kpis.closed_actions|default:0 }} },
        ];
        const filteredActions = actionStatusData.filter(d => d.value > 0);
        new Chart(actionStatusCtx, {
            type: 'doughnut',
            data: {
                labels: filteredActions.map(d => d.label),
                datasets: [{
                    data: filteredActions.map(d => d.value),
                    backgroundColor: ['#3b82f6', '#f59e0b', '#8b5cf6', '#10b981'].slice(0, filteredActions.length),
                    borderColor: '#ffffff',
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom', labels: { padding: 15, usePointStyle: true } }
                }
            }
        });
    }

    // 5. Action Categories Chart (bar) - dynamic labels
    const actionCatCtx = document.getElementById('actionCategoriesChart');
    if (actionCatCtx) {
        const actionCatsData = buildChartData('{{ action_categories|escapejs }}');
        const categoryLabels = {
            'clinical_quality': 'Clinical Quality',
            'patient_safety': 'Patient Safety',
            'service_quality': 'Service Quality',
            'staff_behavior': 'Staff Behavior',
            'facility': 'Facility',
            'process_improvement': 'Process',
            'other': 'Other',
            'training': 'Training',
            'policy': 'Policy',
        };
        if (actionCatsData.length > 0) {
            const catColors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
            new Chart(actionCatCtx, {
                type: 'bar',
                data: {
                    labels: actionCatsData.map(c => categoryLabels[c.category] || c.category),
                    datasets: [{
                        label: 'Actions',
                        data: actionCatsData.map(c => c.count),
                        backgroundColor: catColors.slice(0, actionCatsData.length),
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
                        x: { grid: { display: false } }
                    }
                }
            });
        } else {
            // Fallback to explicit category KPIs
            new Chart(actionCatCtx, {
                type: 'bar',
                data: {
                    labels: ['Clinical', 'Safety', 'Service', 'Facility', 'Other'],
                    datasets: [{
                        label: 'Actions',
                        data: [
                            {{ kpis.training_actions|default:0 }},
                            {{ kpis.process_actions|default:0 }},
                            {{ kpis.policy_actions|default:0 }},
                            {{ kpis.facility_actions|default:0 }},
                            {{ kpis.other_actions|default:0 }}
                        ],
                        backgroundColor: '#3b82f6',
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
                        x: { grid: { display: false } }
                    }
                }
            });
        }
    }

    // 6. Survey Trend Chart (line) - using actual 6-month data from view
    const surveyCtx = document.getElementById('surveyTrendChart');
    if (surveyCtx) {
        const trendLabels = JSON.parse('{{ survey_trend_labels|safe }}');
        const trendValues = [
            {{ kpis.survey_trend_1|default:0 }},
            {{ kpis.survey_trend_2|default:0 }},
            {{ kpis.survey_trend_3|default:0 }},
            {{ kpis.survey_trend_4|default:0 }},
            {{ kpis.survey_trend_5|default:0 }},
            {{ kpis.survey_trend_6|default:0 }}
        ];
        const maxVal = Math.max(...trendValues.filter(v => v > 0));
        const minVal = Math.min(...trendValues.filter(v => v > 0));
        const padding = ((maxVal - minVal) * 0.2) || 0.5;

        new Chart(surveyCtx, {
            type: 'line',
            data: {
                labels: trendLabels.length > 0 ? trendLabels : ['M1', 'M2', 'M3', 'M4', 'M5', 'M6'],
                datasets: [{
                    label: 'Survey Score',
                    data: trendValues,
                    borderColor: '#8b5cf6',
                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 4,
                    pointBackgroundColor: '#8b5cf6'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    y: {
                        beginAtZero: false,
                        min: Math.max(0, minVal - padding),
                        max: Math.min(5, maxVal + padding),
                        grid: { color: '#e2e8f0' }
                    },
                    x: { grid: { display: false } }
                }
            }
        });
    }

    // 7. Complaint Volume Forecast Chart (line with confidence bands)
    const forecastData = {{ complaint_forecast|default:'{}'|safe }};
    if (forecastData.labels && forecastData.labels.length > 0) {
        const forecastCtx = document.getElementById('forecastChart');
        if (forecastCtx) {
            // Format dates for display
            const shortLabels = forecastData.labels.map(d => {
                const parts = d.split('-');
                return parts[1] + '/' + parts[2];
            });

            new Chart(forecastCtx, {
                type: 'line',
                data: {
                    labels: shortLabels,
                    datasets: [
                        {
                            label: 'Upper Bound',
                            data: forecastData.upper_band,
                            borderColor: 'transparent',
                            backgroundColor: 'rgba(59, 130, 246, 0.08)',
                            fill: false,
                            pointRadius: 0,
                            tension: 0.4
                        },
                        {
                            label: 'Lower Bound',
                            data: forecastData.lower_band,
                            borderColor: 'transparent',
                            backgroundColor: 'rgba(59, 130, 246, 0.08)',
                            fill: '-1',
                            pointRadius: 0,
                            tension: 0.4
                        },
                        {
                            label: 'Predicted',
                            data: forecastData.predicted,
                            borderColor: '#3b82f6',
                            backgroundColor: 'transparent',
                            fill: false,
                            pointRadius: 3,
                            pointBackgroundColor: '#3b82f6',
                            tension: 0.4,
                            borderWidth: 2
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 15,
                                usePointStyle: true,
                                filter: function(item) { return item.text !== 'Upper Bound' && item.text !== 'Lower Bound'; }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                afterBody: function(items) {
                                    const idx = items[0].dataIndex;
                                    return 'Range: ' + forecastData.lower_band[idx] + ' – ' + forecastData.upper_band[idx];
                                }
                            }
                        }
                    },
                    scales: {
                        y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
                        x: { grid: { display: false } }
                    }
                }
            });
        }
    }
}

function showChartError() {
    const chartContainers = document.querySelectorAll('.chart-card canvas');
    chartContainers.forEach(container => {
        const parent = container.parentElement;
        if (parent) {
            container.style.display = 'none';
            const errDiv = document.createElement('div');
            errDiv.className = 'text-center py-8 text-slate';
            errDiv.innerHTML = '<i data-lucide="alert-triangle" class="w-8 h-8 mx-auto mb-2 text-orange-400"></i><p class="text-sm">Chart library unavailable</p>';
            parent.appendChild(errDiv);
        }
    });
    lucide.createIcons();
}
</script>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js" onerror="showChartError()"></script>
{% endblock %}