{% extends 'base.html' %}
{% load static %}
{% block title %}Datapath | Ticket #{{ ticket_id }}{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/support.css' %}">
<style>
    .ticket-detail-page {
        max-width: 1000px;
        margin: 24px auto;
        padding: 0 24px;
        font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
    }

    .ticket-detail-page .td-back {
        display: inline-block;
        margin-bottom: 16px;
        font-size: 0.85rem;
        color: #00ADAD;
        text-decoration: none;
        font-weight: 600;
    }

    .ticket-detail-page .td-back:hover {
        text-decoration: underline;
    }

    .ticket-detail-page .td-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
        padding: 24px;
    }

    .ticket-detail-page .td-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 4px;
    }

    .ticket-detail-page .td-number {
        font-size: 1.4rem;
        font-weight: 700;
        color: #435364;
    }

    .ticket-detail-page .td-summary {
        font-size: 1rem;
        color: #435364;
        margin: 0 0 20px 0;
        line-height: 1.45;
    }

    .ticket-detail-page .td-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 16px 24px;
        border-top: 1px solid #e2e8f0;
        padding-top: 20px;
    }

    .ticket-detail-page .td-field .td-label {
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        color: #6b7a8d;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 3px;
    }

    .ticket-detail-page .td-field .td-value {
        font-size: 0.92rem;
        color: #435364;
        word-break: break-word;
    }

    .ticket-detail-page .td-description {
        margin-top: 24px;
        border-top: 1px solid #e2e8f0;
        padding-top: 20px;
    }

    .ticket-detail-page .td-description pre {
        background: #f8fafc;
        border-radius: 6px;
        padding: 14px;
        font-family: inherit;
        font-size: 0.88rem;
        line-height: 1.5;
        color: #435364;
        white-space: pre-wrap;
        word-break: break-word;
        margin: 0;
    }

    .ticket-detail-page .td-message {
        font-size: 0.9rem;
        color: #6b7a8d;
    }

    .ticket-detail-page .td-message.is-error {
        color: #b91c1c;
    }

    .td-badge {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .td-badge-open { background: #d3f4f4; color: #0f6f6f; }
    .td-badge-closed { background: #e2e8f0; color: #5b6b7d; }

    /* --- Notes --------------------------------------------------------- */

    .ticket-detail-page .td-notes {
        margin-top: 24px;
    }

    .ticket-detail-page .td-notes-header {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 12px;
    }

    .ticket-detail-page .td-notes-header h2 {
        font-size: 1.05rem;
        font-weight: 600;
        color: #435364;
        margin: 0;
    }

    .ticket-detail-page .td-notes-count {
        font-size: 0.8rem;
        color: #6b7a8d;
    }

    .ticket-detail-page .td-note {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-left: 4px solid #cbd5e1;
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* The current user's own notes. */
    .ticket-detail-page .td-note.is-mine {
        border-left-color: #00ADAD;
        background: #f2fbfb;
    }

    /* Resolution notes: Datapath green, pinned to the top of the list. */
    .ticket-detail-page .td-note.is-resolution {
        border-left-color: #03FB8D;
        border-left-width: 6px;
        background: #edfff7;
        box-shadow: 0 1px 6px rgba(3, 251, 141, 0.25);
    }

    .ticket-detail-page .td-note-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 8px;
    }

    .ticket-detail-page .td-note-author {
        font-weight: 700;
        color: #435364;
        font-size: 0.92rem;
    }

    .ticket-detail-page .td-note-date {
        margin-left: auto;
        font-size: 0.78rem;
        color: #6b7a8d;
        white-space: nowrap;
    }

    .td-note-tag {
        display: inline-block;
        padding: 2px 9px;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .td-note-tag-you { background: #00ADAD; color: #fff; }
    .td-note-tag-resolution { background: #03FB8D; color: #1B545F; }
    .td-note-tag-support { background: #435364; color: #fff; }
    .td-note-tag-contact { background: #e2e8f0; color: #4b5b6c; }
    .td-note-tag-system { background: #f1f5f9; color: #6b7a8d; font-style: italic; }

    .ticket-detail-page .td-note-body {
        font-size: 0.88rem;
        line-height: 1.55;
        color: #435364;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ticket-detail-page .td-note-body a {
        color: #00ADAD;
        word-break: break-all;
    }

    /* Notes are often long email threads with signatures; collapse by default. */
    .ticket-detail-page .td-note-body.is-clamped {
        max-height: 190px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 130px, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 130px, transparent 100%);
    }

    .ticket-detail-page .td-note-toggle {
        margin-top: 8px;
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        font-size: 0.8rem;
        font-weight: 600;
        color: #00ADAD;
        cursor: pointer;
    }

    .ticket-detail-page .td-note-toggle:hover {
        text-decoration: underline;
    }

    .ticket-detail-page .td-note-empty {
        color: #8a9bac;
    }
</style>
{% endblock %}

{% block content %}
<div class="ticket-detail-page">
    <a class="td-back" href="{% url 'DPSupport:home' %}">&larr; Back to Support Portal</a>

    <div class="td-card">
        <div id="ticket-detail-loading" class="td-message">Loading ticket #{{ ticket_id }}…</div>
        <div id="ticket-detail-error" class="td-message is-error" hidden></div>
        <div id="ticket-detail-content" hidden></div>
    </div>

    <div class="td-notes">
        <div class="td-notes-header">
            <h2>Notes</h2>
            <span class="td-notes-count" id="ticket-notes-count"></span>
        </div>
        <div id="ticket-notes-loading" class="td-message">Loading notes…</div>
        <div id="ticket-notes-error" class="td-message is-error" hidden></div>
        <div id="ticket-notes-list"></div>
    </div>
</div>

{{ it_requests_api_base_url|json_script:"ticket-detail-api-base" }}
{{ ticket_id|json_script:"ticket-detail-id" }}
{{ current_user_email|json_script:"ticket-detail-user-email" }}

<script>
(function () {
    'use strict';

    var API_BASE = JSON.parse(document.getElementById('ticket-detail-api-base').textContent) || '';
    var TICKET_ID = JSON.parse(document.getElementById('ticket-detail-id').textContent);
    var MY_EMAIL = (JSON.parse(document.getElementById('ticket-detail-user-email').textContent) || '')
        .trim().toLowerCase();

    function esc(value) {
        if (value === null || value === undefined) return '';
        return String(value).replace(/[&<>"']/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
        });
    }

    function formatDate(iso) {
        if (!iso) return '—';
        var d = new Date(iso);
        if (isNaN(d.getTime())) return esc(iso);
        return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) +
            ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
    }

    function name(obj) {
        return (obj && obj.name) || '—';
    }

    function priorityLabel(value) {
        return (name(value) || '').replace(/^Priority:\s*/i, '') || '—';
    }

    function field(label, value) {
        return '<div class="td-field"><span class="td-label">' + esc(label) + '</span>' +
            '<span class="td-value">' + (value || '—') + '</span></div>';
    }

    function showError(message) {
        document.getElementById('ticket-detail-loading').hidden = true;
        var el = document.getElementById('ticket-detail-error');
        el.textContent = message;
        el.hidden = false;
    }

    // Internal-only fields (board, subType, team, slaStatus, hours, isInSla) are
    // deliberately never rendered — this page is client-facing.
    function render(ticket) {
        var isOpen = !ticket.closedFlag;
        var badgeClass = isOpen ? 'td-badge-open' : 'td-badge-closed';

        var html =
            '<div class="td-heading">' +
                '<span class="td-number">Ticket #' + esc(ticket.id) + '</span>' +
                '<span class="td-badge ' + badgeClass + '">' + esc(name(ticket.status)) + '</span>' +
            '</div>' +
            '<p class="td-summary">' + esc(ticket.summary || '—') + '</p>' +
            '<div class="td-grid">' +
                field('Company', esc(name(ticket.company))) +
                field('Contact', esc(ticket.contactName || name(ticket.contact))) +
                field('Contact Email', esc(ticket.contactEmailAddress)) +
                field('Contact Phone', esc(ticket.contactPhoneNumber)) +
                field('Priority', esc(priorityLabel(ticket.priority))) +
                field('Type', esc(name(ticket.type))) +
                field('Severity', esc(ticket.severity)) +
                field('Impact', esc(ticket.impact)) +
                field('Source', esc(name(ticket.source))) +
                field('Assigned To', esc(name(ticket.owner))) +
                field('Opened', esc(formatDate(ticket.dateEntered))) +
                field('Opened By', esc(ticket.enteredBy)) +
                field('First Response', esc(formatDate(ticket.dateResponded))) +
                field('Resolved', esc(formatDate(ticket.dateResolved))) +
                field('Closed', esc(formatDate(ticket.closedDate))) +
                field('Closed By', esc(ticket.closedBy)) +
                field('Last Updated', esc(formatDate(ticket.lastUpdated))) +
            '</div>';

        if (ticket.initialDescription) {
            html += '<div class="td-description">' +
                '<span class="td-label">Description</span>' +
                '<pre>' + esc(ticket.initialDescription) + '</pre>' +
            '</div>';
        }

        document.getElementById('ticket-detail-loading').hidden = true;
        var content = document.getElementById('ticket-detail-content');
        content.innerHTML = html;
        content.hidden = false;
    }

    // -----------------------------------------------------------------
    // Notes
    // -----------------------------------------------------------------

    var NOTE_CLAMP_CHARS = 700;

    function showNotesError(message) {
        document.getElementById('ticket-notes-loading').hidden = true;
        var el = document.getElementById('ticket-notes-error');
        el.textContent = message;
        el.hidden = false;
    }

    // ConnectWise note text arrives with HTML entities still encoded. Decode a
    // known-safe set first so links and text read correctly; everything is
    // re-escaped afterwards, so decoding here cannot introduce markup.
    var ENTITIES = {
        '&amp;': '&', '&lt;': '<', '&gt;': '>', '&quot;': '"',
        '&#39;': "'", '&apos;': "'", '&nbsp;': ' '
    };

    function decodeEntities(text) {
        return String(text)
            .replace(/&(?:amp|lt|gt|quot|#39|apos|nbsp);/g, function (m) { return ENTITIES[m]; })
            .replace(/&#(\d{1,6});/g, function (m, code) {
                var n = parseInt(code, 10);
                return n > 0 && n <= 0x10FFFF ? String.fromCodePoint(n) : m;
            });
    }

    // Undo markdown backslash escaping (\_ \( \[ …), which the PSA emits heavily
    // in email-sourced notes. Applied only to display text, never to hrefs.
    function unescapeMd(text) {
        return String(text).replace(/\\([\\`*_{}[\]()#+\-.!>~|])/g, '$1');
    }

    // Applied only to already-escaped text, and only ever injects fixed tags,
    // so it cannot introduce attributes or markup from the note itself.
    function emphasise(escaped) {
        return escaped
            .replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>')
            .replace(/__([^_\n]+)__/g, '<strong>$1</strong>');
    }

    function plain(text) {
        return emphasise(esc(unescapeMd(text)));
    }

    function anchor(href, label) {
        // The matching pattern only yields http/https, but re-check before use
        // so no other scheme can ever reach an href.
        if (!/^https?:\/\//i.test(href)) return plain(label);
        return '<a href="' + esc(href) + '" target="_blank" rel="noopener noreferrer">' +
            plain(label) + '</a>';
    }

    // Markdown labels may contain backslash-escaped brackets, so the label
    // pattern has to consume "\]" rather than stop at it.
    //   [label](http…)   → anchor
    //   bare http… URL   → anchor (trailing punctuation trimmed)
    var LINK_PATTERN = /\[((?:[^\]\\]|\\.)*)\]\((https?:\/\/[^\s)]+)\)|(https?:\/\/[^\s<>"'\])]+)/g;
    var IMAGE_PATTERN = /!\[((?:[^\]\\]|\\.)*)\]\([^)]*\)/g;

    // Renders note text as escaped plain text, turning markdown and bare links
    // into anchors. Markdown images are reduced to their alt text so the page
    // never fetches remote inline images from the PSA.
    function renderNoteText(raw) {
        if (!raw || !String(raw).trim()) {
            return '<span class="td-note-empty">(no content)</span>';
        }

        var text = decodeEntities(raw).replace(IMAGE_PATTERN, '$1');
        var out = '';
        var last = 0;
        var match;

        LINK_PATTERN.lastIndex = 0;
        while ((match = LINK_PATTERN.exec(text)) !== null) {
            out += plain(text.slice(last, match.index));
            last = LINK_PATTERN.lastIndex;

            if (match[2]) {
                out += anchor(match[2], match[1] || match[2]);
            } else {
                // Sentence punctuation that trails a bare URL is not part of it.
                var url = match[3];
                var trailing = /[.,;:!?'"]+$/.exec(url);
                if (trailing) {
                    url = url.slice(0, -trailing[0].length);
                    last -= trailing[0].length;
                }
                out += anchor(url, url);
            }
        }
        out += plain(text.slice(last));
        return out;
    }

    function extractEmail(value) {
        var match = /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}/.exec(value || '');
        return match ? match[0].toLowerCase() : null;
    }

    // Author name, with any trailing email stripped off createdBy.
    function noteAuthor(note) {
        if (note.contact && note.contact.name) return note.contact.name;
        if (note.member && note.member.name) return note.member.name;
        var created = String(note.createdBy || '').replace(
            /[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}/, '').trim();
        return created || 'Automated System';
    }

    // A time entry is logged by a technician working the ticket. Other
    // member-authored notes come from integrations — Automate ingesting an
    // inbound email, TimeZest recording an appointment — rather than from a
    // person typing a reply, so they are tagged as automated.
    function noteTag(note, isMine) {
        if (isMine) return { cls: 'td-note-tag-you', label: 'You' };
        if (note.contact && note.contact.name) return { cls: 'td-note-tag-contact', label: 'Contact' };
        if (note.member && note.member.name && note.noteType === 'TimeEntryNote') {
            return { cls: 'td-note-tag-support', label: 'Datapath Support' };
        }
        return { cls: 'td-note-tag-system', label: 'Automated' };
    }

    // Automate raises and annotates tickets from inbound mail and monitoring.
    // Its notes restate what the contact already sent or record internal
    // dispatch, so they are never shown. Matched on id, falling back to the
    // name in case the member is renamed in the PSA.
    var AUTOMATE_MEMBER_ID = 202;

    function isAutomationMember(note) {
        var member = note.member;
        if (!member) return false;
        return member.id === AUTOMATE_MEMBER_ID ||
            /connectwise\s+automate/i.test(member.name || '');
    }

    // The PSA files a note against one or more tabs, and a single note commonly
    // sits on several at once — support replies here are routinely Discussion
    // and Internal Analysis together. Discussion and Resolution are the
    // client-facing tabs, so a note is shown when it is on either and hidden
    // when it is internal analysis only.
    function isClientVisible(note) {
        if (note.internalFlag === true) return false;
        if (isAutomationMember(note)) return false;
        return note.detailDescriptionFlag === true || note.resolutionFlag === true;
    }

    function renderNote(note) {
        var isMine = !!(MY_EMAIL && extractEmail(note.createdBy) === MY_EMAIL);
        var isResolution = note.resolutionFlag === true;
        var tag = noteTag(note, isMine);
        var body = renderNoteText(note.text);
        var clamp = String(note.text || '').length > NOTE_CLAMP_CHARS;

        var classes = ['td-note'];
        if (isResolution) classes.push('is-resolution');
        if (isMine) classes.push('is-mine');

        return '<div class="' + classes.join(' ') + '">' +
            '<div class="td-note-head">' +
                '<span class="td-note-author">' + esc(noteAuthor(note)) + '</span>' +
                (isResolution
                    ? '<span class="td-note-tag td-note-tag-resolution">Resolution</span>'
                    : '') +
                '<span class="td-note-tag ' + tag.cls + '">' + esc(tag.label) + '</span>' +
                '<span class="td-note-date">' + esc(formatDate(note.dateCreated)) + '</span>' +
            '</div>' +
            '<div class="td-note-body' + (clamp ? ' is-clamped' : '') + '">' + body + '</div>' +
            (clamp ? '<button type="button" class="td-note-toggle">Show more</button>' : '') +
        '</div>';
    }

    function renderNotes(notes) {
        document.getElementById('ticket-notes-loading').hidden = true;
        var list = document.getElementById('ticket-notes-list');
        var count = document.getElementById('ticket-notes-count');

        if (!notes.length) {
            list.innerHTML = '<p class="td-message">No notes have been added to this ticket yet.</p>';
            count.textContent = '';
            return;
        }

        // Resolution notes pinned to the top, everything else newest first.
        notes.sort(function (a, b) {
            var aRes = a.resolutionFlag === true;
            var bRes = b.resolutionFlag === true;
            if (aRes !== bRes) return aRes ? -1 : 1;
            return new Date(b.dateCreated || 0) - new Date(a.dateCreated || 0);
        });

        list.innerHTML = notes.map(renderNote).join('');
        count.textContent = notes.length === 1 ? '1 note' : notes.length + ' notes';
    }

    function loadNotes() {
        // Notes hang off the ticket resource, mirroring the detail endpoint.
        var url = API_BASE + '/api/v1/cwm/tickets/' + encodeURIComponent(TICKET_ID) + '/notes/';

        window.authenticatedFetch(url, { method: 'GET' })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Notes request failed (' + response.status + ').');
                }
                return response.json();
            })
            .then(function (data) {
                var notes = Array.isArray(data) ? data : (data.results || []);
                // The response also carries notes from tickets bundled into this
                // one (a different ticketId). Bundling merges the requests into a
                // single piece of work, so they stay in the timeline.
                renderNotes(notes.filter(isClientVisible));
            })
            .catch(function (error) {
                if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                    return;
                }
                console.error('Failed to load notes:', error);
                showNotesError('Unable to load notes for this ticket.');
            });
    }

    function loadTicket() {
        var url = API_BASE + '/api/v1/cwm/tickets/' + encodeURIComponent(TICKET_ID) + '/';

        window.authenticatedFetch(url, { method: 'GET' })
            .then(function (response) {
                if (response.status === 404) {
                    throw new Error('Ticket #' + TICKET_ID + ' was not found.');
                }
                if (!response.ok) {
                    throw new Error('Ticket request failed (' + response.status + ').');
                }
                return response.json();
            })
            .then(render)
            .catch(function (error) {
                if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                    return;
                }
                console.error('Failed to load ticket:', error);
                showError(error.message || 'Unable to load this ticket.');
            });
    }

    var started = false;

    function init() {
        if (started) return;
        started = true;

        if (!API_BASE) {
            showError('Ticket API is not configured.');
            showNotesError('Ticket API is not configured.');
            return;
        }
        if (typeof window.authenticatedFetch !== 'function') {
            showError('Sign-in session unavailable — please reload the page.');
            showNotesError('Sign-in session unavailable — please reload the page.');
            return;
        }

        document.getElementById('ticket-notes-list').addEventListener('click', function (event) {
            var button = event.target.closest('.td-note-toggle');
            if (!button) return;
            var body = button.previousElementSibling;
            var clamped = body.classList.toggle('is-clamped');
            button.textContent = clamped ? 'Show more' : 'Show less';
        });

        // Independent so a notes failure still leaves the ticket readable.
        loadTicket();
        loadNotes();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init, { once: true });
    } else {
        init();
    }
})();
</script>
{% endblock %}