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

{% block title %}{% trans "Visit Journey" %} - {{ visit.admission_id }} - {{ patient.get_full_name }}{% endblock %}

{% block extra_css %}
<style>
    .field-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #64748b;
    }
    .field-value {
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
        line-height: 1.5;
    }
    .type-badge {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.625rem;
        border-radius: 0.5rem;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.025em;
    }
    .type-badge.ed { background: #fef3c7; color: #92400e; }
    .type-badge.ip { background: #dbeafe; color: #1e40af; }
    .type-badge.op { background: #d1fae5; color: #065f46; }
    .vip-badge {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        font-size: 0.625rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .timeline-item { position: relative; }
    .timeline-item:not(:last-child)::after {
        content: '';
        position: absolute;
        left: 19px;
        top: 44px;
        bottom: -4px;
        width: 2px;
        background: #e2e8f0;
    }
    .timeline-dot {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="p-8">
    <nav class="flex items-center gap-2 text-sm text-slate mb-6">
        <a href="{% url 'organizations:patient_list' %}"
           class="hover:text-navy transition flex items-center gap-1 group">
            <i data-lucide="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
            {% trans "Patients" %}
        </a>
        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
        <a href="{% url 'organizations:patient_detail' patient.pk %}"
           class="hover:text-navy transition">
            {{ patient.get_full_name }}
        </a>
        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
        <span class="font-bold text-navy">{% trans "Visit Journey" %}</span>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">
            <!-- Visit Summary Card -->
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <div class="flex items-center justify-between mb-5">
                    <h2 class="text-lg font-bold text-navy flex items-center gap-2">
                        <div class="w-9 h-9 bg-gradient-to-br from-blue-100 to-blue-50 rounded-xl flex items-center justify-center shadow-sm">
                            <i data-lucide="route" class="w-5 h-5 text-blue"></i>
                        </div>
                        {% trans "Visit Journey" %}
                    </h2>
                    <div class="flex items-center gap-2">
                        <span class="type-badge {{ visit.patient_type|lower }}">{{ visit.patient_type }}</span>
                        {% if visit.is_vip %}<span class="vip-badge">VIP</span>{% endif %}
                        {% if visit.is_visit_complete %}
                        <span class="inline-flex px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-green-100 text-green-700">{% trans "Complete" %}</span>
                        {% elif visit.survey_instance %}
                        <span class="inline-flex px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-blue-100 text-blue-700">{% trans "Survey Sent" %}</span>
                        {% else %}
                        <span class="inline-flex px-2.5 py-1 rounded-full text-[10px] font-bold uppercase bg-amber-100 text-amber-700">{% trans "Active" %}</span>
                        {% endif %}
                    </div>
                </div>

                <div class="font-mono text-sm text-slate mb-5 flex items-center gap-2">
                    <i data-lucide="hash" class="w-4 h-4 text-blue"></i>
                    <span class="font-bold text-navy">{{ visit.admission_id }}</span>
                    {% if visit.reg_code %}
                    <span class="text-slate-300">|</span>
                    <span>Reg: {{ visit.reg_code }}</span>
                    {% endif %}
                </div>

                <!-- Visit Details Grid -->
                <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-5">
                    <div class="bg-slate-50 rounded-xl p-3 border border-slate-100">
                        <p class="field-label">{% trans "Admission" %}</p>
                        <p class="field-value">{{ visit.admit_date|date:"d M Y, H:i"|default:"-" }}</p>
                    </div>
                    <div class="bg-slate-50 rounded-xl p-3 border border-slate-100">
                        <p class="field-label">{% trans "Discharge" %}</p>
                        {% if visit.discharge_date %}
                        <p class="field-value text-green-600">{{ visit.discharge_date|date:"d M Y, H:i" }}</p>
                        {% else %}
                        <p class="field-value text-amber-600">{% trans "In Progress" %}</p>
                        {% endif %}
                    </div>
                    <div class="bg-slate-50 rounded-xl p-3 border border-slate-100">
                        <p class="field-label">{% trans "Hospital" %}</p>
                        <p class="field-value">{{ visit.hospital.name|default:"-" }}</p>
                    </div>
                    <div class="bg-slate-50 rounded-xl p-3 border border-slate-100">
                        <p class="field-label">{% trans "Insurance" %}</p>
                        <p class="field-value">{{ visit.insurance_company_name|default:"-" }}</p>
                        {% if visit.bill_type %}
                        <span class="text-[10px] font-bold bg-white text-slate-500 px-1.5 py-0.5 rounded border border-slate-200">{{ visit.bill_type }}</span>
                        {% endif %}
                    </div>
                    <div class="bg-blue-50 rounded-xl p-3 border border-blue-100">
                        <p class="field-label">{% trans "Total Duration" %}</p>
                        <p class="field-value text-blue-700">{{ total_duration_display }}</p>
                        <p class="text-[10px] text-blue-400 mt-0.5">{% trans "First → Last event" %}</p>
                    </div>
                </div>
            </section>

            <!-- Timeline -->
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <h3 class="text-sm font-bold text-navy mb-5 flex items-center gap-2">
                    <div class="w-9 h-9 bg-gradient-to-br from-slate-100 to-slate-50 rounded-xl flex items-center justify-center shadow-sm">
                        <i data-lucide="clock" class="w-5 h-5 text-slate"></i>
                    </div>
                    {% trans "Visit Timeline" %}
                    <span class="text-xs font-medium text-slate bg-slate-100 px-2 py-0.5 rounded-md ml-1">{{ timeline|length }} {% trans "events" %}</span>
                </h3>

                {% if timeline %}
                <div class="space-y-0">
                    {% for item in timeline %}
                    <div class="timeline-item flex gap-4">
                        <div class="timeline-dot bg-navy/10 text-navy">
                            <i data-lucide="file-text" class="w-4 h-4"></i>
                        </div>
                        <div class="flex-1 min-w-0 bg-slate-50 rounded-xl p-4 border border-slate-100 hover:border-navy/30 transition">
                            <div class="flex items-center justify-between gap-3 mb-2">
                                <div class="flex items-center gap-2 flex-wrap">
                                    {% if item.event.patient_type %}
                                    <span class="type-badge {{ item.event.patient_type|lower }}">{{ item.event.patient_type }}</span>
                                    {% endif %}
                                    {% if item.event.visit_category %}
                                    <span class="text-[10px] font-bold bg-white text-slate-500 px-1.5 py-0.5 rounded border border-slate-200">{{ item.event.visit_category }}</span>
                                    {% endif %}
                                    {% if item.event.event_type %}
                                    <span class="text-xs font-semibold text-navy">{{ item.event.event_type }}</span>
                                    {% endif %}
                                </div>
                                {% if item.event.parsed_date or item.event.bill_date %}
                                <span class="text-xs text-slate whitespace-nowrap flex items-center gap-1">
                                    <i data-lucide="calendar" class="w-3 h-3"></i>
                                    {% if item.event.parsed_date %}
                                    {{ item.event.parsed_date|date:"d M Y, H:i" }}
                                    {% else %}
                                    {{ item.event.bill_date }}
                                    {% endif %}
                                </span>
                                {% endif %}
                            </div>
                            {% if item.event.reg_code %}
                            <div class="flex items-center gap-3 text-xs text-slate">
                                <span>Reg: <span class="font-mono font-semibold">{{ item.event.reg_code }}</span></span>
                                {% if item.event.admission_id %}
                                <span class="text-slate-300">|</span>
                                <span>Adm: <span class="font-mono font-semibold">{{ item.event.admission_id }}</span></span>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% if item.duration_seconds is not None and item.duration_seconds >= 60 %}
                    <div class="flex items-center gap-2 pl-14 py-1.5">
                        <div class="h-px bg-slate-200 flex-1"></div>
                        <span class="text-[10px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100 whitespace-nowrap flex items-center gap-1">
                            <i data-lucide="timer" class="w-2.5 h-2.5"></i>
                            {{ item.duration_display }}
                        </span>
                        <div class="h-px bg-slate-200 flex-1"></div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% else %}
                <div class="flex flex-col items-center py-10">
                    <div class="w-12 h-12 bg-slate-100 rounded-full flex items-center justify-center mb-3">
                        <i data-lucide="clock" class="w-6 h-6 text-slate-300"></i>
                    </div>
                    <p class="text-slate text-sm">{% trans "No timeline events recorded for this visit" %}</p>
                </div>
                {% endif %}
            </section>

            <!-- Visit Analytics -->
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <h3 class="text-sm font-bold text-navy mb-5 flex items-center gap-2">
                    <div class="w-9 h-9 bg-gradient-to-br from-purple-100 to-purple-50 rounded-xl flex items-center justify-center shadow-sm">
                        <i data-lucide="bar-chart-3" class="w-5 h-5 text-purple-600"></i>
                    </div>
                    {% trans "Visit Analytics" %}
                </h3>

                <!-- Stats Cards -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                    <div class="bg-blue-50 rounded-xl p-3 border border-blue-100">
                        <p class="text-[10px] font-bold text-blue-400 uppercase tracking-wider">{% trans "Total Duration" %}</p>
                        <p class="text-lg font-bold text-blue-700">{{ total_duration_display }}</p>
                    </div>
                    <div class="bg-green-50 rounded-xl p-3 border border-green-100">
                        <p class="text-[10px] font-bold text-green-400 uppercase tracking-wider">{% trans "Avg Step Time" %}</p>
                        <p class="text-lg font-bold text-green-700">{{ avg_step_display }}</p>
                    </div>
                    <div class="bg-amber-50 rounded-xl p-3 border border-amber-100">
                        <p class="text-[10px] font-bold text-amber-400 uppercase tracking-wider">{% trans "Longest Wait" %}</p>
                        <p class="text-lg font-bold text-amber-700">{{ longest_wait_display }}</p>
                    </div>
                    <div class="bg-slate-50 rounded-xl p-3 border border-slate-200">
                        <p class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">{% trans "Total Steps" %}</p>
                        <p class="text-lg font-bold text-slate-700">{{ step_count }}</p>
                    </div>
                </div>

                <!-- Charts Row -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Bar Chart: Time per interval -->
                    <div>
                        <p class="text-xs font-bold text-slate uppercase tracking-wider mb-3">{% trans "Time Between Events (min)" %}</p>
                        <div id="visit-bar-chart" class="min-h-[280px]"></div>
                    </div>
                    <!-- Donut Chart: Time by category -->
                    <div>
                        <p class="text-xs font-bold text-slate uppercase tracking-wider mb-3">{% trans "Time Distribution" %}</p>
                        <div id="visit-donut-chart" class="min-h-[280px]"></div>
                    </div>
                </div>
            </section>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Patient Info -->
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
                    <div class="w-9 h-9 bg-gradient-to-br from-blue-100 to-blue-50 rounded-xl flex items-center justify-center shadow-sm">
                        <i data-lucide="user-circle" class="w-5 h-5 text-blue"></i>
                    </div>
                    {% trans "Patient" %}
                </h3>
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center text-white font-bold text-lg flex-shrink-0"
                         style="background: linear-gradient(135deg, #007bbd 0%, #005696 100%);">
                        {{ patient.first_name|first }}{{ patient.last_name|first }}
                    </div>
                    <div class="min-w-0">
                        <a href="{% url 'organizations:patient_detail' patient.pk %}" class="font-bold text-navy hover:text-blue transition truncate block">{{ patient.get_full_name }}</a>
                        <span class="text-xs text-slate font-mono">{{ patient.mrn }}</span>
                    </div>
                </div>
                <div class="space-y-3">
                    {% if patient.phone %}
                    <div class="flex items-center gap-2 text-sm text-slate">
                        <i data-lucide="phone" class="w-3.5 h-3.5 text-blue"></i>
                        <span class="font-mono">{{ patient.phone }}</span>
                    </div>
                    {% endif %}
                    {% if patient.nationality %}
                    <div class="flex items-center gap-2 text-sm text-slate">
                        <i data-lucide="globe" class="w-3.5 h-3.5 text-blue"></i>
                        <span>{{ patient.nationality }}</span>
                    </div>
                    {% endif %}
                    {% if patient.national_id %}
                    <div class="flex items-center gap-2 text-sm text-slate">
                        <i data-lucide="credit-card" class="w-3.5 h-3.5 text-blue"></i>
                        <span class="font-mono">{{ patient.national_id|mask_id }}</span>
                    </div>
                    {% endif %}
                </div>
            </section>

            <!-- Doctor Info -->
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
                    <div class="w-9 h-9 bg-gradient-to-br from-purple-100 to-purple-50 rounded-xl flex items-center justify-center shadow-sm">
                        <i data-lucide="stethoscope" class="w-5 h-5 text-purple-600"></i>
                    </div>
                    {% trans "Medical Team" %}
                </h3>
                <div class="space-y-4">
                    {% if visit.primary_doctor_fk %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Primary Doctor" %}</p>
                        <a href="{% url 'organizations:staff_detail' visit.primary_doctor_fk.pk %}"
                           class="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 border border-slate-100 hover:border-navy/30 hover:bg-blue-50/30 transition group">
                            <div class="w-9 h-9 bg-navy/10 rounded-lg flex items-center justify-center">
                                <i data-lucide="user" class="w-4 h-4 text-navy"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-navy group-hover:text-blue transition truncate">{{ visit.primary_doctor_fk }}</p>
                                {% if visit.primary_doctor_fk.job_title %}
                                <p class="text-xs text-slate">{{ visit.primary_doctor_fk.job_title }}</p>
                                {% endif %}
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300 group-hover:text-navy transition ml-auto flex-shrink-0"></i>
                        </a>
                    </div>
                    {% else %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Primary Doctor" %}</p>
                        <p class="text-sm text-slate">{{ visit.doctor_display }}</p>
                    </div>
                    {% endif %}

                    {% if visit.consultant_fk %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Consultant" %}</p>
                        <a href="{% url 'organizations:staff_detail' visit.consultant_fk.pk %}"
                           class="flex items-center gap-3 p-2.5 rounded-xl bg-slate-50 border border-slate-100 hover:border-navy/30 hover:bg-blue-50/30 transition group">
                            <div class="w-9 h-9 bg-purple-500/10 rounded-lg flex items-center justify-center">
                                <i data-lucide="user" class="w-4 h-4 text-purple-600"></i>
                            </div>
                            <div class="min-w-0">
                                <p class="text-sm font-semibold text-navy group-hover:text-blue transition truncate">{{ visit.consultant_fk }}</p>
                                {% if visit.consultant_fk.job_title %}
                                <p class="text-xs text-slate">{{ visit.consultant_fk.job_title }}</p>
                                {% endif %}
                            </div>
                            <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300 group-hover:text-navy transition ml-auto flex-shrink-0"></i>
                        </a>
                    </div>
                    {% elif visit.consultant_id %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-1">{% trans "Consultant" %}</p>
                        <p class="text-sm text-slate">{{ visit.consultant_display }}</p>
                    </div>
                    {% endif %}
                </div>
            </section>

            <!-- Additional Visit Info -->
            <section class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
                <h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
                    <div class="w-9 h-9 bg-gradient-to-br from-slate-100 to-slate-50 rounded-xl flex items-center justify-center shadow-sm">
                        <i data-lucide="info" class="w-5 h-5 text-slate"></i>
                    </div>
                    {% trans "Visit Details" %}
                </h3>
                <div class="space-y-3">
                    {% if visit.company_name %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Company" %}</p>
                        <p class="text-sm font-medium text-gray-800">{{ visit.company_name }}</p>
                    </div>
                    {% endif %}
                    {% if visit.grade_name %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Grade" %}</p>
                        <p class="text-sm font-medium text-gray-800">{{ visit.grade_name }}</p>
                    </div>
                    {% endif %}
                    {% if visit.nationality %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Nationality" %}</p>
                        <p class="text-sm font-medium text-gray-800">{{ visit.nationality }}</p>
                    </div>
                    {% endif %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Patient ID (HIS)" %}</p>
                        <p class="text-sm font-mono font-medium text-gray-800">{{ visit.patient_id_his|default:"-" }}</p>
                    </div>
                    {% if visit.last_his_fetch_at %}
                    <div>
                        <p class="text-[10px] font-bold text-slate uppercase tracking-wider mb-0.5">{% trans "Last HIS Sync" %}</p>
                        <p class="text-sm text-slate">{{ visit.last_his_fetch_at|date:"d M Y, H:i" }}</p>
                    </div>
                    {% endif %}
                </div>
            </section>

            <!-- Survey Status -->
            {% if visit.survey_instance %}
            <section class="rounded-2xl p-6 shadow-lg text-white relative overflow-hidden" style="background: linear-gradient(135deg, #007bbd 0%, #005696 100%);">
                <div class="absolute top-0 right-0 w-32 h-32 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-2 mb-3">
                        <i data-lucide="clipboard-list" class="w-5 h-5"></i>
                        <h3 class="text-sm font-bold">{% trans "Survey" %}</h3>
                    </div>
                    <p class="text-sm text-white/80 mb-1">{{ visit.survey_instance.survey_template.name }}</p>
                    <div class="flex items-center gap-3 text-xs text-white/70">
                        {% if visit.survey_instance.sent_at %}
                        <span class="flex items-center gap-1">
                            <i data-lucide="send" class="w-3 h-3"></i>
                            {{ visit.survey_instance.sent_at|date:"d M Y H:i" }}
                        </span>
                        {% endif %}
                        {% if visit.survey_instance.total_score %}
                        <span class="px-2 py-0.5 rounded bg-white/20 font-bold">{{ visit.survey_instance.total_score }}</span>
                        {% endif %}
                    </div>
                </div>
            </section>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    lucide.createIcons();

    // Bar Chart: Time between events
    const barData = JSON.parse('{{ bar_chart_json|escapejs }}');
    const isPlaceholder = barData.length === 1 && barData[0].y <= 0.1;
    const barColors = ['#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#ef4444','#f97316','#f59e0b','#eab308','#84cc16','#22c55e','#14b8a6','#06b6d4','#0ea5e9','#3b82f6','#6366f1','#8b5cf6','#a855f7'];
    new ApexCharts(document.querySelector('#visit-bar-chart'), {
        chart: { type: 'bar', height: Math.max(180, barData.length * 32), fontFamily: 'inherit', toolbar: { show: false } },
        series: [{ name: '{% trans "Minutes" %}', data: barData }],
        colors: isPlaceholder ? ['#e2e8f0'] : barColors.slice(0, barData.length),
        plotOptions: {
            bar: { horizontal: true, borderRadius: 6, barHeight: '65%',
                dataLabels: { position: 'top' }
            }
        },
        dataLabels: { enabled: true, formatter: function(val) { return val <= 0.1 ? '{% trans "No intervals" %}' : val + 'm'; }, style: { fontSize: '11px', fontWeight: 600, colors: isPlaceholder ? ['#94a3b8'] : ['#1e293b'] }, offsetX: 24 },
        xaxis: { labels: { style: { fontSize: '10px', colors: ['#94a3b8'] } }, axisBorder: { show: false }, axisTicks: { show: false }, max: isPlaceholder ? 1 : undefined },
        yaxis: { labels: { style: { fontSize: '10px', colors: ['#334155'] }, maxWidth: 200 } },
        grid: { borderColor: '#f1f5f9', strokeDashArray: 4, xaxis: { lines: { show: true } }, yaxis: { lines: { show: false } } },
        tooltip: { enabled: !isPlaceholder, y: { formatter: function(val) { return val + ' min'; } } }
    }).render();

    // Donut Chart: Time distribution by category
    const donutData = JSON.parse('{{ donut_chart_json|escapejs }}');
    const donutColors = JSON.parse('{{ donut_colors_json|escapejs }}');
    const isDonutPlaceholder = donutData.labels.length === 1 && donutData.labels[0] === 'No data';
    new ApexCharts(document.querySelector('#visit-donut-chart'), {
        chart: { type: 'donut', height: 300, fontFamily: 'inherit' },
        labels: donutData.labels,
        series: donutData.series,
        colors: isDonutPlaceholder ? ['#e2e8f0'] : donutColors,
        stroke: { width: 3, colors: ['#fff'] },
        legend: { position: 'bottom', fontSize: '12px', fontWeight: 500, markers: { size: 8, strokeWidth: 0 } },
        dataLabels: {
            enabled: true,
            style: { fontSize: '12px', fontWeight: 600 },
            dropShadow: { enabled: false }
        },
        plotOptions: {
            pie: {
                donut: {
                    size: '60%',
                    labels: {
                        show: true,
                        name: { show: true, fontSize: '14px', fontWeight: 600, color: '#1e293b' },
                        value: { show: !isDonutPlaceholder, fontSize: '16px', fontWeight: 700, color: '#1e293b',
                            formatter: function(val) { return val + 'm'; }
                        },
                        total: {
                            show: true,
                            label: isDonutPlaceholder ? '{% trans "No data" %}' : '{% trans "Total" %}',
                            fontSize: '13px',
                            fontWeight: 600,
                            color: isDonutPlaceholder ? '#94a3b8' : '#64748b',
                            formatter: function(w) {
                                if (isDonutPlaceholder) return '-';
                                const total = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                                if (total >= 60) return Math.round(total / 60) + 'h ' + Math.round(total % 60) + 'm';
                                return Math.round(total) + 'm';
                            }
                        }
                    }
                }
            }
        },
        tooltip: { enabled: !isDonutPlaceholder, y: { formatter: function(val) { return val + ' min'; } } }
    }).render();
</script>
{% endblock %}
