// ── Column visibility ─────────────────────────────────────────────
const ALL_COLS = [
  { key:'num',         label:'# Заявка',        def:true  },
  { key:'title',       label:'Тема',             def:true  },
  { key:'intrastatus', label:'Статус в интре',   def:true  },
  { key:'client',      label:'Клиент',           def:true  },
  { key:'date',        label:'Время ответа',     def:true  },
  { key:'created',     label:'Создана',          def:true  },
  { key:'preview',     label:'Превью/Заметка',   def:true  },
  { key:'status',      label:'Статус',           def:true  },
];
let visibleCols = new Set(ALL_COLS.filter(c=>c.def).map(c=>c.key));
let colMenuOpen  = false;
let filteredData = [];
let statFilter   = 'all';
let selectedRows = new Set();
let mainTab      = 'all'; // 'all' | 'open' | 'done' | 'empty'

function setMainTab(tab, el) {
  mainTab = tab;
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('tab-btn-active'));
  if (el) el.classList.add('tab-btn-active');
  renderTable();
}

function isTaskOpen(item) {
  const sn = (item.task._statusname || item.task.statusname || '').toLowerCase();
  return sn.includes('открыт') || sn.includes('в работе') || sn.includes('новая') || sn.includes('new') || sn.includes('назначен');
}
function isTaskDone(item) {
  const sn = (item.task._statusname || item.task.statusname || '').toLowerCase();
  return sn.includes('выполнен') || sn.includes('закрыт') || sn.includes('решен');
}
function isTaskEmpty(item) {
  return !item.lastComment;
}

// ── Helpers ───────────────────────────────────────────────────────
function getTaskTags(task){const r=task.tags?.data??task.tags??[];return r.map(t=>({id:t.id??t,name:t.name??String(t)}));}
function buildTagIndex(){return [];}
function renderTagFilter(){}

function abbrevName(name){
  if(!name||name==='—') return name||'—';
  const p=name.trim().split(/\s+/);
  if(p.length===1) return p[0];
  return p[0]+' '+p[1][0]+'.';
}

const AV_COLORS=['#5b7fff','#ff4d4f','#52c41a','#fa8c16','#722ed1','#13c2c2','#eb2f96'];
function avatarColor(n){let h=0;for(let i=0;i<(n||'').length;i++)h=(h*31+n.charCodeAt(i))%AV_COLORS.length;return AV_COLORS[h];}
function avatarInitials(n){
  if(!n||n==='—') return'?';
  const p=n.trim().split(/\s+/);
  return p.length>1?(p[0][0]+p[1][0]).toUpperCase():n.slice(0,2).toUpperCase();
}

// ── Chips ─────────────────────────────────────────────────────────
function setChip(el,on){
  if(!el)return;
  el.classList.toggle('chip-on',on);
  el.classList.toggle('chip-off',!on);
}
function syncAllChip(){setChip(document.getElementById('chip-all'),STATE_CHIP_KEYS.every(k=>stateChips[k]));}
function toggleStateChip(name){
  stateChips[name]=!stateChips[name];
  setChip(document.getElementById('chip-'+name),stateChips[name]);
  syncAllChip(); renderTable();
}
function toggleAllChip(){
  const t=!STATE_CHIP_KEYS.every(k=>stateChips[k]);
  STATE_CHIP_KEYS.forEach(k=>{stateChips[k]=t;setChip(document.getElementById('chip-'+k),t);});
  setChip(document.getElementById('chip-all'),t);
  renderTable();
}

// ── Init mark chips + bulk-select from MARKS_CONFIG ───────────────
function initMarkChips(){
  // Chip dropdown items
  const container=document.getElementById('mark-chips-container');
  if(container){
    container.innerHTML=MARKS_CONFIG.map(m=>`
      <div class="chip-dd-item chip-dd-mark" id="chipdd-${m.key}" onclick="chipClickLabel('${m.key}')">
        <span class="chip-dd-dot" style="background:${m.chipDotColor};"></span>
        <span class="chip-dd-lbl">${m.chipLabel}</span>
        <span class="chip-dd-cnt" id="chip-${m.key}-cnt">0</span>
      </div>`).join('');
  }
  // Bulk-status select options
  const sel=document.getElementById('bulk-status-sel');
  if(sel){
    const clearOpt=sel.querySelector('option[value="clear"]');
    MARKS_CONFIG.slice().reverse().forEach(m=>{
      const opt=document.createElement('option');
      opt.value=m.key; opt.textContent=m.label;
      sel.insertBefore(opt, clearOpt);
    });
  }
}
function toggleMentionedFilter(){
  mentionedFilterOn=!mentionedFilterOn;
  setChip(document.getElementById('chip-mentioned'),mentionedFilterOn);
  renderTable();
}

function toggleChipDropdown() {
  const panel = document.getElementById('chip-dropdown-panel');
  if (!panel) return;
  panel.classList.toggle('chip-dd-open');
}

function updateChipDropdownLabel() {
  const allOn = STATE_CHIP_KEYS.every(k => stateChips[k]);
  const activeKeys = STATE_CHIP_KEYS.filter(k => stateChips[k]);
  const lbl = document.getElementById('chip-dropdown-label');
  if (!lbl) return;
  if (allOn) {
    lbl.textContent = 'Все статусы';
  } else if (activeKeys.length === 0) {
    lbl.textContent = 'Ни один';
  } else if (activeKeys.length === 1) {
    const key = activeKeys[0];
    if (key === 'unmarked') { lbl.textContent = 'Без статуса'; return; }
    const m = MARKS_CONFIG.find(x => x.key === key);
    lbl.textContent = m ? m.chipLabel : key;
  } else {
    lbl.textContent = `Статусов: ${activeKeys.length}`;
  }
}

