{% extends 'shared/frontend/base.html' %}
{% block title %}Tagklassifikation – BMC Hub{% endblock %}
{% block extra_css %}{% include 'workflows/frontend/_style.html' %}
<style>
.workflow-page .classification-tree{max-height:60vh;overflow:auto}.workflow-page .rule{display:grid!important;grid-template-columns:150px minmax(130px,1fr) minmax(130px,1fr) 85px 32px;align-items:center}.workflow-page .rule .btn{padding:.3rem}.workflow-page #history{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.78rem}@media(max-width:767px){.workflow-page .rule{grid-template-columns:1fr 1fr}.workflow-page .rule .words,.workflow-page .rule .negatives{grid-column:1 / -1}.workflow-page .classification-tree{max-height:280px}}
</style>{% endblock %}
{% block content %}
<div class="workflow-page">
 <header class="workflow-heading"><div><div class="workflow-eyebrow">Automatisering</div><h1><i class="bi bi-tags me-2"></i>Tagklassifikation</h1><p>Organisér tags, vedligehold nøgleord og gennemgå automatiske forslag.</p></div><a class="btn btn-sm btn-outline-secondary" href="/tags"><i class="bi bi-arrow-left me-1"></i>Tagadministration</a></header>
 {% include 'workflows/frontend/_nav.html' %}
 <div id="notice" role="status" aria-live="polite" class="my-2"></div>
 <div class="row g-3">
  <aside class="col-lg-4"><section class="card p-3"><label for="search" class="mb-1">Søg tag eller overtag</label><input id="search" class="form-control mb-3" placeholder="Fx Excel eller Microsoft"><div id="tree" class="list-group classification-tree" aria-label="Taghierarki"><div class="workflow-empty">Henter tags…</div></div></section></aside>
  <section class="col-lg-8"><div class="card p-3"><h5 id="selected">Vælg et tag i oversigten</h5><p class="small text-muted">Overtagets regler kan omfatte alle undertags. Kun det konkrete tag behøver at være tildelt.</p>
   <form id="edit" hidden><div class="row g-2"><div class="col-md-7"><label for="parent">Overtag</label><select id="parent" class="form-select"></select></div><div class="col-md-5"><label for="visibility">Synlighed</label><select id="visibility" class="form-select"><option value="public">Offentlig</option><option value="internal">Intern</option></select></div></div><label class="my-3"><input id="billing" type="checkbox" class="form-check-input me-1"> Kan påvirke afregning</label><div><button type="submit" class="btn btn-primary">Gem hierarki</button></div></form>
   <div id="keywordsPanel" hidden class="mt-3 border-top pt-3"><h5>Nøgleordsregler</h5><p class="small text-muted">En regel pr. række. Adskil alternative og negative ord med komma. Laveste prioritet behandles først.</p><div id="keywords"></div><div class="workflow-actions mt-2"><button type="button" id="addRule" class="btn btn-outline-secondary"><i class="bi bi-plus me-1"></i>Tilføj regel</button><button type="button" id="saveRules" class="btn btn-primary">Gem regler</button></div></div>
  </div></section>
 </div>
 <section class="card p-3 mt-3"><h5>Forslag og historik</h5><p class="small text-muted">Vælg sag, tid eller mail og indtast dens ID. Godkend eller afvis forslag med en begrundelse.</p><div class="row g-2 align-items-end"><div class="col-sm-4 col-lg-3"><label for="entityType">Område</label><select id="entityType" class="form-select"><option value="time_entry">Tidsregistrering</option><option value="case">Sag</option><option value="email">Mail</option></select></div><div class="col-sm-4 col-lg-3"><label for="entityId">ID</label><input id="entityId" type="number" min="1" class="form-control" placeholder="Fx 4521"></div><div class="col-sm-4"><button type="button" id="loadProposals" class="btn btn-outline-primary">Vis forslag</button></div></div><div id="proposals" class="mt-3"><div class="workflow-empty">Vælg et område og et ID for at se forslag.</div></div><details class="mt-3"><summary>Taghistorik</summary><div id="history" class="mt-2">Vælg data ovenfor.</div></details></section>
