{% extends 'shared/frontend/base.html' %}
{% block title %}Tagklassifikation – BMC Hub{% endblock %}
{% block content %}
<div class="container-fluid py-3"><h2>Taghierarki og klassifikation</h2><a href="/tags">Tilbage til tags</a>
<div id="notice" role="status" class="my-2"></div>
<div class="row mt-3"><section class="col-md-5"><label for="search">Søg tag eller overtag</label><input id="search" class="form-control" placeholder="Søg tags"><div id="tree" class="list-group mt-2" style="max-height:65vh;overflow:auto"></div></section>
<section class="col-md-7"><h3 id="selected">Vælg et tag</h3><form id="edit" hidden><label for="parent">Overtag</label><select id="parent" class="form-select"></select><label for="visibility">Synlighed</label><select id="visibility" class="form-select"><option value="public">Offentlig</option><option value="internal">Intern</option></select><label class="my-2"><input id="billing" type="checkbox"> Kan påvirke afregning</label><button class="btn btn-primary d-block">Gem hierarki</button></form>
<div id="keywordsPanel" hidden class="mt-3"><h4>Nøgleordsregler</h4><p>En regel pr. række. Alternative ord og negative ord adskilles med komma.</p><div id="keywords"></div><button id="addRule" class="btn btn-outline-secondary">Tilføj regel</button><button id="saveRules" class="btn btn-primary">Gem regler</button></div></section></div>
<hr><h3>Forslag og historik</h3><div class="d-flex gap-2"><select id="entityType" class="form-select w-auto"><option value="time_entry">Tidsregistrering</option><option value="case">Sag</option><option value="email">Mail</option></select><input id="entityId" type="number" min="1" class="form-control w-auto" placeholder="ID"><button id="loadProposals" class="btn btn-secondary">Vis</button></div><div id="proposals" class="mt-2"></div><details><summary>Historik</summary><div id="history"></div></details></div>
<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-warning'}
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('');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="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();el('notice').textContent='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)})));el('notice').textContent='Regler gemt'}catch(err){report(err)}};
async function loadProposals(){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('');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=()=>loadProposals().catch(report);api('/hierarchy').then(data=>{tags=data;renderTree()}).catch(report);
</script>
{% endblock %}