{% load crispy_forms_tags %}
<div class="modal is-active" id="worker-modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Add Worker</p>
      <button class="delete" aria-label="close" onclick="document.getElementById('modal').innerHTML='' "></button>
    </header>
    <section class="modal-card-body">
      <form method="post" hx-post="{{ form_action }}" hx-target="#modal" hx-swap="innerHTML">
        {% csrf_token %}
        {# Preserve rota_id if provided so POST handlers can attach the worker to the rota #}
        {% if rota_id %}
          <input type="hidden" name="rota_id" value="{{ rota_id }}" />
        {% endif %}
        {{ form|crispy }}

        {# Token area: shows a copyable self-service link and a regenerate button when editing a worker #}
        {% if worker %}
          {% include 'rota/partials/worker_token_area.html' with worker=worker token_link=token_link %}
        {% endif %}

        {% if worker %}
        <div class="box" id="worker-leaves">
          <h4 class="title is-6">Leaves</h4>
          <div>
            {% include 'rota/partials/leave_list.html' with leaves=worker.leaves.all token=None %}
          </div>
          <div style="margin-top:0.5rem; display:flex; gap:0.5rem;">
            <a class="button is-small" href="{% url 'rota:worker_detail' worker.id %}">Open full page</a>
            <button class="button is-small" hx-get="{% url 'rota:worker_leave_add' worker.id %}" hx-target="#modal" hx-swap="innerHTML">Add leave</button>
          </div>
        </div>
        {% endif %}

        <!-- Structured Non-working days editor (keeps #id_nwds in sync) -->
        <div class="box" id="nwds-editor">
          <h4 class="title is-6">Non-working days</h4>
          <p class="help">Add non-working day rules. These will be serialized to the JSON field.</p>
          <div id="nwds-list"></div>
          <div style="margin-top:0.5em;">
            <button type="button" class="button is-small" id="add-nwd">Add non-working day</button>
          </div>
        </div>

          {% if focus %}
          <script>
          (function(){
            try{
              const f = '{{ focus }}';
              const listId = f + '-list';
              const addBtnId = 'add-' + f;
              const listEl = document.getElementById(listId);
              if(listEl){
                // if no rows exist, trigger the Add button to create one
                if(listEl.children.length === 0){
                  const btn = document.getElementById(addBtnId);
                  if(btn) btn.click();
                }
                // after render, scroll into view and focus the first input
                setTimeout(()=>{
                  const el = document.getElementById(listId);
                  if(el){
                    try{ el.scrollIntoView({behavior:'smooth', block:'center'}); }catch(e){}
                    const firstRow = el.querySelector('.box') || el.firstElementChild;
                    if(firstRow){
                      const input = firstRow.querySelector('input, select, textarea, [data-field]');
                      if(input){ try{ input.focus(); }catch(e){} }
                    }
                  }
                }, 120);
              }
            }catch(e){}
          })();
          </script>
          {% endif %}
        <script>
        (function(){
          const textarea = document.getElementById('id_nwds');
          // hide the raw JSON textarea to avoid confusing users; editor will keep it in sync
          if(textarea){ textarea.style.display = 'none'; }
          const listEl = document.getElementById('nwds-list');
          const addBtn = document.getElementById('add-nwd');

          const DAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];

          function parseInitial(){
            let val = textarea ? textarea.value : '';
            if(!val) return [];
            let raw;
            try{ raw = JSON.parse(val); }catch(e){ return []; }
            if(!Array.isArray(raw)) return [];

            // Normalize entries: the stored shape may be a list of ints (0=Mon),
            // strings, or objects {day: 'Mon', start_date, end_date}.
            return raw.map(item=>{
              if(item === null || item === undefined) return {};
              if(typeof item === 'number'){
                return { day: DAYS[item] || '' };
              }
              if(typeof item === 'string'){
                // Accept 'monday' / 'Mon' / 'mon' / '0' etc.
                const n = parseInt(item,10);
                if(!Number.isNaN(n)) return { day: DAYS[n] || '' };
                const s = item.trim();
                // try matching first 3 letters ignoring case
                const low = s.toLowerCase();
                for(let d of DAYS){ if(d.toLowerCase().startsWith(low.slice(0,3))) return { day: d }; }
                // fallback: return as-day string
                return { day: s };
              }
              if(typeof item === 'object'){
                // If object has numeric day, convert
                const copy = Object.assign({}, item);
                if(copy.day !== undefined && typeof copy.day === 'number'){
                  copy.day = DAYS[copy.day] || '';
                }
                // If day is a short name, normalise to 3-letter capitalised
                if(copy.day && typeof copy.day === 'string'){
                  const s = copy.day.trim();
                  const low = s.toLowerCase();
                  for(let d of DAYS){ if(d.toLowerCase().startsWith(low.slice(0,3))) { copy.day = d; break; } }
                }
                return copy;
              }
              return {};
            });
          }

          function syncTextarea(){
            // Ensure each row's inputs trigger their onchange handlers so the
            // hidden textarea is kept in sync. This is resilient whether rows
            // expose a `_sync` helper or rely on input events.
            try{
              const children = listEl.children;
              for(let i=0;i<children.length;i++){
                const ch = children[i];
                if(ch && typeof ch._sync === 'function'){
                  try{ ch._sync(); }catch(e){}
                } else {
                  // trigger change/input events on contained controls
                  const controls = ch.querySelectorAll('select, input, textarea');
                  controls.forEach(ctrl=>{
                    try{
                      if(ctrl.tagName==='SELECT') ctrl.dispatchEvent(new Event('change', {bubbles:true}));
                      else ctrl.dispatchEvent(new Event('input', {bubbles:true}));
                    }catch(e){}
                  });
                }
              }
            }catch(e){ /* ignore */ }
          }

          function render(){
            listEl.innerHTML = '';
            const data = parseInitial();
            data.forEach((item, idx)=>{
              listEl.appendChild(renderRow(item, idx));
            });
            syncTextarea();
          }

          function renderRow(item, idx){
            const wrap = document.createElement('div'); wrap.className='box';
            const row = document.createElement('div'); row.style.display='flex'; row.style.gap='0.5em'; row.style.alignItems='flex-end';

            // day select
            const dayDiv = document.createElement('div'); dayDiv.className='field';
            const dayLabel = document.createElement('label'); dayLabel.className='label'; dayLabel.textContent='Day'; dayDiv.appendChild(dayLabel);
            const control = document.createElement('div'); control.className='control';
            // Bulma expects a wrapper div.select containing the <select>
            const selWrap = document.createElement('div'); selWrap.className='select'; selWrap.style.minWidth='120px';
            const inner = document.createElement('select');
            const empty = document.createElement('option'); empty.value=''; empty.text='(any)'; inner.appendChild(empty);
            DAYS.forEach(d=>{ const o=document.createElement('option'); o.value=d; o.text=d; inner.appendChild(o); });
            inner.value = item.day || '';
            inner.onchange = syncAll;
            selWrap.appendChild(inner);
            control.appendChild(selWrap);
            dayDiv.appendChild(control);
            row.appendChild(dayDiv);

            // start date
            const sdWrap = document.createElement('div'); sdWrap.className='field';
            const sdLabel = document.createElement('label'); sdLabel.className='label'; sdLabel.textContent='Start date'; sdWrap.appendChild(sdLabel);
            const sdControl = document.createElement('div'); sdControl.className='control';
            const sdInput = document.createElement('input'); sdInput.type='date'; sdInput.className='datepicker input'; sdInput.setAttribute('autocomplete','off'); sdInput.value = item.start_date || '';
            sdInput.onchange = syncAll;
            sdControl.appendChild(sdInput); sdWrap.appendChild(sdControl); row.appendChild(sdWrap);

            // end date
            const edWrap = document.createElement('div'); edWrap.className='field';
            const edLabel = document.createElement('label'); edLabel.className='label'; edLabel.textContent='End date'; edWrap.appendChild(edLabel);
            const edControl = document.createElement('div'); edControl.className='control';
            const edInput = document.createElement('input'); edInput.type='date'; edInput.className='datepicker input'; edInput.setAttribute('autocomplete','off'); edInput.value = item.end_date || '';
            edInput.onchange = syncAll;
            edControl.appendChild(edInput); edWrap.appendChild(edControl); row.appendChild(edWrap);

            // remove button
            const rmDiv = document.createElement('div'); rmDiv.className='field';
            const rmLabel = document.createElement('label'); rmLabel.className='label'; rmLabel.textContent=''; rmDiv.appendChild(rmLabel);
            const rmControl = document.createElement('div'); rmControl.className='control';
            const rmBtn = document.createElement('button'); rmBtn.type='button'; rmBtn.className='button is-danger is-light is-small'; rmBtn.textContent='Remove';
            rmBtn.onclick = ()=>{ removeAt(idx); };
            rmControl.appendChild(rmBtn); rmDiv.appendChild(rmControl); row.appendChild(rmDiv);

            wrap.appendChild(row);

            // initialize flatpickr for these newly added inputs if available
            try{ if(window.initFlatpickr) initFlatpickr(wrap); }catch(e){}

            function syncAll(){
              const data = parseInitial();
              const dayVal = inner.value || null;
              const sd = sdInput.value || null;
              const ed = edInput.value || null;
              const obj = {};
              if(dayVal) obj.day = dayVal;
              if(sd) obj.start_date = sd;
              if(ed) obj.end_date = ed;
              data[idx] = obj;
              textarea.value = JSON.stringify(data);
            }

            // expose helper
            wrap._sync = syncAll;
            return wrap;
          }

          function removeAt(i){ const data = parseInitial(); data.splice(i,1); textarea.value = JSON.stringify(data); render(); }

          addBtn.addEventListener('click', ()=>{ const data = parseInitial(); data.push({}); textarea.value = JSON.stringify(data); render(); });

          // initial render
          try{ render(); }catch(e){ console && console.error && console.error(e); }

        })();
        </script>
        <!-- Additional structured editors for other worker fields -->
        <div class="box" id="other-editors">
          <h4 class="title is-6">Other structured fields</h4>
          <p class="help">Quick editors for common lists so you don't need to edit JSON manually.</p>

          <div class="columns is-multiline">
            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Out of programme</h5>
                <button type="button" class="button is-small" id="add-oop">Add</button>
              </div>
              <div id="oop-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Not available to work</h5>
                <button type="button" class="button is-small" id="add-nav">Add</button>
              </div>
              <div id="nav-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Preferences not to work</h5>
                <button type="button" class="button is-small" id="add-pref">Add</button>
              </div>
              <div id="pref-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Work requests</h5>
                <button type="button" class="button is-small" id="add-wr">Add</button>
              </div>
              <div id="wr-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Locum availability</h5>
                <button type="button" class="button is-small" id="add-loc">Add</button>
              </div>
              <div id="loc-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Forced assignments (week,day,shift)</h5>
                <button type="button" class="button is-small" id="add-fa">Add</button>
              </div>
              <div id="fa-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Forced assignments by date</h5>
                <button type="button" class="button is-small" id="add-fabd">Add</button>
              </div>
              <div id="fabd-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Hard day dependencies</h5>
                <button type="button" class="button is-small" id="add-hdd">Add</button>
              </div>
              <div id="hdd-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Hard day exclusions</h5>
                <button type="button" class="button is-small" id="add-hde">Add</button>
              </div>
              <div id="hde-list" style="margin-top:0.5rem"></div>
            </div>

            <div class="column is-full">
              <div style="display:flex;justify-content:space-between;align-items:center;">
                <h5 class="subtitle is-6" style="margin:0">Allowed multi-shift sets</h5>
                <button type="button" class="button is-small" id="add-ams">Add</button>
              </div>
              <div id="ams-list" style="margin-top:0.5rem"></div>
            </div>
          </div>
        </div>

        <script>
        (function(){
          // Helper to create a simple list editor bound to a textarea id
          function makeSimpleListEditor(cfg){
            const textarea = document.getElementById(cfg.textarea);
            if(textarea) textarea.style.display='none';
            const listEl = document.getElementById(cfg.container);
            const addBtn = document.getElementById(cfg.addButton);
            const WEEKDAYS = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];

            function parse(){
              let v = textarea ? textarea.value : ''; if(!v) return [];
              try{ const p = JSON.parse(v); return Array.isArray(p)?p:[];}catch(e){return [];}
            }

            function render(){ listEl.innerHTML=''; const data = parse(); data.forEach((it,i)=> listEl.appendChild(rowFor(it,i))); }

            function rowFor(item, idx){
              const wrap = document.createElement('div'); wrap.className='box';
              const row = document.createElement('div'); row.className='columns';
              cfg.fields.forEach(f=>{
                const col = document.createElement('div'); col.className='column';
                const field = document.createElement('div'); field.className='field';
                const label = document.createElement('label'); label.className='label'; label.textContent=f.label; field.appendChild(label);
                const control = document.createElement('div'); control.className='control';

                // Special-case: render weekday checkboxes when the field name is 'days'
                if(f.name === 'days'){
                  const box = document.createElement('div'); box.className='buttons'; box.setAttribute('data-field', f.name);
                  WEEKDAYS.forEach(d => {
                    const btn = document.createElement('label'); btn.className='button is-small is-light'; btn.style.marginRight='0.25rem';
                    const chk = document.createElement('input'); chk.type='checkbox'; chk.value = d; chk.style.marginRight='0.35rem';
                    // mark checked if item[f.name] contains this day (accept set/list/string)
                    try{
                      const cur = item[f.name];
                      if(cur){
                        if(Array.isArray(cur)){
                          if(cur.indexOf(d)!==-1) chk.checked = true;
                        } else if(typeof cur === 'string'){
                          const parts = cur.split(',').map(s=>s.trim()); if(parts.indexOf(d)!==-1) chk.checked = true;
                        } else if(typeof cur === 'object'){
                          // set-like
                          if(cur.hasOwnProperty(d) || (Array.from(Object.values(cur)).indexOf(d)!==-1)) chk.checked = true;
                        }
                      }
                    }catch(e){}
                    chk.onchange = ()=>{ sync(idx); };
                    btn.appendChild(chk);
                    const span = document.createElement('span'); span.textContent = d; btn.appendChild(span);
                    box.appendChild(btn);
                  });
                  control.appendChild(box);
                  field.appendChild(control); col.appendChild(field); row.appendChild(col);
                  } else {
                    let input;
                    if(f.type==='date'){
                      input = document.createElement('input'); input.type='date'; input.className='datepicker input'; input.setAttribute('autocomplete','off'); input.value = item[f.name] || '';
                    } else if(f.type==='int'){
                      input = document.createElement('input'); input.type='number'; input.className='input'; input.value = item[f.name] || '';
                    } else if(f.type==='shift'){
                      // render a select populated with shift options passed via cfg
                      input = document.createElement('select'); input.className='select';
                      // wrap select in a div.select to match Bulma styling
                      const selWrap = document.createElement('div'); selWrap.className = 'select';
                      const sel = document.createElement('select');
                      const emptyOpt = document.createElement('option'); emptyOpt.value = ''; emptyOpt.text = '(any)'; sel.appendChild(emptyOpt);
                      const opts = (cfg && cfg.shiftOptions) ? cfg.shiftOptions : (typeof _shiftOptions !== 'undefined' ? _shiftOptions : []);
                      if(Array.isArray(opts)){
                        opts.forEach(o=>{ const op = document.createElement('option'); op.value = o; op.text = o; if(item[f.name] === o) op.selected = true; sel.appendChild(op); });
                      }
                      sel.value = item[f.name] || '';
                      sel.onchange = ()=>{ sync(idx); };
                      sel.setAttribute('data-field', f.name);
                      selWrap.appendChild(sel);
                      // set 'input' variable to the wrapper so downstream code appends it
                      input = selWrap;
                    } else {
                      input = document.createElement('input'); input.type='text'; input.className='input'; input.value = item[f.name] || '';
                    }
                  // tag this control with the field name so sync() can find it reliably
                  if(input.tagName === 'DIV' && input.querySelector('select')){
                    // wrapper created for select; the inner select already has data-field
                    // nothing to do here
                  } else {
                    input.setAttribute('data-field', f.name);
                    input.onchange = ()=>{ sync(idx); };
                  }
                  control.appendChild(input); field.appendChild(control); col.appendChild(field); row.appendChild(col);
                }
              });
              // remove
              const colRm = document.createElement('div'); colRm.className='column is-narrow'; const fr = document.createElement('div'); fr.className='field'; const ctr = document.createElement('div'); ctr.className='control'; const rm = document.createElement('button'); rm.type='button'; rm.className='button is-danger is-light is-small'; rm.textContent='Remove'; rm.onclick = ()=>{ removeAt(idx); }; ctr.appendChild(rm); fr.appendChild(ctr); colRm.appendChild(fr); row.appendChild(colRm);
              wrap.appendChild(row);
              try{ if(window.initFlatpickr) initFlatpickr(wrap); }catch(e){}
              return wrap;
            }

            function sync(i){
              const data = parse();
              const el = listEl.children[i]; if(!el) return;
              const obj = {};
              cfg.fields.forEach((f)=>{
                const fld = el.querySelector('[data-field="'+f.name+'"]');
                if(!fld){
                  // fallback: try to find an input by label text
                  const inp = el.querySelector('input');
                  if(inp && inp.value!=='') obj[f.name] = f.type==='int'?parseInt(inp.value,10):inp.value;
                  return;
                }
                // if this is a checkbox group (for days), fld will be a container
                if(f.name === 'days'){
                  const checks = fld.querySelectorAll('input[type=checkbox]');
                  const vals = Array.from(checks).filter(c=>c.checked).map(c=>c.value);
                  if(vals.length) obj[f.name] = vals;
                } else {
                  // single input control
                  if(fld.tagName === 'INPUT' || fld.tagName === 'SELECT'){
                    const v = fld.value;
                    if(v !== '') obj[f.name] = f.type==='int'?parseInt(v,10):v;
                  } else {
                    // container wrapping an input (e.g. div.select wrapper or custom control)
                    const inp = fld.querySelector('input') || fld.querySelector('select');
                    if(inp && inp.value !== '') obj[f.name] = f.type==='int'?parseInt(inp.value,10):inp.value;
                  }
                }
              });
              data[i]=obj;
              if(textarea) textarea.value = JSON.stringify(data);
            }

            function removeAt(i){ const data = parse(); data.splice(i,1); if(textarea) textarea.value = JSON.stringify(data); render(); }

            addBtn.addEventListener('click', ()=>{ const data = parse(); data.push({}); if(textarea) textarea.value=JSON.stringify(data); render(); });
            try{ render(); }catch(e){ console && console.error && console.error(e); }
          }

          // Instantiate editors for many worker fields
          makeSimpleListEditor({textarea:'id_oop', container:'oop-list', addButton:'add-oop', fields:[{name:'start_date',label:'Start date',type:'date'},{name:'end_date',label:'End date',type:'date'},{name:'reason',label:'Reason',type:'text'}]});
          makeSimpleListEditor({textarea:'id_not_available_to_work', container:'nav-list', addButton:'add-nav', fields:[{name:'date',label:'Date',type:'date'},{name:'reason',label:'Reason',type:'text'}]});
          makeSimpleListEditor({textarea:'id_pref_not_to_work', container:'pref-list', addButton:'add-pref', fields:[{name:'date',label:'Date',type:'date'},{name:'reason',label:'Reason',type:'text'}]});
          // If the server provided shift names for the current rota, use them
          var _shiftOptions = [];
          try{
            _shiftOptions = {{ shift_names_json|default:'[]'|safe }};
          }catch(e){ _shiftOptions = []; }

          makeSimpleListEditor({textarea:'id_work_requests', container:'wr-list', addButton:'add-wr', fields:[{name:'date',label:'Date',type:'date'},{name:'shift',label:'Shift',type:'shift'}], shiftOptions:_shiftOptions});
          makeSimpleListEditor({textarea:'id_locum_availability', container:'loc-list', addButton:'add-loc', fields:[{name:'date',label:'Date',type:'date'},{name:'shift',label:'Shift',type:'shift'}], shiftOptions:_shiftOptions});
          makeSimpleListEditor({textarea:'id_forced_assignments', container:'fa-list', addButton:'add-fa', fields:[{name:'week',label:'Week',type:'int'},{name:'day',label:'Day',type:'text'},{name:'shift',label:'Shift',type:'shift'}], shiftOptions:_shiftOptions});
          makeSimpleListEditor({textarea:'id_forced_assignments_by_date', container:'fabd-list', addButton:'add-fabd', fields:[{name:'date',label:'Date',type:'date'},{name:'shift',label:'Shift',type:'shift'}], shiftOptions:_shiftOptions});
          makeSimpleListEditor({textarea:'id_allowed_multi_shift_sets', container:'ams-list', addButton:'add-ams', fields:[{name:'shifts',label:'Shifts (comma-separated)',type:'text'}]});

          // Hard day deps/exclusions need days/weeks/start/end
          makeSimpleListEditor({textarea:'id_hard_day_dependencies', container:'hdd-list', addButton:'add-hdd', fields:[{name:'days',label:'Days (weekdays)',type:'text'},{name:'weeks',label:'Weeks (comma-separated ints)',type:'text'},{name:'start_date',label:'Start date',type:'date'},{name:'end_date',label:'End date',type:'date'}]});
          makeSimpleListEditor({textarea:'id_hard_day_exclusions', container:'hde-list', addButton:'add-hde', fields:[{name:'days',label:'Days (weekdays)',type:'text'},{name:'weeks',label:'Weeks (comma-separated ints)',type:'text'},{name:'start_date',label:'Start date',type:'date'},{name:'end_date',label:'End date',type:'date'}]});

        })();
        </script>
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Save</button>
            <button type="button" class="button" onclick="document.getElementById('modal').innerHTML=''">Cancel</button>
          </div>
        </div>
      </form>
    </section>
  </div>
</div>