{% load crispy_forms_tags %}
<script>
function _close_shift_modal_targets(){
  try{ var m=document.getElementById('modal'); if(m) m.innerHTML=''; }catch(e){}
  try{ var s=document.getElementById('shift-form'); if(s) s.innerHTML=''; }catch(e){}
}
</script>
<div class="modal is-active" id="shift-modal">
  <div class="modal-background" onclick="_close_shift_modal_targets()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Shift</p>
      <button class="delete" aria-label="close" onclick="_close_shift_modal_targets()"></button>
    </header>
    <section class="modal-card-body">
      <form method="post" hx-post="{{ form_action }}" hx-target="#modal" hx-swap="innerHTML">
        {% csrf_token %}
        {{ form|crispy }}

        <!-- Structured constraint editor: renders a friendly UI and keeps the
             hidden `constraints` textarea (form field) in sync as JSON. -->
        <div class="box" id="constraints-editor">
          <h4 class="title is-6">Shift constraints</h4>
          <p class="help">Add constraint entries. The form stores a JSON list; this editor helps build that list.</p>
          <div id="constraint-errors" class="notification is-danger" style="display:none; margin-bottom:0.5em;"></div>
          <div id="constraint-list"></div>
          <div style="margin-top:0.5em;">
            <button type="button" class="button is-small" id="add-constraint">Add constraint</button>
          </div>
        </div>

          {% if focus %}
          <script>
          (function(){
            try{
              const focusName = '{{ focus }}';
              const listEl = document.getElementById('constraint-list');
              const addBtn = document.getElementById('add-constraint');
              if(listEl){
                // Ensure at least one row exists
                if(listEl.children.length === 0){ if(addBtn) addBtn.click(); }
                setTimeout(()=>{
                  // Try to find a select matching the constraint name
                  const selects = listEl.querySelectorAll('select');
                  let matched = null;
                  selects.forEach(s=>{ if(s.value === focusName) matched = s; });
                  if(matched){ try{ matched.scrollIntoView({behavior:'smooth', block:'center'}); matched.focus(); matched.dispatchEvent(new Event('change',{bubbles:true})); return; }catch(e){} }
                  // otherwise, focus first row and set its type to the requested focus
                  const firstSel = selects[0];
                  if(firstSel){ try{ firstSel.value = focusName; firstSel.dispatchEvent(new Event('change',{bubbles:true})); firstSel.focus(); firstSel.scrollIntoView({behavior:'smooth', block:'center'}); }catch(e){} }
                }, 120);
              }
            }catch(e){}
          })();
          </script>
          {% endif %}
        <script>
        (function(){
          // Constraint type schemas: name -> fields metadata
          const SCHEMAS = {
            "night": {label: "Night constraint", fields: [ {name: "options", label: "Options (free JSON)", type: "json"} ]},
            // PreShiftConstraint fields from rota_generator/shifts.py:
            // weeks: Optional[List[int]]
            // start_date: Optional[date]
            // end_date: Optional[date]
            // days: Optional[int]
            // ignore_shifts: List[str]
            // exclude_days: List[str]
            // allow_self: bool
            "pre": {label: "Pre-shift", fields: [
              {name: "weeks", label: "Weeks (comma-separated integers)", type: "list_int"},
              {name: "start_date", label: "Start date", type: "date"},
              {name: "end_date", label: "End date", type: "date"},
              {name: "days", label: "Duration (days)", type: "int", required: true},
              {name: "ignore_shifts", label: "Ignore shifts (comma-separated)", type: "list"},
              {name: "exclude_days", label: "Exclude days (comma-separated)", type: "list"},
              {name: "allow_self", label: "Allow self", type: "bool"}
            ]},
            // PostShiftConstraint same fields
            "post": {label: "Post-shift", fields: [
              {name: "weeks", label: "Weeks (comma-separated integers)", type: "list_int"},
              {name: "start_date", label: "Start date", type: "date"},
              {name: "end_date", label: "End date", type: "date"},
              {name: "days", label: "Duration (days)", type: "int", required: true},
              {name: "ignore_shifts", label: "Ignore shifts (comma-separated)", type: "list"},
              {name: "exclude_days", label: "Exclude days (comma-separated)", type: "list"},
              {name: "allow_self", label: "Allow self", type: "bool"}
            ]},
            "min_summed_grade_by_shifts_per_day": {label: "Min summed grade by shifts per day", fields: [ {name: "shifts", label: "Shifts (comma-separated)", type: "list", required: true}, {name: "min_grade_sum", label: "Minimum grade sum", type: "int", required: true}, {name: "days", label: "Days (comma-separated)", type: "list", required: true} ]},
            "limit_grade_number": {label: "Limit grade number", fields: [ {name: "grade", label: "Grade", type: "int", required: true}, {name: "max_number", label: "Max number", type: "int", required: true} ]},
            "minimum_grade_number": {label: "Minimum grade number", fields: [ {name: "grade", label: "Grade", type: "int", required: true}, {name: "min_number", label: "Min number", type: "int", required: true} ]},
            "require_remote_site_presence": {label: "Require remote site presence", fields: [ {name: "site", label: "Site", type: "text", required: true}, {name: "required_number", label: "Required number", type: "int", required: true} ]},
            "max_shifts_per_week": {label: "Max shifts per week", fields: [ {name: "max_shifts", label: "Max shifts", type: "int", required: true} ]},
            "max_shifts_per_week_block": {label: "Max shifts per week block", fields: [ {name: "week_block", label: "Week block", type: "int", required: true}, {name: "max_shifts", label: "Max shifts", type: "int", required: true} ]}
          };

          const textarea = document.getElementById('id_constraints');
          const listEl = document.getElementById('constraint-list');
          const errorsEl = document.getElementById('constraint-errors');
          const addBtn = document.getElementById('add-constraint');

          function validateConstraintsArray(data){
            const msgs = [];
            if(!Array.isArray(data)) return ["Constraints must be a JSON list"];
            data.forEach((c, idx)=>{
              if(!c || typeof c !== 'object'){
                msgs.push(`Constraint #${idx+1} must be an object`);
                return;
              }
              const name = c.name || c.type || null;
              if(!name){ msgs.push(`Constraint #${idx+1} missing 'name'`); return; }
              if(name==='pre' || name==='post'){
                const opts = c.options || {};
                // days (duration) is required
                const daysVal = (c.days!==undefined && c.days!==null) ? c.days : (opts.days!==undefined && opts.days!==null ? opts.days : null);
                if(daysVal===null){
                  msgs.push(`Constraint #${idx+1} (pre/post) requires 'Duration (days)' to be set`);
                }
              }
            });
            return msgs;
          }

          function parseInitial(){
            let val = textarea.value || '';
            if(!val.trim()) return [];
            try{ return JSON.parse(val); }catch(e){ return []; }
          }

          function render(){
            listEl.innerHTML = '';
            const data = parseInitial();
            data.forEach((c, idx)=>{
              listEl.appendChild(renderConstraintRow(c, idx));
            });
            // Ensure textarea is synchronized with the rendered rows. Some
            // inputs update the textarea via their handlers; this function
            // triggers those handlers or falls back to reconstructing the
            // JSON from DOM if needed.
            function syncTextarea(){
              try{
                const children = listEl.children;
                for(let i=0;i<children.length;i++){
                  const ch = children[i];
                  // dispatch change/input events on controls so their handlers
                  // update the textarea via syncToData
                  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 */ }
            }
            syncTextarea();
            // validate and show errors
            try{
              const v = validateConstraintsArray(data);
              if(v && v.length){ errorsEl.style.display='block'; errorsEl.innerHTML = v.map(m=>`<div>${m}</div>`).join(''); }
              else { errorsEl.style.display='none'; errorsEl.innerHTML=''; }
            }catch(e){ /* ignore */ }
          }

          function renderConstraintRow(c, idx){
            const wrapper = document.createElement('div');
            wrapper.className = 'box';
            const header = document.createElement('div');
            header.style.display = 'flex';
            header.style.gap = '0.5em';
            // Type select
            const selDiv = document.createElement('div'); selDiv.className='select';
            const sel = document.createElement('select');
            sel.name = `constraint_type_${idx}`;
            const optEmpty = document.createElement('option'); optEmpty.value=''; optEmpty.text='-- type --'; sel.appendChild(optEmpty);
            Object.keys(SCHEMAS).forEach(k=>{ const o=document.createElement('option'); o.value=k; o.text=SCHEMAS[k].label; sel.appendChild(o); });
            sel.value = c.name || '';
            sel.onchange = ()=>{ renderFields(); syncToData(); };
            selDiv.appendChild(sel);
            header.appendChild(selDiv);

            // Remove button
            const rm = document.createElement('button'); rm.type='button'; rm.className='button is-small is-danger'; rm.textContent='Remove';
            rm.onclick = ()=>{ removeAt(idx); };
            header.appendChild(rm);
            wrapper.appendChild(header);

            const fieldsContainer = document.createElement('div'); fieldsContainer.style.marginTop='0.5em'; wrapper.appendChild(fieldsContainer);

            function renderFields(){
              fieldsContainer.innerHTML='';
              const t = sel.value;
              if(!t || !(t in SCHEMAS)){
                // free-form options
                const ta = document.createElement('textarea'); ta.className='textarea'; ta.rows=3;
                ta.placeholder='Free JSON options for this constraint (optional)';
                ta.value = c.options ? JSON.stringify(c.options) : (c.options===undefined?'':JSON.stringify(c.options||{}));
                ta.oninput = syncToData;
                fieldsContainer.appendChild(ta);
                return;
              }
              SCHEMAS[t].fields.forEach(f=>{
                const fieldWrap = document.createElement('div'); fieldWrap.className='field';
                const label = document.createElement('label'); label.className='label'; label.textContent = f.label;
                // append required indicator if schema marks this field required
                if(f.required){
                  if(!label.querySelector('.required-indicator')){
                    const span = document.createElement('span'); span.className='required-indicator has-text-danger'; span.textContent=' *';
                    label.appendChild(span);
                  }
                }
                fieldWrap.appendChild(label);
                const control = document.createElement('div'); control.className='control';
                let input;
                if(f.type==='text' || f.type==='int' || f.type==='float' || f.type==='list' || f.type==='list_int'){
                  input = document.createElement('input'); input.className='input'; input.type='text';
                  const cur = (c.options && c.options[f.name]!==undefined) ? c.options[f.name] : (c[f.name]!==undefined?c[f.name]:'');
                  if(Array.isArray(cur) && (f.type==='list' || f.type==='list_int')) input.value = cur.join(','); else input.value = cur===null? '': String(cur);
                  input.oninput = syncToData;
                } else if(f.type==='json'){
                  input = document.createElement('textarea'); input.className='textarea'; input.rows=3;
                  const cur = (c.options && c.options[f.name]!==undefined) ? c.options[f.name] : (c[f.name]!==undefined?c[f.name]:'');
                  try{ input.value = JSON.stringify(cur); }catch(e){ input.value = String(cur); }
                  input.oninput = syncToData;
                } else if(f.type==='bool'){
                  // checkbox for boolean
                  const cb = document.createElement('input'); cb.type='checkbox'; cb.className='checkbox';
                  const curb = (c.options && c.options[f.name]!==undefined) ? c.options[f.name] : (c[f.name]!==undefined?c[f.name]:false);
                  cb.checked = !!curb;
                  cb.setAttribute('data-field-name', f.name);
                  cb.onchange = syncToData;
                  if(f.required){ cb.required = true; cb.setAttribute('aria-required','true'); }
                  control.appendChild(cb);
                  fieldWrap.appendChild(control);
                  fieldsContainer.appendChild(fieldWrap);
                  return; // already appended
                } else if(f.type==='date'){
                  input = document.createElement('input'); input.className='input'; input.type='date';
                  const curd = (c.options && c.options[f.name]!==undefined) ? c.options[f.name] : (c[f.name]!==undefined?c[f.name]:'');
                  input.value = curd ? String(curd) : '';
                  input.oninput = syncToData;
                } else {
                  input = document.createElement('input'); input.className='input'; input.type='text'; input.oninput = syncToData;
                }
                input.setAttribute('data-field-name', f.name);
                if(f.required){ input.required = true; input.setAttribute('aria-required','true'); }
                control.appendChild(input);
                fieldWrap.appendChild(control);
                fieldsContainer.appendChild(fieldWrap);
              });
            }

            function syncToData(){
              // read values from fields and update underlying data array in textarea
              const data = parseInitial();
              const obj = {name: sel.value, options: {}};
              const t = sel.value;
              if(t in SCHEMAS){
                SCHEMAS[t].fields.forEach(f=>{
                  const input = fieldsContainer.querySelector('[data-field-name="'+f.name+'"]');
                  if(!input) return;
                  let v = input.value;
                  if(f.type==='int'){
                    v = v===''?null:parseInt(v,10);
                  } else if(f.type==='float'){
                    v = v===''?null:parseFloat(v);
                  } else if(f.type==='list'){
                    v = v===''?[]:v.split(',').map(x=>x.trim()).filter(Boolean);
                  } else if(f.type==='list_int'){
                    v = v===''?[]:v.split(',').map(x=>parseInt(x.trim(),10)).filter(n=>!Number.isNaN(n));
                  } else if(f.type==='bool'){
                    const cb = fieldsContainer.querySelector('[data-field-name="'+f.name+'"]'); if(cb) v = !!cb.checked; else v = !!v;
                  } else if(f.type==='date'){
                    v = v===''?null:v; // keep as ISO date string
                  } else if(f.type==='json'){
                    try{ v = v===''?{}:JSON.parse(v); }catch(e){ v = input.value; }
                  }
                  obj.options[f.name] = v;
                });
              } else {
                const ta = fieldsContainer.querySelector('textarea');
                if(ta){ try{ obj.options = ta.value?JSON.parse(ta.value):{} }catch(e){ obj.options = ta.value } }
              }
              data[idx] = obj;
              textarea.value = JSON.stringify(data);
            }

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

            // initialize fields
            renderFields();
            // listen for updates to synchronize
            // expose removeAt to outer scope via element
            wrapper._removeAt = removeAt;
            return wrapper;
          }

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

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

          // Initial render
          try{ render(); }catch(e){ /* fail silently */ }

          // Also sync before form submit (in case some inputs haven't fired)
          const form = textarea.closest('form'); if(form){ form.addEventListener('submit', ()=>{ /* already synced via inputs */ }); }

        })();
        </script>
          <script>
          // Mark required fields in the modal shift form with a visible asterisk and add ARIA attributes
          (function(){
            try{
              const modalForm = document.querySelector('#shift-modal form');
              if(!modalForm) return;
              const requiredEls = modalForm.querySelectorAll('input[required], select[required], textarea[required]');
              requiredEls.forEach(el=>{
                el.setAttribute('aria-required','true');
                const id = el.id;
                let lbl = id ? modalForm.querySelector('label[for="'+id+'"]') : null;
                if(!lbl){
                  const field = el.closest('.field');
                  if(field) lbl = field.querySelector('label');
                }
                if(lbl){
                  const already = lbl.querySelector('.required-indicator') || lbl.querySelector('.has-text-danger') || /\*\s*$/.test(lbl.textContent);
                  if(!already){
                    const span = document.createElement('span');
                    span.className = 'required-indicator has-text-danger';
                    span.textContent = ' *';
                    lbl.appendChild(span);
                  }
                }
              });
            }catch(e){ /* ignore */ }
          })();
          </script>
        <div class="field">
          <div class="control">
            <button class="button is-primary" type="submit">Save</button>
            <button type="button" class="button" onclick="_close_shift_modal_targets()">Cancel</button>
          </div>
        </div>
      </form>
    </section>
  </div>
</div>