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

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

{% block extra_css %}
<style>
        .ticket-header {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
            padding: 2rem;
            border-radius: var(--border-radius);
            color: white;
            margin-bottom: 2rem;
        }

        .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">
            <div class="ticket-number">{{ ticket.ticket_number }}</div>
            <div class="ticket-title">{{ ticket.subject }}</div>
            <div class="mt-3">
                <span class="badge badge-status-{{ ticket.status }}">
                    {{ ticket.status.replace('_', ' ').title() }}
                </span>
                <span class="badge badge-priority-{{ ticket.priority }}">
                    {{ ticket.priority.title() }} Priority
                </span>
            </div>
            <div class="tags-container" id="ticketTags">
                <!-- Tags loaded via JavaScript -->
            </div>
            <button class="add-tag-btn mt-2" onclick="showTagPicker('ticket', {{ ticket.id }}, reloadTags)">
                <i class="bi bi-plus-circle"></i> Tilføj Tag (⌥⇧T)
            </button>
        </div>

        <!-- Action Buttons -->
        <div class="action-buttons mb-4">
            <a href="/api/v1/ticket/tickets/{{ ticket.id }}" class="btn btn-outline-primary">
                <i class="bi bi-pencil"></i> Rediger
            </a>
            <button class="btn btn-outline-secondary" onclick="addComment()">
                <i class="bi bi-chat"></i> Tilføj Kommentar
            </button>
            <button class="btn btn-outline-secondary" onclick="addWorklog()">
                <i class="bi bi-clock"></i> Log Tid
            </button>
            <a href="/ticket/tickets" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Tilbage
            </a>
        </div>

        <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>
                        {% 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="section-title">
                            <i class="bi bi-clock-history"></i> Worklog ({{ worklog|length }})
                        </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">
                <!-- Ticket Info -->
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">
                            <i class="bi bi-info-circle"></i> Ticket Information
                        </div>
                        <div class="info-item mb-3">
                            <label>Kunde</label>
                            <div class="value">
                                {% if ticket.customer_name %}
                                <a href="/customers/{{ ticket.customer_id }}" style="text-decoration: none; color: var(--accent);">
                                    {{ ticket.customer_name }}
                                </a>
                                {% else %}
                                <span class="text-muted">Ikke angivet</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="info-item mb-3">
                            <label>Tildelt til</label>
                            <div class="value">
                                {{ ticket.assigned_to_name or 'Ikke tildelt' }}
                            </div>
                        </div>
                        <div class="info-item mb-3">
                            <label>Oprettet</label>
                            <div class="value">
                                {{ ticket.created_at.strftime('%d-%m-%Y %H:%M') if ticket.created_at else '-' }}
                            </div>
                        </div>
                    </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>

                <!-- Back to Ticket Info continuation -->
                <div class="card">
                    <div class="card-body">
                        <div class="info-item mb-3">
                            <label>Senest opdateret</label>
                            <div class="value">
                                {{ ticket.updated_at.strftime('%d-%m-%Y %H:%M') if ticket.updated_at else '-' }}
                            </div>
                        </div>
                        {% if ticket.resolved_at %}
                        <div class="info-item mb-3">
                            <label>Løst</label>
                            <div class="value">
                                {{ ticket.resolved_at.strftime('%d-%m-%Y %H:%M') }}
                            </div>
                        </div>
                        {% endif %}
                        {% if ticket.first_response_at %}
                        <div class="info-item mb-3">
                            <label>Første svar</label>
                            <div class="value">
                                {{ ticket.first_response_at.strftime('%d-%m-%Y %H:%M') }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Tags -->
                {% if ticket.tags %}
                <div class="card">
                    <div class="card-body">
                        <div class="section-title">
                            <i class="bi bi-tags"></i> Tags
                        </div>
                        {% for tag in ticket.tags %}
                        <span class="badge bg-secondary me-1 mb-1">#{{ tag }}</span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
        // Add comment (placeholder - integrate with API)
        function addComment() {
            alert('Add comment functionality - integrate with POST /api/v1/ticket/tickets/{{ ticket.id }}/comments');
        }

        // Add worklog (placeholder - integrate with API)
        function addWorklog() {
            alert('Add worklog functionality - integrate with POST /api/v1/ticket/tickets/{{ ticket.id }}/worklog');
        }

        // 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 (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
        // ============================================

        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 (!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() {
            // Fetch all contacts for selection
            try {
                const response = await fetch('/api/v1/contacts?limit=1000');
                if (!response.ok) throw new Error('Failed to load contacts');
                
                const data = await response.json();
                const contacts = data.contacts || [];
                
                // Check if this ticket has any contacts yet
                const ticketContactsResp = await fetch('/api/v1/ticket/tickets/{{ ticket.id }}/contacts');
                const ticketContacts = await ticketContactsResp.json();
                const isFirstContact = !ticketContacts.contacts || ticketContacts.contacts.length === 0;
                
                // Create modal content
                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">
                                    <div class="mb-3">
                                        <label class="form-label">Kontakt *</label>
                                        <select class="form-select" id="contactSelect" required>
                                            <option value="">Vælg kontakt...</option>
                                            ${contacts.map(c => `
                                                <option value="${c.id}">${c.first_name} ${c.last_name} ${c.email ? '(' + c.email + ')' : ''}</option>
                                            `).join('')}
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Rolle *</label>
                                        <div id="firstContactNotice" class="alert alert-info mb-2" style="display: none;">
                                            <i class="bi bi-star"></i> <strong>Første kontakt</strong> - Rollen sættes automatisk til "Primær kontakt"
                                        </div>
                                        <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. 'bygningsingeniør' eller 'projektleder'">
                                        <small class="text-muted">Brug lowercase og underscore i stedet for mellemrum (f.eks. bygnings_ingeniør)</small>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Noter (valgfri)</label>
                                        <textarea class="form-control" id="contactNotes" rows="2" placeholder="Evt. noter om kontaktens rolle..."></textarea>
                                    </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="addContact()">
                                        <i class="bi bi-plus-circle"></i> Tilføj
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                // Remove old modal if exists
                const oldModal = document.getElementById('addContactModal');
                if (oldModal) oldModal.remove();
                
                // Append and show new modal
                document.body.insertAdjacentHTML('beforeend', modalHtml);
                const modal = new bootstrap.Modal(document.getElementById('addContactModal'));
                
                // Show notice and disable role selector if first contact
                if (isFirstContact) {
                    document.getElementById('firstContactNotice').style.display = 'block';
                    document.getElementById('roleSelect').value = 'primary';
                    document.getElementById('roleSelect').disabled = true;
                }
                
                modal.show();
            } catch (error) {
                console.error('Error:', error);
                alert('Fejl ved indlæsning af kontakter');
            }
        }

        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() {
            const contactId = document.getElementById('contactSelect').value;
            let role = document.getElementById('roleSelect').value;
            const notes = document.getElementById('contactNotes').value;
            
            if (!contactId) {
                alert('Vælg venligst en kontakt');
                return;
            }
            
            // If custom role selected, use the custom input
            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=${contactId}&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();
        });

        // Override global tag picker to auto-reload after adding
        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 %}
