// ============================================================
// Job Card Settings Module
// ============================================================

let _jcsTypes = null; // cached types

async function renderJobCardSettings(params = {}) {
  const isAdmin = Auth.isAdmin() || Auth.isDev();
  if (!isAdmin) { Router.navigate('jobcards'); return; }

  const content = document.getElementById('page-content');
  content.innerHTML = `
    <div class="section-header">
      <div>
        <h3>Job Card Settings</h3>
        <p class="text-muted text-sm">Configure job types and their default planning tasks &amp; checklist items</p>
      </div>
      <div class="d-flex gap-2">
        <button class="btn btn-ghost btn-sm" onclick="Router.navigate('jobcards')">← Back to Job Cards</button>
        <button class="btn btn-primary" onclick="jcsOpenTypeModal()">+ New Job Type</button>
      </div>
    </div>
    <div id="jcs-body"><div class="loading-overlay"><div class="spinner"></div></div></div>
  `;

  await jcsLoadTypes();
}

async function jcsLoadTypes() {
  const body = document.getElementById('jcs-body');
  if (!body) return;

  const res = await API.post('jobcard_types/list', {});
  if (!res.success) { body.innerHTML = `<p class="text-danger p-4">${res.message}</p>`; return; }

  _jcsTypes = res.data.types || [];

  if (!_jcsTypes.length) {
    body.innerHTML = `
      <div class="empty-state">
        <div class="empty-icon">🗂️</div>
        <div class="empty-title">No job types yet</div>
        <p class="text-muted text-sm">Create job types to auto-fill planning tasks and checklist items when a new job card is created.</p>
        <button class="btn btn-primary mt-3" onclick="jcsOpenTypeModal()">+ Create First Type</button>
      </div>`;
    return;
  }

  body.innerHTML = `
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.25rem">
      ${_jcsTypes.map(t => jcsTypeCard(t)).join('')}
      <div class="card" style="border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;min-height:180px;cursor:pointer;opacity:.6" onclick="jcsOpenTypeModal()">
        <div style="text-align:center">
          <div style="font-size:2rem;margin-bottom:.5rem">+</div>
          <div class="text-sm text-muted">New Job Type</div>
        </div>
      </div>
    </div>`;
}

function jcsTypeCard(t) {
  const planItems = t.default_planning_items || [];
  const checkItems = t.default_checklist_items || [];
  const ICONS = { task: '📋', tool: '🔧', part: '📦', note: '📝', safety: '⚠️' };

  return `
    <div class="card">
      <div class="card-header" style="display:flex;justify-content:space-between;align-items:center">
        <div>
          <div style="font-weight:700;font-size:1rem">${jcsH(t.name)}</div>
          <div class="text-xs text-muted"><span class="code">${jcsH(t.slug)}</span>
            ${t.is_active ? '' : ' · <span style="color:var(--danger)">Inactive</span>'}
          </div>
        </div>
        <div class="d-flex gap-1">
          <button class="btn btn-ghost btn-sm" onclick="jcsOpenTypeModal(${t.id})" title="Edit">✏️</button>
          <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="jcsDeleteType(${t.id},this)" data-name="${jcsH(t.name)}" title="Delete">🗑</button>
        </div>
      </div>
      <div class="card-body" style="padding:.75rem 1rem">
        ${t.description ? `<p class="text-sm text-muted mb-2">${jcsH(t.description)}</p>` : ''}

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem">
          <!-- Planning tasks -->
          <div>
            <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.4rem">📋 Planning Tasks</div>
            ${planItems.length ? `
              <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.2rem">
                ${planItems.slice(0, 5).map(it => `
                  <li style="display:flex;align-items:center;gap:.35rem;font-size:.82rem">
                    <span>${ICONS[it.item_type] || '📋'}</span>
                    <span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${jcsH(it.item)}</span>
                  </li>`).join('')}
                ${planItems.length > 5 ? `<li class="text-xs text-muted">+${planItems.length - 5} more</li>` : ''}
              </ul>` :
      `<span class="text-xs text-muted">None set</span>`}
          </div>

          <!-- Checklist items -->
          <div>
            <div style="font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.4rem">☑️ Checklist Items</div>
            ${checkItems.length ? `
              <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.2rem">
                ${checkItems.slice(0, 5).map(it => `
                  <li style="display:flex;align-items:center;gap:.35rem;font-size:.82rem">
                    <span style="color:var(--text-muted)">☐</span>
                    <span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${jcsH(it.item)}</span>
                  </li>`).join('')}
                ${checkItems.length > 5 ? `<li class="text-xs text-muted">+${checkItems.length - 5} more</li>` : ''}
              </ul>` :
      `<span class="text-xs text-muted">None set</span>`}
          </div>
        </div>
      </div>
    </div>`;
}

// ── In-memory state for item editors ──────────────────────────
let _jcsPlanItems = [];
let _jcsCheckItems = [];
const JCS_PLAN_ICONS = { task: '📋', tool: '🔧', part: '📦', note: '📝', safety: '⚠️' };

