// ============================================================
// Checklists Module
// Views: Templates, Instances, Builder, Fill-Out, Job Types
// ============================================================

let clState = {
  tab: 'templates',
  tPage: 1, tSearch: '', tType: '', tActive: '1',
  iPage: 1, iStatus: '', iType: '', iDateFrom: '', iDateTo: '',
};

let _clJobTypes = null;
let _clVehicles = null;
let _clUsers = null;

// ── Entry Point ──────────────────────────────────────────────
async function renderChecklists(params = {}) {
  if (params.instance_id) return renderInstanceFillOut(params.instance_id);

  const content = document.getElementById('page-content');
  const canManage = Auth.can('checklists', 'create') || Auth.can('checklists', 'edit');

  content.innerHTML = `
    <div class="section-header">
      <div>
        <h3>Checklists</h3>
        <p class="text-muted text-sm">Templates, schedules and submissions</p>
      </div>
      <div class="d-flex gap-2 flex-wrap">
        ${canManage ? `<button class="btn btn-primary" onclick="openTemplateBuilder()">+ New Checklist</button>` : ''}
      </div>
    </div>

    <div class="tabs mb-4" id="cl-tabs">
      <button class="tab-btn active" data-tab="templates" onclick="renderChecklistsTab('templates')">&#128203; Templates</button>
      <button class="tab-btn" data-tab="instances" onclick="renderChecklistsTab('instances')">&#10003; Submissions</button>

    </div>

    <div id="cl-tab-content">
      <div class="loading-overlay"><div class="spinner"></div></div>
    </div>
  `;

  await _loadClCaches();
  renderChecklistsTab(clState.tab);
}

async function _loadClCaches() {
  const [jt, veh, usr] = await Promise.all([
    _clJobTypes ? Promise.resolve({ success: true, data: { types: _clJobTypes } }) : API.post('jobcard_types/list', {}),
    _clVehicles ? Promise.resolve({ success: true, data: { vehicles: _clVehicles } }) : API.post('fleet/vehicles', { action: 'list' }),
    _clUsers ? Promise.resolve({ success: true, data: { users: _clUsers } }) : API.post('auth/users_list', {}),
  ]);
  if (jt.success) _clJobTypes = jt.data.types || [];
  if (veh.success) _clVehicles = veh.data.vehicles || [];
  if (usr.success) _clUsers = usr.data.users || [];
}

function renderChecklistsTab(tab) {
  clState.tab = tab;
  document.querySelectorAll('#cl-tabs .tab-btn').forEach(b => {
    b.classList.toggle('active', b.dataset.tab === tab);
  });
  const wrap = document.getElementById('cl-tab-content');
  if (!wrap) return;
  wrap.innerHTML = '<div class="loading-overlay"><div class="spinner"></div></div>';
  if (tab === 'templates') loadTemplatesList();
  if (tab === 'instances') loadInstancesList();

}

// ── TEMPLATES LIST ───────────────────────────────────────────
async function loadTemplatesList() {
  const wrap = document.getElementById('cl-tab-content');
  if (!wrap) return;
  const canManage = Auth.can('checklists', 'create') || Auth.can('checklists', 'edit');

  wrap.innerHTML = `
    <div class="card">
      <div class="card-body-sm" style="border-bottom:1px solid var(--border)">
        <div class="filter-bar" style="margin-bottom:0;flex-wrap:wrap;gap:.5rem">
          <div class="search-wrap flex-1" style="min-width:200px">
            <svg class="search-icon" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" class="form-control" placeholder="Search templates..." value="${clState.tSearch}" oninput="clTSearchDebounced(this.value)">
          </div>
          <select class="form-control" style="width:160px" onchange="clState.tType=this.value;_fetchTemplates()">
            <option value="">All Types</option>
            <option value="general"  ${clState.tType === 'general' ? 'selected' : ''}>General</option>
            <option value="fleet"    ${clState.tType === 'fleet' ? 'selected' : ''}>Fleet</option>
            <option value="job_card" ${clState.tType === 'job_card' ? 'selected' : ''} style="display:none">Job Card</option>
          </select>
          <select class="form-control" style="width:130px" onchange="clState.tActive=this.value;_fetchTemplates()">
            <option value="1"  ${clState.tActive === '1' ? 'selected' : ''}>Active Only</option>
            <option value=""   ${clState.tActive === '' ? 'selected' : ''}>All</option>
            <option value="0"  ${clState.tActive === '0' ? 'selected' : ''}>Inactive</option>
          </select>
        </div>
      </div>
      <div id="cl-templates-body"><div class="loading-overlay"><div class="spinner"></div></div></div>
      <div id="cl-t-pagination"></div>
    </div>
  `;
  await _fetchTemplates();
}

const clTSearchDebounced = debounce(val => { clState.tSearch = val; _fetchTemplates(); }, 350);

