{% 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; }
</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>

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

<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);

    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;
    }

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

        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.');
            });
    });
})();
</script>
{% endblock %}