async function jcsOpenTypeModal(editId = 0) {
  let type = null;
  if (editId) type = (_jcsTypes || []).find(t => t.id === editId);
  const v = (k, def = '') => type ? (type[k] ?? def) : def;

  _jcsPlanItems = JSON.parse(JSON.stringify(v('default_planning_items', [])));
  _jcsCheckItems = JSON.parse(JSON.stringify(v('default_checklist_items', [])));

  Modal.open({
    id: 'jcs-type',
    title: editId ? `Edit: ${type?.name}` : 'New Job Type',
    size: 'modal-xl',
    body: `
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem">

        <!-- Details -->
        <div>
          <div class="text-xs font-bold text-muted text-uppercase mb-2" style="letter-spacing:.06em">Job Type Details</div>
          <form id="jcs-type-form">
            ${editId ? `<input type="hidden" name="id" value="${editId}">` : ''}
            <div class="form-group">
              <label class="form-label">Name <span class="required">*</span></label>
              <input name="name" class="form-control" required placeholder="e.g. CCTV Installation" value="${jcsH(v('name'))}">
            </div>
            <div class="form-group">
              <label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="3" placeholder="Brief description...">${jcsH(v('description'))}</textarea>
            </div>
            <div class="form-row form-row-2">
              <div class="form-group">
                <label class="form-label">Sort Order</label>
                <input type="number" name="sort_order" class="form-control" value="${v('sort_order', 0)}" min="0">
              </div>
              <div class="form-group d-flex align-center gap-2" style="padding-top:1.7rem">
                <input type="checkbox" name="is_active" id="jcs-active" ${v('is_active', 1) ? 'checked' : ''}>
                <label for="jcs-active" style="cursor:pointer;margin:0">Active</label>
              </div>
            </div>
          </form>
        </div>

        <!-- Default Planning Tasks -->
        <div>
          <div class="d-flex justify-between align-center mb-2">
            <div class="text-xs font-bold text-muted text-uppercase" style="letter-spacing:.06em">📋 Planning Tasks</div>
            <button class="btn btn-outline btn-sm" onclick="jcsAddPlanItem()">+ Add</button>
          </div>
          <p class="text-muted text-xs mb-2">Auto-fill the Planning tab when this job type is selected on a new job card.</p>
          <div id="jcs-plan-items" style="display:flex;flex-direction:column;gap:.4rem;max-height:380px;overflow-y:auto">
            ${!_jcsPlanItems.length ? '<p id="jcs-plan-empty" class="text-muted text-xs text-center p-3">No tasks yet</p>' : ''}
          </div>
        </div>

        <!-- Default Checklist Items -->
        <div>
          <div class="d-flex justify-between align-center mb-2">
            <div class="text-xs font-bold text-muted text-uppercase" style="letter-spacing:.06em">☑️ Checklist Items</div>
            <button class="btn btn-outline btn-sm" onclick="jcsAddCheckItem()">+ Add</button>
          </div>
          <p class="text-muted text-xs mb-2">Auto-fill the Checklist tab when this job type is selected on a new job card.</p>
          <div id="jcs-check-items" style="display:flex;flex-direction:column;gap:.4rem;max-height:380px;overflow-y:auto">
            ${!_jcsCheckItems.length ? '<p id="jcs-check-empty" class="text-muted text-xs text-center p-3">No items yet</p>' : ''}
          </div>
        </div>

      </div>
    `,
    footer: `
      <button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="jcsSubmitType()"><span class="btn-text">${editId ? 'Save Changes' : 'Create Type'}</span></button>
    `
  });

  _jcsPlanItems.forEach((it, i) => _jcsRenderPlanItem(it, i));
  _jcsCheckItems.forEach((it, i) => _jcsRenderCheckItem(it, i));
}

// ── Planning item helpers ──────────────────────────────────────
function jcsAddPlanItem() {
  const empty = document.getElementById('jcs-plan-empty');
  if (empty) empty.remove();
  const item = { item: '', item_type: 'task' };
  _jcsPlanItems.push(item);
  _jcsRenderPlanItem(item, _jcsPlanItems.length - 1);
}

function _jcsRenderPlanItem(item, idx) {
  const list = document.getElementById('jcs-plan-items');
  if (!list) return;
  const div = document.createElement('div');
  div.id = `jcs-pi-${idx}`;
  div.style.cssText = 'display:flex;gap:.4rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.4rem .5rem';
  div.innerHTML = `
    <select style="width:34px;padding:2px;border:none;background:transparent;font-size:1rem;cursor:pointer" onchange="_jcsPlanItems[${idx}].item_type=this.value">
      ${Object.entries(JCS_PLAN_ICONS).map(([t, i]) => `<option value="${t}" ${item.item_type === t ? 'selected' : ''}>${i}</option>`).join('')}
    </select>
    <input class="form-control" style="flex:1;padding:.25rem .5rem;font-size:.85rem" placeholder="Task description..." value="${jcsH(item.item || '')}" oninput="_jcsPlanItems[${idx}].item=this.value">
    <button onclick="_jcsRemovePlanItem(${idx})" style="background:none;border:none;cursor:pointer;color:var(--text-muted);padding:.2rem;font-size:1rem">✕</button>`;
  list.appendChild(div);
  if (!item.item) div.querySelector('input')?.focus();
}

