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

{% block title %}{% trans "Analytics Dashboard" %} - 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;
        --hh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --hh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --hh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* Page Header */
    .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: var(--hh-shadow-lg);
        position: relative;
        overflow: hidden;
    }

    .page-header::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%);
        pointer-events: none;
    }

    .page-header h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        letter-spacing: -0.025em;
    }

    .page-header p {
        color: rgba(255,255,255,0.9);
        font-size: 1rem;
    }

    /* KPI Cards */
    .kpi-card {
        background: white;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: var(--hh-shadow-md);
        border: 1px solid #e2e8f0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .kpi-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        transition: opacity 0.3s ease;
    }

    .kpi-card.primary::before {
        background: linear-gradient(90deg, var(--hh-navy), var(--hh-blue));
    }

    .kpi-card.danger::before {
        background: linear-gradient(90deg, #dc2626, #ef4444);
    }

    .kpi-card.warning::before {
        background: linear-gradient(90deg, #d97706, #f59e0b);
    }

    .kpi-card.success::before {
        background: linear-gradient(90deg, #059669, #10b981);
    }

    .kpi-card:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        transform: translateY(-4px);
    }

    .kpi-card:hover::before {
        opacity: 1;
    }

    .kpi-icon {
        width: 56px;
        height: 56px;
        border-radius: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        position: relative;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }

    .kpi-card:hover .kpi-icon {
        transform: scale(1.1) rotate(3deg);
    }

    .kpi-icon.bg-navy {
        background: linear-gradient(135deg, #005696, #007bbd);
        color: white;
    }

    .kpi-icon.bg-danger {
        background: linear-gradient(135deg, #dc2626, #ef4444);
        color: white;
    }

    .kpi-icon.bg-warning {
        background: linear-gradient(135deg, #f59e0b, #fbbf24);
        color: white;
    }

    .kpi-icon.bg-success {
        background: linear-gradient(135deg, #10b981, #34d399);
        color: white;
    }

    .kpi-value {
        font-size: 2rem;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 0.25rem;
        line-height: 1;
    }

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

    .kpi-subtitle {
        color: #94a3b8;
        font-size: 0.75rem;
    }

    /* Chart Cards */
    .chart-card {
        background: white;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        overflow: hidden;
        box-shadow: var(--hh-shadow-md);
        transition: all 0.3s ease;
    }

    .chart-card:hover {
        box-shadow: var(--hh-shadow-lg);
    }

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

    .chart-card .card-header h5 {
        color: var(--hh-navy);
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        font-size: 1.1rem;
        margin: 0;
    }

    /* Form Select - PX360 Style */
    .form-select {
        border: 1px solid #cbd5e1;
        border-radius: 0.5rem;
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
        transition: all 0.2s;
        background: white;
        min-width: 200px;
    }

    .form-select:focus {
        border-color: var(--hh-blue);
        box-shadow: 0 0 0 3px rgba(0, 123, 189, 0.1);
        outline: none;
    }

    /* List Items */
    .list-item {
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #f1f5f9;
        transition: background-color 0.2s ease;
    }

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

    .list-item:hover {
        background-color: var(--hh-light);
    }

    .dept-rank {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .rank-badge {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.875rem;
    }

    .rank-badge.gold {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: white;
    }

    .rank-badge.silver {
        background: linear-gradient(135deg, #94a3b8, #64748b);
        color: white;
    }

    .rank-badge.bronze {
        background: linear-gradient(135deg, #d97706, #b45309);
        color: white;
    }

    .rank-badge.default {
        background: #e2e8f0;
        color: #64748b;
    }

    /* Attention Items */
    .attention-item {
        padding: 1rem 1.25rem;
        border-radius: 0.75rem;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .attention-item.danger {
        background: linear-gradient(135deg, #fef2f2, #fee2e2);
        border: 1px solid #fecaca;
    }

    .attention-item.warning {
        background: linear-gradient(135deg, #fffbeb, #fef3c7);
        border: 1px solid #fde68a;
    }

    .attention-item.success {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7);
        border: 1px solid #bbf7d0;
    }

    .attention-value {
        font-size: 1.5rem;
        font-weight: 800;
    }

    .attention-value.text-danger {
        color: #dc2626;
    }

    .attention-value.text-warning {
        color: #d97706;
    }

    /* Empty State */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem 1.5rem;
        text-align: center;
    }

    .empty-state-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        color: var(--hh-blue);
    }

    /* Animations */
    @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">
        <h1>
            <i data-lucide="bar-chart-2" class="w-8 h-8 inline-block me-2"></i>
            {% trans "Analytics & KPIs" %}
        </h1>
        <p class="mb-0">{% trans "Monitor key performance indicators and trends" %}</p>
    </div>

    <!-- Hospital Filter -->
    <div class="flex justify-end mb-4">
        <select class="form-select" onchange="window.location.href='?hospital='+this.value">
            <option value="">{% trans "All Hospitals" %}</option>
            {% for hospital in hospitals %}
            <option value="{{ hospital.id }}" {% if selected_hospital and selected_hospital.id == hospital.id %}selected{% endif %}>
                {{ hospital.name_en }}
            </option>
            {% endfor %}
        </select>
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="kpi-card primary animate-in">
            <div class="flex items-start justify-between">
                <div>
                    <p class="kpi-label">{% trans "Total Complaints" %}</p>
                    <p class="kpi-value">{{ kpis.total_complaints }}</p>
                    <p class="kpi-subtitle">
                        <span class="text-green-500 font-semibold">{% trans "Open:" %} {{ kpis.open_complaints }}</span>
                    </p>
                </div>
                <div class="kpi-icon bg-navy">
                    <i data-lucide="message-square" class="w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="kpi-card danger animate-in">
            <div class="flex items-start justify-between">
                <div>
                    <p class="kpi-label">{% trans "Overdue Complaints" %}</p>
                    <p class="kpi-value text-danger">{{ kpis.overdue_complaints }}</p>
                    <p class="kpi-subtitle">{% trans "Requires attention" %}</p>
                </div>
                <div class="kpi-icon bg-danger">
                    <i data-lucide="alert-circle" class="w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="kpi-card warning animate-in">
            <div class="flex items-start justify-between">
                <div>
                    <p class="kpi-label">{% trans "Total Actions" %}</p>
                    <p class="kpi-value">{{ kpis.total_actions }}</p>
                    <p class="kpi-subtitle">
                        <span class="text-blue-500 font-semibold">{% trans "Open:" %} {{ kpis.open_actions }}</span>
                    </p>
                </div>
                <div class="kpi-icon bg-warning">
                    <i data-lucide="check-square" class="w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="kpi-card success animate-in">
            <div class="flex items-start justify-between">
                <div>
                    <p class="kpi-label">{% trans "Avg Survey Score" %}</p>
                    <p class="kpi-value">{{ kpis.avg_survey_score|floatformat:1 }}<span class="text-lg text-slate-400">/5.0</span></p>
                    <p class="kpi-subtitle">
                        <span class="text-red-500 font-semibold">{% trans "Negative:" %} {{ kpis.negative_surveys }}</span>
                    </p>
                </div>
                <div class="kpi-icon bg-success">
                    <i data-lucide="smile" class="w-6 h-6"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Rankings and Attention Areas -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Top Performing Departments -->
        <div class="chart-card">
            <div class="card-header">
                <h5>
                    <i data-lucide="trophy" class="w-5 h-5"></i>
                    {% trans "Top Performing Departments" %}
                </h5>
            </div>
            <div class="p-0">
                {% if department_rankings %}
                <div class="divide-y divide-slate-100">
                    {% for dept in department_rankings %}
                    <div class="list-item">
                        <div class="flex items-center justify-between">
                            <div class="dept-rank">
                                <span class="rank-badge {% if forloop.counter == 1 %}gold{% elif forloop.counter == 2 %}silver{% elif forloop.counter == 3 %}bronze{% else %}default{% endif %}">
                                    {{ forloop.counter }}
                                </span>
                                <div>
                                    <p class="font-semibold text-slate-800">{{ dept.name_en }}</p>
                                    <p class="text-xs text-slate-500">{% trans "Surveys:" %} {{ dept.survey_count }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="text-2xl font-bold text-green-600 mb-0">{{ dept.avg_score|floatformat:1 }}</p>
                                <p class="text-xs text-slate-500 mb-0">{% trans "Avg Score" %}</p>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <div class="empty-state-icon">
                        <i data-lucide="trophy" class="w-10 h-10"></i>
                    </div>
                    <p class="text-slate-500 mb-0">{% trans "No data available" %}</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Areas Needing Attention -->
        <div class="chart-card">
            <div class="card-header">
                <h5>
                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                    {% trans "Areas Needing Attention" %}
                </h5>
            </div>
            <div class="p-4">
                {% if kpis.overdue_complaints > 0 or kpis.overdue_actions > 0 or kpis.negative_surveys > 0 %}
                
                    {% if kpis.overdue_complaints > 0 %}
                    <div class="attention-item danger">
                        <div>
                            <p class="font-bold text-danger mb-1">
                                <i data-lucide="clock" class="w-4 h-4 inline-block me-1"></i>
                                {% trans "Overdue Complaints" %}
                            </p>
                            <p class="text-sm text-slate-600 mb-0">{% trans "Requires immediate action" %}</p>
                        </div>
                        <p class="attention-value text-danger">{{ kpis.overdue_complaints }}</p>
                    </div>
                    {% endif %}

                    {% if kpis.overdue_actions > 0 %}
                    <div class="attention-item warning">
                        <div>
                            <p class="font-bold text-warning mb-1">
                                <i data-lucide="calendar-x" class="w-4 h-4 inline-block me-1"></i>
                                {% trans "Overdue Actions" %}
                            </p>
                            <p class="text-sm text-slate-600 mb-0">{% trans "SLA breached" %}</p>
                        </div>
                        <p class="attention-value text-warning">{{ kpis.overdue_actions }}</p>
                    </div>
                    {% endif %}

                    {% if kpis.negative_surveys > 0 %}
                    <div class="attention-item danger">
                        <div>
                            <p class="font-bold text-danger mb-1">
                                <i data-lucide="frown" class="w-4 h-4 inline-block me-1"></i>
                                {% trans "Negative Surveys" %}
                            </p>
                            <p class="text-sm text-slate-600 mb-0">{% trans "Low satisfaction scores" %}</p>
                        </div>
                        <p class="attention-value text-danger">{{ kpis.negative_surveys }}</p>
                    </div>
                    {% endif %}

                {% else %}
                <div class="empty-state">
                    <div class="empty-state-icon" style="background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #10b981;">
                        <i data-lucide="check-circle" class="w-10 h-10"></i>
                    </div>
                    <p class="text-green-600 font-semibold mb-0">{% trans "All metrics on target!" %}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
    // Initialize Lucide icons on page load
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
    });
</script>
{% endblock %}