{% extends 'base.html' %}
{% block title %}Detail Rekomendasi — {{ sesi.nama_sesi }}{% endblock %}
{% block topbar_title %}Detail Rekomendasi{% endblock %}

{% block extra_css %}
<style>
  .kondisi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: .75rem;
  }
  .kondisi-card .kondisi-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
  }
  .kondisi-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; flex-shrink: 0;
  }
  .kondisi-label { font-weight: 700; font-size: .875rem; }
  .kondisi-desc  { font-size: .78rem; color: var(--text-muted); line-height: 1.5; }

  .tindakan-list { list-style: none; padding: 0; margin: 0; }
  .tindakan-list li {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .83rem;
    line-height: 1.5;
  }
  .tindakan-list li:last-child { border-bottom: none; }
  .tindakan-list li::before {
    content: '→';
    color: var(--primary);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
  }

  .item-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color .2s;
  }
  .item-card:hover { border-color: var(--primary); }
  .item-card-header {
    padding: .85rem 1.25rem;
    display: flex; align-items: center; gap: .75rem;
    cursor: pointer;
    user-select: none;
  }
  .item-card-body {
    padding: 0 1.25rem 1.25rem;
    display: none;
  }
  .item-card-body.show { display: block; }

  .no-kondisi {
    padding: .75rem 1rem;
    background: rgba(16,185,129,.07);
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 8px;
    font-size: .82rem;
    color: #34d399;
  }

  /* Tab pills */
  .tab-level .nav-link {
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .83rem;
    font-weight: 600;
    padding: .45rem 1.1rem;
  }
  .tab-level .nav-link.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }
</style>
{% endblock %}

{% block content %}
<div class="page-header d-flex align-items-start justify-content-between">
  <div>
    <h1><i class="bi bi-lightbulb-fill me-2 text-primary-custom"></i>Detail Rekomendasi</h1>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('rekomendasi.index') }}">Rekomendasi</a></li>
        <li class="breadcrumb-item active">Detail</li>
      </ol>
    </nav>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('rekomendasi.index') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
    <form method="POST" action="{{ url_for('rekomendasi.hapus', id=sesi.id) }}"
          onsubmit="return confirm('Hapus rekomendasi ini?')">
      <button class="btn btn-outline-danger btn-sm">
        <i class="bi bi-trash me-1"></i>Hapus
      </button>
    </form>
  </div>
</div>

<!-- Header info -->
<div class="card mb-4">
  <div class="card-body">
    <div class="row g-3 align-items-center">
      <div class="col-md-8">
        <h5 class="fw-bold mb-1">{{ sesi.nama_sesi }}</h5>
        <div class="d-flex flex-wrap gap-2 mb-2">
          <span class="badge bg-secondary">{{ sesi.clustering_session.tahap }}</span>
          <span class="badge badge-{{ 'kmeans' if sesi.clustering_session.metode == 'kmeans' else 'hier' }}">
            {{ 'K-Means' if sesi.clustering_session.metode == 'kmeans' else 'Hierarchical' }}
          </span>
          <span class="badge bg-secondary">{{ sesi.clustering_session.n_cluster }} Cluster</span>
        </div>
        <p class="text-muted mb-0" style="font-size:.83rem;">{{ sesi.ringkasan }}</p>
      </div>
      <div class="col-md-4">
        <div class="row g-2 text-center">
          <div class="col-4">
            <div style="font-size:1.5rem;font-weight:800;color:var(--primary);">
              {{ items_cluster | length }}
            </div>
            <div style="font-size:.7rem;color:var(--text-muted);">Cluster</div>
          </div>
          <div class="col-4">
            <div style="font-size:1.5rem;font-weight:800;color:var(--accent);">
              {{ items_rw | length }}
            </div>
            <div style="font-size:.7rem;color:var(--text-muted);">RW</div>
          </div>
          <div class="col-4">
            <div style="font-size:1.5rem;font-weight:800;color:#10b981;">
              {{ (items_cluster + items_rw) | map(attribute='tindakan') | map('length') | sum }}
            </div>
            <div style="font-size:.7rem;color:var(--text-muted);">Tindakan</div>
          </div>
        </div>
        <div class="text-muted mt-2" style="font-size:.72rem;text-align:center;">
          Dibuat {{ sesi.created_at.strftime('%d %b %Y %H:%M') }}
          oleh {{ sesi.creator.nama if sesi.creator else '-' }}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tab: Cluster vs RW -->