async function _fetchTemplates() {
  const body = document.getElementById('cl-templates-body');
  if (!body) return;
  const canManage = Auth.can('checklists', 'create') || Auth.can('checklists', 'edit');
  const res = await API.post('checklists/template_list', {
    page: clState.tPage, limit: 20,
    search: clState.tSearch, linked_type: clState.tType, is_active: clState.tActive,
  });
  if (!res.success) { body.innerHTML = `<div class="p-4 text-danger">${res.message}</div>`; return; }
  const templates = res.data.templates || [];
  if (!templates.length) {
    body.innerHTML = `<div class="empty-state"><div class="empty-icon">&#128203;</div><div class="empty-title">No templates found</div><p>Create your first checklist template.</p>${canManage ? `<button class="btn btn-primary mt-3" onclick="openTemplateBuilder()">+ Create Template</button>` : ''}</div>`;
    document.getElementById('cl-t-pagination').innerHTML = '';
    return;
  }
  const typeIcon = { general: '&#128194;', fleet: '&#128663;', job_card: '&#128203;' };
  const typeLabel = { general: 'General', fleet: 'Fleet', job_card: 'Job Card' };
  const freqLabel = { once: 'Once', daily: 'Daily', weekly: 'Weekly', monthly: 'Monthly', custom: 'Custom' };
  if (window.innerWidth < 768) {
    body.innerHTML = `<div style="display:flex;flex-direction:column;gap:0">
      ${templates.map(t => `
        <div style="padding:.875rem 1rem;border-bottom:1px solid var(--border);cursor:pointer" onclick="openTemplateDetail(${t.id})">
          <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem">
            <div style="min-width:0">
              <div style="font-weight:600;font-size:.9rem">${clH(t.name)}</div>
              ${t.description ? `<div class="text-xs text-muted">${clH(t.description)}</div>` : ''}
              ${t.vehicle_reg ? `<div class="text-xs text-muted">🚗 ${clH(t.vehicle_reg)} — ${clH(t.vehicle_make || '')} ${clH(t.vehicle_model || '')}</div>` : ''}
              <div style="display:flex;gap:.5rem;margin-top:.3rem;flex-wrap:wrap">
                <span class="badge badge-info">${typeIcon[t.linked_type] || ''} ${typeLabel[t.linked_type] || t.linked_type}</span>
                <span class="badge badge-muted">${freqLabel[t.frequency] || t.frequency || 'Once'}</span>
                <span class="text-xs text-muted">${t.item_count || 0} Qs · ${t.instance_count || 0} submissions</span>
              </div>
            </div>
            <div style="display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;flex-shrink:0">
              ${t.is_active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-muted">Inactive</span>'}
              ${t.pending_count > 0 ? `<span style="color:var(--warning);font-weight:600;font-size:.8rem">${t.pending_count} pending</span>` : ''}
            </div>
          </div>
          <div style="display:flex;gap:.4rem;margin-top:.625rem;flex-wrap:wrap" onclick="event.stopPropagation()">
            <button class="btn btn-ghost btn-sm" onclick="openInstanceCreateModal(${t.id},'${t.name.replace(/'/g, "\\'").replace(/"/g, '&quot;')}','${t.linked_type}')">▶ Start</button>
            ${canManage ? `<button class="btn btn-ghost btn-sm" onclick="openTemplateBuilder(${t.id})">✏️ Edit</button>` : ''}
            ${t.linked_type !== 'job_card' ? `<a class="btn btn-ghost btn-sm" href="./api/checklists/pdf.php?type=blank&template_id=${t.id}&token=${Auth.getToken()}" target="_blank">📄 PDF</a>` : ''}
          </div>
        </div>`).join('')}
    </div>`;
  } else {
    body.innerHTML = `
    <div class="table-wrap" style="border:none;border-radius:0">
      <table>
        <thead><tr><th>Name</th><th>Type</th><th>Frequency</th><th>Questions</th><th>Submissions</th><th>Pending</th><th>Status</th><th></th></tr></thead>
        <tbody>
          ${templates.map(t => `
            <tr style="cursor:pointer" onclick="openTemplateDetail(${t.id})">
              <td>
                <div class="td-bold">${clH(t.name)}</div>
                ${t.description ? `<div class="text-xs text-muted">${clH(t.description)}</div>` : ''}
                ${t.vehicle_reg ? `<div class="text-xs text-muted">&#128663; ${clH(t.vehicle_reg)} &mdash; ${clH(t.vehicle_make || '')} ${clH(t.vehicle_model || '')}</div>` : ''}
              </td>
              <td><span class="badge badge-info">${typeIcon[t.linked_type] || ''} ${typeLabel[t.linked_type] || t.linked_type}</span></td>
              <td class="text-sm">${freqLabel[t.frequency] || t.frequency || 'Once'}</td>
              <td class="text-sm">${t.item_count || 0}</td>
              <td class="text-sm">${t.instance_count || 0}</td>
              <td class="text-sm">${t.pending_count > 0 ? `<span style="color:var(--warning);font-weight:600">${t.pending_count}</span>` : '<span class="text-muted">0</span>'}</td>
              <td>${t.is_active ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-muted">Inactive</span>'}</td>
              <td onclick="event.stopPropagation()" style="white-space:nowrap">
                <button class="btn btn-ghost btn-sm" onclick="openInstanceCreateModal(${t.id},'${t.name.replace(/'/g, "\\'").replace(/"/g, '&quot;')}','${t.linked_type}')">&#9654; Start</button>
                ${canManage ? `
                  <button class="btn btn-ghost btn-sm" onclick="openTemplateBuilder(${t.id})">&#9999;&#65039;</button>
                  <button class="btn btn-ghost btn-sm" style="color:var(--danger)" onclick="deleteTemplate(${t.id},'${t.name.replace(/'/g, "\\'").replace(/"/g, '&quot;')}')">&#128465;</button>
                ` : ''}
                ${t.linked_type !== 'job_card' ? `<a class="btn btn-ghost btn-sm" href="./api/checklists/pdf.php?type=blank&template_id=${t.id}&token=${Auth.getToken()}" target="_blank">&#128196; Blank PDF</a>` : ''}
              </td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    </div>
  `;
  }
  renderPagination('cl-t-pagination', res.data.pagination, `p => { clState.tPage=p; _fetchTemplates(); }`);
}

// ── INSTANCES LIST ───────────────────────────────────────────
async function loadInstancesList() {
  const wrap = document.getElementById('cl-tab-content');
  if (!wrap) return;
  wrap.innerHTML = `
    <div class="card">
      <div class="card-body-sm" style="border-bottom:1px solid var(--border)">
        <div class="filter-bar" style="margin-bottom:0;flex-wrap:wrap;gap:.5rem">
          <select class="form-control" style="width:160px" onchange="clState.iStatus=this.value;_fetchInstances()">
            <option value="">All Status</option>
            <option value="pending"     ${clState.iStatus === 'pending' ? 'selected' : ''}>Pending</option>
            <option value="in_progress" ${clState.iStatus === 'in_progress' ? 'selected' : ''}>In Progress</option>
            <option value="completed"   ${clState.iStatus === 'completed' ? 'selected' : ''}>Completed</option>
            <option value="missed"      ${clState.iStatus === 'missed' ? 'selected' : ''}>Missed</option>
          </select>
          <select class="form-control" style="width:160px" onchange="clState.iType=this.value;_fetchInstances()">
            <option value="">All Types</option>
            <option value="general"  ${clState.iType === 'general' ? 'selected' : ''}>General</option>
            <option value="fleet"    ${clState.iType === 'fleet' ? 'selected' : ''}>Fleet</option>
            <option value="job_card" ${clState.iType === 'job_card' ? 'selected' : ''} style="display:none">Job Card</option>
          </select>
          <input type="date" class="form-control" style="width:145px" value="${clState.iDateFrom}" onchange="clState.iDateFrom=this.value;_fetchInstances()">
          <input type="date" class="form-control" style="width:145px" value="${clState.iDateTo}"   onchange="clState.iDateTo=this.value;_fetchInstances()">
        </div>
      </div>
      <div id="cl-instances-body"><div class="loading-overlay"><div class="spinner"></div></div></div>
      <div id="cl-i-pagination"></div>
    </div>
  `;
  await _fetchInstances();
}

async function _fetchInstances() {
  const body = document.getElementById('cl-instances-body');
  if (!body) return;
  const res = await API.post('checklists/instance_list', {
    page: clState.iPage, limit: 25,
    status: clState.iStatus, linked_type: clState.iType,
    date_from: clState.iDateFrom, date_to: clState.iDateTo,
  });
  if (!res.success) { body.innerHTML = `<div class="p-4 text-danger">${res.message}</div>`; return; }
  const instances = res.data.instances || [];
  if (!instances.length) {
    body.innerHTML = `<div class="empty-state"><div class="empty-icon">&#10003;</div><div class="empty-title">No submissions found</div></div>`;
    document.getElementById('cl-i-pagination').innerHTML = '';
    return;
  }
  const statusCls = { pending: 'badge-warning', in_progress: 'badge-info', completed: 'badge-success', missed: 'badge-danger' };
  if (window.innerWidth < 768) {
    body.innerHTML = `<div style="display:flex;flex-direction:column;gap:0">
      ${instances.map(i => {
      const pct = i.total_items > 0 ? Math.round((i.answered_items / i.total_items) * 100) : 0;
      return `
        <div style="padding:.875rem 1rem;border-bottom:1px solid var(--border)">
          <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.4rem">
            <div style="min-width:0">
              <div style="font-weight:600;font-size:.9rem">${clH(i.template_name || '—')}</div>
              <div class="text-xs text-muted">${Fmt.date(i.due_date)} · ${clH(i.assigned_to_name || 'Unassigned')}</div>
              ${i.vehicle_reg ? `<div class="text-xs text-muted">🚗 ${clH(i.vehicle_reg)}</div>` : ''}
            </div>
            <span class="badge ${statusCls[i.status] || 'badge-muted'}" style="flex-shrink:0">${Fmt.capitalize((i.status || '').replace('_', ' '))}</span>
          </div>
          <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem">
            <div style="flex:1;height:6px;background:var(--border);border-radius:3px">
              <div style="width:${pct}%;height:100%;background:${pct === 100 ? 'var(--success)' : 'var(--primary)'};border-radius:3px"></div>
            </div>
            <span class="text-xs text-muted">${i.answered_items}/${i.total_items}</span>
          </div>
          ${i.status !== 'completed'
          ? `<button class="btn btn-primary btn-sm" onclick="Router.navigate('checklists',{instance_id:${i.id}})">Fill Out</button>`
          : `<a class="btn btn-outline btn-sm" href="./api/checklists/pdf.php?instance_id=${i.id}&token=${Auth.getToken()}" target="_blank">📄 PDF</a>`}
        </div>`;
    }).join('')}
    </div>`;
  } else {
    body.innerHTML = `
    <div class="table-wrap" style="border:none;border-radius:0">
      <table>
        <thead><tr><th>Checklist</th><th>Type</th><th>Due Date</th><th>Assigned To</th><th>Vehicle</th><th>Progress</th><th>Status</th><th></th></tr></thead>
        <tbody>
          ${instances.map(i => {
      const pct = i.total_items > 0 ? Math.round((i.answered_items / i.total_items) * 100) : 0;
      return `
            <tr>
              <td class="td-bold">${clH(i.template_name || '—')}</td>
              <td><span class="badge badge-info">${i.linked_type || '—'}</span></td>
              <td class="text-sm">${Fmt.date(i.due_date)}${i.due_time ? ' ' + i.due_time.slice(0, 5) : ''}</td>
              <td class="text-sm">${clH(i.assigned_to_name || '—')}</td>
              <td class="text-sm">${i.vehicle_reg ? clH(i.vehicle_reg) + ' ' + clH(i.vehicle_make || '') : '—'}</td>
              <td style="min-width:100px">
                <div style="display:flex;align-items:center;gap:.4rem">
                  <div style="flex:1;height:6px;background:var(--border);border-radius:3px">
                    <div style="width:${pct}%;height:100%;background:${pct === 100 ? 'var(--success)' : 'var(--primary)'};border-radius:3px;transition:width .3s"></div>
                  </div>
                  <span class="text-xs text-muted">${i.answered_items}/${i.total_items}</span>
                </div>
              </td>
              <td><span class="badge ${statusCls[i.status] || 'badge-muted'}">${Fmt.capitalize((i.status || '').replace('_', ' '))}</span></td>
              <td style="white-space:nowrap">
                ${i.status !== 'completed' ? `<button class="btn btn-primary btn-sm" onclick="Router.navigate('checklists',{instance_id:${i.id}})">Fill Out</button>` : `<a class="btn btn-outline btn-sm" href="./api/checklists/pdf.php?instance_id=${i.id}&token=${Auth.getToken()}" target="_blank">&#128196; PDF</a>`}
              </td>
            </tr>`;
    }).join('')}
        </tbody>
      </table>
    </div>
  `;
  }
  renderPagination('cl-i-pagination', res.data.pagination, `p => { clState.iPage=p; _fetchInstances(); }`);
}

