{% 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:65vh}.classification-tree .list-group-item{padding:.55rem .75rem;border:0;border-bottom:1px solid var(--bs-border-color);background:var(--bg-card);color:var(--text-primary)}
.classification-tree .list-group-item.active{background:var(--accent-light);color:var(--accent);border-left:3px solid var(--accent);font-weight:600}
.tag-parent{display:block;font-size:.75rem;color:var(--text-secondary);font-weight:400}
.tag-settings summary,.rule-advanced summary{cursor:pointer;color:var(--text-secondary);font-size:.82rem}
.workflow-page .rule{display:block!important;padding:.75rem;border:1px solid var(--bs-border-color);border-radius:.6rem;background:var(--bg-card)}
.rule-main{display:flex;align-items:center;gap:.5rem}.rule-main .words{flex:1}.rule-advanced{margin-top:.4rem}.rule-options{display:grid;grid-template-columns:1fr 2fr 90px;gap:.5rem;margin-top:.5rem}.rule-options label{font-size:.75rem;color:var(--text-secondary)}
#saveRules{min-width:150px}.tag-settings{margin-bottom:.75rem}
@media(max-width:767px){.rule-options{grid-template-columns:1fr}.workflow-page .classification-tree{max-height:250px}}

.workflow-page #history{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.78rem}
</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>Vælg et tag, tilføj de ord der skal finde det, og gem.</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' %}
 <section class="card p-3 mb-3 classification-guide" aria-label="Sådan bruges tagklassifikation">
  <h2 class="h5">Hjælp systemet med at foreslå de rigtige tags</h2>
  <p class="small mb-2">Her bestemmer du, hvilke ord systemet skal genkende i tekst på sager, tidsregistreringer og mails. Tags gør det lettere at finde og sortere arbejdet og kan indgå i workflows.</p>
  <div class="row g-3 small">
   <div class="col-md-4"><strong>1. Find et tag</strong><div class="text-muted">Søg til venstre, og vælg fx “Printer”. Tagget skal være oprettet i <a href="/tags">Tagadministration</a>.</div></div>
   <div class="col-md-4"><strong>2. Tilføj nøgleord og gem</strong><div class="text-muted">Skriv fx “printer, udskrivning, papir”. Ét af ordene er nok til at matche. Afprøv en tekst, og vælg “Gem ændringer”.</div></div>
   <div class="col-md-4"><strong>3. Gennemgå forslag</strong><div class="text-muted">Under “Forslag” vælger du sag, tid eller mail og indtaster dens ID. Her kan du godkende eller afvise eksisterende forslag.</div></div>
  </div>
  <details class="mt-2 small"><summary>Eksempel og forskellen på tags og afregning</summary>
   <p class="mt-2 mb-2">Teksten “Printeren vil ikke udskrive” matcher nøgleordet “printer” og kan give tagget “Printer”. “Afprøv” tester kun teksten i feltet; den ændrer ikke en sag og opretter ikke et forslag.</p>
   <p class="mb-2">Nøgleord bruges, når systemets klassifikation kører. At gemme her starter ikke en gennemgang af alle eksisterende sager, timer eller mails. Om et match tilføjes automatisk eller kræver gennemgang, afhænger af klassifikationsforløbet.</p>
   <p class="mb-0">Denne side vælger ikke fastpris, klippekort eller faktura. Det styres af aftalernes dækning og <a href="/workflows">workflowregler</a>. “Kan påvirke afregning” markerer et tag som relevant for afregning; det opretter ikke en afregningsregel.</p>
  </details>
 </section>
 <div class="btn-group mb-3" aria-label="Visning"><button class="btn btn-primary classification-tab" data-panel="tagWorkspace">Tags og nøgleord</button><button class="btn btn-outline-primary classification-tab" data-panel="proposalWorkspace">Forslag</button></div>
 <div id="notice" role="status" aria-live="polite" class="my-2"></div>
 <div class="row g-3" id="tagWorkspace">
  <aside class="col-lg-4"><section class="card p-3"><label for="search" class="mb-1">Find tag</label><input id="search" class="form-control mb-3" placeholder="Skriv et tagnavn…"><div id="tagCount" class="small text-muted mb-2"></div><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 id="tagHint" class="small text-muted">Find et tag til venstre for at redigere dets nøgleord.</p>
   <form id="edit" hidden><details class="tag-settings"><summary>Tagindstillinger: overtag, synlighed og afregning</summary><div class="row g-2 mt-2"><div class="col-md-7"><label for="parent">Overtag (valgfrit)</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><p class="small text-muted">Et overtag grupperer beslægtede tags. Fx Microsoft → Excel. Afregningsregler kan også omfatte undertags.</p></details></form>
   <div id="keywordsPanel" hidden class="mt-3 border-top pt-3"><h5>Hvornår skal tagget foreslås?</h5><p class="small text-muted">Skriv ord eller udtryk, adskilt med komma. Fx: printer, udskrivning, papir.</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 flere nøgleord</button><button type="button" id="saveRules" class="btn btn-primary">Gem ændringer</button></div><div class="mt-3"><label for="testText" class="form-label small">Prøv med en tekst</label><div class="d-flex gap-2"><input id="testText" class="form-control" placeholder="Fx printeren vil ikke udskrive"><button id="testRules" class="btn btn-outline-primary" type="button">Afprøv</button></div><div id="testResult" class="small mt-2" role="status"></div></div></div>
  </div></section>
 </div>
 <section id="proposalWorkspace" hidden class="card p-3"><h5>Forslag og historik</h5><p class="small text-muted">Gennemgå forslag, som systemet allerede har oprettet. Vælg område og indtast ID’et fra sagen, tidsregistreringen eller mailen. Skriv en begrundelse, før du godkender eller afviser.</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,dirty=false,selectionGeneration=0,saving=false;