<ul class="nav gap-2 tab-level mb-3" id="levelTab">
  <li class="nav-item">
    <button class="nav-link active" onclick="switchTab('cluster', this)">
      <i class="bi bi-diagram-3 me-1"></i>Per Cluster
      <span class="badge bg-primary ms-1">{{ items_cluster | length }}</span>
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" onclick="switchTab('rw', this)">
      <i class="bi bi-geo-alt me-1"></i>Per RW
      <span class="badge bg-secondary ms-1">{{ items_rw | length }}</span>
    </button>
  </li>
</ul>

<!-- ── PANEL CLUSTER ─────────────────────────────────────────────────────── -->
<div id="panelCluster">
  {% for item in items_cluster %}
  {% set prio = item.prioritas %}
  {% set has_kondisi = item.kondisi | length > 0 %}

  <div class="item-card">
    <div class="item-card-header" onclick="toggleCard(this)">
      <!-- Label & prioritas -->
      <div style="width:10px;height:10px;border-radius:50%;flex-shrink:0;
           background:{% if prio == 'Prioritas Tinggi' %}#ef4444{% elif prio == 'Prioritas Sedang' %}#f59e0b{% else %}#10b981{% endif %};"></div>
      <div class="flex-grow-1">
        <span class="fw-bold">{{ item.label }}</span>
        <span class="badge badge-{{ 'tinggi' if prio == 'Prioritas Tinggi' else ('sedang' if prio == 'Prioritas Sedang' else 'rendah') }} ms-2">
          {{ prio }}
        </span>
      </div>
      <!-- Ringkasan kondisi -->
      <span class="text-muted" style="font-size:.75rem;">
        {{ item.kondisi | length }} kondisi &nbsp;·&nbsp;
        {{ item.tindakan | length }} tindakan
      </span>
      <i class="bi bi-chevron-down text-muted ms-2 toggle-icon"></i>
    </div>

    <div class="item-card-body">
      <div class="row g-3">
        <!-- Kondisi terdeteksi -->
        <div class="col-md-5">
          <h6 class="fw-bold mb-3" style="font-size:.83rem;color:var(--text-muted);
              text-transform:uppercase;letter-spacing:.07em;">
            <i class="bi bi-search me-1"></i>Kondisi Terdeteksi
          </h6>
          {% if has_kondisi %}
            {% for k in item.kondisi %}
            <div class="kondisi-card">
              <div class="kondisi-header">
                <div class="kondisi-icon"
                     style="background:{{ k.warna }}22;color:{{ k.warna }};">
                  <i class="bi {{ k.ikon }}"></i>
                </div>
                <span class="kondisi-label" style="color:{{ k.warna }};">{{ k.label }}</span>
              </div>
              <div class="kondisi-desc">{{ k.deskripsi }}</div>
            </div>
            {% endfor %}
          {% else %}
            <div class="no-kondisi">
              <i class="bi bi-check-circle me-2"></i>
              Tidak ada kondisi kritis terdeteksi di cluster ini.
              Wilayah dalam kondisi relatif baik.
            </div>
          {% endif %}
        </div>

        <!-- Rekomendasi tindakan -->
        <div class="col-md-7">
          <h6 class="fw-bold mb-3" style="font-size:.83rem;color:var(--text-muted);
              text-transform:uppercase;letter-spacing:.07em;">
            <i class="bi bi-lightning me-1"></i>Rekomendasi Tindakan
          </h6>
          <ul class="tindakan-list">
            {% for t in item.tindakan %}
            <li>{{ t }}</li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<!-- ── PANEL RW ───────────────────────────────────────────────────────────── -->