function syncChipDropdownItems() {
  const allOn = STATE_CHIP_KEYS.every(k => stateChips[k]);
  const allItem = document.getElementById('chipdd-all');
  if (allItem) allItem.classList.toggle('chip-dd-active', allOn);
  MARKS_CONFIG.forEach(m => {
    const el = document.getElementById(`chipdd-${m.key}`);
    if (el) el.classList.toggle('chip-dd-active', !!stateChips[m.key]);
  });
  const uEl = document.getElementById('chipdd-unmarked');
  if (uEl) uEl.classList.toggle('chip-dd-active', !!stateChips['unmarked']);
  updateChipDropdownLabel();
}

function setStatFilter(f,el){
  statFilter=f;
  document.querySelectorAll('.stat-card').forEach(c=>c.classList.remove('active'));
  if(el)el.classList.add('active');
  renderTable();
}
function setNavView(v,e){}

// ── Date filter ───────────────────────────────────────────────────
function taskMatchesDate(task){
  const v=document.getElementById('date-filter')?.value||'0';
  if(v==='0')return true;
  const now=new Date(),upd=new Date(task.updatedat);
  if(v==='today')return upd.toDateString()===now.toDateString();
  if(v==='yesterday'){const y=new Date(now);y.setDate(y.getDate()-1);return upd.toDateString()===y.toDateString();}
  return upd>=new Date(now.setDate(now.getDate()-parseInt(v)));
}

// ── Status badges ─────────────────────────────────────────────────
function internalStatusBadge(tid){
  const m=MARKS_CONFIG.find(m=>isMark(tid,m.key));
  if(m) return`<span class="status-badge ${m.badgeClass}"><span class="dot"></span>${m.label}</span>`;
  return`<span class="status-badge sb-none"><span class="dot"></span>Без статуса</span>`;
}
// ── IntraDesk status badge ────────────────────────────────────────
function intraStatusBadge(task) {
  const name = task._statusname || task.statusname || '';
  if (!name) {
    // Показываем числовой id статуса как fallback
    const sid = task.statusid || task.status;
    if (sid) return `<span class="status-badge sb-intra-other"><span class="dot"></span>#${sid}</span>`;
    return '<span style="color:var(--text3);font-size:11px;">—</span>';
  }
  const lc = name.toLowerCase();
  let cls = 'sb-intra-other';
  if (lc.includes('открыт') || lc.includes('new') || lc.includes('открытый')) cls = 'sb-intra-open';
  else if (lc.includes('работ') || lc.includes('прогресс') || lc.includes('назначен')) cls = 'sb-intra-work';
  else if (lc.includes('выполнен') || lc.includes('закрыт') || lc.includes('решен')) cls = 'sb-intra-done';
  else if (lc.includes('ожидан') || lc.includes('ожидает') || lc.includes('hold')) cls = 'sb-intra-hold';
  return `<span class="status-badge ${cls}"><span class="dot"></span>${esc(name)}</span>`;
}
// Who answered — ring class for avatar
function whoAnsweredRing(lc){
  if(!lc) return 'ring-none';
  return lc.usertype===10 ? 'ring-internal' : 'ring-external';
}
// Who answered — badge html
function whoAnsweredBadge(lc){
  if(!lc) return`<span class="status-badge sb-none"><span class="dot"></span>Нет ответа</span>`;
  if(lc.usertype===10) return`<span class="status-badge sb-internal"><span class="dot"></span>Сотрудник</span>`;
  return`<span class="status-badge sb-external"><span class="dot"></span>Клиент</span>`;
}
// Row color — ONLY by internal marks, not by who answered
function rowColorClass(tid){
  const m=MARKS_CONFIG.find(m=>isMark(tid,m.key));
  return m?m.rowClass:'';
}

// ── Who set a mark ────────────────────────────────────────────────
function markSetByHtml(tid) {
  const lines=MARKS_CONFIG
    .filter(cfg=>marksCache[tid]?.[cfg.key]?.active&&marksCache[tid][cfg.key].by)
    .map(cfg=>{
      const mc=marksCache[tid][cfg.key];
      return`<span class="mset-item">👤 ${esc(abbrevName(mc.by))} · «${cfg.label}»${mc.at?` · ${timeAgo(new Date(mc.at))}`:''}`;
    });
  return lines.length?`<div class="sp-mark-setby">${lines.join('')}</div>`:'';
}

// ── Inline status picker ──────────────────────────────────────────
function statusPickerHtml(tid){
  const items=MARKS_CONFIG.map(m=>`
    <div class="isp-item ${isMark(tid,m.key)?'isp-active':''}" onclick="toggleMark('${tid}','${m.key}',event)">
      <span class="isp-dot" style="background:${m.ispColor};"></span>${m.label}
    </div>`).join('');
  return`<div class="inline-status-picker" onmouseenter="ispShow(this)" onmouseleave="ispHide(this)">
    ${internalStatusBadge(tid)}
    <div class="isp-dropdown">
      <div class="isp-dropdown-inner">${items}</div>
    </div>
  </div>`;
}
function ispShow(el){
  const dd=el.querySelector('.isp-dropdown');
  if(!dd) return;
  const r=el.getBoundingClientRect();
  dd.style.top=(r.bottom)+'px';
  dd.style.left=r.left+'px';
  dd.style.display='block';
}
function ispHide(el){
  const dd=el.querySelector('.isp-dropdown');
  if(dd) dd.style.display='none';
}

