{% load static %}
{# Self-contained styles: only vision_support is packaged, so this widget cannot #}
{# rely on the host project shipping support.css rules for it.                   #}
<style>
    /* The ticket table needs the full grid width, not a 320px card column. */
    #widget-my-tickets {
        grid-column: 1 / -1;
    }

    #widget-my-tickets .mt-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px;
    }

    #widget-my-tickets .mt-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    #widget-my-tickets .mt-field label {
        font-size: 0.75rem;
        font-weight: 600;
        color: #6b7a8d;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    #widget-my-tickets .mt-field input[type="date"] {
        padding: 8px 10px;
        border: 1px solid #d0d7de;
        border-radius: 5px;
        font-size: 0.9rem;
        font-family: inherit;
        background: #fafafa;
        color: #435364;
    }

    #widget-my-tickets .mt-status {
        margin-left: auto;
        font-size: 0.85rem;
        color: #6b7a8d;
    }

    #widget-my-tickets .mt-status.is-error {
        color: #b91c1c;
    }

    #widget-my-tickets .mt-table-wrapper {
        background: #f8fafc;
        border-radius: 10px;
        padding: 1rem;
        overflow-x: auto;
    }

    #my-tickets-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.85rem;
    }

    #my-tickets-table thead th {
        background: #435364;
        color: #fff;
        font-weight: 600;
        padding: 10px;
        text-align: left;
        white-space: nowrap;
    }

    #my-tickets-table tbody td {
        padding: 10px;
        border-bottom: 1px solid #e2e8f0;
        color: #435364;
        vertical-align: top;
    }

    /* Summaries are long; everything else stays on one line. */
    #my-tickets-table tbody td.mt-summary {
        min-width: 260px;
        white-space: normal;
    }

    #my-tickets-table tbody td.mt-nowrap {
        white-space: nowrap;
    }

    #my-tickets-table tbody tr.ticket-group-row td {
        background: #e8edf2;
        color: #435364;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.75rem;
        padding: 8px 10px;
        border-bottom: 1px solid #cbd5e1;
    }

    #my-tickets-table a.mt-ticket-link {
        color: #00ADAD;
        font-weight: 600;
        text-decoration: none;
    }

    #my-tickets-table a.mt-ticket-link:hover {
        text-decoration: underline;
    }

    .mt-badge {
        display: inline-block;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 600;
        white-space: nowrap;
    }

    .mt-badge-open { background: #d3f4f4; color: #0f6f6f; }
    .mt-badge-closed { background: #e2e8f0; color: #5b6b7d; }
    .mt-badge-critical { background: #fee2e2; color: #b91c1c; }
    .mt-badge-high { background: #fef3c7; color: #92400e; }
    .mt-badge-normal { background: #eef2f6; color: #4b5b6c; }

    /* DataTables 2.x chrome, tinted to the Vision palette. */
    #widget-my-tickets .dt-container {
        font-family: inherit;
        color: #435364;
    }

    #widget-my-tickets .dt-search input,
    #widget-my-tickets .dt-length select {
        border: 1px solid #e2e8f0;
        border-radius: 5px;
        padding: 5px 10px;
        font-family: inherit;
    }

    #widget-my-tickets .dt-paging .dt-paging-button.current {
        background: #00ADAD !important;
        border-color: #00ADAD !important;
        color: #fff !important;
    }
</style>

<div class="widget-card" id="widget-my-tickets">
    <div>
        <h3>My Support Tickets</h3>
        <p class="widget-desc">Service tickets raised for your organisation. Select a ticket number for full details.</p>
    </div>

    <div class="mt-toolbar">
        <div class="mt-field">
            <label for="my-tickets-startdate">Start Date</label>
            <input type="date" id="my-tickets-startdate" name="startdate">
        </div>
        <div class="mt-field">
            <label for="my-tickets-enddate">End Date</label>
            <input type="date" id="my-tickets-enddate" name="enddate">
        </div>
        <button type="button" class="widget-btn" id="my-tickets-refresh">Refresh</button>
        <span class="mt-status" id="my-tickets-status">Loading tickets…</span>
    </div>

    <div class="mt-table-wrapper">
        <table id="my-tickets-table" class="display compact cell-border">
            <thead>
                <tr>
                    <th>Company</th>
                    <th>Open</th>
                    <th>Ticket #</th>
                    <th>Summary</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Type</th>
                    <th>Contact</th>
                    <th>Opened</th>
                    <th>Last Updated</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

{{ it_requests_api_base_url|json_script:"my-tickets-api-base" }}

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

    var API_BASE = JSON.parse(document.getElementById('my-tickets-api-base').textContent) || '';
    // Reversed with a placeholder id so the detail route stays in urls.py, not here.
    var TICKET_DETAIL_URL = "{% url 'DPSupport:ticket_detail' 0 %}";

    // Column indices. 0 and 1 are hidden and exist only to drive grouping/ordering.
    var COL_COMPANY = 0;
    var COL_OPEN_SORT = 1;
    var COL_DATE_ENTERED = 8;

    var groupByCompany = false;

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

    function ticketDetailUrl(id) {
        return TICKET_DETAIL_URL.replace(/0\/$/, encodeURIComponent(id) + '/');
    }

    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 formatYmd(date) {
        var y = date.getFullYear();
        var m = String(date.getMonth() + 1).padStart(2, '0');
        var d = String(date.getDate()).padStart(2, '0');
        return y + '-' + m + '-' + d;
    }

    function setStatus(text, isError) {
        var el = document.getElementById('my-tickets-status');
        if (!el) return;
        el.textContent = text;
        el.classList.toggle('is-error', !!isError);
    }

    // "Priority: Critical" reads better as just "Critical" for a client audience.
    function priorityLabel(name) {
        return (name || '').replace(/^Priority:\s*/i, '') || '—';
    }

    function priorityBadgeClass(name) {
        var label = priorityLabel(name).toLowerCase();
        if (label.indexOf('critical') !== -1 || label.indexOf('emergency') !== -1) return 'mt-badge-critical';
        if (label.indexOf('high') !== -1 || label.indexOf('elevated') !== -1 || label.indexOf('important') !== -1) return 'mt-badge-high';
        return 'mt-badge-normal';
    }

    // The company selector lives in the host sidebar and may be absent entirely.
    function selectedCompanyCodename() {
        var select = document.getElementById('group-select');
        if (!select || !select.value) return null;
        var option = select.options[select.selectedIndex];
        return option ? option.getAttribute('data-codename') : null;
    }

    function buildApiUrl() {
        var url = API_BASE + '/api/v1/cwm/tickets/';
        var params = new URLSearchParams();

        var codename = selectedCompanyCodename();
        if (codename) {
            params.append('company_id', codename);
        }

        var startDate = document.getElementById('my-tickets-startdate').value;
        var endDate = document.getElementById('my-tickets-enddate').value;
        if (startDate) params.append('startdate', startDate);
        if (endDate) params.append('enddate', endDate);

        var query = params.toString();
        return query ? url + '?' + query : url;
    }

    function toRow(ticket) {
        var isOpen = !ticket.closedFlag;
        return {
            company: (ticket.company && ticket.company.name) || 'Unknown Company',
            openSort: isOpen ? 0 : 1,
            isOpen: isOpen,
            id: ticket.id,
            summary: ticket.summary || '—',
            status: (ticket.status && ticket.status.name) || '—',
            priority: (ticket.priority && ticket.priority.name) || '',
            type: (ticket.type && ticket.type.name) || '—',
            contact: ticket.contactName || (ticket.contact && ticket.contact.name) || '—',
            dateEntered: ticket.dateEntered || '',
            lastUpdated: ticket.lastUpdated || ''
        };
    }

    function dateColumn(field) {
        return {
            data: field,
            className: 'mt-nowrap',
            // ISO 8601 sorts correctly as a plain string, so sort on the raw value.
            render: function (data, type) {
                if (type === 'display') return esc(formatDate(data));
                return data || '';
            }
        };
    }

    function renderTable(rows) {
        var table = $('#my-tickets-table');

        if ($.fn.DataTable.isDataTable('#my-tickets-table')) {
            table.DataTable().destroy();
            table.find('tbody').empty();
        }

        var companies = {};
        rows.forEach(function (row) { companies[row.company] = true; });
        groupByCompany = Object.keys(companies).length > 1;

        var config = {
            data: rows,
            columns: [
                { data: 'company', visible: false },
                { data: 'openSort', visible: false, searchable: false },
                {
                    data: 'id',
                    className: 'mt-nowrap',
                    render: function (data, type, row) {
                        if (type !== 'display') return data;
                        return '<a class="mt-ticket-link" href="' + esc(ticketDetailUrl(data)) + '">#' +
                            esc(data) + '</a>';
                    }
                },
                { data: 'summary', className: 'mt-summary', render: function (d) { return esc(d); } },
                {
                    data: 'status',
                    className: 'mt-nowrap',
                    render: function (data, type, row) {
                        if (type !== 'display') return data;
                        var cls = row.isOpen ? 'mt-badge-open' : 'mt-badge-closed';
                        return '<span class="mt-badge ' + cls + '">' + esc(data) + '</span>';
                    }
                },
                {
                    data: 'priority',
                    className: 'mt-nowrap',
                    render: function (data, type) {
                        if (type !== 'display') return priorityLabel(data);
                        return '<span class="mt-badge ' + priorityBadgeClass(data) + '">' +
                            esc(priorityLabel(data)) + '</span>';
                    }
                },
                { data: 'type', className: 'mt-nowrap', render: function (d) { return esc(d); } },
                { data: 'contact', className: 'mt-nowrap', render: function (d) { return esc(d); } },
                dateColumn('dateEntered'),
                dateColumn('lastUpdated')
            ],
            paging: true,
            searching: true,
            info: true,
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, 'All']],
            // Open tickets first, then newest by the date the ticket was raised.
            order: [[COL_OPEN_SORT, 'asc'], [COL_DATE_ENTERED, 'desc']],
            language: {
                emptyTable: 'No tickets found for this period',
                zeroRecords: 'No tickets match your search',
                search: 'Filter:',
                lengthMenu: 'Show _MENU_ tickets',
                info: 'Showing _START_ to _END_ of _TOTAL_ tickets',
                infoEmpty: 'Showing 0 tickets',
                paginate: { first: 'First', last: 'Last', next: '→', previous: '←' }
            },
            drawCallback: function () {
                if (!groupByCompany) return;
                var api = this.api();
                var colspan = api.columns(':visible').count();
                var nodes = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(COL_COMPANY, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(nodes).eq(i).before(
                            '<tr class="ticket-group-row"><td colspan="' + colspan + '">' +
                            esc(group) + '</td></tr>'
                        );
                        last = group;
                    }
                });
            }
        };

        // Keep company grouping intact no matter which column the user sorts by.
        if (groupByCompany) {
            config.orderFixed = { pre: [[COL_COMPANY, 'asc']] };
        }

        table.DataTable(config);
    }

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

        setStatus('Loading tickets…');

        window.authenticatedFetch(buildApiUrl(), { method: 'GET' })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Ticket request failed (' + response.status + ')');
                }
                return response.json();
            })
            .then(function (data) {
                var results = Array.isArray(data) ? data : (data.results || []);
                var rows = results.map(toRow);
                renderTable(rows);

                var total = typeof data.count === 'number' ? data.count : rows.length;
                if (total > rows.length) {
                    setStatus('Showing ' + rows.length + ' of ' + total + ' tickets — narrow the date range to see the rest.');
                } else {
                    setStatus(total === 1 ? '1 ticket' : total + ' tickets');
                }
            })
            .catch(function (error) {
                // The sidebar aborts in-flight requests when the company changes.
                if (error.message === 'STALE_REQUEST' || error.name === 'AbortError') {
                    return;
                }
                console.error('Failed to load tickets:', error);
                renderTable([]);
                setStatus('Unable to load tickets. Please try again.', true);
            });
    }

    document.addEventListener('DOMContentLoaded', function () {
        var startInput = document.getElementById('my-tickets-startdate');
        var endInput = document.getElementById('my-tickets-enddate');

        var today = new Date();
        var thirtyDaysAgo = new Date();
        thirtyDaysAgo.setDate(today.getDate() - 30);

        startInput.value = formatYmd(thirtyDaysAgo);
        endInput.value = formatYmd(today);

        startInput.addEventListener('change', fetchTickets);
        endInput.addEventListener('change', fetchTickets);
        document.getElementById('my-tickets-refresh').addEventListener('click', fetchTickets);
        document.addEventListener('groupChanged', fetchTickets);

        fetchTickets();
    });
})();
</script>