{% extends "shared/frontend/base.html" %}

{% block title %}{{ ticket.ticket_number }} - BMC Hub{% endblock %}

{% block extra_css %}
<style>
        .ticket-header {
            background: white;
            padding: 2rem;
            border-radius: var(--border-radius);
            margin-bottom: 2rem;
            border-left: 6px solid var(--accent);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        .ticket-header.priority-urgent { border-left-color: #dc3545; }
        .ticket-header.priority-high { border-left-color: #fd7e14; }

        .ticket-number {
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 1rem;
            opacity: 0.9;
        }

        .ticket-title {
            font-size: 2rem;
            font-weight: 700;
            margin: 0.5rem 0;
        }

        .badge {
            padding: 0.4rem 0.8rem;
            font-weight: 500;
            border-radius: 6px;
            font-size: 0.75rem;
        }

        .badge-status-open { background-color: #d1ecf1; color: #0c5460; }
        .badge-status-in_progress { background-color: #fff3cd; color: #856404; }
        .badge-status-pending_customer { background-color: #e2e3e5; color: #383d41; }
        .badge-status-resolved { background-color: #d4edda; color: #155724; }
        .badge-status-closed { background-color: #f8d7da; color: #721c24; }

        .badge-priority-low { background-color: var(--accent-light); color: var(--accent); }
        .badge-priority-normal { background-color: #e2e3e5; color: #383d41; }
        .badge-priority-high { background-color: #fff3cd; color: #856404; }
        .badge-priority-urgent, .badge-priority-critical { background-color: #f8d7da; color: #721c24; }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .info-item {
            background: var(--bg-card);
            padding: 1rem;
            border-radius: var(--border-radius);
            border: 1px solid var(--accent-light);
        }

        .info-item label {
            display: block;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .info-item .value {
            font-weight: 600;
            color: var(--text-primary);
        }

        .comment {
            padding: 1.5rem;
            margin-bottom: 1rem;
            background: var(--accent-light);
            border-radius: var(--border-radius);
            border-left: 4px solid var(--accent);
        }

        .comment.internal {
            background: #fff3cd;
            border-left-color: #ffc107;
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .comment-author {
            font-weight: 600;
            color: var(--accent);
        }

        .comment-date {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .worklog-table th {
            font-weight: 600;
            color: var(--text-secondary);
            border-bottom: 2px solid var(--accent-light);
            padding: 0.75rem;
            font-size: 0.85rem;
        }

        .worklog-table td {
            padding: 0.75rem;
            border-bottom: 1px solid var(--accent-light);
        }

        .attachment {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            background: var(--accent-light);
            border-radius: var(--border-radius);
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            text-decoration: none;
            color: var(--accent);
            transition: all 0.2s;
        }

        .attachment:hover {
            background: var(--accent);
            color: white;
        }

        .attachment i {
            margin-right: 0.5rem;
        }

        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .tag-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            color: white;
            transition: all 0.2s;
            cursor: default;
        }

        .tag-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .tag-badge .btn-close {
            font-size: 0.6rem;
            opacity: 0.7;
        }

        .tag-badge .btn-close:hover {
            opacity: 1;
        }

        .add-tag-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            border: 2px dashed var(--accent-light);
            border-radius: 8px;
            background: transparent;
            color: var(--accent);
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.85rem;
            font-weight: 500;
        }

        .add-tag-btn:hover {
            border-color: var(--accent);
            background: var(--accent-light);
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .empty-state {
            text-align: center;
            padding: 2rem;
            color: var(--text-secondary);
        }

        .empty-state i {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            opacity: 0.3;
        }

        .action-buttons {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .description-box {
            background: var(--bg-body);
            padding: 1.5rem;
            border-radius: var(--border-radius);
            white-space: pre-wrap;
            line-height: 1.6;
        }

        .contact-item {
            padding: 0.75rem;
            margin-bottom: 0.5rem;
            background: var(--accent-light);
            border-radius: var(--border-radius);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s;
        }

        .contact-item:hover {
            transform: translateX(3px);
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .contact-info {
            flex: 1;
        }

        .contact-name {
            font-weight: 600;
            color: var(--accent);
            margin-bottom: 0.25rem;
        }

        .contact-details {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .contact-role-badge {
            padding: 0.25rem 0.6rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-right: 0.5rem;
        }

        /* Standard roller */
        .role-primary { background: #28a745; color: white; }
        .role-requester { background: #17a2b8; color: white; }
        .role-assignee { background: #ffc107; color: #000; }
        .role-cc { background: #6c757d; color: white; }
        .role-observer { background: #e9ecef; color: #495057; }
        
        /* Almindelige roller */
        .role-ekstern_it { background: #6f42c1; color: white; }
        .role-third_party { background: #fd7e14; color: white; }
        .role-electrician { background: #20c997; color: white; }
        .role-consultant { background: #0dcaf0; color: #000; }
        .role-vendor { background: #dc3545; color: white; }
        
        /* Default for custom roller */
        .contact-role-badge:not([class*="role-primary"]):not([class*="role-requester"]):not([class*="role-assignee"]):not([class*="role-cc"]):not([class*="role-observer"]):not([class*="role-ekstern"]):not([class*="role-third"]):not([class*="role-electrician"]):not([class*="role-consultant"]):not([class*="role-vendor"]) {
            background: var(--accent);
            color: white;
        }
</style>
{% endblock %}

{% block content %}
    <div class="container-fluid px-4">
        <!-- Ticket Header -->
        <div class="ticket-header priority-{{ ticket.priority }}">
            <div class="d-flex justify-content-between align-items-start">
                <div>
                     <div class="d-flex align-items-center gap-2 mb-2 text-muted small">
                        <span class="ticket-number font-monospace">{{ ticket.ticket_number }}</span>
                        <span>•</span>
                        <span class="fw-bold text-uppercase" style="letter-spacing: 0.5px;">{{ ticket.ticket_type|default('Incident') }}</span>
                        <!-- SLA Timer Mockup -->
                        <span class="badge bg-light text-danger border border-danger ms-2">
                             <i class="bi bi-hourglass-split"></i> Deadline: 14:00
                        </span>
                     </div>
                     
                     <div class="d-flex flex-wrap align-items-baseline gap-3">
                        <h1 class="ticket-title mt-0 text-dark mb-0">{{ ticket.subject }}</h1>
                        <h3 class="h4 text-muted fw-normal mb-0">
                             <a href="/customers/{{ ticket.customer_id }}" class="text-decoration-none text-muted hover-primary">
                                @ {{ ticket.customer_name }}
                             </a>
                        </h3>
                     </div>
                </div>
                
                <!-- Quick Status -->
                 <div class="d-flex align-items-center gap-2">
                    <select class="form-select" style="width: auto; font-weight: 500;" 
                            onchange="updateStatus(this.value)" id="quickStatus">
                        <option value="open" {% if ticket.status == 'open' %}selected{% endif %}>Åben</option>
                        <option value="in_progress" {% if ticket.status == 'in_progress' %}selected{% endif %}>Igangværende</option>
                        <option value="waiting_customer" {% if ticket.status == 'waiting_customer' %}selected{% endif %}>Afventer Kunde</option>
                        <option value="waiting_internal" {% if ticket.status == 'waiting_internal' %}selected{% endif %}>Afventer Internt</option>
                        <option value="resolved" {% if ticket.status == 'resolved' %}selected{% endif %}>Løst</option>
                        <option value="closed" {% if ticket.status == 'closed' %}selected{% endif %}>Lukket</option>
                    </select>
                </div>
            </div>

            <div class="mt-3 d-flex gap-2 align-items-center flex-wrap">
                 <!-- Priority Badge -->
                 <span class="badge badge-priority-{{ ticket.priority }}">
                    {{ ticket.priority.title() }} Priority
                </span>
                
                <!-- Tags -->
                <div class="tags-container d-inline-flex m-0" id="ticketTags"></div>
                 <button class="btn btn-sm btn-light text-muted" onclick="showTagPicker('ticket', {{ ticket.id }}, reloadTags)">
                    <i class="bi bi-plus-circle"></i>
                </button>
            </div>
            
             <!-- Internal Note Alert -->
            {% if ticket.internal_note %}
            <div class="alert alert-warning mt-3 mb-0 d-flex align-items-start border-warning" style="background-color: #fff3cd;">
                 <i class="bi bi-shield-lock-fill me-2 fs-5 text-warning"></i>
                 <div>
                     <strong><i class="bi bi-eye-slash"></i> Internt Notat:</strong>
                     <span style="white-space: pre-wrap;">{{ ticket.internal_note }}</span>
                 </div>
            </div>
            {% endif %}
        </div>

        <!-- Action Buttons Removed (Moved to specific sections) -->
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Description -->
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">
                            <i class="bi bi-file-text"></i> Beskrivelse
                        </div>
                        <div class="description-box">
                            {{ ticket.description or 'Ingen beskrivelse' }}
                        </div>
                    </div>
                </div>

                <!-- Comments -->
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">
                            <i class="bi bi-chat-dots"></i> Kommentarer ({{ comments|length }})
                        </div>
                        
                        <!-- Quick Comment Input -->
                        <div class="mb-4 p-3 bg-light rounded-3 border">
                            <textarea id="quickCommentText" class="form-control border-0 bg-white mb-2 shadow-sm" rows="2" placeholder="Skriv en kommentar... (Ctrl+Enter for at sende)"></textarea>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="quickCommentInternal">
                                    <label class="form-check-label small text-muted fw-bold" for="quickCommentInternal">
                                        <i class="bi bi-shield-lock-fill text-warning"></i> Internt Notat
                                    </label>
                                </div>
                                <button class="btn btn-primary btn-sm px-4 rounded-pill" onclick="submitQuickComment()">
                                    Send <i class="bi bi-send-fill ms-1"></i>
                                </button>
                            </div>
                        </div>

                        {% if comments %}
                            {% for comment in comments %}
                            <div class="comment {% if comment.internal_note %}internal{% endif %}">
                                <div class="comment-header">
                                    <span class="comment-author">
                                        <i class="bi bi-person-circle"></i> 
                                        {{ comment.user_name or 'System' }}
                                        {% if comment.internal_note %}
                                        <span class="badge bg-warning text-dark ms-2">Internal</span>
                                        {% endif %}
                                    </span>
                                    <span class="comment-date">
                                        {{ comment.created_at.strftime('%d-%m-%Y %H:%M') if comment.created_at else '-' }}
                                    </span>
                                </div>
                                <div class="comment-text">
                                    {{ comment.comment_text }}
                                </div>
                            </div>
                            {% endfor %}
                        {% else %}
                        <div class="empty-state">
                            <i class="bi bi-chat"></i>
                            <p>Ingen kommentarer endnu</p>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Worklog -->
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="section-title mb-0">
                                <i class="bi bi-clock-history"></i> Worklog
                                <span class="badge bg-light text-dark border ms-2" id="totalHoursBadge">...</span>
                            </div>
                            <button class="btn btn-primary btn-sm rounded-pill" onclick="showWorklogModal()">
                                <i class="bi bi-plus-lg"></i> Log Tid
                            </button>
                        </div>
                        {% if worklog %}
                        <div class="table-responsive">
                            <table class="table worklog-table">
                                <thead>
                                    <tr>
                                        <th>Dato</th>
                                        <th>Timer</th>
                                        <th>Type</th>
                                        <th>Beskrivelse</th>
                                        <th>Status</th>
                                        <th>Medarbejder</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for entry in worklog %}
                                    <tr>
                                        <td>{{ entry.work_date.strftime('%d-%m-%Y') if entry.work_date else '-' }}</td>
                                        <td><strong>{{ "%.2f"|format(entry.hours) }}t</strong></td>
                                        <td>{{ entry.work_type }}</td>
                                        <td>{{ entry.description or '-' }}</td>
                                        <td>
                                            <span class="badge {% if entry.status == 'billable' %}bg-success{% elif entry.status == 'draft' %}bg-warning{% else %}bg-secondary{% endif %}">
                                                {{ entry.status }}
                                            </span>
                                        </td>
                                        <td>{{ entry.user_name or '-' }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% else %}
                        <div class="empty-state">
                            <i class="bi bi-clock"></i>
                            <p>Ingen worklog entries endnu</p>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Attachments -->
                {% if attachments %}
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">
                            <i class="bi bi-paperclip"></i> Vedhæftninger ({{ attachments|length }})
                        </div>
                        {% for attachment in attachments %}
                        <a href="/api/v1/attachments/{{ attachment.id }}/download" class="attachment">
                            <i class="bi bi-file-earmark"></i>
                            {{ attachment.filename }}
                            <small class="ms-2">({{ (attachment.file_size / 1024)|round(1) }} KB)</small>
                        </a>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Metadata Card (Consolidated) -->
                <div class="card mb-3">
                     <div class="card-header bg-white py-3 border-bottom">
                         <h6 class="mb-0 fw-bold text-dark"><i class="bi bi-info-circle me-2"></i>Detaljer</h6>
                     </div>
                     <div class="list-group list-group-flush small">
                         <div class="list-group-item d-flex justify-content-between align-items-center px-3 py-3">
                             <span class="text-muted">Ansvarlig</span>
                             <span class="badge bg-light text-dark border">{{ ticket.assigned_to_name or 'Ubesat' }}</span>
                         </div>
                         <div class="list-group-item d-flex justify-content-between align-items-center px-3 py-3">
                             <span class="text-muted">Oprettet</span>
                             <span class="font-monospace">{{ ticket.created_at.strftime('%d-%m-%Y %H:%M') if ticket.created_at else '-' }}</span>
                         </div>
                         <div class="list-group-item d-flex justify-content-between align-items-center px-3 py-3">
                             <span class="text-muted">Opdateret</span>
                             <span class="font-monospace">{{ ticket.updated_at.strftime('%d-%m-%Y %H:%M') if ticket.updated_at else '-' }}</span>
                         </div>
                         {% if ticket.resolved_at %}
                         <div class="list-group-item d-flex justify-content-between align-items-center px-3 py-3 bg-light">
                             <span class="text-success fw-bold">Løst</span>
                             <span class="font-monospace">{{ ticket.resolved_at.strftime('%d-%m-%Y %H:%M') }}</span>
                         </div>
                         {% endif %}
                     </div>
                </div>

                <!-- Contacts -->
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">
                            <i class="bi bi-people"></i> Kontakter
                            <button class="btn btn-sm btn-outline-primary ms-auto" onclick="showAddContactModal()">
                                <i class="bi bi-plus-circle"></i> Tilføj
                            </button>
                        </div>
                        <div id="contactsList">
                            <div class="text-center text-muted py-2">
                                <i class="bi bi-hourglass-split"></i> Indlæser...
                            </div>
                        </div>
                    </div>
                </div>




            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
        // ============================================
        // QUICK COMMENT & STATUS
        // ============================================
        
        async function updateStatus(newStatus) {
            try {
                // Determine API endpoint and method
                // Using generic update for now, ideally use specific status endpoint if workflow requires
                const response = await fetch('/api/v1/ticket/tickets/{{ ticket.id }}', {
                    method: 'PATCH',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ status: newStatus })
                });

                if (!response.ok) throw new Error('Failed to update status');
                
                // Show success feedback
                const select = document.getElementById('quickStatus');
                
                // Optional: Flash success or reload. 
                // Reload is safer to update all timestamps and UI states
                window.location.reload();
                
            } catch (error) {
                console.error('Error updating status:', error);
                alert('Fejl ved opdatering af status');
                // Revert select if possible
                window.location.reload();
            }
        }

        async function submitQuickComment() {
            const textarea = document.getElementById('quickCommentText');
            const internalCheck = document.getElementById('quickCommentInternal');
            const text = textarea.value.trim();
            const isInternal = internalCheck.checked;
            
            if (!text) return;
            
            try {
                const response = await fetch('/api/v1/ticket/tickets/{{ ticket.id }}/comments', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        comment_text: text,
                        is_internal: isInternal,
                        ticket_id: {{ ticket.id }}
                    })
                });

                if (!response.ok) throw new Error('Failed to post comment');
                
                // Clear input
                textarea.value = '';
                
                // Reload page to show new comment (simpler than DOM manipulation for complex layouts)
                window.location.reload();
                
            } catch (error) {
                console.error('Error posting comment:', error);
                alert('Kunne ikke sende kommentar');
            }
        }

        // Handle Ctrl+Enter in comment box
        document.getElementById('quickCommentText')?.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'Enter') {
                submitQuickComment();
            }
        });

        // ============================================
        // WORKLOG MANAGEMENT
        // ============================================

        async function showWorklogModal() {
            const today = new Date().toISOString().split('T')[0];
            
            // Fetch Prepaid Cards for this customer
            let prepaidOptions = '';
            let activePrepaidCards = [];
            try {
                const response = await fetch('/api/v1/prepaid-cards?status=active&customer_id={{ ticket.customer_id }}');
                if (response.ok) {
                    const cards = await response.json();
                    activePrepaidCards = cards || [];
                    if (activePrepaidCards.length > 0) {
                        const cardOpts = activePrepaidCards.map(c => {
                            const remaining = parseFloat(c.remaining_hours).toFixed(2);
                            const expiryText = c.expires_at ? ` • Udløber ${new Date(c.expires_at).toLocaleDateString('da-DK')}` : '';
                            return `<option value="card_${c.id}">💳 Klippekort #${c.id} (${remaining}t tilbage${expiryText})</option>`;
                        }).join('');
                        
                        prepaidOptions = `<optgroup label="Klippekort">${cardOpts}</optgroup>`;
                    }
                }
            } catch (e) {
                console.error("Failed to load prepaid cards", e);
            }
            
            // Store for use in submitWorklog
            window._activePrepaidCards = activePrepaidCards;
            
            const modalHtml = `
                <div class="modal fade" id="worklogModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title"><i class="bi bi-clock-history"></i> Registrer Tid</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="row g-3">
                                    <div class="col-6">
                                        <label class="form-label">Dato *</label>
                                        <input type="date" class="form-control" id="worklogDate" value="${today}" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Tid brugt *</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" id="worklogHours" min="0" placeholder="tt" step="1">
                                            <span class="input-group-text">:</span>
                                            <input type="number" class="form-control" id="worklogMinutes" min="0" placeholder="mm" step="1">
                                        </div>
                                        <div class="form-text text-end" id="worklogTotalCalc" style="font-size: 0.8rem;">Total: 0.00 timer</div>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Type</label>
                                        <select class="form-select" id="worklogType">
                                            <option value="support" selected>Support</option>
                                            <option value="troubleshooting">Fejlsøgning</option>
                                            <option value="development">Udvikling</option>
                                            <option value="on_site">Kørsel / On-site</option>
                                            <option value="meeting">Møde</option>
                                            <option value="other">Andet</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Afregning</label>
                                        <select class="form-select" id="worklogBilling">
                                            <option value="invoice" selected>Faktura</option>
                                            ${prepaidOptions}
                                            <option value="internal">Internt / Ingen faktura</option>
                                            <option value="warranty">Garanti / Reklamation</option>
                                            <option value="unknown">❓ Ved ikke (Send til godkendelse)</option>
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Beskrivelse</label>
                                        <textarea class="form-control" id="worklogDesc" rows="3" placeholder="Hvad er der brugt tid på?"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="worklogInternal">
                                            <label class="form-check-label text-muted" for="worklogInternal">
                                                Skjul for kunde (Intern registrering)
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuller</button>
                                <button type="button" class="btn btn-primary" onclick="submitWorklog()">
                                    <i class="bi bi-save"></i> Gem Tid
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            // Clean up old
            const oldModal = document.getElementById('worklogModal');
            if(oldModal) oldModal.remove();

            document.body.insertAdjacentHTML('beforeend', modalHtml);
            const modal = new bootstrap.Modal(document.getElementById('worklogModal'));
            modal.show();
            
            // Setup listeners for live calculation
            const calcTotal = () => {
                const h = parseInt(document.getElementById('worklogHours').value) || 0;
                const m = parseInt(document.getElementById('worklogMinutes').value) || 0;
                const total = h + (m / 60);
                document.getElementById('worklogTotalCalc').innerText = `Total: ${total.toFixed(2)} timer`;
            };
            document.getElementById('worklogHours').addEventListener('input', calcTotal);
            document.getElementById('worklogMinutes').addEventListener('input', calcTotal);
            
            // Focus hours (skipping date usually)
            setTimeout(() => document.getElementById('worklogHours').focus(), 500);
        }

        async function submitWorklog() {
            const date = document.getElementById('worklogDate').value;
            // Calculate hours from split fields
            const h = parseInt(document.getElementById('worklogHours').value) || 0;
            const m = parseInt(document.getElementById('worklogMinutes').value) || 0;
            const hours = h + (m / 60);

            const type = document.getElementById('worklogType').value;
            let billing = document.getElementById('worklogBilling').value;
            const desc = document.getElementById('worklogDesc').value;
            const isInternal = document.getElementById('worklogInternal').checked;
            
            let prepaidCardId = null;

            if(!date || hours <= 0) {
                alert("Udfyld venligst dato og tid (timer/minutter)");
                return;
            }
            
            // Handle prepaid card selection
            if(billing.startsWith('card_')) {
                prepaidCardId = parseInt(billing.replace('card_', ''));
                billing = 'prepaid_card'; // Reset to enum value
            } else if(billing === 'prepaid_card') {
                // User selected generic "Klippekort" (shouldn't happen with new UI, but handle it)
                // Backend will auto-select if only 1 active, or error if >1
                prepaidCardId = null;
            }

            try {
                const response = await fetch('/api/v1/ticket/tickets/{{ ticket.id }}/worklog', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        ticket_id: {{ ticket.id }},
                        work_date: date,
                        hours: hours,
                        work_type: type,
                        billing_method: billing,
                        description: desc,
                        is_internal: isInternal,
                        prepaid_card_id: prepaidCardId
                    })
                });

                if(!response.ok) {
                   const err = await response.json();
                   throw new Error(err.detail || 'Fejl ved oprettelse');
                }

                // Reload to show
                window.location.reload();

            } catch (e) {
                console.error(e);
                alert("Kunne ikke gemme tidsregistrering: " + e.message);
            }
        }

        // ============================================
        // TAGS MANAGEMENT
        // ============================================

        // Load and render ticket tags
        async function loadTicketTags() {
            try {
                const response = await fetch('/api/v1/tags/entity/ticket/{{ ticket.id }}');
                if (!response.ok) return;
                
                const tags = await response.json();
                const container = document.getElementById('ticketTags');
                if (!container) return; // Guard clause
                
                if (tags.length === 0) {
                    container.innerHTML = '<small class="text-muted"><i class="bi bi-tags"></i> Ingen tags endnu</small>';
                    return;
                }
                
                container.innerHTML = tags.map(tag => `
                    <span class="tag-badge" style="background-color: ${tag.color};">
                        ${tag.icon ? `<i class="bi ${tag.icon}"></i>` : ''}
                        ${tag.name}
                        <button type="button" class="btn-close btn-close-white btn-sm" 
                                onclick="removeTag(${tag.id}, '${tag.name}')"
                                aria-label="Fjern"></button>
                    </span>
                `).join('');
            } catch (error) {
                console.error('Error loading tags:', error);
            }
        }

        async function removeTag(tagId, tagName) {
            if (!confirm(`Fjern tag "${tagName}"?`)) return;
            
            try {
                const response = await fetch(`/api/v1/tags/entity?entity_type=ticket&entity_id={{ ticket.id }}&tag_id=${tagId}`, {
                    method: 'DELETE'
                });
                
                if (!response.ok) throw new Error('Failed to remove tag');
                await loadTicketTags();
            } catch (error) {
                console.error('Error removing tag:', error);
                alert('Fejl ved fjernelse af tag');
            }
        }

        function reloadTags() {
            loadTicketTags();
        }

        // ============================================
        // CONTACTS MANAGEMENT (SEARCHABLE)
        // ============================================
        
        let allContactsCache = [];
        let customersCache = [];
        let selectedContactId = null;

        async function loadContacts() {
            try {
                const response = await fetch('/api/v1/ticket/tickets/{{ ticket.id }}/contacts');
                if (!response.ok) throw new Error('Failed to load contacts');
                
                const data = await response.json();
                const container = document.getElementById('contactsList');
                if (!container) return;
                
                if (!data.contacts || data.contacts.length === 0) {
                    container.innerHTML = `
                        <div class="empty-state py-2">
                            <i class="bi bi-person-x"></i>
                            <p class="mb-0 small">Ingen kontakter tilføjet endnu</p>
                        </div>
                    `;
                    return;
                }
                
                container.innerHTML = data.contacts.map(contact => `
                    <div class="contact-item">
                        <div class="contact-info">
                            <div class="contact-name">
                                <span class="contact-role-badge role-${contact.role}">
                                    ${getRoleLabel(contact.role)}
                                </span>
                                ${contact.first_name} ${contact.last_name}
                            </div>
                            <div class="contact-details">
                                ${contact.email ? `<i class="bi bi-envelope"></i> ${contact.email}` : ''}
                                ${contact.phone ? `<i class="bi bi-telephone ms-2"></i> ${contact.phone}` : ''}
                            </div>
                            ${contact.notes ? `<div class="contact-details mt-1"><i class="bi bi-sticky"></i> ${contact.notes}</div>` : ''}
                        </div>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-primary" onclick="editContactRole(${contact.contact_id}, '${contact.role}', '${contact.notes || ''}')">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-outline-danger" onclick="removeContact(${contact.contact_id}, '${contact.first_name} ${contact.last_name}')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                `).join('');
            } catch (error) {
                console.error('Error loading contacts:', error);
                document.getElementById('contactsList').innerHTML = `
                    <div class="alert alert-warning mb-0">
                        <i class="bi bi-exclamation-triangle"></i> Kunne ikke indlæse kontakter
                    </div>
                `;
            }
        }

        function getRoleLabel(role) {
            const labels = {
                'primary': '⭐ Primær',
                'requester': '📝 Anmoder',
                'assignee': '👤 Ansvarlig',
                'cc': '📧 CC',
                'observer': '👁 Observer',
                'ekstern_it': '💻 Ekstern IT',
                'third_party': '🤝 3. part',
                'electrician': '⚡ Elektriker',
                'consultant': '🎓 Konsulent',
                'vendor': '🏢 Leverandør'
            };
            return labels[role] || ('📌 ' + role.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()));
        }

        async function showAddContactModal() {
            // Load contacts if not cached
            if (allContactsCache.length === 0) {
                try {
                    const response = await fetch('/api/v1/contacts?limit=1000');
                    const data = await response.json();
                    allContactsCache = data.contacts || [];
                } catch (e) {
                    console.error("Failed to load contacts for modal", e);
                    alert("Kunne ikke hente kontaktliste");
                    return; 
                }
            }

            // Check existing contacts
            const ticketContactsResp = await fetch('/api/v1/ticket/tickets/{{ ticket.id }}/contacts');
            const ticketContacts = await ticketContactsResp.json();
            const isFirstContact = !ticketContacts.contacts || ticketContacts.contacts.length === 0;

            // Define Modal HTML
            const modalHtml = `
                <div class="modal fade" id="addContactModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title"><i class="bi bi-person-plus"></i> Tilføj Kontakt</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                
                                <!-- Search Stage -->
                                <div id="contactSearchStage">
                                    <label class="form-label">Find kontakt</label>
                                    <input type="text" class="form-control mb-2" id="contactSearchInput" 
                                           placeholder="Søg navn eller email..." autocomplete="off">
                                    
                                    <div class="list-group" id="contactSearchResults" style="max-height: 250px; overflow-y: auto;">
                                        <!-- Results will appear here -->
                                        <div class="text-center text-muted py-3 small">Begynd at skrive for at søge...</div>
                                    </div>
                                    <div class="mt-2 text-end">
                                        <small class="text-muted">Finder du ikke kontakten? <a href="#" onclick="showCreateStage(); return false;">Smart Opret</a></small>
                                    </div>
                                </div>

                                <!-- Create Stage (Hidden) -->
                                <div id="contactCreateStage" style="display:none;" class="animate__animated animate__fadeIn">
                                    <h6 class="border-bottom pb-2 mb-3 text-primary"><i class="bi bi-person-plus"></i> Hurtig oprettelse</h6>
                                    <div class="row g-2 mb-2">
                                        <div class="col-6">
                                            <label class="form-label small">Fornavn *</label>
                                            <input type="text" class="form-control" id="newContactFirstName" required>
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label small">Efternavn</label>
                                            <input type="text" class="form-control" id="newContactLastName">
                                        </div>
                                    </div>
                                    <div class="mb-2">
                                        <label class="form-label small">Email</label>
                                        <input type="email" class="form-control" id="newContactEmail">
                                    </div>
                                     <div class="mb-2">
                                        <label class="form-label small">Telefon</label>
                                        <input type="tel" class="form-control" id="newContactPhone">
                                    </div>
                                    <div class="mb-2 position-relative">
                                        <label class="form-label small">Firma</label>
                                        <div class="input-group input-group-sm">
                                            <input type="text" class="form-control" id="newContactCompanySearch" placeholder="Søg firma..." autocomplete="off">
                                            <input type="hidden" id="newContactCompanyId" value="{{ ticket.customer_id }}">
                                            <button class="btn btn-outline-secondary" type="button" onclick="clearCompanySelection()">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                        </div>
                                        <div id="companySearchResults" class="list-group position-absolute w-100 shadow-sm" style="display:none; z-index: 1050; max-height: 200px; overflow-y: auto;"></div>
                                        <div class="form-text small" id="selectedCompanyName">Valgt: {{ ticket.customer_name }}</div>
                                    </div>
                                     <div class="mb-3">
                                        <label class="form-label small">Titel</label>
                                        <input type="text" class="form-control" id="newContactTitle">
                                    </div>
                                    
                                    <div class="d-flex justify-content-between pt-2 border-top">
                                         <button type="button" class="btn btn-sm btn-outline-secondary" onclick="cancelCreate()">Annuller</button>
                                         <button type="button" class="btn btn-sm btn-success text-white" onclick="createContactSmart()">
                                            <i class="bi bi-check-lg"></i> Opret & Vælg
                                         </button>
                                    </div>
                                </div>

                                <!-- Selected Stage (Hidden initially) -->
                                <div id="contactSelectedStage" style="display:none;" class="animate__animated animate__fadeIn">
                                    <input type="hidden" id="selectedContactId">
                                    
                                    <div class="alert alert-primary d-flex justify-content-between align-items-center mb-3">
                                        <div>
                                            <i class="bi bi-person-check-fill me-2"></i>
                                            <strong id="selectedContactName">Name</strong>
                                        </div>
                                        <button class="btn btn-sm btn-outline-primary bg-white" onclick="resetContactSelection()">Skift</button>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Rolle *</label>
                                        <select class="form-select" id="roleSelect" onchange="toggleCustomRole()" required>
                                            <optgroup label="Standard roller">
                                                <option value="primary">⭐ Primær kontakt</option>
                                                <option value="requester">📝 Anmoder</option>
                                                <option value="assignee">👤 Ansvarlig</option>
                                                <option value="cc">📧 CC (Carbon Copy)</option>
                                                <option value="observer" selected>👁 Observer</option>
                                            </optgroup>
                                            <optgroup label="Almindelige roller">
                                                <option value="ekstern_it">💻 Ekstern IT</option>
                                                <option value="third_party">🤝 3. part leverandør</option>
                                                <option value="electrician">⚡ Elektriker</option>
                                                <option value="consultant">🎓 Konsulent</option>
                                                <option value="vendor">🏢 Leverandør</option>
                                            </optgroup>
                                            <optgroup label="Custom">
                                                <option value="_custom">✏️ Indtast custom rolle...</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                    
                                    <div class="mb-3" id="customRoleDiv" style="display: none;">
                                        <label class="form-label">Custom Rolle</label>
                                        <input type="text" class="form-control" id="customRoleInput" placeholder="f.eks. projektleder">
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Noter (valgfri)</label>
                                        <textarea class="form-control" id="contactNotes" rows="2" placeholder="Noter om rollen..."></textarea>
                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuller</button>
                                <button type="button" class="btn btn-primary" id="btnAddContactConfirm" onclick="addContact()" disabled>
                                    <i class="bi bi-plus-circle"></i> Tilføj
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            // Clean up old
            const oldModal = document.getElementById('addContactModal');
            if(oldModal) oldModal.remove();

            document.body.insertAdjacentHTML('beforeend', modalHtml);
            const modalEl = document.getElementById('addContactModal');
            const modal = new bootstrap.Modal(modalEl);
            
            // Setup Search Listener
            const input = document.getElementById('contactSearchInput');
            input.addEventListener('input', (e) => filterContacts(e.target.value));

            // Setup First Contact Logic
            if (isFirstContact) {
                document.getElementById('roleSelect').value = 'primary';
                // Note: User still needs to select a contact first
            }

            modal.show();
            // Focus input
            setTimeout(() => input.focus(), 500);
        }

        async function loadCustomers() {
            if(customersCache.length > 0) return;
            try {
                const response = await fetch('/api/v1/customers?limit=100');
                const data = await response.json();
                customersCache = data.customers || data; 
            } catch(e) { console.error("Failed to load customers", e); }
        }

        function showCreateStage() {
            document.getElementById('contactSearchStage').style.display = 'none';
            document.getElementById('contactCreateStage').style.display = 'block';
            document.getElementById('newContactFirstName').focus();
            loadCustomers();
            
            // Setup company search
            const input = document.getElementById('newContactCompanySearch');
            input.addEventListener('input', (e) => filterCustomers(e.target.value));
            input.addEventListener('focus', () => {
                if(input.value.length === 0) filterCustomers('');
            });
            
            // Hide results on blur with delay to allow clicking
            input.addEventListener('blur', () => {
                setTimeout(() => document.getElementById('companySearchResults').style.display = 'none', 200);
            });
        }
        
        function filterCustomers(query) {
            const resultsDiv = document.getElementById('companySearchResults');
            const term = query.toLowerCase();
            
            const matches = customersCache.filter(c => 
                c.name.toLowerCase().includes(term) || 
                (c.cvr_number && c.cvr_number.includes(term))
            ).slice(0, 10);
            
            if(matches.length === 0) {
                resultsDiv.style.display = 'none';
                return;
            }
            
            resultsDiv.innerHTML = matches.map(c => `
                <a href="#" class="list-group-item list-group-item-action small py-1" onclick="selectCompany(${c.id}, '${c.name}'); return false;">
                    ${c.name} <span class="text-muted ms-1">(${c.cvr_number || '-'})</span>
                </a>
            `).join('');
            
            resultsDiv.style.display = 'block';
        }
        
        function selectCompany(id, name) {
            document.getElementById('newContactCompanyId').value = id;
            document.getElementById('selectedCompanyName').innerText = 'Valgt: ' + name;
            document.getElementById('newContactCompanySearch').value = '';
            document.getElementById('companySearchResults').style.display = 'none';
        }
        
        function clearCompanySelection() {
            document.getElementById('newContactCompanyId').value = '';
            document.getElementById('selectedCompanyName').innerText = 'Valgt: (Ingen / Privat)';
            document.getElementById('newContactCompanySearch').value = '';
        }

        function cancelCreate() {
            document.getElementById('contactCreateStage').style.display = 'none';
            document.getElementById('contactSearchStage').style.display = 'block';
        }

        async function createContactSmart() {
            const first = document.getElementById('newContactFirstName').value.trim();
            const last = document.getElementById('newContactLastName').value.trim();
            const email = document.getElementById('newContactEmail').value.trim();
            const phone = document.getElementById('newContactPhone').value.trim();
            const title = document.getElementById('newContactTitle').value.trim();
            const companyId = document.getElementById('newContactCompanyId').value;

            if(!first) {
                alert("Fornavn er påkrævet");
                return;
            }

            try {
                const payload = {
                    first_name: first,
                    last_name: last,
                    email: email || null,
                    phone: phone || null,
                    title: title || null
                };
                
                if(companyId) {
                    payload.company_id = parseInt(companyId);
                }

                const response = await fetch('/api/v1/contacts', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(payload)
                });

                if(!response.ok) {
                   const err = await response.json();
                   throw new Error(err.detail || 'Fejl ved oprettelse');
                }

                const newContact = await response.json();
                
                // Add to cache
                allContactsCache.push(newContact);
                
                // Hide create stage
                document.getElementById('contactCreateStage').style.display = 'none';
                
                // Select the new contact
                selectContact(newContact.id, `${newContact.first_name} ${newContact.last_name}`, newContact.email);

            } catch (e) {
                console.error(e);
                alert("Kunne ikke oprette kontakt: " + e.message);
            }
        }

        function filterContacts(query) {
            const resultsDiv = document.getElementById('contactSearchResults');
            if(!query || query.length < 1) {
                resultsDiv.innerHTML = '<div class="text-center text-muted py-3 small">Indtast navn, email eller firma...</div>';
                return;
            }

            const term = query.toLowerCase();
            const matches = allContactsCache.filter(c => 
                (c.first_name + ' ' + c.last_name).toLowerCase().includes(term) ||
                (c.email || '').toLowerCase().includes(term) ||
                (c.company_names && c.company_names.some(comp => comp.toLowerCase().includes(term)))
            ).slice(0, 10); // Limit results

            if(matches.length === 0) {
                resultsDiv.innerHTML = '<div class="text-center text-muted py-3 small">Ingen kontakter fundet</div>';
                return;
            }

            resultsDiv.innerHTML = matches.map(c => {
                const companies = (c.company_names && c.company_names.length > 0) 
                    ? `<div class="small text-muted mt-1"><i class="bi bi-building"></i> ${c.company_names.join(', ')}</div>` 
                    : '';
                
                return `
                <a href="#" class="list-group-item list-group-item-action contact-result-item" 
                   onclick="selectContact(${c.id}, '${c.first_name} ${c.last_name}', '${c.email||''}')">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>${c.first_name} ${c.last_name}</strong>
                            <div class="small text-muted">${c.email || ''}</div>
                            ${companies}
                        </div>
                        <i class="bi bi-chevron-right text-muted"></i>
                    </div>
                </a>
            `}).join('');
        }

        function selectContact(id, name, email) {
            selectedContactId = id;
            document.getElementById('selectedContactId').value = id;
            document.getElementById('selectedContactName').innerText = name;
            
            // Switch stages
            document.getElementById('contactSearchStage').style.display = 'none';
            document.getElementById('contactSelectedStage').style.display = 'block';
            
            // Enable save
            document.getElementById('btnAddContactConfirm').disabled = false;
        }

        function resetContactSelection() {
            selectedContactId = null;
            document.getElementById('contactSearchStage').style.display = 'block';
            document.getElementById('contactSelectedStage').style.display = 'none';
            document.getElementById('btnAddContactConfirm').disabled = true;
            document.getElementById('contactSearchInput').focus();
        }

        function toggleCustomRole() {
            const roleSelect = document.getElementById('roleSelect');
            const customDiv = document.getElementById('customRoleDiv');
            const customInput = document.getElementById('customRoleInput');
            
            if (roleSelect.value === '_custom') {
                customDiv.style.display = 'block';
                customInput.required = true;
            } else {
                customDiv.style.display = 'none';
                customInput.required = false;
            }
        }

        async function addContact() {
            if (!selectedContactId) {
                alert('Vælg venligst en kontakt');
                return;
            }
            
            let role = document.getElementById('roleSelect').value;
            const notes = document.getElementById('contactNotes').value;
            
            // Custom role logic
            if (role === '_custom') {
                const customRole = document.getElementById('customRoleInput').value.trim();
                if (!customRole) {
                    alert('Indtast venligst en custom rolle');
                    return;
                }
                role = customRole.toLowerCase().replace(/\s+/g, '_').replace(/-/g, '_');
            }
            
            try {
                const url = `/api/v1/ticket/tickets/{{ ticket.id }}/contacts?contact_id=${selectedContactId}&role=${role}${notes ? '&notes=' + encodeURIComponent(notes) : ''}`;
                const response = await fetch(url, { method: 'POST' });
                
                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.detail || 'Failed to add contact');
                }
                
                // Close modal and reload
                bootstrap.Modal.getInstance(document.getElementById('addContactModal')).hide();
                await loadContacts();
            } catch (error) {
                console.error('Error adding contact:', error);
                alert('Fejl: ' + error.message);
            }
        }

        async function editContactRole(contactId, currentRole, currentNotes) {
            const newRole = prompt(`Ændr rolle (primary, requester, assignee, cc, observer):`, currentRole);
            if (!newRole || newRole === currentRole) return;
            
            const notes = prompt(`Noter (valgfri):`, currentNotes);
            
            try {
                const url = `/api/v1/ticket/tickets/{{ ticket.id }}/contacts/${contactId}?role=${newRole}${notes ? '&notes=' + encodeURIComponent(notes) : ''}`;
                const response = await fetch(url, { method: 'PUT' });
                
                if (!response.ok) throw new Error('Failed to update contact');
                await loadContacts();
            } catch (error) {
                console.error('Error updating contact:', error);
                alert('Fejl ved opdatering af kontakt');
            }
        }

        async function removeContact(contactId, contactName) {
            if (!confirm(`Fjern ${contactName} fra ticket?`)) return;
            
            try {
                const response = await fetch(`/api/v1/ticket/tickets/{{ ticket.id }}/contacts/${contactId}`, {
                    method: 'DELETE'
                });
                
                if (!response.ok) throw new Error('Failed to remove contact');
                await loadContacts();
            } catch (error) {
                console.error('Error removing contact:', error);
                alert('Fejl ved fjernelse af kontakt');
            }
        }

        // Load tags and contacts on page load
        document.addEventListener('DOMContentLoaded', () => {
            loadTicketTags();
            loadContacts();
            
            // Initialize tooltips/popovers if any
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
              return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        });

        // Global Tag Picker Override
        if (window.tagPicker) {
            const originalShow = window.tagPicker.show.bind(window.tagPicker);
            window.showTagPicker = function(entityType, entityId, onSelect) {
                window.tagPicker.show(entityType, entityId, () => {
                    loadTicketTags();
                    if (onSelect) onSelect();
                });
            };
        }
    </script>
{% endblock %}
