/* Shared calendar JS
   Usage: call initCalendar(containerId, opts)
   opts:
     workerId: optional worker id
     leaves: array of {start:'YYYY-MM-DD', end:'YYYY-MM-DD'}
     requestUrl: url to use for requesting leave (GET will be used with query params)
     mode: 'inline' or other
*/
(function(){
  // Keep a registry of calendar instances so external code (eg. modal handlers)
  // can clear selections when needed.
  window._calendars = window._calendars || {};

  function iso(y,m,d){ return `${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}` }

  function initCalendar(containerId, opts){
    // Accept either an element id or a direct element reference
    const container = typeof containerId === 'string' ? document.getElementById(containerId) : containerId;
    if(!container) return;
  // ensure container uses the expected CSS class so shared styles apply
  try{ container.classList.add && container.classList.add('calendar'); }catch(e){}
    console.debug('initCalendar', containerId, opts);
    const workerId = opts.workerId || container.dataset.workerId || '';
  let leaves = opts.leaves || [];
  const leavesUrl = opts.leavesUrl || null;
    const requestUrl = opts.requestUrl || (window.location.origin + '/leave/request/');

  let viewYear = new Date().getFullYear();
  let viewMonth = new Date().getMonth();
  let selStart = null; let selEnd = null; let previewEnd = null;

    function inLeaves(isoStr){
      const matches = [];
      for(const L of leaves){ if(!L.start) continue; if(L.start<=isoStr && isoStr<=L.end) matches.push(L); }
      return matches;
    }

    function buildControls(){
      let controls = document.getElementById('calendar-controls');
      if(!controls){
        controls = document.createElement('div'); controls.id='calendar-controls';
        controls.innerHTML = `<span id="sel-label">No dates selected</span> <button id="sel-confirm" class="button is-primary">Apply</button> <button id="sel-clear" class="button">Clear</button>`;
        container.parentNode.insertBefore(controls, container.nextSibling);
        document.getElementById('sel-clear').onclick = function(){ selStart = null; selEnd = null; previewEnd = null; render(); };
        document.getElementById('sel-confirm').onclick = function(){
          if(!selStart) return;
          if(!selEnd) selEnd = selStart;
          const startInput = document.querySelector('input[name="start_date"]');
          const endInput = document.querySelector('input[name="end_date"]');
          if(startInput) startInput.value = selStart;
          if(endInput) endInput.value = selEnd;
          if(typeof initFlatpickr === 'function') initFlatpickr();
          const form = document.querySelector('form'); if(form) form.scrollIntoView({behavior:'smooth'});
        };
      }
      const label = document.getElementById('sel-label');
  if(selStart && selEnd) label.textContent = `Selected: ${selStart} -> ${selEnd}`;
      else if(selStart) label.textContent = `Start: ${selStart}`;
      else label.textContent = 'No dates selected';
      document.getElementById('sel-confirm').disabled = !selStart;
    }

    function render(){
      container.innerHTML='';
      const first = new Date(viewYear, viewMonth, 1);
      const startDay = first.getDay();
      const days = new Date(viewYear, viewMonth+1, 0).getDate();
      let cur = 1 - startDay;

      const header = document.createElement('div'); header.style.display='flex'; header.style.justifyContent='space-between'; header.style.alignItems='center'; header.style.marginBottom='0.5rem';
      const title = document.createElement('div'); title.textContent = first.toLocaleString(undefined,{month:'long', year:'numeric'});
      const prev = document.createElement('button'); prev.textContent='◀'; prev.className='button'; prev.onclick=()=>{ viewMonth--; if(viewMonth<0){ viewMonth=11; viewYear--; } render(); };
      const next = document.createElement('button'); next.textContent='▶'; next.className='button'; next.onclick=()=>{ viewMonth++; if(viewMonth>11){ viewMonth=0; viewYear++; } render(); };
      header.appendChild(prev); header.appendChild(title); header.appendChild(next);
      container.appendChild(header);

      // Day-of-week header row
      const dow = document.createElement('div'); dow.className='week'; dow.style.fontWeight='bold';
      const dayNames = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
      for(const dn of dayNames){ const dh = document.createElement('div'); dh.className='day day-header'; dh.style.textAlign='center'; dh.style.padding='0.25rem'; dh.textContent = dn; dow.appendChild(dh); }
      container.appendChild(dow);

      while(cur<=days){
        const week = document.createElement('div'); week.className='week';
        for(let i=0;i<7;i++){
          const dayDiv = document.createElement('div'); dayDiv.className='day';
          if(cur<1 || cur>days){ dayDiv.classList.add('other-month'); dayDiv.textContent=''; }
          else{
            const isoStr = iso(viewYear, viewMonth, cur);
            dayDiv.textContent = cur;
            const matches = inLeaves(isoStr);
            if(matches && matches.length){
              dayDiv.classList.add('leave');
              try{
                // collect distinct colors for this day's matches
                const colors = Array.from(new Set(matches.map(x=>x.color).filter(Boolean)));
                if(colors.length===1){
                  dayDiv.style.backgroundImage = ''; // clear any previous gradient
                  dayDiv.style.backgroundColor = colors[0];
                } else if(colors.length>1){
                  // build an equal-split horizontal gradient (cap to 6 colours)
                  const n = Math.min(colors.length, 6);
                  const seg = 100 / n;
                  const stops = colors.slice(0,n).map((c,i)=>{
                    const start = Math.round(i*seg);
                    const end = Math.round((i+1)*seg);
                    return `${c} ${start}% ${end}%`;
                  }).join(', ');
                  dayDiv.style.backgroundColor = '';
                  dayDiv.style.backgroundImage = `linear-gradient(90deg, ${stops})`;
                }
              }catch(e){ /* defensive: leave default styling */ }
              // set tooltip to show reasons / worker names for overlapping leaves
              try{ dayDiv.title = matches.map(x => x.reason || '').filter(Boolean).join(', '); }catch(e){}
            }
            const rangeEnd = selEnd || previewEnd;
            if(selStart && rangeEnd){ if(selStart<=isoStr && isoStr<=rangeEnd) dayDiv.classList.add('in-range'); }
            else if(selStart && selStart===isoStr) dayDiv.classList.add('selected');
            dayDiv.dataset.iso = isoStr;
            // Pointer handling is done via a delegated listener attached to the
            // container (see below) so clicks that hit the numeric text node are
            // still caught. Keep the day hover handlers here for previews.
            dayDiv.onmouseover = function(){ if(selStart && !selEnd){ previewEnd = this.dataset.iso; render(); } };
            dayDiv.onmouseout = function(){ if(selStart && !selEnd){ previewEnd = null; render(); } };
          }
          week.appendChild(dayDiv);
          cur++;
        }
        container.appendChild(week);
      }
      buildControls();
    }

  // expose a simple API to clear the current selection from outside.
    function clearSelection(){ selStart = null; selEnd = null; previewEnd = null; render(); }
    function setLeaves(newLeaves){ leaves = newLeaves || []; render(); }
    async function refreshLeaves(){
      if(leavesUrl){
        try{
          const res = await fetch(leavesUrl, { credentials: 'same-origin' });
          if(res.ok){
            const data = await res.json();
            if(data && Array.isArray(data.leaves)){
              setLeaves(data.leaves.map(l=>({start:l.start, end:l.end, reason:l.reason, color:l.color, worker_id:l.worker_id}))); return;
            }
          }
        }catch(e){ console.error('refreshLeaves failed', e); }
      }
      // fallback: do nothing
    }

    window._calendars[containerId] = { clearSelection, setLeaves, refreshLeaves };

    // Delegated pointer handler: attach once to the container so clicks on
    // numeric text nodes (or any child) are still detected via event
    // delegation. This is more reliable than per-day handlers when the
    // DOM changes or when the target is a text node.
    if(!container._pointerHandlerAttached){
      container.addEventListener('pointerdown', function(evt){
        try{
          const dayEl = evt.target.closest && evt.target.closest('.day');
          console.debug('calendar click', evt.target, dayEl && dayEl.dataset && dayEl.dataset.iso);
          if(!dayEl || dayEl.classList.contains('other-month')) return;
          const clicked = dayEl.dataset.iso;
          if(!selStart){ selStart = clicked; selEnd = null; }
          else if(selStart && !selEnd){ if(clicked < selStart){ selEnd = selStart; selStart = clicked } else selEnd = clicked }
          else { selStart = clicked; selEnd = null }
          previewEnd = null;
          render();
          if(selStart && selEnd){
            // If a specific workerId is supplied, use existing single-worker modal flow.
            if(workerId){
              const url = requestUrl + '?worker_id=' + encodeURIComponent(workerId) + '&start_date=' + selStart + '&end_date=' + selEnd;
              setTimeout(function(){
                try{ if(window.htmx && typeof window.htmx.ajax === 'function'){ window.htmx.ajax('GET', url, {target:'#modal', swap:'innerHTML'}); } else { htmx.ajax('GET', url, {target:'#modal', swap:'innerHTML'}); } }catch(e){ window.location = url; }
              }, 80);
            } else {
              // Global calendar: prompt for workers to apply this leave to.
              // Use an HTMX GET to render the select-workers modal.
              let url = '/leave/select_workers/?start_date=' + encodeURIComponent(selStart) + '&end_date=' + encodeURIComponent(selEnd);
              // Include rota_id if present in the page URL
              try{ const rotaParam = new URLSearchParams(window.location.search).get('rota_id'); if(rotaParam){ url += '&rota_id=' + encodeURIComponent(rotaParam); } }catch(e){}
              setTimeout(function(){
                try{ if(window.htmx && typeof window.htmx.ajax === 'function'){ window.htmx.ajax('GET', url, {target:'#modal', swap:'innerHTML'}); } else { htmx.ajax('GET', url, {target:'#modal', swap:'innerHTML'}); } }catch(e){ window.location = url; }
              }, 80);
            }
          }
        }catch(e){ console.error('calendar pointer handler', e); }
      });
      container._pointerHandlerAttached = true;
    }

    render();
    // If a server leavesUrl is provided, refresh from server to ensure authoritative data
    if(leavesUrl){
      // don't await here — fire-and-forget refresh
      refreshLeaves();
    }
  }

  // provide a global helper to clear selections across all calendars
  window.clearAllCalendarSelections = function(){
    try{
      if(window._calendars){ Object.values(window._calendars).forEach(c => c.clearSelection && c.clearSelection()); }
    }catch(e){ console.error('clearAllCalendarSelections', e); }
  };

  // expose
  window.initCalendar = initCalendar;
})();