// ── INSTANCE FILL-OUT ────────────────────────────────────────
async function renderInstanceFillOut(instanceId) {
  const content = document.getElementById('page-content');
  content.innerHTML = `<div class="loading-overlay" style="min-height:300px"><div class="spinner"></div></div>`;
  const res = await API.post('checklists/instance_get', { id: instanceId });
  if (!res.success) { Toast.show(res.message, 'error'); Router.navigate('checklists'); return; }
  const inst = res.data.instance;
  const items = inst.items || [];
  const isCompleted = inst.status === 'completed';

  // Set BEFORE items.map so _renderImageSection can read it during HTML build
  window._clInstanceId = instanceId;

  window._clInstanceAnswers = {};
  items.forEach(it => {
    window._clInstanceAnswers[it.id] = {
      answer_bool: it.answer_bool !== null && it.answer_bool !== undefined ? parseInt(it.answer_bool) : null,
      answer_text: it.answer_text || '',
      note: it.note || '',
      images: it.images || [],  // array of {id, filename}
    };
  });

  const statusCls = { pending: 'badge-warning', in_progress: 'badge-info', completed: 'badge-success', missed: 'badge-danger' };

  content.innerHTML = `
    <div class="section-header">
      <div>
        <button class="btn btn-ghost btn-sm mb-2" onclick="Router.navigate('checklists',{tab:'instances'})">&#8592; Back</button>
        <h3>${clH(inst.template_name || 'Checklist')}</h3>
        <p class="text-muted text-sm">
          Due: ${Fmt.date(inst.due_date)}${inst.due_time ? ' ' + inst.due_time.slice(0, 5) : ''}
          ${inst.assigned_to_name ? ` &middot; Assigned to ${clH(inst.assigned_to_name)}` : ''}
          ${inst.vehicle_reg ? ` &middot; &#128663; ${clH(inst.vehicle_reg)} ${clH(inst.vehicle_make || '')} ${clH(inst.vehicle_model || '')}` : ''}
        </p>
      </div>
      <div class="d-flex gap-2 align-center">
        <span class="badge ${statusCls[inst.status] || 'badge-muted'} badge-lg">${Fmt.capitalize((inst.status || '').replace(/_/g, ' '))}</span>
        ${isCompleted ? `<a class="btn btn-outline" href="./api/checklists/pdf.php?instance_id=${instanceId}&token=${Auth.getToken()}" target="_blank">&#128196; Download PDF</a>` : ''}
      </div>
    </div>

    <div style="max-width:720px">
      ${inst.template_description ? `<div class="alert alert-info mb-4">${clH(inst.template_description)}</div>` : ''}
      <div id="cl-questions-list" style="display:flex;flex-direction:column;gap:.75rem">
        ${items.length ? items.map((it, idx) => _renderQuestionCard(it, idx, isCompleted)).join('') : '<div class="empty-state"><p>This checklist has no questions.</p></div>'}
      </div>
      ${!isCompleted && items.length ? `
        <div class="cl-submission-area mt-4">
          <div class="form-group mb-3">
            <label class="form-label">Overall Notes (optional)</label>
            <textarea id="cl-inst-notes" class="form-control" rows="3" placeholder="Any additional notes…">${clH(inst.instance_notes || '')}</textarea>
          </div>
          <div class="d-flex gap-3">
            <button class="btn btn-outline flex-1" onclick="clSaveProgress(${instanceId})"><span class="btn-text">&#128190; Save Progress</span></button>
            <button class="btn btn-primary flex-1"  onclick="clSubmitChecklist(${instanceId})"><span class="btn-text">&#10003; Submit Checklist</span></button>
          </div>
        </div>
      ` : ''}
      ${isCompleted ? `
        <div class="cl-submission-area mt-4" style="background:rgba(22,163,74,.06);border-color:var(--success)">
          <p class="text-sm" style="color:var(--success)">&#10003; Submitted by ${clH(inst.completed_by_name || '—')} on ${Fmt.datetime(inst.submitted_at)}</p>
          ${inst.instance_notes ? `<p class="text-sm mt-2">&#128221; ${clH(inst.instance_notes)}</p>` : ''}
        </div>
      ` : ''}
    </div>
  `;

}

function _renderQuestionCard(it, idx, isReadOnly) {
  const ans = window._clInstanceAnswers?.[it.id] || {};
  const isYes = ans.answer_bool === 1;
  const isNo = ans.answer_bool === 0;
  const images = ans.images || [];
  const needsImage = it.requires_image === 'always'
    || (it.requires_image === 'on_yes' && isYes)
    || (it.requires_image === 'on_no' && isNo);

  const answerHtml = (() => {
    if (it.answer_type === 'yes_no') {
      if (isReadOnly) {
        return `<div class="mt-2"><span class="badge badge-lg ${isYes ? 'badge-success' : isNo ? 'badge-danger' : 'badge-muted'}">${isYes ? '&#10003; Yes' : isNo ? '&#10005; No' : '&mdash; Unanswered'}</span></div>`;
      }
      return `<div class="cl-q-answer d-flex gap-2 mt-2">
        <button class="btn cl-yn-btn${isYes ? ' active-yes' : ''}" onclick="clAnswerYN(${it.id},1)">&#10003; Yes</button>
        <button class="btn cl-yn-btn${isNo ? ' active-no' : ''}" onclick="clAnswerYN(${it.id},0)">&#10005; No</button>
      </div>`;
    }
    if (it.answer_type === 'text') {
      if (isReadOnly) return `<div class="cl-readonly-text mt-2">${ans.answer_text ? clH(ans.answer_text) : '<span class="text-muted">No answer</span>'}</div>`;
      return `<textarea class="form-control mt-2" rows="3" placeholder="Enter your answer\u2026" oninput="clAnswerText(${it.id},this.value)">${clH(ans.answer_text)}</textarea>`;
    }
    if (it.answer_type === 'number') {
      if (isReadOnly) return `<div class="cl-readonly-text mt-2">${ans.answer_text || '<span class="text-muted">No answer</span>'}</div>`;
      return `<div style="max-width:180px"><input type="number" class="form-control mt-2" placeholder="0" value="${clH(ans.answer_text)}" oninput="clAnswerText(${it.id},this.value)"></div>`;
    }
    return `<div class="mt-2 text-muted text-sm">Photo submission required</div>`;
  })();

  const showImgSection = needsImage || images.length > 0 || it.requires_image !== 'never';

  const noteHtml = it.answer_type !== 'text' ? (
    isReadOnly && ans.note ? `<div class="cl-note-readonly mt-2">&#128221; ${clH(ans.note)}</div>` :
      !isReadOnly ? `<details class="mt-2"><summary class="text-xs text-muted" style="cursor:pointer;user-select:none">&#128221; Add note</summary><textarea class="form-control mt-1" rows="2" placeholder="Optional note\u2026" oninput="clAnswerNote(${it.id},this.value)">${clH(ans.note)}</textarea></details>` : ''
  ) : '';

  return `
    <div class="cl-question-card" id="cl-q-${it.id}" data-item-id="${it.id}" data-answer-type="${it.answer_type}" data-requires-image="${it.requires_image}" data-required="${it.is_required}">
      <div class="cl-q-header">
        <div class="cl-q-num">${idx + 1}</div>
        <div class="cl-q-text">${clH(it.item_text)}${it.is_required ? ' <span class="required" title="Required">*</span>' : ' <span class="text-muted text-xs">(optional)</span>'}</div>
      </div>
      ${answerHtml}
      <div id="cl-img-section-${it.id}" ${!showImgSection ? 'style="display:none"' : ''}>
        ${_renderImageSection(it.id, images, isReadOnly, needsImage)}
      </div>
      ${noteHtml}
    </div>
  `;
}

function _renderImageSection(itemId, images, isReadOnly, needsImage) {
  const instanceId = window._clInstanceId || 0;
  const thumbs = images.map(img => `
    <div class="cl-img-thumb" id="cl-img-thumb-${img.id || img.filename}">
      <img src="./api/checklists/uploads/${img.filename}"
           onclick="openImageLightbox('./api/checklists/uploads/${img.filename}')"
           style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--border);cursor:pointer;display:block">
      ${!isReadOnly ? `<button class="cl-img-thumb-del" onclick="clDeleteImage(${itemId},${img.id},'${img.filename}')" title="Remove">&#10005;</button>` : ''}
    </div>`).join('');

  const addBtn = !isReadOnly ? `
    <label class="cl-img-add-btn" id="cl-img-label-${itemId}" title="${needsImage && images.length === 0 ? 'Photo required' : 'Add photo'}">
      <span style="font-size:1.3rem">&#128247;</span>
      <span style="font-size:.7rem;margin-top:2px">${needsImage && images.length === 0 ? 'Required' : 'Add'}</span>
      <input type="file" accept="image/*" capture="environment" style="display:none" onchange="clUploadImage(${itemId},${instanceId},this)">
    </label>
    <div id="cl-img-progress-${itemId}" style="display:none;width:80px;height:80px;border:1px solid var(--border);border-radius:6px;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;color:var(--text-muted);gap:.3rem">
      <div class="spinner" style="width:20px;height:20px;border-width:2px"></div>Uploading
    </div>` : (images.length === 0 ? '<span class="text-muted text-sm">No images attached</span>' : '');

  return `<div class="cl-img-grid" id="cl-img-grid-${itemId}">${thumbs}${addBtn}</div>`;
}

function clAnswerYN(itemId, val) {
  if (!window._clInstanceAnswers) window._clInstanceAnswers = {};
  if (!window._clInstanceAnswers[itemId]) window._clInstanceAnswers[itemId] = {};
  window._clInstanceAnswers[itemId].answer_bool = val;
  const card = document.getElementById(`cl-q-${itemId}`);
  if (!card) return;
  card.querySelectorAll('.cl-yn-btn').forEach(b => b.classList.remove('active-yes', 'active-no'));
  const btns = card.querySelectorAll('.cl-yn-btn');
  if (val === 1) btns[0]?.classList.add('active-yes'); else btns[1]?.classList.add('active-no');
  card.style.outline = '';
  const req = card.dataset.requiresImage;
  const imgSec = document.getElementById(`cl-img-section-${itemId}`);
  if (imgSec) {
    const show = req === 'always' || (req === 'on_yes' && val === 1) || (req === 'on_no' && val === 0);
    const hasImages = (window._clInstanceAnswers[itemId]?.images || []).length > 0;
    imgSec.style.display = (show || hasImages || req !== 'never') ? '' : 'none';
    // Refresh the add button required label
    const needsNow = req === 'always' || (req === 'on_yes' && val === 1) || (req === 'on_no' && val === 0);
    const lbl = document.getElementById(`cl-img-label-${itemId}`);
    if (lbl) { const span = lbl.querySelector('span:last-child'); if (span) span.textContent = (needsNow && !hasImages) ? 'Required' : 'Add'; }
  }
}
function clAnswerText(itemId, val) {
  if (!window._clInstanceAnswers) window._clInstanceAnswers = {};
  if (!window._clInstanceAnswers[itemId]) window._clInstanceAnswers[itemId] = {};
  window._clInstanceAnswers[itemId].answer_text = val;
  const card = document.getElementById(`cl-q-${itemId}`);
  if (card) card.style.outline = '';
}
function clAnswerNote(itemId, val) {
  if (!window._clInstanceAnswers) window._clInstanceAnswers = {};
  if (!window._clInstanceAnswers[itemId]) window._clInstanceAnswers[itemId] = {};
  window._clInstanceAnswers[itemId].note = val;
}
async function clUploadImage(itemId, instanceId, input) {
  const file = input.files[0]; if (!file) return;
  // Reset input so the same file can be re-selected if needed
  input.value = '';
  const prog = document.getElementById(`cl-img-progress-${itemId}`);
  const label = document.getElementById(`cl-img-label-${itemId}`);
  if (prog) prog.style.display = 'flex';
  if (label) label.style.display = 'none';
  const fd = new FormData();
  fd.append('image', file); fd.append('instance_id', instanceId); fd.append('item_id', itemId);
  const res = await API.postForm('checklists/image_upload', fd);
  if (prog) prog.style.display = 'none';
  if (label) label.style.display = '';
  if (res.success) {
    if (!window._clInstanceAnswers[itemId]) window._clInstanceAnswers[itemId] = { images: [] };
    if (!window._clInstanceAnswers[itemId].images) window._clInstanceAnswers[itemId].images = [];
    window._clInstanceAnswers[itemId].images.push({ id: res.data.id, filename: res.data.filename });
    // Re-render image grid
    const card = document.getElementById(`cl-q-${itemId}`);
    const req = card?.dataset.requiresImage;
    const needsImage = req === 'always' || (req === 'on_yes' && window._clInstanceAnswers[itemId]?.answer_bool === 1) || (req === 'on_no' && window._clInstanceAnswers[itemId]?.answer_bool === 0);
    const grid = document.getElementById(`cl-img-grid-${itemId}`);
    if (grid) grid.outerHTML = _renderImageSection(itemId, window._clInstanceAnswers[itemId].images, false, needsImage);
    // Update required label
    const lbl = document.getElementById(`cl-img-label-${itemId}`);
    if (lbl) { const span = lbl.querySelector('span:last-child'); if (span) span.textContent = 'Add'; }
    Toast.show('Image uploaded.', 'success');
  } else {
    Toast.show(res.message, 'error');
  }
}
async function clDeleteImage(itemId, imageId, filename) {
  if (!window._clInstanceAnswers?.[itemId]) return;
  const res = imageId
    ? await API.post('checklists/image_delete', { image_id: imageId })
    : { success: true }; // legacy fallback with no DB id
  if (res.success) {
    window._clInstanceAnswers[itemId].images = (window._clInstanceAnswers[itemId].images || [])
      .filter(img => img.filename !== filename);
    const card = document.getElementById(`cl-q-${itemId}`);
    const req = card?.dataset.requiresImage;
    const needsImage = req === 'always' || (req === 'on_yes' && window._clInstanceAnswers[itemId]?.answer_bool === 1) || (req === 'on_no' && window._clInstanceAnswers[itemId]?.answer_bool === 0);
    const grid = document.getElementById(`cl-img-grid-${itemId}`);
    if (grid) grid.outerHTML = _renderImageSection(itemId, window._clInstanceAnswers[itemId].images, false, needsImage);
    Toast.show('Image removed.', 'success');
  } else Toast.show(res.message, 'error');
}
function _buildAnswerPayload() {
  const answers = [];
  const state = window._clInstanceAnswers || {};
  for (const [itemId, ans] of Object.entries(state)) {
    const card = document.getElementById(`cl-q-${itemId}`);
    if (!card) continue;
    const type = card.dataset.answerType;
    answers.push({
      item_id: parseInt(itemId),
      answer_bool: type === 'yes_no' && ans.answer_bool !== null ? ans.answer_bool : null,
      answer_text: (type === 'text' || type === 'number') ? (ans.answer_text || '') : null,
      note: ans.note || null,
    });
  }
  return answers;
}
async function clSaveProgress(instanceId) {
  const btn = document.querySelector('.cl-submission-area .btn-outline');
  if (btn) btn.classList.add('loading');
  const notes = document.getElementById('cl-inst-notes')?.value || '';
  const res = await API.post('checklists/instance_submit', { instance_id: instanceId, answers: _buildAnswerPayload(), notes, action: 'save' });
  if (btn) btn.classList.remove('loading');
  if (res.success) Toast.show('Progress saved.', 'success'); else Toast.show(res.message, 'error');
}
async function clSubmitChecklist(instanceId) {
  const missing = [];
  document.querySelectorAll('[data-item-id]').forEach(card => {
    if (card.dataset.required !== '1') return;
    const id = parseInt(card.dataset.itemId), type = card.dataset.answerType;
    const ans = window._clInstanceAnswers?.[id] || {};
    if (type === 'yes_no' && ans.answer_bool === null) missing.push(card);
    if ((type === 'text' || type === 'number') && !ans.answer_text) missing.push(card);
    if (type === 'photo_only' && (!ans.images || ans.images.length === 0)) missing.push(card);
    if (card.dataset.requiresImage !== 'never' && (!ans.images || ans.images.length === 0) && needsImageForCard(card, ans)) missing.push(card);
  });
  if (missing.length) {
    missing.forEach(c => c.style.outline = '2px solid var(--danger)');
    Toast.show(`${missing.length} required question(s) not answered.`, 'error');
    missing[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
    return;
  }
  const confirmed = await Modal.confirm('Submit this checklist? You cannot edit it after submission.', 'Submit Checklist');
  if (!confirmed) return;
  const btn = document.querySelector('.cl-submission-area .btn-primary');
  if (btn) btn.classList.add('loading');
  const notes = document.getElementById('cl-inst-notes')?.value || '';
  const res = await API.post('checklists/instance_submit', { instance_id: instanceId, answers: _buildAnswerPayload(), notes, action: 'submit' });
  if (btn) btn.classList.remove('loading');
  if (res.success) { Toast.show('Checklist submitted!', 'success'); renderInstanceFillOut(instanceId); }
  else Toast.show(res.message, 'error');
}

// ── TEMPLATE DETAIL ──────────────────────────────────────────
async function openTemplateDetail(id) {
  const res = await API.post('checklists/template_get', { id });
  if (!res.success) { Toast.show(res.message, 'error'); return; }
  const t = res.data.template, items = t.items || [];
  const canManage = Auth.isDev() || Auth.isAdmin() || Auth.isHR();
  const ansLabel = { yes_no: 'Yes/No', text: 'Text', number: 'Number', photo_only: 'Photo Only' };
  const imgLabel = { never: 'No Image', always: 'Always', on_yes: 'If Yes', on_no: 'If No' };
  Modal.open({
    id: 'cl-detail', title: t.name, size: 'modal-lg',
    body: `
      <div class="d-flex gap-3 mb-4 flex-wrap">
        <div><span class="form-label">Type</span><br><span class="badge badge-info">${clH(t.linked_type)}</span></div>
        <div><span class="form-label">Frequency</span><br><span class="text-sm">${Fmt.capitalize(t.frequency || '')}</span></div>
        ${t.starts_at ? `<div><span class="form-label">Starts</span><br><span class="text-sm">${Fmt.date(t.starts_at)}</span></div>` : ''}
        ${t.ends_at ? `<div><span class="form-label">Ends</span><br><span class="text-sm">${Fmt.date(t.ends_at)}</span></div>` : ''}
        ${t.assigned_to_name ? `<div><span class="form-label">Assigned To</span><br><span class="text-sm">${clH(t.assigned_to_name)}</span></div>` : ''}
        ${t.vehicle_reg ? `<div><span class="form-label">Vehicle</span><br><span class="text-sm">&#128663; ${clH(t.vehicle_reg)} ${clH(t.vehicle_make || '')} ${clH(t.vehicle_model || '')}</span></div>` : ''}
      </div>
      ${t.description ? `<p class="text-muted text-sm mb-4">${clH(t.description)}</p>` : ''}
      <div style="font-weight:600;margin-bottom:.75rem">${items.length} Question${items.length !== 1 ? 's' : ''}</div>
      <div style="display:flex;flex-direction:column;gap:.5rem">
        ${items.map((it, i) => `
          <div class="cl-question-card" style="padding:.75rem 1rem">
            <div class="d-flex justify-between align-center flex-wrap gap-2">
              <div><span class="cl-q-num" style="margin-right:.5rem">${i + 1}</span>${clH(it.item_text)}${it.is_required ? ' <span class="required">*</span>' : ''}</div>
              <div class="d-flex gap-2">
                <span class="badge badge-muted">${ansLabel[it.answer_type] || it.answer_type}</span>
                ${it.requires_image !== 'never' ? `<span class="badge badge-info">&#128247; ${imgLabel[it.requires_image] || it.requires_image}</span>` : ''}
              </div>
            </div>
          </div>
        `).join('')}
      </div>
    `,
    footer: `
      <button class="btn btn-ghost" onclick="Modal.close()">Close</button>
      <button class="btn btn-outline" onclick="openInstanceCreateModal(${t.id},'${t.name.replace(/'/g, "\\'").replace(/"/g, '&quot;')}','${t.linked_type}');Modal.close()">&#9654; Start Instance</button>
      ${canManage ? `<button class="btn btn-primary" onclick="openTemplateBuilder(${t.id});Modal.close()">&#9999;&#65039; Edit</button>` : ''}
    `,
  });
}

// ── START INSTANCE MODAL ─────────────────────────────────────
async function openInstanceCreateModal(templateId, templateName, linkedType) {
  const vehicles = _clVehicles || [], users = _clUsers || [];
  Modal.open({
    id: 'cl-start', title: `Start: ${templateName}`,
    body: `
      <form id="cl-start-form">
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Due Date <span class="required">*</span></label>
            <input type="date" name="due_date" class="form-control" value="${new Date().toISOString().split('T')[0]}" required></div>
          <div class="form-group"><label class="form-label">Due Time (optional)</label>
            <input type="time" name="due_time" class="form-control"></div>
        </div>
        <div class="form-group"><label class="form-label">Assign To</label>
          <select name="assigned_to" class="form-control">
            <option value="">— Myself —</option>
            ${users.map(u => `<option value="${u.id}">${clH(u.full_name || u.username)}</option>`).join('')}
          </select>
        </div>
        ${linkedType !== 'job_card' ? `
        <div class="form-group"><label class="form-label">Vehicle (optional)</label>
          <select name="vehicle_id" class="form-control">
            <option value="">— None —</option>
            ${vehicles.map(v => `<option value="${v.id}">${clH(v.registration)} &mdash; ${clH(v.make)} ${clH(v.model)}</option>`).join('')}
          </select>
        </div>` : ''}
      </form>
    `,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitCreateInstance(${templateId})"><span class="btn-text">&#9654; Start</span></button>`,
  });
}
async function submitCreateInstance(templateId) {
  const btn = document.querySelector('#modal-cl-start .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('cl-start-form');
  const res = await API.post('checklists/instance_create', { ...data, template_id: templateId });
  if (btn) btn.classList.remove('loading');
  if (res.success) { Toast.show('Checklist started!', 'success'); Modal.close(); Router.navigate('checklists', { instance_id: res.data.id }); }
  else Toast.show(res.message, 'error');
}

// ── TEMPLATE BUILDER ─────────────────────────────────────────
let _builderItems = [];
let _builderEditId = 0;
let _bUid = 5000;

async function openTemplateBuilder(editId = 0) {
  _builderItems = [];
  _builderEditId = editId;
  let template = null;

  if (editId) {
    const res = await API.post('checklists/template_get', { id: editId });
    if (!res.success) { Toast.show(res.message, 'error'); return; }
    template = res.data.template;
    _builderItems = (template.items || []).map(it => ({
      _uid: it.id, item_text: it.item_text,
      answer_type: it.answer_type, requires_image: it.requires_image, is_required: it.is_required,
    }));
  }

  const vehicles = _clVehicles || [], users = _clUsers || [], jobTypes = _clJobTypes || [];
  const v = (k, def = '') => template ? (template[k] ?? def) : def;

  Modal.open({
    id: 'cl-builder',
    title: editId ? `Edit: ${template.name}` : 'New Checklist Template',
    size: 'modal-xl',
    body: `
      <div class="cl-builder-grid">
        <div>
          <div class="cl-builder-section-title">Checklist Info</div>
          <form id="cl-builder-form">
            <div class="form-group"><label class="form-label">Name <span class="required">*</span></label>
              <input name="name" class="form-control" required placeholder="e.g. Pre-Trip Vehicle Check" value="${clH(v('name'))}"></div>
            <div class="form-group"><label class="form-label">Description</label>
              <textarea name="description" class="form-control" rows="2" placeholder="What is this checklist for?">${clH(v('description'))}</textarea></div>
            <div class="form-group"><label class="form-label">Type <span class="required">*</span></label>
              <select name="linked_type" class="form-control" id="cl-b-type" onchange="clBuilderTypeChange(this.value)">
                <option value="general"  ${v('linked_type') === 'general' ? 'selected' : ''}>General</option>
                <option value="fleet"    ${v('linked_type') === 'fleet' ? 'selected' : ''}>&#128663; Fleet</option>
              </select></div>
            <div id="cl-b-fleet-opts" ${v('linked_type') !== 'fleet' ? 'style="display:none"' : ''}>
              <div class="form-group"><label class="form-label">Link to Vehicle (optional)</label>
                <select name="fleet_vehicle_id" class="form-control">
                  <option value="">— Any Vehicle —</option>
                  ${vehicles.map(veh => `<option value="${veh.id}" ${v('fleet_vehicle_id') == veh.id ? 'selected' : ''}>${clH(veh.registration)} &mdash; ${clH(veh.make)} ${clH(veh.model)}</option>`).join('')}
                </select></div></div>
            <hr style="margin:1rem 0;border-color:var(--border)">
            <div class="cl-builder-section-title">Schedule</div>
            <div class="form-row form-row-2">
              <div class="form-group"><label class="form-label">Frequency</label>
                <select name="frequency" class="form-control">
                  <option value="once"    ${v('frequency') === 'once' ? 'selected' : ''}>Once</option>
                  <option value="daily"   ${v('frequency') === 'daily' ? 'selected' : ''}>Daily</option>
                  <option value="weekly"  ${v('frequency') === 'weekly' ? 'selected' : ''}>Weekly</option>
                  <option value="monthly" ${v('frequency') === 'monthly' ? 'selected' : ''}>Monthly</option>
                </select></div>
              <div class="form-group"><label class="form-label">Assign To</label>
                <select name="assigned_to" class="form-control">
                  <option value="">— Anyone —</option>
                  ${users.map(u => `<option value="${u.id}" ${v('assigned_to') == u.id ? 'selected' : ''}>${clH(u.full_name || u.username)}</option>`).join('')}
                </select></div>
            </div>
            <div class="form-row form-row-2">
              <div class="form-group"><label class="form-label">Starts</label>
                <input type="date" name="starts_at" class="form-control" value="${v('starts_at')}"></div>
              <div class="form-group"><label class="form-label">Ends</label>
                <input type="date" name="ends_at" class="form-control" value="${v('ends_at')}"></div>
            </div>
            <div class="form-group d-flex align-center gap-2">
              <input type="checkbox" name="is_active" id="cl-b-active" ${v('is_active', 1) ? 'checked' : ''}>
              <label for="cl-b-active" style="margin:0;cursor:pointer">Active</label>
            </div>
          </form>
        </div>
        <div>
          <div class="d-flex justify-between align-center mb-3">
            <div class="cl-builder-section-title" style="margin:0">Questions <span id="cl-b-cnt" class="badge badge-muted">${_builderItems.length}</span></div>
            <button class="btn btn-primary btn-sm" onclick="clBuilderAddItem()">+ Add Question</button>
          </div>
          <div id="cl-builder-items" style="display:flex;flex-direction:column;gap:.5rem;max-height:460px;overflow-y:auto;padding-right:.25rem">
            ${_builderItems.length ? '' : '<div id="cl-bi-empty" class="text-muted text-sm text-center p-4">No questions yet. Click &ldquo;+ Add Question&rdquo; to start.</div>'}
          </div>
        </div>
      </div>
    `,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitTemplateBuilder()"><span class="btn-text">${editId ? 'Save Changes' : 'Create Template'}</span></button>`,
  });

  _builderItems.forEach(it => _renderBuilderItem(it));
}

function clBuilderTypeChange(val) {
  document.getElementById('cl-b-fleet-opts').style.display = val === 'fleet' ? '' : 'none';
}
function clBuilderAddItem() {
  const item = { _uid: 'n' + (++_bUid), item_text: '', answer_type: 'yes_no', requires_image: 'never', is_required: 1 };
  _builderItems.push(item);
  const empty = document.getElementById('cl-bi-empty');
  if (empty) empty.remove();
  _renderBuilderItem(item);
  _updateBuilderCount();
  const list = document.getElementById('cl-builder-items');
  if (list) setTimeout(() => { list.scrollTop = list.scrollHeight; const inp = document.getElementById(`cl-bi-${item._uid}`)?.querySelector('input[type=text]'); if (inp) inp.focus(); }, 60);
}
function _renderBuilderItem(item) {
  const list = document.getElementById('cl-builder-items');
  if (!list) return;
  const div = document.createElement('div');
  div.className = 'cl-builder-item'; div.id = `cl-bi-${item._uid}`;
  div.innerHTML = `
    <div class="cl-bi-drag" title="Reorder">&#8942;</div>
    <div class="cl-bi-body">
      <input type="text" class="form-control form-control-sm" placeholder="Question text…" value="${clH(item.item_text)}"
             oninput="clBuUpdate('${item._uid}','item_text',this.value)">
      <div class="cl-bi-opts">
        <select class="form-control form-control-sm" onchange="clBuUpdate('${item._uid}','answer_type',this.value)">
          <option value="yes_no"    ${item.answer_type === 'yes_no' ? 'selected' : ''}>Yes/No</option>
          <option value="text"      ${item.answer_type === 'text' ? 'selected' : ''}>Text</option>
          <option value="number"    ${item.answer_type === 'number' ? 'selected' : ''}>Number</option>
          <option value="photo_only" ${item.answer_type === 'photo_only' ? 'selected' : ''}>Photo Only</option>
        </select>
        <select class="form-control form-control-sm" onchange="clBuUpdate('${item._uid}','requires_image',this.value)">
          <option value="never"  ${item.requires_image === 'never' ? 'selected' : ''}>No Image</option>
          <option value="always" ${item.requires_image === 'always' ? 'selected' : ''}>&#128247; Always</option>
          <option value="on_yes" ${item.requires_image === 'on_yes' ? 'selected' : ''}>&#128247; If Yes</option>
          <option value="on_no"  ${item.requires_image === 'on_no' ? 'selected' : ''}>&#128247; If No</option>
        </select>
        <label class="d-flex align-center gap-1 text-xs" style="cursor:pointer;white-space:nowrap">
          <input type="checkbox" ${item.is_required ? 'checked' : ''} onchange="clBuUpdate('${item._uid}','is_required',this.checked?1:0)"> Required
        </label>
      </div>
    </div>
    <button class="cl-bi-del" title="Remove" onclick="clBuilderRemoveItem('${item._uid}')">
      <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
    </button>
  `;
  list.appendChild(div);
}
function clBuUpdate(uid, field, value) {
  const item = _builderItems.find(i => String(i._uid) === String(uid));
  if (item) item[field] = value;
}
function clBuilderRemoveItem(uid) {
  _builderItems = _builderItems.filter(i => String(i._uid) !== String(uid));
  const el = document.getElementById(`cl-bi-${uid}`);
  if (el) el.remove();
  _updateBuilderCount();
  const list = document.getElementById('cl-builder-items');
  if (list && !list.children.length) list.innerHTML = '<div id="cl-bi-empty" class="text-muted text-sm text-center p-4">No questions yet. Click &ldquo;+ Add Question&rdquo; to start.</div>';
}
function _updateBuilderCount() {
  const el = document.getElementById('cl-b-cnt'); if (el) el.textContent = _builderItems.length;
}
async function submitTemplateBuilder() {
  const btn = document.querySelector('#modal-cl-builder .btn-primary');
  if (btn) btn.classList.add('loading');
  // Sync text inputs
  document.querySelectorAll('.cl-builder-item').forEach((el, i) => {
    const inp = el.querySelector('input[type=text]');
    if (inp && _builderItems[i]) _builderItems[i].item_text = inp.value;
  });
  const data = getFormData('cl-builder-form');
  const items = _builderItems.filter(it => (it.item_text || '').trim());
  if (!data.name) { Toast.show('Checklist name is required.', 'error'); if (btn) btn.classList.remove('loading'); return; }
  const res = await API.post('checklists/template_save', { ...data, id: _builderEditId || 0, is_active: data.is_active ? 1 : 0, items });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show(_builderEditId ? 'Template updated.' : 'Template created.', 'success');
    Modal.close(); _clJobTypes = null; await _loadClCaches(); renderChecklistsTab('templates');
  } else Toast.show(res.message, 'error');
}
async function deleteTemplate(id, name) {
  if (!await Modal.confirm(`Delete checklist "${name}"?`, 'Delete Template', true)) return;
  const res = await API.post('checklists/template_delete', { id });
  if (res.success) { Toast.show(res.message, 'success'); renderChecklistsTab('templates'); }
  else Toast.show(res.message, 'error');
}

// ── Utility ───────────────────────────────────────────────────
function needsImageForCard(card, ans) {
  const req = card.dataset.requiresImage;
  if (req === 'always') return true;
  if (req === 'on_yes' && ans.answer_bool === 1) return true;
  if (req === 'on_no' && ans.answer_bool === 0) return true;
  return false;
}

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

// ── CSS for this module ───────────────────────────────────────
(function injectChecklistStyles() {
  if (document.getElementById('cl-styles')) return;
  const style = document.createElement('style');
  style.id = 'cl-styles';
  style.textContent = `
    .cl-question-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; transition:outline .15s; }
    .cl-q-header { display:flex; align-items:flex-start; gap:.75rem; }
    .cl-q-num { width:26px; min-width:26px; height:26px; background:var(--primary); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0; }
    .cl-q-text { font-weight:500; line-height:1.5; }
    .cl-yn-btn { border:2px solid var(--border); background:transparent; padding:.4rem 1.25rem; border-radius:var(--radius); font-weight:600; cursor:pointer; transition:all .15s; }
    .cl-yn-btn:hover { border-color:var(--primary); }
    .cl-yn-btn.active-yes { background:#dcfce7; border-color:#16a34a; color:#15803d; }
    .cl-yn-btn.active-no  { background:#fee2e2; border-color:#dc2626; color:#b91c1c; }
    .cl-img-grid { display:flex; flex-wrap:wrap; gap:.5rem; align-items:flex-start; margin-top:.5rem; }
    .cl-img-thumb { position:relative; flex-shrink:0; }
    .cl-img-thumb-del { position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; background:var(--danger); color:#fff; border:none; cursor:pointer; font-size:.6rem; display:flex; align-items:center; justify-content:center; line-height:1; padding:0; }
    .cl-img-thumb-del:hover { background:#b91c1c; }
    .cl-img-add-btn { width:80px; height:80px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:2px dashed var(--border); border-radius:6px; cursor:pointer; font-size:.85rem; color:var(--text-muted); background:var(--bg); transition:border-color .15s; flex-shrink:0; }
    .cl-img-add-btn:hover { border-color:var(--primary); color:var(--primary); }
    .cl-submission-area { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; }
    .cl-readonly-text { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:.5rem .75rem; font-size:.9rem; white-space:pre-wrap; }
    .cl-note-readonly { background:rgba(0,0,0,.03); border-radius:var(--radius); padding:.4rem .75rem; font-size:.85rem; color:var(--text-muted); }
    .cl-builder-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
    @media(max-width:720px) { .cl-builder-grid { grid-template-columns:1fr; } }
    .cl-builder-section-title { font-family:var(--font-display); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:.75rem; }
    .cl-builder-item { display:flex; align-items:flex-start; gap:.5rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.6rem; }
    .cl-bi-drag { cursor:grab; color:var(--text-muted); padding:.15rem .1rem; font-size:1.1rem; margin-top:.15rem; }
    .cl-bi-body { flex:1; display:flex; flex-direction:column; gap:.4rem; }
    .cl-bi-opts { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
    .cl-bi-opts select { flex:1; min-width:90px; }
    .cl-bi-del { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:.2rem; border-radius:4px; display:flex; align-items:center; }
    .cl-bi-del:hover { color:var(--danger); background:var(--danger-light,#fee2e2); }
    .badge-lg { font-size:.9rem; padding:.35em .9em; }
  `;
  document.head.appendChild(style);
})();