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

{% block title %}{{ report.indicator_title }} - {% trans "KPI Report" %}{% endblock %}

{% block extra_css %}
<style>
    /* Button Styles */
    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        background: linear-gradient(to right, #005696, #007bbd);
        color: white;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 0.75rem;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 6px -1px rgba(0, 86, 150, 0.2);
    }
    .btn-primary:hover {
        opacity: 0.9;
        box-shadow: 0 6px 8px -1px rgba(0, 86, 150, 0.3);
    }
    .btn-primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .btn-secondary {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        background: white;
        color: #475569;
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: 0.75rem;
        border: 1px solid #e2e8f0;
        cursor: pointer;
        transition: all 0.2s;
    }
    .btn-secondary:hover {
        background: #f8fafc;
        border-color: #cbd5e1;
    }
    
    /* Card styling */
    .card {
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
</style>
{% endblock %}

{% block content %}
<div class="p-6">
  <!-- Header -->
  <div class="flex flex-wrap justify-between items-start gap-4 mb-6">
    <div>
      <div class="flex items-center gap-2 mb-2">
        <a href="{% url 'analytics:kpi_report_list' %}" class="text-blue hover:text-navy">
          <i data-lucide="arrow-left" class="w-5 h-5"></i>
        </a>
        <span class="px-2 py-1 text-xs font-bold rounded bg-navy text-white">{{ report.kpi_id }}</span>
        <span class="text-slate">|</span>
        <span class="text-slate">{{ report.report_period_display }}</span>
      </div>
      <h1 class="text-2xl font-bold text-navy">{{ report.indicator_title }}</h1>
      <p class="text-slate mt-1">
        <i data-lucide="building-2" class="w-4 h-4 inline mr-1"></i>
        {{ report.hospital.name }}
      </p>
    </div>
    
    <div class="flex gap-2">
      <a href="{% url 'analytics:kpi_report_pdf' report.id %}" 
         class="btn-secondary flex items-center gap-2">
        <i data-lucide="download" class="w-4 h-4"></i>
        {% trans "Export PDF" %}
      </a>
      <form method="post" action="{% url 'analytics:kpi_report_regenerate' report.id %}" 
            onsubmit="return confirm('{% trans "Regenerate this report? Current data will be replaced." %}')">
        {% csrf_token %}
        <button type="submit" class="btn-secondary flex items-center gap-2">
          <i data-lucide="refresh-cw" class="w-4 h-4"></i>
          {% trans "Regenerate" %}
        </button>
      </form>
    </div>
  </div>

  <!-- Main Table (Excel-style) -->
  <div class="card mb-6 overflow-x-auto">
    <table class="w-full border-collapse min-w-[800px]">
      <!-- Header Row -->
      <thead>
        <tr class="bg-navy text-white">
          <th class="p-3 text-left text-sm font-semibold border border-slate-300">{% trans "KPI ID" %}</th>
          <th class="p-3 text-left text-sm font-semibold border border-slate-300 w-64">{% trans "Indicator Title" %}</th>
          <th class="p-3 text-left text-sm font-semibold border border-slate-300">{% trans "Numerator / Denominator" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Jan" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Feb" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Mar" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Apr" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "May" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Jun" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Jul" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Aug" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Sep" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Oct" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Nov" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 w-12">{% trans "Dec" %}</th>
          <th class="p-3 text-center text-sm font-semibold border border-slate-300 bg-blue">{% trans "TOTAL" %}</th>
        </tr>
      </thead>
      
      <tbody>
        <!-- Row 1: Numerator -->
        <tr class="bg-white">
          <td rowspan="3" class="p-3 border border-slate-300 text-center text-blue font-bold align-middle">
            {{ report.kpi_id }}
          </td>
          <td rowspan="3" class="p-3 border border-slate-300 text-left font-bold text-navy align-middle">
            {{ report.indicator_title }}
          </td>
          <td class="p-3 border border-slate-300 text-left bg-slate-50 text-sm">
            {{ report.numerator_label }}
          </td>
          {% for m in monthly_data %}
          <td class="p-3 border border-slate-300 text-center text-sm">{% if m %}{{ m.numerator }}{% else %}-{% endif %}</td>
          {% endfor %}
          <td class="p-3 border border-slate-300 text-center font-bold bg-slate-100">{{ report.total_numerator }}</td>
        </tr>
        
        <!-- Row 2: Denominator -->
        <tr class="bg-white">
          <td class="p-3 border border-slate-300 text-left bg-slate-50 text-sm">
            {{ report.denominator_label }}
          </td>
          {% for m in monthly_data %}
          <td class="p-3 border border-slate-300 text-center text-sm">{% if m %}{{ m.denominator }}{% else %}-{% endif %}</td>
          {% endfor %}
          <td class="p-3 border border-slate-300 text-center font-bold bg-slate-100">{{ report.total_denominator }}</td>
        </tr>
        
        <!-- Row 3: Result % -->
        <tr class="bg-white font-semibold">
          <td class="p-3 border border-slate-300 text-left text-navy bg-slate-100">
            {% trans "Result (%)" %}
          </td>
          {% for m in monthly_data %}
          <td class="p-3 border border-slate-300 text-center text-sm
            {% if m and m.is_below_target %}text-red-600 bg-red-50{% elif m %}text-green-600{% endif %}">
            {% if m %}{{ m.percentage }}%{% else %}-{% endif %}
          </td>
          {% endfor %}
          <td class="p-3 border border-slate-300 text-center font-bold bg-navy text-white">
            {{ report.overall_result }}%
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Metadata Badges -->
  <div class="grid grid-cols-2 md:grid-cols-5 gap-2 text-xs bg-light p-4 rounded-lg border border-slate-200 mb-6">
    <div>
      <span class="font-semibold text-navy">{% trans "Category:" %}</span> {{ report.category }}
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Type:" %}</span> {{ report.kpi_type }}
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Risk:" %}</span>
      <span class="px-1.5 py-0.5 rounded text-xs
        {% if report.risk_level == 'High' %}bg-red-100 text-red-800
        {% elif report.risk_level == 'Medium' %}bg-yellow-100 text-yellow-800
        {% else %}bg-green-100 text-green-800{% endif %}">
        {{ report.risk_level }}
      </span>
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Data coll.:" %}</span> {{ report.data_collection_method }}
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Method:" %}</span> {{ report.data_collection_frequency }}
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Dimension:" %}</span> {{ report.dimension }}
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Gather freq.:" %}</span> {{ report.data_collection_frequency }}
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Reporting:" %}</span> {{ report.reporting_frequency }}
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Collector:" %}</span> {{ report.collector_name|default:"-" }}
    </div>
    <div>
      <span class="font-semibold text-navy">{% trans "Analyzer:" %}</span> {{ report.analyzer_name|default:"-" }}
    </div>
  </div>

  <!-- Charts -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <!-- Trend Chart -->
    <div class="card lg:col-span-2">
      <h3 class="text-sm font-bold text-navy uppercase mb-4 flex items-center gap-2">
        <i data-lucide="trending-up" class="w-4 h-4"></i>
        {% trans "Monthly Performance Trend (%)" %}
        <span class="text-slate font-normal">[{% trans "Target:" %} {{ report.target_percentage }}%]</span>
      </h3>
      <div id="trendChart" style="height: 300px;"></div>
    </div>
    
    <!-- Source Chart -->
    <div class="card">
      <h3 class="text-sm font-bold text-navy uppercase mb-4 flex items-center gap-2">
        <i data-lucide="pie-chart" class="w-4 h-4"></i>
        {% trans "Complaints by Source" %}
      </h3>
      <div id="sourceChart" style="height: 300px;"></div>
    </div>
  </div>

  <!-- Department Breakdown -->
  <div class="card mb-6">
    <h3 class="text-sm font-bold text-navy uppercase mb-4 flex items-center gap-2">
      <i data-lucide="building" class="w-4 h-4"></i>
      {% trans "Department Breakdown" %}
    </h3>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {% for dept in department_breakdowns %}
      <div class="border rounded-lg p-4
        {% if dept.department_category == 'medical' %}border-blue-200 bg-blue-50
        {% elif dept.department_category == 'nursing' %}border-slate-200 bg-slate-50
        {% elif dept.department_category == 'admin' %}border-green-200 bg-green-50
        {% else %}border-yellow-200 bg-yellow-50{% endif %}">
        <h4 class="text-xs font-bold px-2 py-1 rounded mb-2 inline-block
          {% if dept.department_category == 'medical' %}bg-blue text-white
          {% elif dept.department_category == 'nursing' %}bg-slate text-white
          {% elif dept.department_category == 'admin' %}bg-green-600 text-white
          {% else %}bg-yellow-600 text-white{% endif %}">
          {{ dept.get_department_category_display }}
        </h4>
        
        <div class="space-y-2 text-sm">
          <div class="flex justify-between">
            <span class="text-slate">{% trans "Complaints:" %}</span>
            <span class="font-semibold">{{ dept.complaint_count }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-slate">{% trans "Resolved:" %}</span>
            <span class="font-semibold">{{ dept.resolved_count }}</span>
          </div>
          {% if dept.avg_resolution_days %}
          <div class="flex justify-between">
            <span class="text-slate">{% trans "Avg Days:" %}</span>
            <span class="font-semibold">{{ dept.avg_resolution_days }}</span>
          </div>
          {% endif %}
        </div>
        
        {% if dept.top_areas %}
        <div class="mt-3 pt-3 border-t text-xs text-slate">
          <p class="font-semibold mb-1">{% trans "Top Areas:" %}</p>
          <p class="whitespace-pre-line">{{ dept.top_areas }}</p>
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- AI Analysis Section -->
  <div class="card mb-6" id="aiAnalysisSection">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-bold text-navy uppercase flex items-center gap-2">
        <i data-lucide="brain" class="w-4 h-4"></i>
        {% trans "AI-Generated Analysis" %}
        {% if report.ai_analysis_generated_at %}
        <span class="text-xs font-normal text-slate lowercase">
          ({% trans "Generated:" %} {{ report.ai_analysis_generated_at|date:"Y-m-d H:i" }})
        </span>
        {% endif %}
      </h3>
      <div class="flex gap-2">
        {% if report.ai_analysis %}
        <button id="editAiAnalysisBtn" class="btn-secondary flex items-center gap-2 text-xs"
                data-report-id="{{ report.id }}">
          <i data-lucide="edit" class="w-4 h-4"></i>
          {% trans "Edit Analysis" %}
        </button>
        {% endif %}
        <button id="generateAiAnalysisBtn" class="btn-primary flex items-center gap-2 text-xs"
                data-report-id="{{ report.id }}">
          <i data-lucide="sparkles" class="w-4 h-4"></i>
          {% if report.ai_analysis %}{% trans "Regenerate" %}{% else %}{% trans "Generate" %}{% endif %}
        </button>
      </div>
    </div>
    
    <!-- View Mode -->
    <div id="aiAnalysisContent">
      {% if report.ai_analysis %}
        {% with analysis=report.ai_analysis %}
        <!-- Executive Summary -->
        {% if analysis.executive_summary %}
        <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
          <h4 class="text-sm font-bold text-blue mb-2">{% trans "Executive Summary" %}</h4>
          <p class="text-sm text-navy">{{ analysis.executive_summary }}</p>
        </div>
        {% endif %}
        
        <!-- Performance Analysis -->
        {% if analysis.performance_analysis %}
        <div class="mb-4">
          <h4 class="text-sm font-bold text-navy mb-2">{% trans "Performance Analysis" %}</h4>
          <p class="text-sm text-slate">{{ analysis.performance_analysis }}</p>
        </div>
        {% endif %}
        
        <!-- Key Findings -->
        {% if analysis.key_findings %}
        <div class="mb-4">
          <h4 class="text-sm font-bold text-navy mb-2">{% trans "Key Findings" %}</h4>
          <ul class="list-disc list-inside text-sm text-slate space-y-1">
            {% for finding in analysis.key_findings %}
            <li>{{ finding }}</li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
        
        <!-- Reasons for Delays -->
        {% if analysis.reasons_for_delays %}
        <div class="mb-4">
          <h4 class="text-sm font-bold text-navy mb-2">{% trans "Reasons for Delays" %}</h4>
          <ul class="list-disc list-inside text-sm text-slate space-y-1">
            {% for reason in analysis.reasons_for_delays %}
            <li>{{ reason }}</li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
        
        <!-- Resolution Time Analysis -->
        {% if analysis.resolution_time_analysis %}
        <div class="mb-4">
          <h4 class="text-sm font-bold text-navy mb-2">{% trans "Resolution Time Breakdown" %}</h4>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
            {% if analysis.resolution_time_analysis.within_24h %}
            <div class="p-3 bg-green-50 border border-green-200 rounded text-center">
              <p class="text-xs text-slate">{% trans "Within 24h" %}</p>
              <p class="text-lg font-bold text-green-600">{{ analysis.resolution_time_analysis.within_24h.count }}</p>
              <p class="text-xs text-green-600">{{ analysis.resolution_time_analysis.within_24h.percentage }}</p>
            </div>
            {% endif %}
            {% if analysis.resolution_time_analysis.within_48h %}
            <div class="p-3 bg-blue-50 border border-blue-200 rounded text-center">
              <p class="text-xs text-slate">{% trans "Within 48h" %}</p>
              <p class="text-lg font-bold text-blue-600">{{ analysis.resolution_time_analysis.within_48h.count }}</p>
              <p class="text-xs text-blue-600">{{ analysis.resolution_time_analysis.within_48h.percentage }}</p>
            </div>
            {% endif %}
            {% if analysis.resolution_time_analysis.within_72h %}
            <div class="p-3 bg-yellow-50 border border-yellow-200 rounded text-center">
              <p class="text-xs text-slate">{% trans "Within 72h" %}</p>
              <p class="text-lg font-bold text-yellow-600">{{ analysis.resolution_time_analysis.within_72h.count }}</p>
              <p class="text-xs text-yellow-600">{{ analysis.resolution_time_analysis.within_72h.percentage }}</p>
            </div>
            {% endif %}
            {% if analysis.resolution_time_analysis.over_72h %}
            <div class="p-3 bg-red-50 border border-red-200 rounded text-center">
              <p class="text-xs text-slate">{% trans "Over 72h" %}</p>
              <p class="text-lg font-bold text-red-600">{{ analysis.resolution_time_analysis.over_72h.count }}</p>
              <p class="text-xs text-red-600">{{ analysis.resolution_time_analysis.over_72h.percentage }}</p>
            </div>
            {% endif %}
          </div>
        </div>
        {% endif %}
        
        <!-- Recommendations -->
        {% if analysis.recommendations %}
        <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
          <h4 class="text-sm font-bold text-green-800 mb-2">{% trans "Recommendations" %}</h4>
          <ul class="list-disc list-inside text-sm text-green-700 space-y-1">
            {% for rec in analysis.recommendations %}
            <li>{{ rec }}</li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
        {% endwith %}
      {% else %}
        <div class="text-center py-8 text-slate" id="noAnalysisMessage">
          <i data-lucide="sparkles" class="w-12 h-12 mx-auto mb-3 opacity-50"></i>
          <p>{% trans "No AI analysis available yet. Click 'Generate Analysis' to create one." %}</p>
        </div>
      {% endif %}
    </div>
    
    <!-- Loading State -->
    <div id="aiAnalysisLoading" class="hidden text-center py-8">
      <div class="inline-block w-8 h-8 border-4 border-slate-200 border-t-blue rounded-full animate-spin mb-3"></div>
      <p class="text-slate">{% trans "Generating AI analysis... This may take a moment." %}</p>
    </div>
    
    <!-- Edit Mode Form -->
    <div id="aiAnalysisEditForm" class="hidden">
      {% if report.ai_analysis %}
      <div class="space-y-4">
        <!-- Executive Summary -->
        <div>
          <label class="block text-sm font-bold text-navy mb-1">{% trans "Executive Summary" %}</label>
          <textarea id="editExecutiveSummary" rows="3" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{{ report.ai_analysis.executive_summary|default:"" }}</textarea>
        </div>
        
        <!-- Performance Analysis -->
        <div>
          <label class="block text-sm font-bold text-navy mb-1">{% trans "Performance Analysis" %}</label>
          <textarea id="editPerformanceAnalysis" rows="4" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{{ report.ai_analysis.performance_analysis|default:"" }}</textarea>
        </div>
        
        <!-- Key Findings -->
        <div>
          <label class="block text-sm font-bold text-navy mb-1">{% trans "Key Findings (one per line)" %}</label>
          <textarea id="editKeyFindings" rows="4" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{% if report.ai_analysis.key_findings %}{% for finding in report.ai_analysis.key_findings %}{{ finding }}{% if not forloop.last %}
{% endif %}{% endfor %}{% endif %}</textarea>
        </div>
        
        <!-- Reasons for Delays -->
        <div>
          <label class="block text-sm font-bold text-navy mb-1">{% trans "Reasons for Delays (one per line)" %}</label>
          <textarea id="editReasonsForDelays" rows="4" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{% if report.ai_analysis.reasons_for_delays %}{% for reason in report.ai_analysis.reasons_for_delays %}{{ reason }}{% if not forloop.last %}
{% endif %}{% endfor %}{% endif %}</textarea>
        </div>
        
        <!-- Recommendations -->
        <div>
          <label class="block text-sm font-bold text-navy mb-1">{% trans "Recommendations (one per line)" %}</label>
          <textarea id="editRecommendations" rows="4" class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-blue">{% if report.ai_analysis.recommendations %}{% for rec in report.ai_analysis.recommendations %}{{ rec }}{% if not forloop.last %}
{% endif %}{% endfor %}{% endif %}</textarea>
        </div>
        
        <!-- Action Buttons -->
        <div class="flex gap-2 pt-4 border-t">
          <button id="saveAiAnalysisBtn" class="btn-primary flex items-center gap-2 text-sm"
                  data-report-id="{{ report.id }}">
            <i data-lucide="save" class="w-4 h-4"></i>
            {% trans "Save Changes" %}
          </button>
          <button id="cancelEditBtn" class="btn-secondary flex items-center gap-2 text-sm">
            <i data-lucide="x" class="w-4 h-4"></i>
            {% trans "Cancel" %}
          </button>
        </div>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Report Info Footer -->
  <div class="text-xs text-slate text-center">
    <p>
      {% trans "Generated" %}: {{ report.generated_at|default:"-" }}
      {% if report.generated_by %}{% trans "by" %} {{ report.generated_by.get_full_name }}{% endif %}
      | {% trans "Status" %}: {{ report.get_status_display }}
    </p>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.45.0/dist/apexcharts.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Initialize Lucide icons
  if (typeof lucide !== 'undefined') {
    lucide.createIcons();
  }
  
  // Parse chart data safely
  let trendData, sourceData;
  try {
    trendData = JSON.parse('{{ trend_chart_data_json|escapejs }}');
    sourceData = JSON.parse('{{ source_chart_data_json|escapejs }}');
  } catch (e) {
    console.error('Error parsing chart data:', e);
    return;
  }
  
  // Validate data
  if (!trendData || !trendData.data || !Array.isArray(trendData.data)) {
    console.error('Invalid trend data');
    trendData = { data: [0,0,0,0,0,0,0,0,0,0,0,0], labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], target: 95 };
  }
  
  if (!sourceData || !sourceData.data || !Array.isArray(sourceData.data)) {
    console.error('Invalid source data');
    sourceData = { data: [100], labels: ['No Data'] };
  }
  
  // Trend Chart
  const trendChartEl = document.getElementById("trendChart");
  if (trendChartEl) {
    const trendOptions = {
      series: [{
        name: '{% trans "Performance %" %}',
        data: trendData.data
      }],
      chart: {
        type: 'line',
        height: 300,
        fontFamily: 'inherit',
        toolbar: { show: false },
        animations: { enabled: false }
      },
      stroke: {
        curve: 'smooth',
        width: 3
      },
      colors: ['#005696'],
      xaxis: {
        categories: trendData.labels,
        labels: { style: { fontSize: '11px' } }
      },
      yaxis: {
        max: 100,
        min: 0,
        labels: { formatter: function(val) { return val + '%'; } }
      },
      grid: {
        borderColor: '#e2e8f0',
        strokeDashArray: 4
      },
      annotations: trendData.target ? {
        yaxis: [{
          y: trendData.target,
          borderColor: '#ef4444',
          strokeDashArray: 4,
          label: {
            text: '{% trans "Target" %}: ' + trendData.target + '%',
            style: { color: '#ef4444', background: '#fef2f2' }
          }
        }]
      } : {},
      tooltip: {
        y: { formatter: function(val) { return val + '%'; } }
      }
    };
    
    try {
      const trendChart = new ApexCharts(trendChartEl, trendOptions);
      trendChart.render();
    } catch (e) {
      console.error('Error rendering trend chart:', e);
    }
  }
  
  // Source Chart
  const sourceChartEl = document.getElementById("sourceChart");
  if (sourceChartEl) {
    const sourceOptions = {
      series: sourceData.data,
      labels: sourceData.labels,
      chart: {
        type: 'donut',
        height: 300,
        fontFamily: 'inherit',
        animations: { enabled: false }
      },
      colors: ['#005696', '#007bbd', '#64748b', '#94a3b8', '#cbd5e1', '#e2e8f0'],
      plotOptions: {
        pie: {
          donut: {
            size: '65%'
          }
        }
      },
      legend: {
        position: 'bottom',
        fontSize: '11px'
      },
      tooltip: {
        y: { formatter: function(val) { return val + '%'; } }
      }
    };
    
    try {
      const sourceChart = new ApexCharts(sourceChartEl, sourceOptions);
      sourceChart.render();
    } catch (e) {
      console.error('Error rendering source chart:', e);
    }
  }
  
  // AI Analysis Generation
  const generateBtn = document.getElementById('generateAiAnalysisBtn');
  if (generateBtn) {
    generateBtn.addEventListener('click', async function() {
      const reportId = this.dataset.reportId;
      const contentDiv = document.getElementById('aiAnalysisContent');
      const loadingDiv = document.getElementById('aiAnalysisLoading');
      
      // Show loading, hide content
      contentDiv.classList.add('hidden');
      loadingDiv.classList.remove('hidden');
      generateBtn.disabled = true;
      
      try {
        const response = await fetch(`/analytics/api/kpi-reports/${reportId}/ai-analysis/`, {
          method: 'POST',
          headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || 
                          document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1]
          }
        });
        
        const data = await response.json();
        
        if (data.success) {
          // Reload page to show new analysis
          window.location.reload();
        } else {
          alert(data.error || 'Failed to generate analysis');
          contentDiv.classList.remove('hidden');
          loadingDiv.classList.add('hidden');
          generateBtn.disabled = false;
        }
      } catch (error) {
        console.error('Error:', error);
        alert('Failed to generate analysis. Please try again.');
        contentDiv.classList.remove('hidden');
        loadingDiv.classList.add('hidden');
        generateBtn.disabled = false;
      }
    });
  }
  
  // Edit AI Analysis
  const editBtn = document.getElementById('editAiAnalysisBtn');
  const cancelEditBtn = document.getElementById('cancelEditBtn');
  const saveBtn = document.getElementById('saveAiAnalysisBtn');
  const contentDiv = document.getElementById('aiAnalysisContent');
  const editForm = document.getElementById('aiAnalysisEditForm');
  
  if (editBtn && contentDiv && editForm) {
    // Enter edit mode
    editBtn.addEventListener('click', function() {
      contentDiv.classList.add('hidden');
      editForm.classList.remove('hidden');
      editBtn.classList.add('hidden');
      if (typeof lucide !== 'undefined') lucide.createIcons();
    });
  }
  
  if (cancelEditBtn && contentDiv && editForm) {
    // Cancel edit mode
    cancelEditBtn.addEventListener('click', function() {
      editForm.classList.add('hidden');
      contentDiv.classList.remove('hidden');
      editBtn.classList.remove('hidden');
    });
  }
  
  if (saveBtn && editForm) {
    // Save edited analysis
    saveBtn.addEventListener('click', async function() {
      const reportId = this.dataset.reportId;
      
      // Build analysis object from form fields
      const analysis = {
        executive_summary: document.getElementById('editExecutiveSummary')?.value || '',
        performance_analysis: document.getElementById('editPerformanceAnalysis')?.value || '',
        key_findings: (document.getElementById('editKeyFindings')?.value || '').split('\n').filter(f => f.trim()),
        reasons_for_delays: (document.getElementById('editReasonsForDelays')?.value || '').split('\n').filter(r => r.trim()),
        recommendations: (document.getElementById('editRecommendations')?.value || '').split('\n').filter(r => r.trim()),
        // Preserve existing resolution_time_analysis and other fields
        resolution_time_analysis: {{ report.ai_analysis.resolution_time_analysis|safe|default:"null" }},
        department_analysis: {{ report.ai_analysis.department_analysis|safe|default:"null" }},
        source_analysis: {{ report.ai_analysis.source_analysis|safe|default:"null" }}
      };
      
      // Disable button during save
      saveBtn.disabled = true;
      saveBtn.innerHTML = '<span class="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>Saving...';
      
      try {
        const response = await fetch(`/analytics/api/kpi-reports/${reportId}/ai-analysis/save/`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || 
                          document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1]
          },
          body: JSON.stringify({ analysis: analysis })
        });
        
        const data = await response.json();
        
        if (data.success) {
          // Reload page to show updated analysis
          window.location.reload();
        } else {
          alert(data.error || 'Failed to save analysis');
          saveBtn.disabled = false;
          saveBtn.innerHTML = '<i data-lucide="save" class="w-4 h-4"></i> Save Changes';
          if (typeof lucide !== 'undefined') lucide.createIcons();
        }
      } catch (error) {
        console.error('Error:', error);
        alert('Failed to save analysis. Please try again.');
        saveBtn.disabled = false;
        saveBtn.innerHTML = '<i data-lucide="save" class="w-4 h-4"></i> Save Changes';
        if (typeof lucide !== 'undefined') lucide.createIcons();
      }
    });
  }
});
</script>
{% endblock %}