// ── Column picker ─────────────────────────────────────────────────
function toggleColMenu(e){
  e.stopPropagation();
  colMenuOpen=!colMenuOpen;
  document.getElementById('col-menu')?.classList.toggle('open',colMenuOpen);
}
document.addEventListener('click',()=>{
  colMenuOpen=false;
  document.getElementById('col-menu')?.classList.remove('open');
});
function toggleCol(key){
  if(visibleCols.has(key))visibleCols.delete(key);else visibleCols.add(key);
  renderColMenu(); renderTable();
}
function renderColMenu(){
  const m=document.getElementById('col-menu');
  if(!m)return;
  m.innerHTML=ALL_COLS.map(c=>`
    <label class="col-menu-item" onclick="event.stopPropagation()">
      <input type="checkbox" ${visibleCols.has(c.key)?'checked':''} onchange="toggleCol('${c.key}')">
      <span>${c.label}</span>
    </label>`).join('');
}

// ── Sort state ────────────────────────────────────────────────────
let sortCol = null; // 'date' | 'created'
let sortDir = 'desc';
function toggleSort(col) {
  if (sortCol === col) sortDir = sortDir === 'desc' ? 'asc' : 'desc';
  else { sortCol = col; sortDir = 'desc'; }
  renderTable();
}

// ── Pagination state ──────────────────────────────────────────────
let currentPage = 1;
function getPageSize() { const v=parseInt(document.getElementById('opt-page-size')?.value||'50'); return v||0; }
function setPage(p) { currentPage = p; renderTable(true); }
function onPageSizeChange() { currentPage = 1; renderTable(); }

// ── Chip logic: click label = solo, click dot = toggle ────────────
function chipClickLabel(name) {
  STATE_CHIP_KEYS.forEach(k => { stateChips[k] = (k === name); });
  syncChipDropdownItems();
  renderTable();
}
function chipClickDot(name, e) {
  e && e.stopPropagation();
  stateChips[name] = !stateChips[name];
  syncChipDropdownItems();
  renderTable();
}
function toggleAllChip() {
  const t = !STATE_CHIP_KEYS.every(k => stateChips[k]);
  STATE_CHIP_KEYS.forEach(k => { stateChips[k] = t; });
  syncChipDropdownItems();
  renderTable();
}

