{% extends "dashboard_base.html" %}
{% block title %}{{ t("troubleshoot-page-title") }} — calrs{% endblock %}

{% block dashboard_content %}

{% if no_event_types %}
<div class="card">
  <h1>{{ t("troubleshoot-heading") }}</h1>
  <p class="empty">{{ t("troubleshoot-empty", link='<a href="/dashboard/event-types/new" style="color: var(--accent); text-decoration: none;">' ~ (t("troubleshoot-empty-link-label") | escape) ~ '</a>') | safe }}</p>
</div>
{% else %}
<div class="card">
  <h1>{{ t("troubleshoot-heading") }}</h1>
  <p class="subtitle">{{ t("troubleshoot-subtitle", title='<strong>' ~ (et_title | escape) ~ '</strong>') | safe }} ({{ t("troubleshoot-duration", minutes=duration) }}{% if buf_before %}, {{ t("troubleshoot-buffer-before", minutes=buf_before) }}{% endif %}{% if buf_after %}, {{ t("troubleshoot-buffer-after", minutes=buf_after) }}{% endif %}{% if min_notice %}, {{ t("troubleshoot-min-notice", minutes=min_notice) }}{% endif %}).</p>

  <form id="troubleshoot-form" method="get" action="/dashboard/troubleshoot" style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin: 1rem 0;">
    <select name="event_type" style="padding: 0.375rem 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; font-family: inherit; background: var(--surface); color: var(--text);">
      {% for et in event_types %}
        <option value="{{ et.slug }}" {% if et.selected %}selected{% endif %}>{{ et.title }}</option>
      {% endfor %}
    </select>
    <div style="display: flex; align-items: center; gap: 0.375rem;">
      <a href="/dashboard/troubleshoot?date={{ prev_date }}&event_type={{ selected_slug }}" class="slot-btn" style="text-decoration: none; padding: 0.375rem 0.625rem;">&larr;</a>
      <input type="date" name="date" value="{{ selected_date }}" style="padding: 0.375rem 0.625rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.85rem; font-family: inherit; background: var(--surface); color: var(--text);">
      <a href="/dashboard/troubleshoot?date={{ next_date }}&event_type={{ selected_slug }}" class="slot-btn" style="text-decoration: none; padding: 0.375rem 0.625rem;">&rarr;</a>
    </div>
  </form>

  <div id="troubleshoot-content">
  <p style="font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem;">{{ date_label }}</p>

  {% if date_is_blocked is defined and date_is_blocked %}
  <div style="padding: 0.5rem 0.75rem; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: var(--radius); margin-bottom: 0.75rem; font-size: 0.85rem; color: #ef4444;">
    {{ t("troubleshoot-blocked-override") }}
  </div>
  {% elif has_custom_hours is defined and has_custom_hours %}
  <div style="padding: 0.5rem 0.75rem; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); border-radius: var(--radius); margin-bottom: 0.75rem; font-size: 0.85rem; color: #3b82f6;">
    {{ t("troubleshoot-custom-hours-active") }}
  </div>
  {% endif %}

  {# Legend #}
  <div style="display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.75rem; margin-bottom: 0.75rem; color: var(--text-muted);">
    <span><span style="display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: #22c55e; vertical-align: middle; margin-right: 3px;"></span> {{ t("troubleshoot-legend-available") }}</span>
    <span><span style="display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: #ef4444; vertical-align: middle; margin-right: 3px;"></span> {{ t("troubleshoot-legend-calendar-event") }}</span>
    <span><span style="display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: #f97316; vertical-align: middle; margin-right: 3px;"></span> {{ t("troubleshoot-legend-booking") }}</span>
    <span><span style="display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: #8b5cf6; vertical-align: middle; margin-right: 3px;"></span> {{ t("troubleshoot-legend-resource") }}</span>
    <span><span style="display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: #94a3b8; vertical-align: middle; margin-right: 3px;"></span> {{ t("troubleshoot-legend-outside") }}</span>
    <span><span style="display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: repeating-linear-gradient(45deg, #94a3b8, #94a3b8 2px, #cbd5e1 2px, #cbd5e1 4px); vertical-align: middle; margin-right: 3px;"></span> {{ t("troubleshoot-legend-buffer") }}</span>
  </div>

  {# Timeline #}
  <div style="position: relative; height: 48px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 0.25rem;">
    {% for block in blocks %}
    <div title="{{ block.start }} – {{ block.end }}: {{ block.label }}{% if block.detail %} ({{ block.detail }}){% endif %}"
         style="position: absolute; top: 0; height: 100%; left: {{ block.left_pct }}%; width: {{ block.width_pct }}%;
         {% if block.status == 'available' %}background: #22c55e; opacity: 0.45;
         {% elif block.status == 'busy_event' %}background: #ef4444; opacity: 0.7;
         {% elif block.status == 'booking' %}background: #f97316; opacity: 0.7;
         {% elif block.status == 'resource_busy' %}background: #8b5cf6; opacity: 0.7;
         {% elif block.status == 'beyond_horizon' %}background: #0ea5e9; opacity: 0.5;
         {% elif block.status == 'buffer' or block.status == 'min_notice' %}background: repeating-linear-gradient(45deg, #94a3b8, #94a3b8 2px, #cbd5e1 2px, #cbd5e1 4px); opacity: 0.6;
         {% else %}background: #94a3b8; opacity: 0.2;
         {% endif %}
         border-right: 1px solid rgba(255,255,255,0.3);"></div>
    {% endfor %}
  </div>

  {# Hour labels #}
  <div style="position: relative; height: 20px; font-size: 0.65rem; color: var(--text-muted); margin-bottom: 1.5rem;">
    {% for marker in hour_markers %}
    <span style="position: absolute; left: {{ marker.left_pct }}%; transform: translateX(-50%);">{{ marker.label }}</span>
    {% endfor %}
  </div>

  {# Breakdown #}
  {% if breakdown %}
  <h3 style="font-size: 0.9rem; margin-bottom: 0.5rem;">{{ t("troubleshoot-blocked-slots") }}</h3>
  <div style="font-size: 0.85rem;">
    {% for item in breakdown %}
    <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0; {% if not loop.last %}border-bottom: 1px solid var(--border);{% endif %}">
      <span style="font-family: monospace; color: var(--text-muted); white-space: nowrap; min-width: 100px;">{{ item.start }} – {{ item.end }}</span>
      <span style="display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
        {% if item.status == 'busy_event' %}background: #ef4444;
        {% elif item.status == 'booking' %}background: #f97316;
        {% elif item.status == 'resource_busy' %}background: #8b5cf6;
        {% elif item.status == 'beyond_horizon' %}background: #0ea5e9;
        {% elif item.status == 'buffer' or item.status == 'min_notice' %}background: #94a3b8;
        {% endif %}"></span>
      <span>{{ item.reason }}</span>
      {% if item.detail %}<span style="color: var(--text-muted);">({{ item.detail }})</span>{% endif %}
    </div>
    {% endfor %}
  </div>
  {% else %}
    {% if date_is_blocked is defined and date_is_blocked %}
  <p style="font-size: 0.85rem; color: #ef4444;">{{ t("troubleshoot-none-date-blocked") }}</p>
    {% elif has_custom_hours is defined and has_custom_hours and not has_rules %}
  <p style="font-size: 0.85rem; color: var(--text-muted);">{{ t("troubleshoot-none-custom-hours") }}</p>
    {% elif not has_rules %}
  <p style="font-size: 0.85rem; color: var(--text-muted);">{{ t("troubleshoot-none-no-rules", date=date_label) }}</p>
    {% else %}
  <p style="font-size: 0.85rem; color: var(--text-muted);">{{ t("troubleshoot-none-all-bookable") }}</p>
    {% endif %}
  {% endif %}
  </div>{# troubleshoot-content #}
</div>

<script>
(function() {
  var content = document.getElementById('troubleshoot-content');
  if (!content) return;

  function loadPage(url) {
    content.style.opacity = '0.5';
    content.style.transition = 'opacity 0.15s';
    fetch(url).then(function(r) { return r.text(); }).then(function(html) {
      var parser = new DOMParser();
      var doc = parser.parseFromString(html, 'text/html');
      var newContent = doc.getElementById('troubleshoot-content');
      if (newContent) {
        content.innerHTML = newContent.innerHTML;
        content.style.opacity = '1';
      }
      // Update controls from the new page
      var newForm = doc.getElementById('troubleshoot-form');
      if (newForm) {
        // Update prev/next links
        var links = document.querySelectorAll('#troubleshoot-form .slot-btn[href]');
        var newLinks = newForm.querySelectorAll('.slot-btn[href]');
        links.forEach(function(l, i) { if (newLinks[i]) l.href = newLinks[i].href; });
        // Update date input
        var dateInput = document.querySelector('input[name="date"]');
        var newDate = newForm.querySelector('input[name="date"]');
        if (dateInput && newDate) dateInput.value = newDate.value;
        // Update subtitle
        var subtitle = document.querySelector('.subtitle');
        var newSub = doc.querySelector('.subtitle');
        if (subtitle && newSub) subtitle.innerHTML = newSub.innerHTML;
      }
      history.pushState(null, '', url);
    }).catch(function() {
      window.location.href = url;
    });
  }

  // Intercept prev/next links
  document.addEventListener('click', function(e) {
    var link = e.target.closest('a.slot-btn');
    if (link && link.closest('#troubleshoot-form')) {
      e.preventDefault();
      loadPage(link.href);
    }
  });

  // Intercept date change
  var dateInput = document.querySelector('input[name="date"]');
  if (dateInput) {
    dateInput.addEventListener('change', function() {
      var url = '/dashboard/troubleshoot?date=' + this.value + '&event_type=' + document.querySelector('select[name="event_type"]').value;
      loadPage(url);
    });
  }

  // Intercept event type change
  var etSelect = document.querySelector('select[name="event_type"]');
  if (etSelect) {
    etSelect.addEventListener('change', function() {
      var date = document.querySelector('input[name="date"]').value;
      var url = '/dashboard/troubleshoot?date=' + date + '&event_type=' + this.value;
      loadPage(url);
    });
  }

  // Handle browser back/forward
  window.addEventListener('popstate', function() {
    loadPage(window.location.href);
  });
})();
</script>
{% endif %}
{% endblock dashboard_content %}