{% extends 'base.html' %}
{% load crispy_forms_tags static %}
{% block content %}
  <div class="container">
    <h2 class="title">All leave requests</h2>

    <div class="box">
      <h3 class="subtitle">Global leave calendar</h3>
      {% include 'rota/partials/flatpickr_includes.html' %}
      <link rel="stylesheet" href="{% static 'css/calendar.css' %}">

      {# Rota selection is handled by route scoping; no dropdown needed here #}

      <div style="display:flex;gap:0.5rem;margin-bottom:0.5rem;align-items:center;">
        <div>
          <button id="view-calendar-btn" class="button is-small is-link">Calendar</button>
          <button id="view-list-btn" class="button is-small">List</button>
        </div>
      </div>

      <div id="calendar" class="calendar" data-mode="inline"></div>
      <div id="calendar-list-view" style="display:none; margin-top:0.5rem;"></div>
      <p class="help">View all leave requests across workers. Choose a rota to scope the calendar, or select "All rotas" to see everything. Click and drag to select dates to open the leave form (you'll need to choose workers in the modal).</p>
    </div>

    <div id="global-legend" class="box" style="margin-top:0.5rem;">
      <div style="display:flex;align-items:center;gap:0.5rem;justify-content:space-between;">
        <div><strong>Legend:</strong></div>
        <div>
          {% if selected_rota_id %}
            <a class="button is-small is-light" href="{% url 'rota:rota_detail' selected_rota_id %}">Back to rota</a>
          {% endif %}
        </div>
      </div>
      <div id="global-legend-content" style="margin-top:0.5rem;">
        <span style="display:inline-block;width:12px;height:12px;background:#ffecec;border:1px solid #ddd;margin-left:0.5rem;vertical-align:middle"></span> Existing leave
        <span style="display:inline-block;width:12px;height:12px;background:#cdeffd;border:1px solid #2b8fd6;margin-left:0.75rem;vertical-align:middle"></span> Selected range
      </div>
    </div>
  </div>

  <script id="worker_leaves_json" type="application/json">{{ leaves_json|safe }}</script>
  <script id="selected_rota_json" type="application/json">{{ selected_rota_id|default:"null" }}</script>
  <script src="{% static 'js/calendar.js' %}"></script>
  <script>
    (function(){
      const container = document.getElementById('calendar');
      if(!container) return;
      let leaves = [];
      try {
        const raw = document.getElementById('worker_leaves_json');
        if (raw) {
          leaves = JSON.parse(raw.textContent || raw.innerText || '[]');
        }
      } catch (e) {
        console.debug('Unable to parse embedded leaves JSON', e);
      }
      // Base URL for leaves JSON
      let leavesUrlBase = '{% url "rota:leaves_global_json" %}';
      // Read initial rota selection provided by the view (if any)
      let initialRota = null;
      try{
        const sel = document.getElementById('selected_rota_json');
        if(sel) initialRota = JSON.parse(sel.textContent || sel.innerText || 'null');
      }catch(e){ initialRota = null; }
  // expose initial rota id so other scripts (list view) can access it
  window._initialRota = initialRota;
  window.initCalendar('calendar', { leaves: leaves, leavesUrl: leavesUrlBase, rotaId: initialRota, requestUrl: '{% url "rota:request_leave" %}', mode: container.dataset.mode || 'inline' });
      function refreshLegendFor(id){
        const globalLegendContent = document.getElementById('global-legend-content');
        if(!globalLegendContent) return;
        if(!id){
          globalLegendContent.innerHTML = '<span style="display:inline-block;width:12px;height:12px;background:#ffecec;border:1px solid #ddd;margin-left:0.5rem;vertical-align:middle"></span> Existing leave'
            + '<span style="display:inline-block;width:12px;height:12px;background:#cdeffd;border:1px solid #2b8fd6;margin-left:0.75rem;vertical-align:middle"></span> Selected range';
          return;
        }
        globalLegendContent.innerText = 'Loading legend…';
        fetch(leavesUrlBase + '?rota_id=' + encodeURIComponent(id), {credentials:'same-origin'}).then(r=>r.json()).then(data=>{
          const byWorker = {};
          (data.leaves||[]).forEach(l=>{ if(l.worker_id){ byWorker[l.worker_id] = {name:l.reason, color:l.color}; } });
          if(Object.keys(byWorker).length===0){
            globalLegendContent.innerText = 'No workers with leaves in this rota.';
            return;
          }
          const workerHtml = Object.entries(byWorker).map(([id,info])=> `<div style="display:inline-flex;align-items:center;gap:0.5rem;margin-right:0.5rem"><span style="width:14px;height:14px;background:${info.color};border:1px solid rgba(0,0,0,0.1);display:inline-block"></span><span>${info.name}</span></div>`).join('');
          globalLegendContent.innerHTML = workerHtml + '<span style="display:inline-block;width:12px;height:12px;background:#cdeffd;border:1px solid #2b8fd6;margin-left:0.75rem;vertical-align:middle"></span> Selected range';
        }).catch(e=>{ globalLegendContent.innerText = 'Unable to load legend'; console.debug(e); });
      }
      // Refresh legend for the initially selected rota (or show all rotas)
      // Ensure the legend element exists (script is before the legend markup)
      if(document.readyState === 'loading'){
        document.addEventListener('DOMContentLoaded', function(){ refreshLegendFor(initialRota); });
      } else {
        refreshLegendFor(initialRota);
      }
    })();
  </script>

  <script>
    (function(){
      const calendarEl = document.getElementById('calendar');
      const listEl = document.getElementById('calendar-list-view');
      const btnCal = document.getElementById('view-calendar-btn');
      const btnList = document.getElementById('view-list-btn');
      let isList = false;

      function showCalendar(){
        isList = false;
        if(listEl) listEl.style.display = 'none';
        if(calendarEl) calendarEl.style.display = '';
        if(btnCal) btnCal.classList.add('is-link');
        if(btnList) btnList.classList.remove('is-link');
      }

      async function renderList(){
        if(!listEl) return;
        listEl.innerHTML = '<p>Loading…</p>';
        try{
          let url = '{% url "rota:leaves_global_json" %}';
          const rotaForList = (typeof window !== 'undefined' && window._initialRota) ? window._initialRota : null;
          if(rotaForList) url += (url.includes('?') ? '&' : '?') + 'rota_id=' + encodeURIComponent(rotaForList);
          const res = await fetch(url, {credentials:'same-origin'});
          if(!res.ok) throw new Error('Failed to fetch leaves');
          const data = await res.json();
          const leavesArr = (data.leaves||[]).map(l => ({ start: l.start, end: l.end, reason: l.reason, worker_id: l.worker_id, color: l.color }));

          // find min/max date across all leaves
          if(leavesArr.length===0){ listEl.innerHTML = '<p>No leaves found.</p>'; return; }
          function toDate(s){ const p = s.split('-'); return new Date(parseInt(p[0]), parseInt(p[1],10)-1, parseInt(p[2],10)); }
          function isoDate(d){ return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0'); }
          let minD = null, maxD = null;
          leavesArr.forEach(l=>{
            try{
              const s = toDate(l.start);
              const e = toDate(l.end || l.start);
              if(!minD || s < minD) minD = s;
              if(!maxD || e > maxD) maxD = e;
            }catch(e){}
          });
          if(!minD || !maxD){ listEl.innerHTML = '<p>No valid leave dates found.</p>'; return; }

          // build a map of dates -> leaves that cover that date
          const dateMap = {};
          for(let d = new Date(minD); d <= maxD; d.setDate(d.getDate()+1)){
            dateMap[isoDate(new Date(d))] = [];
          }
          leavesArr.forEach(l=>{
            const s = toDate(l.start);
            const e = toDate(l.end || l.start);
            for(let d = new Date(s); d <= e; d.setDate(d.getDate()+1)){
              const key = isoDate(new Date(d));
              if(key in dateMap) dateMap[key].push(l);
              else dateMap[key] = [l];
            }
          });

          // Render dates in ascending order
          const parts = [];
          const keys = Object.keys(dateMap).sort();
          for(const dateKey of keys){
            const items = dateMap[dateKey];
            const header = `<div style="margin-top:0.5rem; font-weight:bold">${dateKey}</div>`;
            if(!items || items.length===0){
              parts.push(header + `<div style="margin-left:1.5rem;margin-top:0.25rem;color:#666">No leaves</div>`);
              continue;
            }
            const rows = items.map(l=>{
              const name = l.reason || 'Unknown';
              const color = l.color || '#ddd';
              return `<div style="margin-left:1.5rem;margin-top:0.25rem;display:flex;align-items:center;gap:0.5rem"><span style="width:12px;height:12px;background:${color};display:inline-block;border:1px solid rgba(0,0,0,0.1)"></span><span>${name}</span></div>`;
            }).join('');
            parts.push(header + rows);
          }
          listEl.innerHTML = parts.join('');
        }catch(err){ console.error('renderList failed', err); listEl.innerHTML = '<p>Unable to load list view.</p>'; }
      }

      function showList(){
        isList = true;
        if(calendarEl) calendarEl.style.display = 'none';
        if(listEl) listEl.style.display = '';
        if(btnList) btnList.classList.add('is-link');
        if(btnCal) btnCal.classList.remove('is-link');
        renderList();
      }

      if(btnCal) btnCal.addEventListener('click', showCalendar);
      if(btnList) btnList.addEventListener('click', showList);
      // default view
      showCalendar();

      // Refresh views when leaves change
      window.addEventListener('leaveUpdated', function(){
        if(isList) renderList();
        else try{ if(window._calendars && window._calendars['calendar'] && window._calendars['calendar'].refreshLeaves) window._calendars['calendar'].refreshLeaves(); }catch(e){}
      });
    })();
  </script>

  {# Consolidated legend above replaces the separate 'Workers on this rota' box #}
{% endblock %}