function H(){const a=document.querySelector("[data-support-panel]");if(!a)return;const y=a.querySelector("[data-panel-subject]"),b=a.querySelector("[data-panel-number]"),x=a.querySelector("[data-panel-meta]"),c=a.querySelector("[data-panel-thread]"),l=a.querySelector("[data-panel-reply]"),f=a.querySelector("[data-panel-close]"),S=a.querySelectorAll("[data-panel-mini-form]"),p=parseInt(a.getAttribute("data-open-id")||"0",10),r=n=>String(n??"").replace(/[&<>"']/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[e]);function $(n){l?.setAttribute("action",`/admin/support/${n}/reply`),S.forEach(s=>{const o=s.getAttribute("data-action");s.setAttribute("action",`/admin/support/${n}/${o}`)});const e=a.querySelector("[data-panel-playbook]");e&&(e.onsubmit=s=>{const o=e.querySelector('select[name="playbook_id"]')?.value;return o?(e.setAttribute("action",`/admin/support/${n}/run-playbook/${o}`),!0):(s.preventDefault(),!1)})}function u(n){$(n),a.classList.remove("translate-x-full"),c.innerHTML='<div class="text-ink-500 text-[12px]">Loading…</div>';const e=new URL(window.location.href);e.searchParams.set("open",String(n)),history.replaceState(null,"",e.toString()),fetch(`/admin/support/${n}`,{headers:{Accept:"application/json"}}).then(s=>s.ok?s.json():Promise.reject(new Error("HTTP "+s.status))).then(s=>k(s)).catch(s=>{c.innerHTML=`<div class="text-accent-coral text-[12px]">Failed to load: ${r(s?.message)}</div>`})}function w(){a.classList.add("translate-x-full");const n=new URL(window.location.href);n.searchParams.delete("open"),history.replaceState(null,"",n.toString())}function k(n){const e=n.ticket||{},s=n.workspace,o=n.assigned_agent;y.textContent=e.subject||"(no subject)",b.textContent=e.ticket_number?`#${e.ticket_number}`:"";const q=e.created_at?new Date(e.created_at).toLocaleString():"—",h=e.first_response_at?new Date(e.first_response_at).toLocaleString():"—",L=s?`<a href="/admin/workspaces/${s.id}" class="text-wa-deep hover:underline">${r(s.name)}</a>`:"—";x.innerHTML=`
            <div><span class="text-ink-500">Status:</span> <span class="font-mono">${r(e.status)}</span></div>
            <div><span class="text-ink-500">Priority:</span> <span class="font-mono">${r(e.priority)}</span></div>
            <div><span class="text-ink-500">Customer:</span> ${r(e.name||e.email||"—")}</div>
            <div><span class="text-ink-500">Workspace:</span> ${L}</div>
            <div><span class="text-ink-500">Assigned:</span> ${o?r(o.name):"unassigned"}</div>
            <div><span class="text-ink-500">1st reply:</span> ${r(h)}</div>
            <div class="col-span-2"><span class="text-ink-500">Opened:</span> ${r(q)}</div>
        `,a.querySelectorAll('[data-panel-action-group="status"] form').forEach(t=>{const i=t.querySelector('input[name="status"]')?.value;t.querySelector("button")?.classList.toggle("ring-2",i===e.status),t.querySelector("button")?.classList.toggle("ring-wa-deep",i===e.status)}),a.querySelectorAll('[data-panel-action-group="priority"] form').forEach(t=>{const i=t.querySelector('input[name="priority"]')?.value;t.querySelector("button")?.classList.toggle("ring-2",i===e.priority),t.querySelector("button")?.classList.toggle("ring-wa-deep",i===e.priority)});const d=a.querySelector('select[name="agent_user_id"]');d&&(d.value=o?.id?String(o.id):"");const m=t=>t?t.minutes_over!=null?`<span class="text-accent-coral font-mono">${t.minutes_over}m over · ${r(t.severity)}</span>`:t.minutes_remaining!=null?`<span class="${t.severity==="warn"?"text-accent-amber":"text-wa-deep"} font-mono">${t.minutes_remaining}m left · ${r(t.severity)}</span>`:'<span class="text-wa-deep font-mono">met</span>':'<span class="text-ink-500">no policy</span>',v=a.querySelector("[data-sla-first]"),g=a.querySelector("[data-sla-resolution]");v&&(v.innerHTML=m(n.sla?.first_response)),g&&(g.innerHTML=m(n.sla?.resolution));const _=e.message?`
            <div class="rounded-xl bg-paper-50 border border-paper-200 p-3">
                <div class="text-[10.5px] font-mono text-ink-500 mb-1">Customer · initial</div>
                <div class="whitespace-pre-wrap text-[12.5px]">${r(e.message)}</div>
            </div>`:"",A=(n.messages||[]).map(t=>{const i=t.role==="admin"?"bg-wa-bubble border-wa-green/30":t.role==="system"?"bg-paper-50 border-paper-200":"bg-paper-0 border-paper-200",E=t.note?'<span class="px-1.5 py-0.5 rounded-full bg-accent-amber/15 text-accent-amber text-[9.5px] font-mono uppercase ml-1">internal</span>':"",j=t.at?new Date(t.at).toLocaleString():"";return`<div class="rounded-xl border ${i} p-3">
                <div class="flex items-center justify-between text-[10.5px] font-mono text-ink-500 mb-1">
                    <span>${r(t.name)} · ${r(t.role)}${E}</span><span>${r(j)}</span>
                </div>
                <div class="whitespace-pre-wrap text-[12.5px]">${r(t.body)}</div>
            </div>`}).join("");c.innerHTML=_+A,l?.querySelector("textarea")?.focus()}document.querySelectorAll("[data-support-row]").forEach(n=>{n.addEventListener("click",()=>{const e=n.getAttribute("data-ticket-id");e&&u(e)})}),f?.addEventListener("click",w),p>0&&u(p)}export{H as default};
