/* Interfaz: router por hash + vistas. Solo habla con Api (js/api.js). */
const $=s=>document.querySelector(s);
const esc=s=>String(s??'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
const fmt=d=>new Date(d).toLocaleString('es-MX',{day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit',hour12:false}).replace(',','');
const slug=s=>s.toLowerCase().replace(/ /g,'-'),badge=e=>`<span class="b e-${slug(e)}">${e}</span>`,prio=p=>`<span class="p p-${slug(p)}">${p}</span>`;
const title=t=>{$('#title').textContent=t;document.title=t+' · Mesa de ayuda'};
const ROLES={ADMINISTRADOR:'Administrador',TECNICO:'Técnico',SOLICITANTE:'Solicitante'},ALL=Object.keys(ROLES);
const NAV=[['dashboard','Dashboard',ALL],['mis','Mis tickets',ALL],['todos','Todos los tickets',['ADMINISTRADOR','TECNICO']],['nuevo','Nuevo ticket',ALL]];
const ABIERTOS=['NUEVO','ASIGNADO','EN PROCESO','ESPERANDO USUARIO'];
let me,cat,users;

async function init(){
 [cat,users]=await Promise.all([Api.obtenerCatalogos(),Api.obtenerUsuarios()]);me=users[0];
 $('#who').innerHTML=users.map(u=>`<option value="${u.id}">${esc(u.nombre)} · ${ROLES[u.rol]}</option>`).join('');
 $('#who').onchange=e=>{me=users.find(u=>u.id==e.target.value);route()};
 $('#burger').onclick=()=>document.body.classList.toggle('menu');$('#scrim').onclick=()=>document.body.classList.remove('menu');
 addEventListener('hashchange',route);route();
}
async function route(){
 document.body.classList.remove('menu');
 const [p,id]=(location.hash.slice(2)||'dashboard').split('/');
 const views={dashboard,mis:()=>lista('mis'),todos:()=>lista('todos'),nuevo,ticket:()=>detalle(+id)};
 const n=NAV.find(x=>x[0]==p);
 if(!views[p]||(p!='ticket'&&!n[2].includes(me.rol))){location.hash='#/dashboard';return}
 $('#nav').innerHTML=NAV.filter(x=>x[2].includes(me.rol)).map(x=>`<a href="#/${x[0]}" class="${x[0]==p?'on':''}">${x[1]}</a>`).join('');
 await views[p]();
}
const tabla=(ts,full)=>!ts.length?'<p class="empty">No hay tickets con estos criterios. Cambia los filtros o crea uno nuevo.</p>':
`<div class="scroll"><table><thead><tr><th>Folio<th>Asunto${full?'<th>Usuario<th>Área<th>Categoría':''}<th>Prioridad${full?'<th>Responsable':''}<th>Estado<th>Creado${full?'<th>Actualizado':''}</tr></thead><tbody>${ts.map(t=>`<tr><td><a href="#/ticket/${t.id}">${t.folio}</a><td>${esc(t.asunto)}${full?`<td>${esc(t.solicitante)}<td>${esc(t.area)}<td>${esc(t.categoria)}`:''}<td>${prio(t.prioridad)}${full?`<td>${esc(t.responsable||'Sin asignar')}`:''}<td>${badge(t.estado)}<td>${fmt(t.creado)}${full?`<td>${fmt(t.actualizado)}`:''}`).join('')}</tbody></table></div>`;

async function dashboard(){
 title('Dashboard');const t=await Api.obtenerTickets({alcance:'todos',usuario:me});
 const n=e=>t.filter(x=>x.estado==e).length;
 const k=[['Nuevos',n('NUEVO')],['Asignados',n('ASIGNADO')],['En proceso',n('EN PROCESO')],['Esperando usuario',n('ESPERANDO USUARIO')],['Resueltos',n('RESUELTO')],['Cerrados',n('CERRADO')],['Abiertos',t.filter(x=>ABIERTOS.includes(x.estado)).length]];
 $('#view').innerHTML=`<section class="kpis">${k.map(([l,v],i)=>`<a class="kpi${i==6?' hi':''}" href="#/${me.rol=='SOLICITANTE'?'mis':'todos'}"><b>${v}</b><span>${l}</span></a>`).join('')}</section><section class="panel"><h2>Tickets recientes</h2>${tabla(t.slice(0,6),me.rol!='SOLICITANTE')}</section>`;
}
async function lista(al){
 title(al=='mis'?'Mis tickets':'Todos los tickets');const all=await Api.obtenerTickets({alcance:al,usuario:me});
 const opt=(a,k,l)=>`<select data-f="${k}" aria-label="${l}"><option value="">${l}</option>${a.map(x=>`<option>${x}</option>`).join('')}</select>`;
 $('#view').innerHTML=`<section class="panel"><div class="filters"><input id="q" type="search" placeholder="Buscar por folio, asunto o usuario">${opt(cat.estados,'estado','Todos los estados')}${opt(cat.prioridades,'prioridad','Todas las prioridades')}${opt(cat.categorias,'categoria','Todas las categorías')}</div><div id="tb"></div></section>`;
 const draw=()=>{const q=$('#q').value.toLowerCase(),f={};document.querySelectorAll('[data-f]').forEach(s=>f[s.dataset.f]=s.value);
  $('#tb').innerHTML=tabla(all.filter(t=>(!q||(t.folio+t.asunto+t.solicitante).toLowerCase().includes(q))&&Object.keys(f).every(k=>!f[k]||t[k]==f[k])),al=='todos')};
 document.querySelector('.filters').oninput=draw;draw();
}
async function nuevo(){
 title('Nuevo ticket');const sel=(id,a)=>`<select id="${id}">${a.map(x=>`<option>${x}</option>`).join('')}</select>`;
 $('#view').innerHTML=`<form class="panel" id="f"><div class="g2"><label>Folio<input value="Automático al guardar" disabled></label>
 <label>Usuario solicitante<select id="sol" ${me.rol=='ADMINISTRADOR'?'':'disabled'}>${users.map(u=>`<option value="${u.id}" ${u.id==me.id?'selected':''}>${esc(u.nombre)}</option>`).join('')}</select></label>
 <label class="w">Asunto<input id="asu" required maxlength="120"></label><label class="w">Descripción<textarea id="des" rows="5" required></textarea></label>
 <label>Categoría${sel('cat',cat.categorias)}</label><label>Prioridad${sel('pri',cat.prioridades)}</label><label>Área${sel('are',cat.areas)}</label>
 <label class="w">Archivos adjuntos<input id="fil" type="file" multiple></label></div><div class="bar"><button class="btn">Crear ticket</button><a class="btn alt" href="#/mis">Cancelar</a></div></form>`;
 $('#pri').value='Media';$('#are').value=me.area;
 $('#f').onsubmit=async e=>{e.preventDefault();
  const t=await Api.crearTicket({asunto:$('#asu').value,descripcion:$('#des').value,categoria:$('#cat').value,prioridad:$('#pri').value,area:$('#are').value,solicitanteId:+$('#sol').value});
  for(const f of $('#fil').files)await Api.agregarArchivo(t.id,{nombre:f.name,tamano:f.size},me);
  location.hash='#/ticket/'+t.id};
}
async function detalle(id){
 const [t,com,his,arc]=await Promise.all([Api.obtenerTicket(id),Api.obtenerComentarios(id).catch(()=>[]),Api.obtenerHistorial(id).catch(()=>[]),Api.obtenerArchivos(id).catch(()=>[])]);
 title('Ticket '+(t?t.folio:''));
 if(!t||!(me.rol=='ADMINISTRADOR'||t.solicitanteId==me.id||t.responsableId==me.id)){$('#view').innerHTML='<section class="panel"><p>No tienes acceso a este ticket o no existe.</p></section>';return}
 const adm=me.rol=='ADMINISTRADOR',cambia=adm||(me.rol=='TECNICO'&&t.responsableId==me.id),dueno=t.solicitanteId==me.id&&t.estado=='RESUELTO';
 const row=(l,v)=>`<dt>${l}<dd>${v}`;
 $('#view').innerHTML=`<div class="det"><div>
 <section class="panel"><h2>${esc(t.asunto)}</h2><p>${esc(t.descripcion)}</p></section>
 <section class="panel"><h2>Conversación</h2><ul class="coms">${com.map(c=>`<li><span class="av">${esc(c.usuario[0])}</span><div><b>${esc(c.usuario)}</b> <time>${fmt(c.fecha)}</time><p>${esc(c.texto)}</p></div>`).join('')||'<li class="empty">Aún no hay comentarios.'}</ul><textarea id="ctx" rows="3" placeholder="Escribe un comentario"></textarea><div class="bar"><button class="btn" id="bCom">Agregar comentario</button></div></section>
 <section class="panel"><h2>Archivos adjuntos</h2><ul class="files">${arc.map(a=>`<li>${esc(a.nombre)} <time>${Math.max(1,Math.round(a.tamano/1024))} KB · ${esc(a.usuario)} · ${fmt(a.fecha)}</time>`).join('')||'<li class="empty">Sin archivos. Los archivos se simulan: solo se registra el nombre.'}</ul><input id="fil" type="file" multiple></section>
 <section class="panel"><h2>Historial</h2><ol class="hist">${his.map(h=>`<li><time>${fmt(h.fecha)}</time> — ${esc(h.usuario)} ${esc(h.accion)}`).join('')}</ol></section></div>
 <aside class="panel"><h2>Datos del ticket</h2><dl>${row('Estado',badge(t.estado))}${row('Prioridad',prio(t.prioridad))}${row('Solicitante',esc(t.solicitante))}${row('Área',esc(t.area))}${row('Categoría',esc(t.categoria))}${row('Responsable',esc(t.responsable||'Sin asignar'))}${row('Asignado el',t.fechaAsignacion?fmt(t.fechaAsignacion):'—')}${row('Creado',fmt(t.creado))}${row('Actualizado',fmt(t.actualizado))}</dl>
 ${adm?`<div class="act"><select id="sAsig">${users.filter(u=>u.rol=='TECNICO').map(u=>`<option value="${u.id}" ${u.id==t.responsableId?'selected':''}>${esc(u.nombre)}</option>`).join('')}</select><button class="btn alt" id="bAsig">Asignar responsable</button></div>`:''}
 ${cambia?`<div class="act"><select id="sEst">${cat.estados.map(e=>`<option ${e==t.estado?'selected':''}>${e}</option>`).join('')}</select><button class="btn" id="bEst">Cambiar estado</button></div>`:''}
 ${dueno?`<div class="act"><button class="btn" id="bCierre">Confirmar cierre</button><button class="btn alt" id="bReab">La solución no funcionó</button></div>`:''}</aside></div>`;
 const act=fn=>async()=>{await fn();detalle(id)},on=(i,fn)=>$(i)&&($(i).onclick=act(fn));
 on('#bCom',async()=>{const v=$('#ctx').value.trim();if(v)await Api.agregarComentario(id,v,me)});
 on('#bAsig',()=>Api.asignarTicket(id,+$('#sAsig').value,me));on('#bEst',()=>Api.actualizarTicket(id,{estado:$('#sEst').value},me));
 on('#bCierre',()=>Api.actualizarTicket(id,{estado:'CERRADO'},me));on('#bReab',()=>Api.actualizarTicket(id,{estado:'EN PROCESO'},me));
 $('#fil').onchange=act(async()=>{for(const f of $('#fil').files)await Api.agregarArchivo(id,{nombre:f.name,tamano:f.size},me)});
}
init();