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

{% block title %}{% trans "Physician Ratings 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;
    }

    /* Stat Cards */
    .stat-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;
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--hh-navy), var(--hh-blue));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .stat-card:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-color: var(--hh-blue);
        transform: translateY(-4px);
    }

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

    .stat-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;
    }

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

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

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

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

    .stat-icon.bg-purple {
        background: linear-gradient(135deg, #8b5cf6, #a78bfa);
        color: white;
    }

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

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

    /* 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;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .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 Controls */
    .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;
    }

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

    /* Loading State */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.9);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loading-overlay.active {
        display: flex;
    }

    /* 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">
    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="text-center">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-navy"></div>
            <p class="mt-2 text-gray-600">{% trans "Loading dashboard data..." %}</p>
        </div>
    </div>

    <!-- Page Header -->
    <div class="page-header">
        <h1>
            <i data-lucide="star" class="w-8 h-8 inline-block me-2"></i>
            {% trans "Physician Ratings Dashboard" %}
        </h1>
        <p class="mb-0">{% trans "Comprehensive physician performance analytics and insights" %}</p>
    </div>

    <!-- Filter Panel -->
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 mb-6">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-bold text-gray-800 flex items-center gap-2">
                <i data-lucide="filter" class="w-5 h-5 text-navy"></i>
                {% trans "Filters" %}
            </h3>
            <button type="button" id="toggleFilters" class="text-gray-400 hover:text-gray-600 transition">
                <i data-lucide="chevron-down" class="w-5 h-5"></i>
            </button>
        </div>
        <div id="filterContent" class="px-6 py-4">
            <form id="filterForm" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">{% trans "Year" %}</label>
                    <select name="year" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none transition">
                        {% for y in years %}
                        <option value="{{ y }}" {% if filters.year == y|stringformat:"s" %}selected{% endif %}>{{ y }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">{% trans "Month" %}</label>
                    <select name="month" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none transition">
                        {% for m in "123456789012"|make_list %}
                        <option value="{{ forloop.counter }}" {% if filters.month == forloop.counter|stringformat:"s" %}selected{% endif %}>
                            {{ forloop.counter|stringformat:"02d" }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">{% trans "Hospital" %}</label>
                    <select name="hospital" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none transition">
                        <option value="">{% trans "All Hospitals" %}</option>
                        {% for hospital in hospitals %}
                        <option value="{{ hospital.id }}" {% if filters.hospital == hospital.id|stringformat:"s" %}selected{% endif %}>
                            {{ hospital.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">{% trans "Department" %}</label>
                    <select name="department" class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none transition">
                        <option value="">{% trans "All Departments" %}</option>
                        {% for department in departments %}
                        <option value="{{ department.id }}" {% if filters.department == department.id|stringformat:"s" %}selected{% endif %}>
                            {{ department.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full px-6 py-2.5 bg-navy text-white rounded-xl font-semibold shadow-md hover:bg-blue transition flex items-center justify-center gap-2">
                        <i data-lucide="search" class="w-4 h-4"></i>
                        {% trans "Apply" %}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="stat-card animate-in">
            <div class="flex items-start justify-between">
                <div>
                    <p class="stat-label">{% trans "Total Physicians" %}</p>
                    <p class="stat-value" id="totalPhysicians">-</p>
                    <p class="text-sm text-slate mt-1">{% trans "Active ratings" %}</p>
                </div>
                <div class="stat-icon bg-navy">
                    <i data-lucide="users" class="w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="stat-card animate-in">
            <div class="flex items-start justify-between">
                <div>
                    <p class="stat-label">{% trans "Average Rating" %}</p>
                    <p class="stat-value text-green-600" id="avgRating">-</p>
                    <p class="text-sm text-slate mt-1">{% trans "Across all physicians" %}</p>
                </div>
                <div class="stat-icon bg-green">
                    <i data-lucide="star" class="w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="stat-card animate-in">
            <div class="flex items-start justify-between">
                <div>
                    <p class="stat-label">{% trans "Total Surveys" %}</p>
                    <p class="stat-value" id="totalSurveys">-</p>
                    <p class="text-sm text-slate mt-1">{% trans "This period" %}</p>
                </div>
                <div class="stat-icon bg-purple">
                    <i data-lucide="file-text" class="w-6 h-6"></i>
                </div>
            </div>
        </div>

        <div class="stat-card animate-in">
            <div class="flex items-start justify-between">
                <div>
                    <p class="stat-label">{% trans "Excellent (4.5+)" %}</p>
                    <p class="stat-value text-yellow-600" id="excellentCount">-</p>
                    <p class="text-sm text-slate mt-1">{% trans "Top performers" %}</p>
                </div>
                <div class="stat-icon bg-yellow">
                    <i data-lucide="award" class="w-6 h-6"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Empty State Alert -->
    <div id="emptyStateAlert" class="hidden bg-amber-50 border-2 border-amber-200 rounded-2xl p-6 mb-6">
        <div class="flex items-start gap-4">
            <div class="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center flex-shrink-0">
                <i data-lucide="info" class="w-6 h-6 text-amber-600"></i>
            </div>
            <div class="flex-1">
                <h3 class="font-bold text-amber-900 mb-1">{% trans "No Rating Data Available" %}</h3>
                <p class="text-amber-700 text-sm mb-3">
                    {% trans "There are no physician ratings for the selected period. Physician ratings are automatically calculated from patient survey responses." %}
                </p>
                <div class="flex gap-3">
                    <a href="{% url 'physicians:doctor_rating_import' %}" class="px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition font-semibold text-sm">
                        <i data-lucide="upload" class="w-4 h-4 inline-block mr-1"></i>
                        {% trans "Import Ratings" %}
                    </a>
                    <a href="{% url 'physicians:leaderboard' %}" class="px-4 py-2 bg-white text-amber-700 border border-amber-300 rounded-lg hover:bg-amber-50 transition font-semibold text-sm">
                        <i data-lucide="trophy" class="w-4 h-4 inline-block mr-1"></i>
                        {% trans "View Leaderboard" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 1 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Rating Trend -->
        <div class="chart-card">
            <div class="card-header">
                <h5>
                    <i data-lucide="trending-up" class="w-5 h-5"></i>
                    {% trans "Rating Trend (6 Months)" %}
                </h5>
            </div>
            <div class="p-4">
                <div id="ratingTrendChart" style="min-height: 350px;"></div>
            </div>
        </div>

        <!-- Rating Distribution -->
        <div class="chart-card">
            <div class="card-header">
                <h5>
                    <i data-lucide="circle-help" class="w-5 h-5"></i>
                    {% trans "Rating Distribution" %}
                </h5>
            </div>
            <div class="p-4">
                <div id="distributionChart" style="min-height: 350px;"></div>
            </div>
        </div>
    </div>

    <!-- Charts Row 2 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <!-- Department Comparison -->
        <div class="chart-card lg:col-span-2">
            <div class="card-header">
                <h5>
                    <i data-lucide="circle-help" class="w-5 h-5"></i>
                    {% trans "Top Departments by Rating" %}
                </h5>
            </div>
            <div class="p-4">
                <div id="departmentChart" style="min-height: 350px;"></div>
            </div>
        </div>

        <!-- Sentiment Breakdown -->
        <div class="chart-card">
            <div class="card-header">
                <h5>
                    <i data-lucide="pie-chart" class="w-5 h-5"></i>
                    {% trans "Sentiment Analysis" %}
                </h5>
            </div>
            <div class="p-4">
                <div id="sentimentChart" style="min-height: 350px;"></div>
            </div>
        </div>
    </div>

    <!-- Top Physicians Table -->
    <div class="chart-card mb-6">
        <div class="card-header">
            <h5>
                <i data-lucide="trophy" class="w-5 h-5"></i>
                {% trans "Top 10 Physicians" %}
            </h5>
            <a href="{% url 'physicians:leaderboard' %}" class="text-sm font-semibold text-navy hover:text-blue transition flex items-center gap-1">
                {% trans "View Full Leaderboard" %}
                <i data-lucide="arrow-right" class="w-4 h-4"></i>
            </a>
        </div>
        <div class="p-0 overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        <th class="px-6 py-4 text-left font-bold text-navy text-xs uppercase tracking-wider">{% trans "Rank" %}</th>
                        <th class="px-6 py-4 text-left font-bold text-navy text-xs uppercase tracking-wider">{% trans "Physician" %}</th>
                        <th class="px-6 py-4 text-left font-bold text-navy text-xs uppercase tracking-wider">{% trans "Specialization" %}</th>
                        <th class="px-6 py-4 text-left font-bold text-navy text-xs uppercase tracking-wider">{% trans "Department" %}</th>
                        <th class="px-6 py-4 text-left font-bold text-navy text-xs uppercase tracking-wider">{% trans "Hospital" %}</th>
                        <th class="px-6 py-4 text-center font-bold text-navy text-xs uppercase tracking-wider">{% trans "Rating" %}</th>
                        <th class="px-6 py-4 text-center font-bold text-navy text-xs uppercase tracking-wider">{% trans "Surveys" %}</th>
                        <th class="px-6 py-4 text-center font-bold text-navy text-xs uppercase tracking-wider">{% trans "Actions" %}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100" id="topPhysiciansTable">
                    <tr>
                        <td colspan="8" class="px-6 py-12 text-center">
                            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-navy"></div>
                            <p class="text-slate mt-2">{% trans "Loading..." %}</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // PX360 Theme Colors
    const hhColors = {
        navy: '#005696',
        blue: '#007bbd',
        light: '#eef6fb',
        slate: '#64748b',
        success: '#10b981',
        warning: '#f59e0b',
        danger: '#ef4444',
        purple: '#8b5cf6'
    };

    let charts = {};

    // Initialize dashboard
    document.addEventListener('DOMContentLoaded', function() {
        lucide.createIcons();
        loadDashboardData();

        // Toggle filters
        document.getElementById('toggleFilters').addEventListener('click', function() {
            const content = document.getElementById('filterContent');
            const icon = this.querySelector('i');
            if (content.classList.contains('hidden')) {
                content.classList.remove('hidden');
                icon.setAttribute('data-lucide', 'chevron-down');
            } else {
                content.classList.add('hidden');
                icon.setAttribute('data-lucide', 'chevron-up');
            }
            lucide.createIcons();
        });
    });

    // Load dashboard data
    function loadDashboardData() {
        showLoading();

        const form = document.getElementById('filterForm');
        const formData = new FormData(form);
        const params = new URLSearchParams(formData);

        fetch(`/physicians/api/dashboard/?${params.toString()}`)
            .then(response => {
                if (!response.ok) {
                    return response.text().then(text => {
                        throw new Error(`HTTP ${response.status}: ${text.substring(0, 200)}`);
                    });
                }
                return response.json();
            })
            .then(data => {
                console.log('Dashboard data received:', data);
                updateStatistics(data.statistics);
                updateRatingTrendChart(data.trend);
                updateDistributionChart(data.distribution);
                updateDepartmentChart(data.departments);
                updateSentimentChart(data.sentiment);
                updateTopPhysiciansTable(data.top_physicians);
                hideLoading();
            })
            .catch(error => {
                console.error('Error loading dashboard:', error);
                hideLoading();
                alert(`Error loading dashboard data: ${error.message}\n\nPlease check the browser console for more details.`);
            });
    }

    // Update statistics cards
    function updateStatistics(stats) {
        document.getElementById('totalPhysicians').textContent = stats.total_physicians || 0;
        document.getElementById('avgRating').textContent = (stats.average_rating || 0).toFixed(2);
        document.getElementById('totalSurveys').textContent = (stats.total_surveys || 0).toLocaleString();
        document.getElementById('excellentCount').textContent = stats.excellent_count || 0;

        // Show empty state if no data
        const emptyStateAlert = document.getElementById('emptyStateAlert');
        if (stats.total_physicians === 0 || stats.total_surveys === 0) {
            emptyStateAlert.classList.remove('hidden');
        } else {
            emptyStateAlert.classList.add('hidden');
        }
    }

    // Rating Trend Chart
    function updateRatingTrendChart(trendData) {
        const options = {
            series: [{
                name: '{% trans "Average Rating" %}',
                data: trendData.map(item => item.average_rating)
            }],
            chart: {
                type: 'area',
                height: 350,
                fontFamily: 'Inter, sans-serif',
                toolbar: { show: false },
                animations: { enabled: true }
            },
            colors: [hhColors.blue],
            dataLabels: { enabled: false },
            stroke: { curve: 'smooth', width: 3 },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.4,
                    opacityTo: 0.1,
                    stops: [0, 100]
                }
            },
            xaxis: {
                categories: trendData.map(item => item.period),
                labels: { style: { fontSize: '12px', colors: hhColors.slate } }
            },
            yaxis: {
                min: 0,
                max: 5,
                labels: { style: { fontSize: '12px', colors: hhColors.slate } }
            },
            grid: {
                borderColor: '#e2e8f0',
                strokeDashArray: 4
            },
            tooltip: {
                theme: 'light',
                y: {
                    formatter: value => value.toFixed(2)
                }
            }
        };

        if (charts.ratingTrend) {
            charts.ratingTrend.destroy();
        }
        charts.ratingTrend = new ApexCharts(document.querySelector("#ratingTrendChart"), options);
        charts.ratingTrend.render();
    }

    // Distribution Chart
    function updateDistributionChart(distData) {
        const options = {
            series: [
                distData.excellent || 0,
                distData.good || 0,
                distData.average || 0,
                distData.poor || 0
            ],
            chart: {
                type: 'donut',
                height: 350,
                fontFamily: 'Inter, sans-serif',
                toolbar: { show: false }
            },
            labels: ['Excellent (4.5+)', 'Good (3.5-4.5)', 'Average (2.5-3.5)', 'Poor (<2.5)'],
            colors: [hhColors.success, hhColors.blue, hhColors.warning, hhColors.danger],
            plotOptions: {
                pie: {
                    donut: {
                        size: '65%',
                        labels: {
                            show: true,
                            name: { fontSize: '14px', fontWeight: 600 },
                            value: { fontSize: '20px', fontWeight: 700, formatter: val => parseInt(val).toLocaleString() },
                            total: {
                                show: true,
                                label: 'Total',
                                fontSize: '14px',
                                formatter: w => w.globals.seriesTotals.reduce((a, b) => a + b, 0).toLocaleString()
                            }
                        }
                    }
                }
            },
            dataLabels: { enabled: false },
            legend: { position: 'bottom', fontSize: '12px' }
        };

        if (charts.distribution) {
            charts.distribution.destroy();
        }
        charts.distribution = new ApexCharts(document.querySelector("#distributionChart"), options);
        charts.distribution.render();
    }

    // Department Chart
    function updateDepartmentChart(deptData) {
        const options = {
            series: [{
                name: '{% trans "Average Rating" %}',
                data: deptData.map(item => item.average_rating)
            }],
            chart: {
                type: 'bar',
                height: 350,
                fontFamily: 'Inter, sans-serif',
                toolbar: { show: false }
            },
            colors: [hhColors.blue],
            plotOptions: {
                bar: {
                    borderRadius: 8,
                    horizontal: true,
                    barHeight: '70%'
                }
            },
            dataLabels: {
                enabled: true,
                textAnchor: 'start',
                style: { fontSize: '12px', fontWeight: 600 },
                formatter: val => val.toFixed(2)
            },
            xaxis: {
                categories: deptData.map(item => item.name),
                labels: { style: { fontSize: '11px', colors: hhColors.slate } },
                min: 0,
                max: 5
            },
            yaxis: {
                labels: { style: { fontSize: '11px', colors: hhColors.slate } }
            },
            grid: {
                borderColor: '#e2e8f0',
                strokeDashArray: 4
            },
            tooltip: {
                theme: 'light',
                y: { formatter: val => val.toFixed(2) }
            }
        };

        if (charts.department) {
            charts.department.destroy();
        }
        charts.department = new ApexCharts(document.querySelector("#departmentChart"), options);
        charts.department.render();
    }

    // Sentiment Chart
    function updateSentimentChart(sentimentData) {
        const options = {
            series: [
                sentimentData.positive || 0,
                sentimentData.neutral || 0,
                sentimentData.negative || 0
            ],
            chart: {
                type: 'pie',
                height: 350,
                fontFamily: 'Inter, sans-serif',
                toolbar: { show: false }
            },
            labels: ['Positive', 'Neutral', 'Negative'],
            colors: [hhColors.success, hhColors.warning, hhColors.danger],
            plotOptions: {
                pie: {
                    expandOnClick: true
                }
            },
            dataLabels: {
                enabled: true,
                formatter: val => val.toFixed(1) + '%'
            },
            legend: { position: 'bottom', fontSize: '12px' },
            tooltip: {
                theme: 'light',
                y: { formatter: val => val.toLocaleString() }
            }
        };

        if (charts.sentiment) {
            charts.sentiment.destroy();
        }
        charts.sentiment = new ApexCharts(document.querySelector("#sentimentChart"), options);
        charts.sentiment.render();
    }

    // Update Top Physicians Table
    function updateTopPhysiciansTable(physicians) {
        const tbody = document.getElementById('topPhysiciansTable');
        
        if (!physicians || physicians.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="8" class="px-6 py-12 text-center">
                        <i data-lucide="inbox" class="w-12 h-12 text-slate-300 mx-auto mb-3"></i>
                        <p class="text-slate">{% trans "No physicians found" %}</p>
                    </td>
                </tr>
            `;
            lucide.createIcons();
            return;
        }

        tbody.innerHTML = physicians.map((physician, index) => {
            const rankClass = index === 0 ? 'bg-yellow-100 text-yellow-700' : 
                             index === 1 ? 'bg-slate-200 text-slate-700' : 
                             index === 2 ? 'bg-orange-100 text-orange-700' : 'bg-light text-navy';
            const rankIcon = index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `#${index + 1}`;
            
            return `
                <tr class="hover:bg-slate-50 transition cursor-pointer" onclick="window.location.href='/physicians/${physician.id}/'">
                    <td class="px-6 py-4">
                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-full font-bold text-sm ${rankClass}">
                            ${rankIcon}
                        </span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-blue/10 flex items-center justify-center">
                                <i data-lucide="user" class="w-5 h-5 text-blue"></i>
                            </div>
                            <div>
                                <p class="font-bold text-navy">${physician.name}</p>
                                <p class="text-xs text-slate">${physician.license_number}</p>
                            </div>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-sm text-slate">${physician.specialization || '-'}</td>
                    <td class="px-6 py-4 text-sm text-slate">${physician.department || '-'}</td>
                    <td class="px-6 py-4 text-sm text-slate">${physician.hospital}</td>
                    <td class="px-6 py-4 text-center">
                        <div class="flex items-center justify-center gap-1">
                            <i data-lucide="star" class="w-4 h-4 text-yellow-500 fill-yellow-500"></i>
                            <span class="font-bold text-lg text-green-600">${physician.rating.toFixed(2)}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
                            ${physician.surveys.toLocaleString()}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <a href="/physicians/${physician.id}/" class="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-blue/10 text-blue hover:bg-blue hover:text-white transition">
                            <i data-lucide="eye" class="w-4 h-4"></i>
                        </a>
                    </td>
                </tr>
            `;
        }).join('');

        lucide.createIcons();
    }

    // Utility functions
    function showLoading() {
        document.getElementById('loadingOverlay').classList.add('active');
    }

    function hideLoading() {
        document.getElementById('loadingOverlay').classList.remove('active');
    }
</script>
{% endblock %}