</div>
{% endblock %}
{% block extra_js %}
<script>
const root='/api/v1/tags/classification';let tags=[],selected=null;
const el=id=>document.getElementById(id);const esc=v=>String(v??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
async function api(path,method='GET',body){const r=await fetch(root+path,{method,headers:{'Content-Type':'application/json'},...(body!==undefined?{body:JSON.stringify(body)}:{})});const data=await r.json();if(!r.ok)throw Error(data.detail||'Kunne ikke gemme');return data}
function report(error){el('notice').textContent=error.message||error;el('notice').className='alert alert-danger';}function saved(text){el('notice').textContent=text;el('notice').className='alert alert-success';}
function label(t){let path=[t.name],seen=new Set([t.id]),p=t.parent_id;while(p){let parent=tags.find(x=>x.id===p);if(!parent||seen.has(p))break;seen.add(p);path.unshift(parent.name);p=parent.parent_id}return path.join(' / ')}
function renderTree(){const q=el('search').value.toLowerCase();el('tree').innerHTML=tags.filter(t=>label(t).toLowerCase().includes(q)).map(t=>`<button class="list-group-item list-group-item-action" data-id="${t.id}">${esc(label(t))}</button>`).join('')||'<div class="workflow-empty">Ingen tags matcher søgningen.</div>';el('tree').querySelectorAll('button').forEach(b=>b.onclick=()=>selectTag(Number(b.dataset.id)).catch(report))}
async function selectTag(id){selected=tags.find(t=>t.id===id);el('selected').textContent=label(selected);el('edit').hidden=false;el('keywordsPanel').hidden=false;el('parent').innerHTML='<option value="">Intet overtag</option>'+tags.filter(t=>t.id!==id).map(t=>`<option value="${t.id}">${esc(label(t))}</option>`).join('');el('parent').value=selected.parent_id||'';el('visibility').value=selected.visibility;el('billing').checked=selected.billing_relevant;el('keywords').innerHTML='';(await api('/keywords/'+id)).forEach(addRule)}
function addRule(rule={}){const row=document.createElement('div');row.className='rule d-flex gap-1 mb-2';row.innerHTML=`<select class="form-select mode"><option value="contains">Indeholder</option><option value="exact">Eksakt tekst</option><option value="whole_word">Hele ord</option></select><input class="form-control words" aria-label="Alternative ord" placeholder="Alternative ord" value="${esc((rule.alternatives||[]).join(', '))}"><input class="form-control negatives" aria-label="Negative ord" placeholder="Negative ord" value="${esc((rule.negative_words||[]).join(', '))}"><input class="form-control priority" aria-label="Prioritet" type="number" value="${rule.priority??100}" style="width:85px"><button class="btn btn-outline-danger" aria-label="Fjern regel">×</button>`;row.querySelector('.mode').value=rule.mode||'contains';row.querySelector('button').onclick=()=>row.remove();el('keywords').append(row)}
el('search').oninput=renderTree;el('addRule').onclick=()=>addRule();
el('edit').onsubmit=async e=>{e.preventDefault();try{await api('/hierarchy/'+selected.id,'PUT',{parent_id:el('parent').value?Number(el('parent').value):null,visibility:el('visibility').value,billing_relevant:el('billing').checked});tags=await api('/hierarchy');renderTree();await selectTag(selected.id);saved('Hierarki gemt.')}catch(err){report(err)}};
el('saveRules').onclick=async()=>{try{const split=v=>v.split(',').map(x=>x.trim()).filter(Boolean);await api('/keywords/'+selected.id,'PUT',[...el('keywords').children].map(r=>({mode:r.querySelector('.mode').value,alternatives:split(r.querySelector('.words').value),negative_words:split(r.querySelector('.negatives').value),priority:Number(r.querySelector('.priority').value)})));saved('Nøgleordsregler gemt.')}catch(err){report(err)}};
async function loadProposals(){if(!Number.isInteger(Number(el('entityId').value))||Number(el('entityId').value)<=0)throw Error('Angiv et gyldigt ID');const suffix='/'+el('entityType').value+'/'+Number(el('entityId').value);const rows=await api('/proposals'+suffix);el('proposals').innerHTML=rows.map(p=>`<div class="card p-2 mb-2"><strong>${esc(tags.find(t=>t.id===p.tag_id)?.name||p.tag_id)} · ${esc(p.status)} · ${esc(p.confidence)}%</strong><span>${esc(p.explanation)}</span>${['pending','manual_review'].includes(p.status)?`<input class="form-control reason" placeholder="Begrundelse" aria-label="Begrundelse"><div><button class="btn btn-success" data-id="${p.id}" data-approve="true">Godkend</button> <button class="btn btn-outline-danger" data-id="${p.id}" data-approve="false">Afvis</button></div>`:''}</div>`).join('')||'<div class="workflow-empty">Ingen klassifikationsforslag for de valgte data.</div>';el('proposals').querySelectorAll('button').forEach(b=>b.onclick=async()=>{try{const reason=b.closest('.card').querySelector('.reason').value.trim();if(!reason)throw Error('Angiv en begrundelse');await api('/proposals/'+b.dataset.id+'/review','POST',{approve:b.dataset.approve==='true',reason});await loadProposals()}catch(err){report(err)}});el('history').textContent=JSON.stringify(await api('/history'+suffix),null,2)}
el('loadProposals').onclick=async()=>{const button=el('loadProposals');button.disabled=true;try{await loadProposals()}catch(e){report(e)}finally{button.disabled=false}};el('entityId').onkeydown=e=>{if(e.key==='Enter')el('loadProposals').click()};api('/hierarchy').then(data=>{tags=data;renderTree()}).catch(report);
</script>
{% endblock %}