{% extends "dashboard/base.html" %}
{% load static %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="report-container" id="report-container">

  {% if logo_url %}
  <div class="report-watermark">
    <img src="{{ logo_url }}" alt="">
  </div>
  {% endif %}

  <div class="report-top-bars"><span></span><span></span><span></span></div>

  <div class="report-header">
    {% if organization %}
    <div class="org-badge">
      {% if logo_url %}<img src="{{ logo_url }}" alt="">{% endif %}
      {{ organization }}
    </div>
    {% endif %}

    <h1 data-testid="text-dashboard-title">{{ title }}</h1>
    {% if subtitle %}<p class="report-subtitle">{{ subtitle }}</p>{% endif %}

    <div class="report-meta">
      <div class="meta-item" id="date-range-display">
        &#128197; <span id="date-range-text">Select parameters below</span>
      </div>
      {% if region_name %}
      <div class="meta-item">
        &#128205; {{ region_name }}
      </div>
      {% endif %}
    </div>

    {% for action in footer_actions %}
      {% if action.action == "bulletin" %}
      <a href="/bulletin/" class="bulletin-btn" data-testid="link-bulletin">
        &#127760; {{ action.label }}
      </a>
      {% endif %}
    {% endfor %}
  </div>

  <div class="report-body">

    <div class="report-params">
      <div class="report-params-title">Report Parameters</div>
      <div class="report-params-grid">

        <div>
          <div class="section-title">&#128197; Time Selection</div>

          <div class="report-label">Period Cycle</div>
          <div class="cycle-pills" id="cycle-pills">
            {% for cycle in period_cycles %}
            <button type="button"
                    class="cycle-pill{% if forloop.first %} active{% endif %}"
                    data-cycle="{{ cycle.value }}"
                    data-testid="btn-cycle-{{ cycle.value }}">
              {{ cycle.label }}
            </button>
            {% endfor %}
          </div>

          <div class="cycle-fields cycle-fields-1 active" id="fields-dekadal">
            <div>
              <div class="report-label">Dekad</div>
              <select class="report-select" id="select-dekad" data-testid="select-dekad">
                {% for d in dekads %}<option value="{{ d }}">{{ d }}</option>{% endfor %}
              </select>
            </div>
          </div>

          <div class="cycle-fields cycle-fields-2" id="fields-monthly">
            <div>
              <div class="report-label">Month</div>
              <select class="report-select" id="select-month-monthly" data-testid="select-month-monthly">
                {% for m in months %}<option value="{{ m }}">{{ m }}</option>{% endfor %}
              </select>
            </div>
            <div>
              <div class="report-label">Year</div>
              <select class="report-select" id="select-year-monthly" data-testid="select-year-monthly">
                {% for y in years %}<option value="{{ y }}"{% if forloop.last %} selected{% endif %}>{{ y }}</option>{% endfor %}
              </select>
            </div>
          </div>

          <div class="cycle-fields cycle-fields-2" id="fields-seasonal">
            <div>
              <div class="report-label">Season</div>
              <select class="report-select" id="select-season" data-testid="select-season">
                {% for s in seasons %}<option value="{{ s }}">{{ s }}</option>{% endfor %}
              </select>
            </div>
            <div>
              <div class="report-label">Year</div>
              <select class="report-select" id="select-year-seasonal" data-testid="select-year-seasonal">
                {% for y in years %}<option value="{{ y }}"{% if forloop.last %} selected{% endif %}>{{ y }}</option>{% endfor %}
              </select>
            </div>
          </div>

          <div class="cycle-fields cycle-fields-1" id="fields-yearly">
            <div>
              <div class="report-label">Year</div>
              <select class="report-select" id="select-year-yearly" data-testid="select-year-yearly">
                {% for y in years %}<option value="{{ y }}"{% if forloop.last %} selected{% endif %}>{{ y }}</option>{% endfor %}
              </select>
            </div>
          </div>

          <div class="date-range-box">
            <div class="report-label">&#128197; Analysis Date Range</div>
            <div class="report-label date-range-sublabel">End Date (now)</div>
            <div class="date-range-row">
              <select class="report-select" id="end-day" data-testid="select-end-day"></select>
              <select class="report-select" id="end-month" data-testid="select-end-month">
                {% for m in months %}<option value="{{ m }}">{{ m }}</option>{% endfor %}
              </select>
              <select class="report-select" id="end-year" data-testid="select-end-year">
                {% for y in years %}<option value="{{ y }}"{% if forloop.last %} selected{% endif %}>{{ y }}</option>{% endfor %}
              </select>
            </div>
            <div class="date-range-arrow">&#8593;</div>
            <div class="report-label date-range-sublabel">Start Date</div>
            <div class="date-range-row">
              <select class="report-select" id="start-day" data-testid="select-start-day"></select>
              <select class="report-select" id="start-month" data-testid="select-start-month">
                {% for m in months %}<option value="{{ m }}">{{ m }}</option>{% endfor %}
              </select>
              <select class="report-select" id="start-year" data-testid="select-start-year">
                {% for y in years %}<option value="{{ y }}"{% if forloop.last %} selected{% endif %}>{{ y }}</option>{% endfor %}
              </select>
            </div>
          </div>
        </div>

        <div>
          <div class="section-title">&#128205; Area of Interest</div>

          <div class="report-label">Select Area Type</div>
          <div class="area-type-cards" id="area-type-cards">
            {% for at in area_types %}
            <button type="button"
                    class="area-type-card{% if forloop.first %} active{% endif %}"
                    data-type="{{ at.value }}"
                    data-testid="btn-area-{{ at.value }}">
              {{ at.label }}
            </button>
            {% endfor %}
          </div>

          <div class="aoi-fields-panel" data-area-type="admin-boundary" id="admin-boundary-fields">
            <div class="admin-selects">
              <div>
                <div class="report-label">Country</div>
                <select class="report-select" id="select-country" data-testid="select-country">
                  {% for r in regions %}
                  <option value="{{ r.name }}">{{ r.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div>
                <div class="report-label">Admin Level 1</div>
                <select class="report-select" id="select-admin1" data-testid="select-admin1">
                  <option value="All">All</option>
                </select>
              </div>
              <div>
                <div class="report-label">Admin Level 2</div>
                <select class="report-select" id="select-admin2" data-testid="select-admin2">
                  <option value="All">All</option>
                </select>
              </div>
            </div>
            <div class="aoi-hint">Select a country and drill down to a specific admin boundary.</div>
          </div>

          <div class="aoi-fields-panel" data-area-type="hydro-basin" id="hydro-basin-fields" style="display:none">
            <div class="admin-selects admin-selects-2">
              <div>
                <div class="report-label">Basin</div>
                <select class="report-select" id="select-basin" data-testid="select-basin">
                  {% for hb in hydro_basins %}
                  <option value="{{ hb.name }}">{{ hb.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div>
                <div class="report-label">Sub-Basin</div>
                <select class="report-select" id="select-sub-basin" data-testid="select-sub-basin">
                  <option value="All">All</option>
                </select>
              </div>
            </div>
            <div class="aoi-hint">Select a hydro basin and optionally drill down to a sub-basin.</div>
          </div>

          <div class="aoi-fields-panel" data-area-type="cluster" id="cluster-fields" style="display:none">
            <div class="admin-selects admin-selects-2">
              <div>
                <div class="report-label">Cluster</div>
                <select class="report-select" id="select-cluster" data-testid="select-cluster">
                  {% for cl in clusters %}
                  <option value="{{ cl.name }}">{{ cl.name }}</option>
                  {% endfor %}
                </select>
              </div>
              <div>
                <div class="report-label">Country</div>
                <select class="report-select" id="select-cluster-country" data-testid="select-cluster-country">
                  <option value="All">All</option>
                </select>
              </div>
            </div>
            <div class="aoi-hint">Select a cluster to analyze grouped countries.</div>
          </div>

          <div class="aoi-fields-panel" data-area-type="custom-aoi" id="custom-aoi-fields" style="display:none">
            <div class="aoi-draw-controls">
              <button type="button" class="aoi-draw-btn" id="btn-draw-aoi" data-testid="btn-draw-aoi">
                &#9998; Start Drawing
              </button>
              <button type="button" class="aoi-draw-btn aoi-clear-btn" id="btn-clear-aoi" data-testid="btn-clear-aoi" style="display:none">
                Clear
              </button>
              <span class="aoi-draw-status" id="aoi-draw-status"></span>
            </div>
            <div class="aoi-draw-map-wrapper">
              <div class="aoi-draw-map" id="aoi-draw-map"></div>
            </div>
            <div class="aoi-hint">Draw a polygon on the map to define your custom area of interest.</div>
          </div>
        </div>

      </div>
    </div>

    <div class="report-generate-section">
      <button class="generate-btn" id="btn-generate" data-testid="btn-generate">
        &#10024; Generate Analysis
      </button>
      <div class="generate-hint">Configure your parameters above, then generate</div>
    </div>

    <div class="analysis-sections" id="analysis-sections">

      {% if metrics %}
      <div class="report-widget">
        <div class="report-widget-header">
          <h3>Key Metrics</h3>
          <p>Summary statistics for the selected area and time period</p>
        </div>
        <div class="report-widget-content">
          <div class="report-metrics-row">
            {% for metric in metrics %}
            <div class="report-metric-card" data-testid="card-metric-{{ metric.key }}">
              <div class="metric-title">{{ metric.title }}</div>
              <div class="metric-value">
                --<span class="metric-unit">{{ metric.unit }}</span>
              </div>
              <div class="metric-range">Range: {{ metric.base_min }} – {{ metric.base_max }}</div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}

      {% if maps %}
      <div class="report-widget">
        <div class="report-widget-header">
          <h3>{{ maps_title|default:"Maps" }}</h3>
          <p>{{ maps_description|default:"Geographic visualization for the selected area and time period" }}</p>
        </div>
        <div class="report-widget-content">
          <div class="report-maps-grid">
            {% for map in maps %}
            <div class="report-map-figure" data-testid="map-{{ map.key }}"
                 data-legend-config='{{ map.legend_config|safe }}'
                 data-source-attribution="{{ map.source_attribution }}">
              <div class="map-figure-header">
                <span class="map-figure-title">{{ map.title }}</span>
              </div>
              <div class="map-figure-body">
                {% if logo_url %}
                <img class="map-figure-watermark" src="{{ logo_url }}" alt="">
                {% endif %}
              </div>
              <div class="map-figure-furniture">
                <div class="map-figure-legend"></div>
                <div class="map-figure-meta">
                  <div class="map-figure-scale-bar"></div>
                  <div class="map-figure-north-arrow"></div>
                </div>
              </div>
              {% if map.source_attribution %}
              <div class="map-figure-attribution">{{ map.source_attribution }}</div>
              {% endif %}
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}

      {% if hazard_phases %}
      <div class="report-widget">
        <div class="report-widget-header">
          <h3>Impact Statistics</h3>
          <p>Tabular breakdown of impacts by phase</p>
        </div>
        <div class="report-widget-content">
          <div class="report-table-container">
            <table>
              <thead>
                <tr>
                  <th>Phase</th>
                  <th>Classification</th>
                  <th>Population Exposed</th>
                  <th>Cropland (km²)</th>
                  <th>Rangeland (km²)</th>
                </tr>
              </thead>
              <tbody>
                {% for phase in hazard_phases %}
                <tr>
                  <td><span class="report-badge" style="background:{{ phase.color }}">{{ phase.key }}</span></td>
                  <td>{{ phase.label }}</td>
                  <td>--</td>
                  <td>--</td>
                  <td>--</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {% endif %}

      {% for chart in chart_groups %}
      <div class="report-widget" data-testid="widget-{{ chart.key }}">
        <div class="report-widget-header">
          <h3>{{ chart.group_title }}</h3>
          <p>{{ chart.group_description }}</p>
        </div>
        <div class="report-widget-content">
          <div class="report-charts-grid">
            {% for c in chart.charts %}
            <div class="report-chart-container">
              <div class="report-chart-header">{{ c.title }}</div>
              <div class="report-chart-body">
                <canvas id="chart-{{ c.chart_type }}"
                        data-chart-type="{{ c.chart_type }}"
                        data-chart-title="{{ c.title }}"
                        width="500" height="280"></canvas>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endfor %}

      {% if hazard_phases %}
      <div class="report-widget">
        <div class="report-widget-header">
          <h3>Regional Comparison</h3>
          <p>Regional comparison of index values</p>
        </div>
        <div class="report-widget-content">
          <div class="report-table-container">
            <table>
              <thead>
                <tr>
                  <th>Country</th>
                  <th>Current CDI</th>
                  <th>Previous CDI</th>
                  <th>Change</th>
                  <th>Severity</th>
                </tr>
              </thead>
              <tbody id="cdi-table-body">
                {% for r in regions %}
                <tr>
                  <td>{{ r.name }}</td>
                  <td>--</td>
                  <td>--</td>
                  <td>--</td>
                  <td>--</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      {% endif %}

    </div>

  </div>

  <div class="report-footer">
    <div class="report-footer-content">
      <div>
        {% if organization or region_name %}
        <h4>{{ organization }}{% if region_name %} — {{ region_name }}{% endif %}</h4>
        {% endif %}
        {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
      </div>
      <div class="footer-actions">
        {% for action in footer_actions %}
        <button class="footer-action-btn"
                data-action="{{ action.action }}"
                data-testid="btn-footer-{{ action.action }}">
          {{ action.label }}
        </button>
        {% endfor %}
      </div>
    </div>
  </div>

</div>

<script>
  var DASHBOARD_CONFIG = {
    regions: {{ regions_json|safe }},
    maps: {{ maps_json|safe }},
    hydroBasins: {{ hydro_basins_json|safe }},
    clusters: {{ clusters_json|safe }},
    periodCycles: {{ period_cycles_json|safe }},
    years: {{ years_json|safe }},
    months: {{ months_json|safe }},
    dekads: {{ dekads_json|safe }},
    seasons: {{ seasons_json|safe }},
    hazardPhases: {{ hazard_phases_json|safe }},
    copyrightText: "{{ copyright_text|escapejs }}",
    primaryColor: "{{ primary_color|escapejs }}",
    title: "{{ title|escapejs }}",
    logoUrl: "{{ logo_url|escapejs }}"
  };
</script>
{% endblock %}

{% block extra_js %}
<script src="{% static 'dashboard/js/dashboard.js' %}"></script>
<script src="{% static 'dashboard/js/charts.js' %}"></script>
<script src="{% static 'dashboard/js/maps.js' %}"></script>
{% endblock %}