function _jcsRemovePlanItem(idx) {
  _jcsPlanItems.splice(idx, 1);
  const list = document.getElementById('jcs-plan-items');
  if (list) { list.innerHTML = ''; _jcsPlanItems.forEach((it, i) => _jcsRenderPlanItem(it, i)); }
  if (!_jcsPlanItems.length) {
    document.getElementById('jcs-plan-items').innerHTML = '<p id="jcs-plan-empty" class="text-muted text-xs text-center p-3">No tasks yet</p>';
  }
}

// ── Checklist item helpers ─────────────────────────────────────
function jcsAddCheckItem() {
  const empty = document.getElementById('jcs-check-empty');
  if (empty) empty.remove();
  const item = { item: '' };
  _jcsCheckItems.push(item);
  _jcsRenderCheckItem(item, _jcsCheckItems.length - 1);
}

function _jcsRenderCheckItem(item, idx) {
  const list = document.getElementById('jcs-check-items');
  if (!list) return;
  const div = document.createElement('div');
  div.id = `jcs-ci-${idx}`;
  div.style.cssText = 'display:flex;gap:.4rem;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.4rem .5rem';
  div.innerHTML = `
    <span style="color:var(--text-muted);font-size:.9rem;flex-shrink:0">☐</span>
    <input class="form-control" style="flex:1;padding:.25rem .5rem;font-size:.85rem" placeholder="Checklist item..." value="${jcsH(item.item || '')}" oninput="_jcsCheckItems[${idx}].item=this.value">
    <button onclick="_jcsRemoveCheckItem(${idx})" style="background:none;border:none;cursor:pointer;color:var(--text-muted);padding:.2rem;font-size:1rem">✕</button>`;
  list.appendChild(div);
  if (!item.item) div.querySelector('input')?.focus();
}

function _jcsRemoveCheckItem(idx) {
  _jcsCheckItems.splice(idx, 1);
  const list = document.getElementById('jcs-check-items');
  if (list) { list.innerHTML = ''; _jcsCheckItems.forEach((it, i) => _jcsRenderCheckItem(it, i)); }
  if (!_jcsCheckItems.length) {
    document.getElementById('jcs-check-items').innerHTML = '<p id="jcs-check-empty" class="text-muted text-xs text-center p-3">No items yet</p>';
  }
}

// ── Save ───────────────────────────────────────────────────────
async function jcsSubmitType() {
  const btn = document.querySelector('#modal-jcs-type .btn-primary');
  if (btn) btn.classList.add('loading');

  const data = getFormData('jcs-type-form');
  data.is_active = data.is_active ? 1 : 0;

  // Flush any typed values
  document.querySelectorAll('#jcs-plan-items input:not([type=hidden])').forEach((inp, i) => {
    if (_jcsPlanItems[i]) _jcsPlanItems[i].item = inp.value;
  });
  document.querySelectorAll('#jcs-check-items input:not([type=hidden])').forEach((inp, i) => {
    if (_jcsCheckItems[i]) _jcsCheckItems[i].item = inp.value;
  });

  data.default_planning_items = JSON.stringify(_jcsPlanItems.filter(it => it.item?.trim()));
  data.default_checklist_items = JSON.stringify(_jcsCheckItems.filter(it => it.item?.trim()));

  const res = await API.post('jobcard_types/save', data);
  if (btn) btn.classList.remove('loading');

  if (res.success) {
    Toast.show(res.message, 'success');
    Modal.close();
    _jcsTypes = null;
    _jcTypes = null; // also clear jobcards.js cache
    await jcsLoadTypes();
  } else {
    Toast.show(res.message, 'error');
  }
}

async function jcsDeleteType(id, btnEl) {
  const name = typeof btnEl === 'string' ? btnEl : (btnEl?.dataset?.name || 'this type');
  if (!await Modal.confirm(`Delete job type "<strong>${jcsH(name)}</strong>"?<br><span class="text-sm text-muted">This cannot be undone.</span>`, 'Delete Job Type', true)) return;
  const res = await API.post('jobcard_types/delete', { id });
  if (res.success) {
    Toast.show(res.message, 'success');
    _jcsTypes = null;
    _jcTypes = null;
    await jcsLoadTypes();
  } else {
    Toast.show(res.message, 'error');
  }
}

// ── Utility ────────────────────────────────────────────────────
function jcsH(s) {
  return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}