// ── Render table ──────────────────────────────────────────────────
function renderTable(keepPage){
  if(!keepPage) currentPage = 1;
  const search     =document.getElementById('search-input')?.value?.toLowerCase()||'';
  const remoteOnly =document.getElementById('opt-remote-only')?.checked;

  filteredData=allData.filter(item=>{
    const tid=String(item.task.id);
    const marked=MARKS_CONFIG.some(m=>isMark(tid,m.key));
    for(const m of MARKS_CONFIG){if(isMark(tid,m.key)&&!stateChips[m.key])return false;}
    if(!marked&&!stateChips.unmarked) return false;
    if(mentionedFilterOn&&!mentionsData.some(m=>String(m.task_id)===tid)) return false;
    if(search&&!(item.task.name?.toLowerCase().includes(search)||String(item.task.tasknumber).includes(search)||(item.task._clientname||item.task.clientname||'').toLowerCase().includes(search))) return false;
    if(remoteOnly&&item.task.service!==84683) return false;
    if(!taskMatchesDate(item.task)) return false;
    if(statFilter!=='all'&&getAuthorType(item)!==statFilter) return false;
    // Main tab filter
    if(mainTab==='open' && !isTaskOpen(item)) return false;
    if(mainTab==='done' && !isTaskDone(item)) return false;
    if(mainTab==='empty' && !isTaskEmpty(item)) return false;
    return true;
  });

  // Sort
  if(sortCol) {
    filteredData = [...filteredData].sort((a,b) => {
      const da = sortCol==='date'
        ? (a.lastComment?.eventat||a.task.updatedat||'')
        : (a.task.createdat||'');
      const db = sortCol==='date'
        ? (b.lastComment?.eventat||b.task.updatedat||'')
        : (b.task.createdat||'');
      const cmp = da < db ? -1 : da > db ? 1 : 0;
      return sortDir==='asc' ? cmp : -cmp;
    });
  }

  // Counts
  const base=allData.filter(i=>taskMatchesDate(i.task));
  const g=id=>document.getElementById(id);
  const sv=(id,v)=>{const e=g(id);if(e)e.textContent=v;};
  sv('chip-all-cnt', base.length);
  MARKS_CONFIG.forEach(m=>{
    sv(`chip-${m.key}-cnt`, base.filter(i=>isMark(String(i.task.id),m.key)).length);
  });
  sv('chip-unmarked-cnt', base.filter(i=>{
    const tid=String(i.task.id);return !MARKS_CONFIG.some(m=>isMark(tid,m.key));
  }).length);
  sv('stat-total',       base.length);
  sv('stat-external',    base.filter(i=>getAuthorType(i)==='external').length);
  sv('stat-internal',    base.filter(i=>getAuthorType(i)==='internal').length);
  sv('stat-nocomment',   base.filter(i=>getAuthorType(i)==='nocomment').length);
  sv('stat-unread',      allData.filter(i=>isUnread(i.task)).length);
  sv('nav-badge-tasks',  filteredData.length);
  sv('topbar-sub',       `· ${filteredData.length} заявок`);
  sv('total-loaded',     filteredData.length);
  sv('total-count',      allData.length);
  sv('tf-info',          `${filteredData.length} из ${allData.length}`);
  // Tab counts (using allData for totals regardless of chip filter)
  sv('tcnt-all',   allData.length);
  sv('tcnt-open',  allData.filter(i=>isTaskOpen(i)).length);
  sv('tcnt-done',  allData.filter(i=>isTaskDone(i)).length);
  sv('tcnt-empty', allData.filter(i=>isTaskEmpty(i)).length);

  if(!filteredData.length){
    g('table-wrap').innerHTML=`<div class="state-box"><span class="icon">🔍</span><div class="msg">Заявок не найдено</div><div class="sub">Измените фильтры</div></div>`;
    const pb=g('pagination-bar'); if(pb){pb.style.display='none';pb.innerHTML='';}
    return;
  }

  // Pagination slice
  const PAGE_SIZE = getPageSize();
  const totalPages = PAGE_SIZE > 0 ? Math.ceil(filteredData.length / PAGE_SIZE) : 1;
  if(currentPage > totalPages) currentPage = totalPages;
  const pageData = PAGE_SIZE > 0 ? filteredData.slice((currentPage-1)*PAGE_SIZE, currentPage*PAGE_SIZE) : filteredData;

  const sc=k=>visibleCols.has(k);
  const sortArrow = col => sortCol===col ? (sortDir==='asc' ? ' ↑' : ' ↓') : ' ↕';
  const sortStyle = col => `cursor:pointer;user-select:none;${sortCol===col?'color:var(--accent);':'color:inherit;'}`;
  const thead=`<thead><tr>
    <th style="width:32px;padding:8px 6px;"></th>
    ${sc('num')    ?'<th style="width:70px;">#</th>'           :''}
    ${sc('title')  ?'<th>Тема</th>'                             :''}
    ${sc('intrastatus')?'<th style="width:110px;">Статус в интре</th>':''}
    ${sc('status') ?'<th style="width:130px;">Статус</th>'      :''}
    ${sc('client') ?'<th style="width:170px;">Кто ответил</th>'      :''}
    ${sc('date')   ?`<th style="width:105px;${sortStyle('date')}" onclick="toggleSort('date')">Время ответа<span style="font-size:10px;opacity:.6;">${sortArrow('date')}</span></th>` :''}
    ${sc('created')?`<th style="width:95px;${sortStyle('created')}" onclick="toggleSort('created')">Создана<span style="font-size:10px;opacity:.6;">${sortArrow('created')}</span></th>` :''}
    ${sc('preview')?'<th style="width:135px;">Превью</th>'      :''}
  </tr></thead>`;

  const rows=pageData.map(item=>{
    const {task,lastComment}=item;
    const tid=String(task.id);
    const num=task.tasknumber||task.id;
    const idx=allData.indexOf(item);
    const unread=isUnread(task);
    const note=getNote(tid);
    const cc=rowColorClass(tid);
    const rowCls=((unread&&!cc?'row-unread ':'')+cc+(currentModalIdx===idx?' active-row':'')).trim();
    const authorName=lastComment?.username||task.updatedby||task.username||'';
    const orgName=task._clientname||task.clientname||task.organization||'';
    const unreadDot=unread?'<span class="unread-dot-inline"></span>':'';
    const cntBadge=getCommentCount(tid)?`<div class="comment-count-badge">💬 ${getCommentCount(tid)}</div>`:'';
    const prevCell=note
      ?`<div class="note-indicator" title="${esc(note)}">📝 ${esc(note.slice(0,42))}${note.length>42?'…':''}</div>`
      :(lastComment?`<div class="preview-text">${esc(stripHtml(lastComment.text||'').slice(0,52))}</div>`:'');
    const whoLabel=lastComment
      ?(lastComment.usertype===10
        ?'<span class="who-label who-internal">● Сотрудник</span>'
        :'<span class="who-label who-external">● Клиент</span>')
      :(task.updatedby
        ?`<span class="who-label who-none">${esc(abbrevName(task.updatedby))}</span>`
        :'<span class="who-label who-none">нет ответа</span>');

    return`<tr onclick="openModal(${idx})" data-idx="${idx}" class="${rowCls}">
      <td style="padding:8px 6px;" onclick="event.stopPropagation()">
        <input type="checkbox" class="row-check" data-idx="${idx}" style="accent-color:var(--accent);" ${selectedRows.has(idx)?'checked':''} onchange="toggleRowCheck(${idx},this)">
      </td>
      ${sc('num')    ?`<td><span class="task-num">#${num}</span>${unreadDot}</td>`:''}
      ${sc('title')  ?`<td><div class="task-title-main" title="${esc(task.name)}">${esc(task.name)}</div>${orgName?`<div class="task-title-sub">${esc(orgName)}</div>`:''}</td>`:''}
      ${sc('intrastatus')?`<td>${intraStatusBadge(task)}</td>`:''}
      ${sc('status') ?`<td onclick="event.stopPropagation()">${statusPickerHtml(tid)}</td>`:''}
      ${sc('client') ?`<td><div class="client-info">
        <div class="client-avatar ${whoAnsweredRing(lastComment)}" style="background:${avatarColor(authorName)};color:#fff;">${avatarInitials(authorName)}</div>
        <div>
          <div class="client-name">${esc(abbrevName(authorName)||'—')}</div>
          ${whoLabel}
        </div>
      </div></td>`:''}
      ${sc('date')   ?`<td>${lastComment?`<div class="date-main">${fmtDateShort(new Date(lastComment.eventat))}</div><div class="date-sub">${fmtTime(new Date(lastComment.eventat))}</div><div class="date-ago">${timeAgo(new Date(lastComment.eventat))}</div>`:task.updatedat?`<div class="date-main">${fmtDateShort(new Date(task.updatedat))}</div><div class="date-sub">${fmtTime(new Date(task.updatedat))}</div><div class="date-ago">${timeAgo(new Date(task.updatedat))}</div>`:'<div class="date-main">—</div>'}</td>`:''}
      ${sc('created')?`<td>${task.createdat?`<div class="date-main">${fmtDateShort(new Date(task.createdat))}</div><div class="date-sub">${fmtTime(new Date(task.createdat))}</div>`:'<div class="date-main">—</div>'}</td>`:''}
      ${sc('preview')?`<td>${prevCell}${cntBadge}</td>`:''}
    </tr>`;
  }).join('');

  g('table-wrap').innerHTML=`<table class="tasks-table">${thead}<tbody>${rows}</tbody></table>`;

  // Pagination bar
  const pb = g('pagination-bar');
  if(pb) {
    if(totalPages <= 1 || PAGE_SIZE === 0){ pb.style.display='none'; pb.innerHTML=''; }
    else {
      pb.style.display='flex';
      const start=(currentPage-1)*PAGE_SIZE+1, end=Math.min(currentPage*PAGE_SIZE,filteredData.length);
      let pages='';
      for(let p=1;p<=totalPages;p++){
        if(p===1||p===totalPages||Math.abs(p-currentPage)<=2){
          pages+=`<button class="pg-btn${p===currentPage?' pg-active':''}" onclick="setPage(${p})">${p}</button>`;
        } else if(Math.abs(p-currentPage)===3){
          pages+=`<span class="pg-ellipsis">…</span>`;
        }
      }
      pb.innerHTML=`
        <button class="pg-btn" onclick="setPage(${currentPage-1})" ${currentPage===1?'disabled':''}>‹</button>
        ${pages}
        <button class="pg-btn" onclick="setPage(${currentPage+1})" ${currentPage===totalPages?'disabled':''}>›</button>
        <span class="pg-info">${start}–${end} из ${filteredData.length}</span>`;
    }
  }
}
function fmtDateShort(d){return d.toLocaleDateString('ru-RU',{day:'2-digit',month:'2-digit',year:'2-digit'});}
function fmtTime(d){return d.toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'});}
function toggleSelectAll(cb){document.querySelectorAll('.row-check').forEach(c=>{const i=+c.dataset.idx;if(cb.checked)selectedRows.add(i);else selectedRows.delete(i);c.checked=cb.checked;});updateBulkBar();}
function toggleRowCheck(idx,cb){if(cb.checked)selectedRows.add(idx);else selectedRows.delete(idx);updateBulkBar();}

function updateBulkBar(){
  const info=document.getElementById('bulk-sel-info');
  const cnt =document.getElementById('bulk-sel-count');
  const sel =document.getElementById('bulk-status-sel');
  if(!info)return;
  if(selectedRows.size>0){
    info.style.display='flex';
    if(cnt)cnt.textContent=`${selectedRows.size} выбрано`;
    if(sel)sel.value='';
  }else{
    info.style.display='none';
  }
}

function bulkApplyStatusFromSelect(sel){
  const v=sel.value;
  sel.value='';
  if(!v)return;
  bulkApplyStatus(v==='clear'?null:v);
}

function bulkApplyStatus(markType){
  if(!selectedRows.size)return;
  const now=new Date().toISOString();
  const tids=[...selectedRows].map(idx=>allData[idx]?String(allData[idx].task.id):null).filter(Boolean);
  for(const tid of tids){
    if(!marksCache[tid])marksCache[tid]={};
    if(!markType){
      const active=STATUS_MARKS.find(m=>marksCache[tid][m]?.active);
      STATUS_MARKS.forEach(m=>{marksCache[tid][m]={...(marksCache[tid][m]||{}),active:false};});
      if(active) apiPost('/api/marks',{task_id:tid,mark_type:active,value:false,clear_others:false});
    }else{
      STATUS_MARKS.forEach(m=>{marksCache[tid][m]={...(marksCache[tid][m]||{}),active:false};});
      marksCache[tid][markType]={active:true,by:currentUser?.username,at:now};
      apiPost('/api/marks',{task_id:tid,mark_type:markType,value:true,clear_others:true});
    }
  }
  renderTable();
  if(currentModalIdx!==null){
    const openTid=String(allData[currentModalIdx]?.task?.id);
    if(tids.includes(openTid))renderSidePanel(currentModalIdx);
  }
}

// ── SIDE PANEL open/close ─────────────────────────────────────────
function openModal(idx){
  if(idx===null||idx===undefined||!allData[idx]) return;
  currentModalIdx=idx; currentTab='last';
  const {task,lastComment}=allData[idx];

  // Immediately mark read & update that row in-place
  if(isUnread(task)){
    markSeen(task.id,task.updatedat);
    const row=document.querySelector(`tbody tr[data-idx="${idx}"]`);
    if(row){
      ['row-unread',...MARKS_CONFIG.map(m=>m.rowClass)].forEach(c=>row.classList.remove(c));
      const cc=rowColorClass(String(task.id));
      if(cc) row.classList.add(cc);
      row.querySelector('.unread-dot-inline')?.remove();
    }
    const su=document.getElementById('stat-unread');
    if(su) su.textContent=allData.filter(i=>isUnread(i.task)).length;
  }

  // Mark mentions read
  if(mentionsData.some(m=>String(m.task_id)===String(task.id)&&!m.read_at)){
    apiPost('/api/mentions/read',{task_id:String(task.id)}).then(r=>{
      if(r){
        mentionUnread=r.unread||0;
        mentionsData=mentionsData.map(m=>
          String(m.task_id)===String(task.id)?{...m,read_at:new Date().toISOString()}:m);
        renderMentionsBell();
      }
    });
  }

  // Highlight active row
  document.querySelectorAll('.tasks-table tbody tr').forEach(r=>r.classList.remove('active-row'));
  document.querySelector(`tbody tr[data-idx="${idx}"]`)?.classList.add('active-row');

  // Show side panel
  const dc=document.getElementById('detail-col');
  if(dc) dc.classList.remove('hidden');

  renderSidePanel(idx);
  loadCommentsForTask(String(task.id));
}

function closeModal(){
  const dc=document.getElementById('detail-col');
  if(dc) dc.classList.add('hidden');
  document.querySelectorAll('.tasks-table tbody tr').forEach(r=>r.classList.remove('active-row'));
  currentModalIdx=null;
}
function closeModalOnOverlay(){}
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal();});

// ── SIDE PANEL render ─────────────────────────────────────────────
function renderSidePanel(idx){
  const container=document.getElementById('detail-content');
  if(!container) return;
  if(idx===null||idx===undefined||!allData[idx]){
    container.innerHTML='';
    return;
  }
  const {task,lastComment}=allData[idx];
  const tid=String(task.id);
  const num=task.tasknumber||task.id;
  const note=getNote(tid),noteBy=getNoteBy(tid),noteAt=getNoteAt(tid);
  const cnt=getCommentCount(tid);
  const authorName=lastComment?.username||task.username||'—';
  const rawDesc=task.description||task.descriptionhtml||task.body||task.text||'';

  const noteHtml=(openNoteIdx===idx)
    ?`<div class="detail-note-editor">
        <textarea id="detail-note-ta" placeholder="Заметка...">${esc(note)}</textarea>
        <div class="detail-note-actions">
          <button class="btn btn-primary" style="font-size:11px;padding:5px 12px;" onclick="saveNoteAndClose(${idx},event)">Сохранить</button>
          <button class="btn btn-default"  style="font-size:11px;padding:5px 12px;" onclick="closeNoteEditor()">Отмена</button>
        </div>
      </div>`
    :note
      ?`<div class="detail-note-text" onclick="openNoteEditor(${idx},event)">📝 ${renderMentions(note)}
          <div style="font-size:10px;color:var(--text3);margin-top:3px;">${noteBy?`👤 ${esc(abbrevName(noteBy))}`:''}${noteAt?` · ${fmtDate(new Date(noteAt))}`:''}  </div>
        </div>`
      :`<div class="detail-note-empty" onclick="openNoteEditor(${idx},event)">+ Добавить заметку</div>`;

  container.innerHTML=`
    <div class="sp-header">
      <div style="flex:1;min-width:0;">
        <div class="sp-badges">
          ${internalStatusBadge(tid)}
          ${whoAnsweredBadge(lastComment)}
        </div>
        <div class="detail-title">#${num} ${esc(task.name)}</div>
        <div class="detail-author">${esc(abbrevName(authorName))}${task.clientname||task.organization?` · ${esc(task.clientname||task.organization)}`:''}</div>
      </div>
      <div class="sp-header-actions">
        <button class="sp-close-btn" onclick="closeModal()">×</button>
      </div>
    </div>
    <div class="sp-note">
    <a class="sp-ext-link" href="${TASK_URL}${num}" target="_blank" onclick="event.stopPropagation()">↗ Открыть в IntraDesk</a>
    </div>
    <div class="sp-marks">
      ${MARKS_CONFIG.map(m=>{
        const active=isMark(tid,m.key);
        return`<button class="mark-btn ${m.btnClass}${active?' mbtn-active':''}" data-mark="${m.key}" onclick="toggleMark('${tid}','${m.key}',event)">${m.btnIcon} ${m.btnLabel}</button>`;
      }).join('')}
    </div>
    ${markSetByHtml(tid)}

    

    <div class="sp-note">${noteHtml}</div>

    <div class="sp-tabs">
      <div class="detail-tab ${currentTab==='last'?'active':''}"     id="dtab-last"     onclick="switchTab('last')">Последний комментарий</div>
      <!--<div class="detail-tab ${currentTab==='comments'?'active':''}" id="dtab-comments" onclick="switchTab('comments')">💬 Наши${cnt?` (${cnt})`:''}</div>-->
      <div class="detail-tab ${currentTab==='history'?'active':''}"  id="dtab-history"  onclick="switchTab('history')">Загрузить заявку</div>
    </div>

    <div class="sp-body" id="sp-body">
      ${renderTabContent(idx,currentTab,rawDesc,lastComment)}
    </div>

    <!-- <div class="sp-composer">
      <div style="position:relative;">
        <textarea class="composer-textarea" id="composer-ta"
          placeholder="Написать комментарий... (Ctrl+Enter)" oninput="onCommentInput(this)"></textarea>
        <div class="autocomplete-popup" id="autocomplete-popup"
          style="display:none;position:absolute;bottom:100%;left:0;margin-bottom:4px;"></div>
      </div>
      <div class="composer-footer">
        <button class="composer-tool" title="@упомянуть" onclick="insertAtSymbol()">@</button>
        <button class="btn btn-primary btn-send" style="margin-left:auto;" onclick="submitComment()">Отправить</button>
      </div>
    </div> -->`;

  const ta=document.getElementById('composer-ta');
  if(ta){
    ta.addEventListener('keydown',e=>{
      if(e.ctrlKey&&e.key==='Enter'){e.preventDefault();submitComment();}
      handleAutocompleteKey(e);
    });
  }
  if(openNoteIdx===idx){
    const nta=document.getElementById('detail-note-ta');
    if(nta){nta.focus();nta.setSelectionRange(nta.value.length,nta.value.length);}
  }
}

// aliases for SSE/mentions compatibility
function renderDetailPanel(idx){renderSidePanel(idx);}
function renderModalContent(idx){renderSidePanel(idx);}
function openDetail(idx){openModal(idx);}
function closeDetail(){closeModal();}

// ── Tab content ───────────────────────────────────────────────────
function renderTabContent(idx,tab,rawDesc,lastComment){
  const {task}=allData[idx];
  const tid=String(task.id);

  if(tab==='last'){
    const org=task.clientname||task.organization||'';
    const authorName=lastComment?.username||'—';
    const created=task.createdat?new Date(task.createdat):'';
    const descHtml=rawDesc
      ?`<!--<div class="sp-section"><div class="sp-section-title">Описание</div><div class="detail-description">${sanitizeHtml(rawDesc)}</div></div>-->`:'';
    const actHtml=lastComment
      ?`<div class="sp-section"><div class="sp-section-title">Последняя активность</div>
          <div class="last-activity-item">
            <div class="la-avatar" style="background:${avatarColor(authorName)};">${avatarInitials(authorName)}</div>
            <div>
              <div><span class="la-name">${esc(abbrevName(authorName))}</span><span class="la-time">${timeAgo(new Date(lastComment.eventat))}</span></div>
              <div class="la-text">${esc(stripHtml(lastComment.text||'').slice(0,180))}</div>
            </div>
          </div>
        </div>`:'';
    const executorName      = task._executorname      || '';
    const executorGroupName = task._executorgroupname || '';
    return`
      <div class="sp-section">
        <div class="detail-meta-grid">
          <!-- ${org?`<div class="detail-meta-row"><span class="detail-meta-label">Клиент</span><span class="detail-meta-val"><span class="client-dot"></span>${esc(org)}</span></div>`:''}
          ${created?`<div class="detail-meta-row"><span class="detail-meta-label">Создана</span><span class="detail-meta-val">${fmtDate(created)}</span></div>`:''}
          <div class="detail-meta-row"><span class="detail-meta-label">Кто ответил</span>${whoAnsweredBadge(lastComment)}</div>
          <div class="detail-meta-row"><span class="detail-meta-label">Статус</span>${internalStatusBadge(tid)}</div> -->
          ${executorGroupName?`<div class="detail-meta-row"><span class="detail-meta-label">Группа</span><span class="detail-meta-val">👥 ${esc(executorGroupName)}</span></div>`:''}
          ${executorName?`<div class="detail-meta-row"><span class="detail-meta-label">Исполнитель</span><span class="detail-meta-val">👤 ${esc(executorName)}</span></div>`:''}
        </div>
      </div>
      ${descHtml}${actHtml}`;
  }
  if(tab==='comments'){
    return renderCommentsHtml(tid,commentsCache[tid]||[]);
  }
  if(tab==='history'){
    setTimeout(()=>loadAndRenderHistory(idx,'sp-body'),10);
    return`<div class="state-box" style="padding:28px 0;"><div class="spinner" style="width:20px;height:20px;margin-bottom:8px;"></div><div class="msg" style="font-size:12px;">Загружаю историю...</div></div>`;
  }
  return'';
}

function switchTab(tab){
  currentTab=tab;
  if(currentModalIdx===null) return;
  ['last','comments','history'].forEach(t=>document.getElementById(`dtab-${t}`)?.classList.toggle('active',t===tab));
  const {task}=allData[currentModalIdx];
  const rawDesc=task.description||task.descriptionhtml||task.body||task.text||'';
  const sb=document.getElementById('sp-body');
  if(sb) sb.innerHTML=renderTabContent(currentModalIdx,tab,rawDesc,allData[currentModalIdx].lastComment);
}

// ── Comments ──────────────────────────────────────────────────────
function renderCommentsHtml(tid,comments){
  if(!comments.length) return`<div style="padding:20px 0;text-align:center;color:var(--text3);font-size:12px;">Комментариев нет. Напишите первый!</div>`;
  return`<div style="display:flex;flex-direction:column;gap:8px;">
    ${comments.map(c=>{
      const own=c.author===currentUser.username;
      const canEdit=own||currentUser.is_admin;
      const te=c.text.replace(/\\/g,'\\\\').replace(/'/g,"\\'").replace(/\n/g,'\\n');
      return`<div class="detail-comment ${own?'own':''}" id="cmt-${c.id}">
        <div class="dc-header">
          <div class="client-avatar" style="background:${avatarColor(c.author)};color:#fff;width:20px;height:20px;font-size:8px;flex-shrink:0;">${avatarInitials(c.author)}</div>
          <span class="dc-author">${esc(abbrevName(c.author))}</span>
          <span class="dc-time">${fmtDate(new Date(c.created_at))}</span>
          ${c.updated_at?`<span class="dc-edited">(ред.)</span>`:''}
        </div>
        <div class="dc-text" id="cmt-text-${c.id}">${renderMentions(c.text)}</div>
        ${canEdit?`<div class="dc-actions">
          <span class="dc-btn" onclick="startEditComment(${c.id},'${te}')">✎ Ред.</span>
          <span class="dc-btn del" onclick="deleteComment(${c.id},'${tid}')">✕ Удалить</span>
        </div>`:''}
        <div id="cmt-edit-${c.id}" style="display:none;margin-top:6px;flex-direction:column;gap:5px;">
          <textarea style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:12px;padding:7px;outline:none;resize:vertical;min-height:54px;" id="cmt-edit-ta-${c.id}"></textarea>
          <div style="display:flex;gap:5px;">
            <button class="btn btn-primary" style="font-size:11px;padding:4px 10px;" onclick="saveEditComment(${c.id},'${tid}')">Сохранить</button>
            <button class="btn btn-default" style="font-size:11px;padding:4px 10px;" onclick="cancelEditComment(${c.id})">Отмена</button>
          </div>
        </div>
      </div>`;
    }).join('')}
  </div>`;
}

async function loadAndRenderHistory(idx,containerId){
  const {task}=allData[idx];
  const tid=String(task.id);
  const res=await apiGet(`/api/tasks/history/${tid}`);
  if(currentModalIdx!==idx||currentTab!=='history') return;
  const el=document.getElementById(containerId);
  if(!el) return;
  const entries=res?.entries||[];
  if(!entries.length){el.innerHTML=`<div style="padding:20px 0;text-align:center;color:var(--text3);font-size:12px;">История пуста</div>`;return;}
  const rawDesc=task.description||task.descriptionhtml||task.body||task.text||'';
  let db='';
  if(rawDesc) db=`<div class="history-entry"><div class="sp-section-title" style="margin-bottom:5px;">Описание</div><div class="he-text">${sanitizeHtml(rawDesc)}</div></div>`;
  const items=entries.map(entry=>{
    const staff=entry.usertype===10;
    const evHtml=(entry.events?.data||[]).map(ev=>{
      const tn=EVENT_TYPE_NAMES[ev.type]||`тип ${ev.type}`;
      const isCmt=COMMENT_TYPES.has(ev.type);
      let body='';
      if(isCmt&&ev.stringvalue)          body=`<div class="he-text" style="margin-top:3px;">${sanitizeHtml(ev.stringvalue)}</div>`;
      else if(ev.type===10&&ev.entitylanguagevalue) body=`<div class="he-pill">«${esc(ev.entitylanguagevalue.valueold?.name?.ru||'?')}» → «${esc(ev.entitylanguagevalue.valuenew?.name?.ru||'?')}»</div>`;
      else if(ev.entityvalue)            body=`<div class="he-pill">«${esc(ev.entityvalue.valueold?.name||'?')}» → «${esc(ev.entityvalue.valuenew?.name||'?')}»</div>`;
      return`<div style="margin-bottom:3px;"><div class="he-type ${isCmt?'comment':''}">${esc(tn)}</div>${body}</div>`;
    }).join('');
    return`<div class="history-entry">
      <div class="he-header">
        <div class="client-avatar" style="background:${avatarColor(entry.username)};color:#fff;width:22px;height:22px;font-size:8px;flex-shrink:0;">${avatarInitials(entry.username)}</div>
        <span class="he-author ${staff?'staff':'client'}">${esc(abbrevName(entry.username))}</span>
        <span class="he-time">${new Date(entry.eventat).toLocaleString('ru-RU')} · ${timeAgo(new Date(entry.eventat))}</span>
      </div>${evHtml}
    </div>`;
  }).join('');
  el.innerHTML=`${db}<div style="font-size:10px;color:var(--text3);padding:4px 0 8px;">Событий: ${entries.length}</div>${items}`;
}

// ── Submit comment ────────────────────────────────────────────────
async function submitComment(){
  if(currentModalIdx===null) return;
  const ta=document.getElementById('composer-ta');
  const text=ta?.value?.trim();
  if(!text) return;
  const tid=String(allData[currentModalIdx].task.id);
  ta.disabled=true;
  const r=await apiPost('/api/comments',{task_id:tid,text});
  if(r?.id){
    if(!commentsCache[tid]) commentsCache[tid]=[];
    commentsCache[tid].push(r);
    if(typeof commentCounts==='object') commentCounts[tid]=commentsCache[tid].length;
    ta.value='';
    if(currentTab==='comments'){
      const sb=document.getElementById('sp-body');
      if(sb) sb.innerHTML=renderCommentsHtml(tid,commentsCache[tid]);
    }
    const dt=document.getElementById('dtab-comments');
    if(dt) dt.textContent=`💬 Наши (${commentsCache[tid].length})`;
    renderTable();
  } else showToast('❌ Ошибка отправки','warn');
  ta.disabled=false;
}
// alias
function submitCommentFromModal(){submitComment();}

function insertAtSymbol(){
  const ta=document.getElementById('composer-ta');
  if(!ta) return;
  const p=ta.selectionStart;
  ta.value=ta.value.slice(0,p)+'@'+ta.value.slice(p);
  ta.selectionStart=ta.selectionEnd=p+1;
  ta.focus(); onCommentInput(ta);
}

// ── Note editor ───────────────────────────────────────────────────
function openNoteEditor(idx,e){
  e&&e.stopPropagation();
  openNoteIdx=openNoteIdx===idx?null:idx;
  if(currentModalIdx===idx) renderSidePanel(idx);
  else renderTable();
}
function closeNoteEditor(){
  openNoteIdx=null;
  if(currentModalIdx!==null) renderSidePanel(currentModalIdx);
  else renderTable();
}
async function saveNoteAndClose(idx,e){
  e&&e.stopPropagation();
  const ta=document.getElementById('detail-note-ta');
  const tid=String(allData[idx].task.id);
  const text=ta?ta.value:'';
  if(text.trim()) notesCache[tid]={text:text.trim(),by:currentUser.username,at:new Date().toISOString()};
  else delete notesCache[tid];
  openNoteIdx=null;
  if(currentModalIdx===idx) renderSidePanel(idx);
  renderTable();
  const r=await apiPost('/api/notes',{task_id:tid,text});
  if(r&&!r.ok&&r.error) showToast('❌ '+r.error,'warn');
}

// ── Settings ──────────────────────────────────────────────────────
function openSettingsModal(){document.getElementById('settings-modal')?.classList.add('open');}
function closeSettingsModal(){document.getElementById('settings-modal')?.classList.remove('open');}

// ── SSE refresh ───────────────────────────────────────────────────
function refreshDetailIfOpen(tid){
  if(currentModalIdx===null) return;
  if(String(allData[currentModalIdx].task.id)!==String(tid)) return;
  renderSidePanel(currentModalIdx);
  if(currentTab==='comments'){
    const sb=document.getElementById('sp-body');
    if(sb) sb.innerHTML=renderCommentsHtml(tid,commentsCache[tid]||[]);
  }
}

// Инициализация динамических чипов и bulk-select при загрузке DOM
document.addEventListener('DOMContentLoaded', () => {
  initMarkChips();
  syncChipDropdownItems();
  // Close chip dropdown on outside click
  document.addEventListener('click', e => {
    if (!e.target.closest('#chip-dropdown-wrap')) {
      document.getElementById('chip-dropdown-panel')?.classList.remove('chip-dd-open');
    }
  });
});