<div id="panelRW" style="display:none;">

  <!-- Filter prioritas -->
  <div class="d-flex gap-2 mb-3 flex-wrap">
    <button class="btn btn-sm btn-outline-secondary active" onclick="filterRW('semua', this)">
      Semua ({{ items_rw | length }})
    </button>
    <button class="btn btn-sm btn-outline-danger" onclick="filterRW('Prioritas Tinggi', this)">
      <span style="color:#ef4444;">●</span>
      Prioritas Tinggi ({{ items_rw | selectattr('prioritas','eq','Prioritas Tinggi') | list | length }})
    </button>
    <button class="btn btn-sm btn-outline-warning" onclick="filterRW('Prioritas Sedang', this)">
      <span style="color:#f59e0b;">●</span>
      Prioritas Sedang ({{ items_rw | selectattr('prioritas','eq','Prioritas Sedang') | list | length }})
    </button>
    <button class="btn btn-sm btn-outline-success" onclick="filterRW('Prioritas Rendah', this)">
      <span style="color:#10b981;">●</span>
      Prioritas Rendah ({{ items_rw | selectattr('prioritas','eq','Prioritas Rendah') | list | length }})
    </button>
  </div>

  {% for item in items_rw %}
  {% set prio = item.prioritas %}
  <div class="item-card rw-item" data-prio="{{ prio }}">
    <div class="item-card-header" onclick="toggleCard(this)">
      <div style="width:10px;height:10px;border-radius:50%;flex-shrink:0;
           background:{% if prio == 'Prioritas Tinggi' %}#ef4444{% elif prio == 'Prioritas Sedang' %}#f59e0b{% else %}#10b981{% endif %};"></div>
      <div class="flex-grow-1">
        <span class="fw-bold"><i class="bi bi-geo-alt me-1"></i>{{ item.label }}</span>
        <span class="badge badge-{{ 'tinggi' if prio == 'Prioritas Tinggi' else ('sedang' if prio == 'Prioritas Sedang' else 'rendah') }} ms-2">
          {{ prio }}
        </span>
      </div>
      <span class="text-muted" style="font-size:.75rem;">
        {{ item.kondisi | length }} kondisi &nbsp;·&nbsp;
        {{ item.tindakan | length }} tindakan
      </span>
      <i class="bi bi-chevron-down text-muted ms-2 toggle-icon"></i>
    </div>

    <div class="item-card-body">
      <div class="row g-3">
        <div class="col-md-5">
          <h6 class="fw-bold mb-3" style="font-size:.83rem;color:var(--text-muted);
              text-transform:uppercase;letter-spacing:.07em;">
            <i class="bi bi-search me-1"></i>Kondisi Terdeteksi
          </h6>
          {% if item.kondisi %}
            {% for k in item.kondisi %}
            <div class="kondisi-card">
              <div class="kondisi-header">
                <div class="kondisi-icon"
                     style="background:{{ k.warna }}22;color:{{ k.warna }};">
                  <i class="bi {{ k.ikon }}"></i>
                </div>
                <span class="kondisi-label" style="color:{{ k.warna }};">{{ k.label }}</span>
              </div>
              <div class="kondisi-desc">{{ k.deskripsi }}</div>
            </div>
            {% endfor %}
          {% else %}
            <div class="no-kondisi">
              <i class="bi bi-check-circle me-2"></i>
              Tidak ada kondisi kritis terdeteksi di RW ini.
            </div>
          {% endif %}
        </div>
        <div class="col-md-7">
          <h6 class="fw-bold mb-3" style="font-size:.83rem;color:var(--text-muted);
              text-transform:uppercase;letter-spacing:.07em;">
            <i class="bi bi-lightning me-1"></i>Rekomendasi Tindakan
          </h6>
          <ul class="tindakan-list">
            {% for t in item.tindakan %}
            <li>{{ t }}</li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
  {% endfor %}

  {% if not items_rw %}
  <div class="text-center py-4 text-muted">
    <i class="bi bi-geo-alt fs-1 d-block mb-2"></i>
    Tidak ada data per RW.
  </div>
  {% endif %}
</div>

{% endblock %}

{% block extra_js %}
<script>
  // ── Tab cluster vs RW ───────────────────────────────────────────────────────
  function switchTab(level, btn) {
    document.querySelectorAll('.tab-level .nav-link').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('panelCluster').style.display = level === 'cluster' ? 'block' : 'none';
    document.getElementById('panelRW').style.display      = level === 'rw'      ? 'block' : 'none';
  }

  // ── Toggle expand/collapse item card ───────────────────────────────────────
  function toggleCard(header) {
    const body = header.nextElementSibling;
    const icon = header.querySelector('.toggle-icon');
    const isOpen = body.classList.contains('show');
    body.classList.toggle('show', !isOpen);
    icon.className = isOpen
      ? 'bi bi-chevron-down text-muted ms-2 toggle-icon'
      : 'bi bi-chevron-up text-muted ms-2 toggle-icon';
  }

  // ── Filter RW berdasarkan prioritas ────────────────────────────────────────
  function filterRW(prio, btn) {
    document.querySelectorAll('#panelRW .btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('.rw-item').forEach(card => {
      card.style.display = (prio === 'semua' || card.dataset.prio === prio) ? 'block' : 'none';
    });
  }

  // Buka semua cluster card by default
  document.querySelectorAll('#panelCluster .item-card-header').forEach(h => {
    h.nextElementSibling.classList.add('show');
    h.querySelector('.toggle-icon').className = 'bi bi-chevron-up text-muted ms-2 toggle-icon';
  });
</script>
{% endblock %}