function markDirty(){dirty=true;el('saveRules').textContent='Gem ændringer';}
window.addEventListener('beforeunload',e=>{if(dirty){e.preventDefault();e.returnValue='';}});
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.toLocaleLowerCase('da-DK');const rows=tags.filter(t=>label(t).toLocaleLowerCase('da-DK').includes(q));el('tagCount').textContent=rows.length+' tags';el('tree').innerHTML=rows.map(t=>`<button type="button" class="list-group-item list-group-item-action ${selected?.id===t.id?'active':''}" data-id="${t.id}" aria-pressed="${selected?.id===t.id}">${esc(t.name)}${t.parent_id?`<span class="tag-parent">${esc(label(t).split(' / ').slice(0,-1).join(' / '))}</span>`:''}</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){if(saving)return;if(dirty&&!confirm('Du har ændringer, som ikke er gemt. Vil du skifte tag og kassere dem?'))return;const generation=++selectionGeneration;selected=tags.find(t=>t.id===id);dirty=false;renderTree();el('selected').textContent=selected.name;el('tagHint').textContent='Nøgleord foreslår dette tag, når de findes i teksten.';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='Henter nøgleord…';el('saveRules').disabled=true;el('addRule').disabled=true;el('testResult').textContent='';try{const rules=await api('/keywords/'+id);if(generation!==selectionGeneration)return;el('keywords').innerHTML='';rules.forEach(addRule);if(!rules.length)addRule();dirty=false;el('saveRules').textContent='Gem ændringer';el('saveRules').disabled=false;el('addRule').disabled=false;}catch(error){if(generation===selectionGeneration)el('keywords').textContent='Nøgleord kunne ikke hentes. Vælg tagget igen for at prøve på ny.';throw error;}}
function addRule(rule={}){const row=document.createElement('div');row.className='rule mb-2';row.innerHTML=`<div class="rule-main"><input class="form-control words" aria-label="Nøgleord" placeholder="Fx printer, udskrivning, papir" value="${esc((rule.alternatives||[]).join(', '))}"><button type="button" class="btn btn-outline-secondary" aria-label="Fjern nøgleordsregel">×</button></div><details class="rule-advanced"><summary>Avanceret: undtagelser og match</summary><div class="rule-options"><label>Match<select class="form-select mode"><option value="contains">Indeholder teksten</option><option value="exact">Præcis samme tekst</option><option value="whole_word">Kun hele ord</option></select></label><label>Foreslå ikke ved disse ord<input class="form-control negatives" aria-label="Negative ord" placeholder="Fx toner, bestilling" value="${esc((rule.negative_words||[]).join(', '))}"></label><label>Prioritet<input class="form-control priority" aria-label="Prioritet" type="number" value="${Number(rule.priority??100)}"></label></div></details>`;row.querySelector('.mode').value=rule.mode||'contains';row.querySelector('button').onclick=()=>{row.remove();markDirty();};row.oninput=markDirty;row.onchange=markDirty;el('keywords').append(row)}
function rulePayload(){const split=v=>v.split(',').map(x=>x.trim()).filter(Boolean);return [...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)})).filter(r=>r.alternatives.length)}
el('search').oninput=renderTree;el('addRule').onclick=()=>{addRule();markDirty();el('keywords').lastElementChild.querySelector('.words').focus();};el('edit').onchange=markDirty;
el('edit').onsubmit=e=>{e.preventDefault();el('saveRules').click();};
el('saveRules').onclick=async()=>{const button=el('saveRules'),id=selected?.id;if(!id||saving)return;saving=true;el('edit').inert=true;el('keywordsPanel').inert=true;button.disabled=true;el('addRule').disabled=true;const rules=rulePayload(),hierarchy={parent_id:el('parent').value?Number(el('parent').value):null,visibility:el('visibility').value,billing_relevant:el('billing').checked};let hierarchySaved=false;try{await api('/hierarchy/'+id,'PUT',hierarchy);hierarchySaved=true;await api('/keywords/'+id,'PUT',rules);Object.assign(tags.find(t=>t.id===id),hierarchy);dirty=false;renderTree();saved('Ændringer gemt for '+selected.name+'.');button.textContent='Gemt';}catch(err){report(hierarchySaved?'Tagindstillingerne blev gemt, men nøgleordene blev ikke gemt. '+err.message:err);}finally{saving=false;el('edit').inert=false;el('keywordsPanel').inert=false;button.disabled=false;el('addRule').disabled=false;}};
el('testRules').onclick=()=>{const text=el('testText').value.toLocaleLowerCase('da-DK');if(!text.trim()){el('testResult').textContent='Skriv en tekst først.';return;}const matches=rulePayload().some(r=>{const match=word=>{word=word.toLocaleLowerCase('da-DK');if(r.mode==='exact')return text.trim()===word;if(r.mode==='whole_word'){const escape=v=>v.replace(/[.*+?^${}()|[\]\\]/g,'\\$&');return new RegExp('(^|[^\\p{L}\\p{N}_])'+escape(word)+'($|[^\\p{L}\\p{N}_])','u').test(text);}return text.includes(word);};return r.alternatives.some(match)&&!r.negative_words.some(match);});el('testResult').textContent=(matches?'Matcher: '+selected.name:'Ingen match for '+selected.name)+'. Test af felterne ovenfor – intet gemmes.';};
document.querySelectorAll('.classification-tab').forEach(button=>button.onclick=()=>{for(const id of ['tagWorkspace','proposalWorkspace'])el(id).hidden=id!==button.dataset.panel;document.querySelectorAll('.classification-tab').forEach(b=>{b.classList.toggle('btn-primary',b===button);b.classList.toggle('btn-outline-primary',b!==button);});});
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 %}