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

{% block title %}Tag Administration - BMC Hub{% endblock %}

{% block extra_css %}
    <style>
        :root {
            --primary-color: #0f4c75;
            --workflow-color: #ff6b35;
            --status-color: #ffd700;
            --category-color: #0f4c75;
            --priority-color: #dc3545;
            --billing-color: #2d6a4f;
            --brand-color: #006d77;
            --type-color: #5c677d;
        }

        .tag-badge {
            display: inline-block;
            padding: 0.35em 0.65em;
            font-size: 0.9em;
            font-weight: 500;
            border-radius: 0.375rem;
            margin: 0.2em;
            cursor: pointer;
            transition: all 0.2s;
        }

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

        .tag-type-workflow { background-color: var(--workflow-color); color: white; }
        .tag-type-status { background-color: var(--status-color); color: #333; }
        .tag-type-category { background-color: var(--category-color); color: white; }
        .tag-type-priority { background-color: var(--priority-color); color: white; }
        .tag-type-billing { background-color: var(--billing-color); color: white; }
        .tag-type-brand { background-color: var(--brand-color); color: white; }
        .tag-type-type { background-color: var(--type-color); color: white; }

        .tag-list-item {
            padding: 1rem;
            border-left: 4px solid transparent;
            transition: all 0.2s;
        }

        .tag-list-item:hover {
            background-color: #f8f9fa;
        }

        .tag-list-item[data-type="workflow"] { border-left-color: var(--workflow-color); }
        .tag-list-item[data-type="status"] { border-left-color: var(--status-color); }
        .tag-list-item[data-type="category"] { border-left-color: var(--category-color); }
        .tag-list-item[data-type="priority"] { border-left-color: var(--priority-color); }
        .tag-list-item[data-type="billing"] { border-left-color: var(--billing-color); }
        .tag-list-item[data-type="brand"] { border-left-color: var(--brand-color); }
        .tag-list-item[data-type="type"] { border-left-color: var(--type-color); }

        .color-preview {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            border: 2px solid #dee2e6;
        }

        .section-tabs .nav-link {
            color: var(--primary-color);
            font-weight: 600;
        }

        .section-tabs .nav-link.active {
            background-color: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }

        .module-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
            font-size: 0.8rem;
            background: #e7f1f8;
            color: #0b3552;
            border: 1px solid #c7dceb;
        }

        .usage-table thead th {
            position: sticky;
            top: 0;
            z-index: 1;
            background: #fff;
            white-space: nowrap;
        }

        .usage-table .filter-cell {
            min-width: 160px;
        }

        .usage-sort-btn {
            border: 0;
            background: transparent;
            color: inherit;
            font-weight: 600;
            padding: 0;
        }

        .usage-sort-btn .bi {
            font-size: 0.75rem;
            opacity: 0.55;
        }

        .usage-sort-btn.active .bi {
            opacity: 1;
        }

        @media (max-width: 991px) {
            .usage-table .filter-cell {
                min-width: 130px;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container-fluid py-4">
        <div class="row mb-4">
            <div class="col">
                <h1><i class="bi bi-tags"></i> Tag Administration</h1>
                <p class="text-muted">Administrer tags der bruges på tværs af hele systemet</p>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTagModal">
                    <i class="bi bi-plus-circle"></i> Opret Tag
                </button>
            </div>
        </div>

        <ul class="nav nav-pills section-tabs mb-4" id="sectionTabs">
            <li class="nav-item">
                <button type="button" class="nav-link active" data-section="admin">Tag administration</button>
            </li>
            <li class="nav-item">
                <button type="button" class="nav-link" data-section="search">Tag søgning</button>
            </li>
        </ul>

        <div id="tagAdminSection">

        <!-- Type Filter Tabs -->
        <ul class="nav nav-tabs mb-4" id="typeFilter">
            <li class="nav-item">
                <a class="nav-link active" href="#" data-type="all">Alle</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="workflow">
                    <span class="tag-badge tag-type-workflow">Workflow</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="status">
                    <span class="tag-badge tag-type-status">Status</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="category">
                    <span class="tag-badge tag-type-category">Category</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="priority">
                    <span class="tag-badge tag-type-priority">Priority</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="billing">
                    <span class="tag-badge tag-type-billing">Billing</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="brand">
                    <span class="tag-badge tag-type-brand">Brand</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="type">
                    <span class="tag-badge tag-type-type">Type</span>
                </a>
            </li>
        </ul>

        <!-- Tags List -->
        <div class="card">
            <div class="card-body p-0">
                <div id="tagsList" class="list-group list-group-flush">
                    <div class="text-center p-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Indlæser...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <div id="tagSearchSection" class="d-none">
            <div class="card mb-3">
                <div class="card-body">
                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                        <div>
                            <h5 class="mb-1">Tag søgning på tværs af moduler</h5>
                            <p class="text-muted mb-0 small">Filtrer efter tag-navn, type og modul. Hver række viser tydeligt hvilket modul tagningen kommer fra.</p>
                        </div>
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="resetUsageFiltersBtn">
                            <i class="bi bi-arrow-counterclockwise"></i> Nulstil filtre
                        </button>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover align-middle usage-table mb-2">
                            <thead>
                                <tr>
                                    <th>
                                        <button type="button" class="usage-sort-btn" data-sort-by="tag_name">
                                            Tag <i class="bi bi-chevron-expand"></i>
                                        </button>
                                    </th>
                                    <th>
                                        <button type="button" class="usage-sort-btn" data-sort-by="tag_type">
                                            Type <i class="bi bi-chevron-expand"></i>
                                        </button>
                                    </th>
                                    <th>
                                        <button type="button" class="usage-sort-btn" data-sort-by="module">
                                            Modul <i class="bi bi-chevron-expand"></i>
                                        </button>
                                    </th>
                                    <th>Objekt</th>
                                    <th>Entity type</th>
                                    <th>
                                        <button type="button" class="usage-sort-btn" data-sort-by="entity_id">
                                            Entity ID <i class="bi bi-chevron-expand"></i>
                                        </button>
                                    </th>
                                    <th>
                                        <button type="button" class="usage-sort-btn active" data-sort-by="tagged_at">
                                            Tagget <i class="bi bi-sort-down"></i>
                                        </button>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="filter-cell">
                                        <input id="usageFilterTagName" type="search" class="form-control form-control-sm" placeholder="Søg tag-navn">
                                    </th>
                                    <th class="filter-cell">
                                        <select id="usageFilterTagType" class="form-select form-select-sm">
                                            <option value="">Alle typer</option>
                                            <option value="workflow">workflow</option>
                                            <option value="status">status</option>
                                            <option value="category">category</option>
                                            <option value="priority">priority</option>
                                            <option value="billing">billing</option>
                                            <option value="brand">brand</option>
                                            <option value="type">type</option>
                                        </select>
                                    </th>
                                    <th class="filter-cell">
                                        <select id="usageFilterModule" class="form-select form-select-sm">
                                            <option value="">Alle moduler</option>
                                        </select>
                                    </th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="usageTableBody">
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">Indlæser...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
                        <div class="small text-muted" id="usageSummary">-</div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-primary" id="usagePrevBtn">Forrige</button>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="usageNextBtn">Næste</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create/Edit Tag Modal -->
    <div class="modal fade" id="createTagModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Opret Tag</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="tagForm">
                        <input type="hidden" id="tagId">
                        
                        <div class="mb-3">
                            <label for="tagName" class="form-label">Navn *</label>
                            <input type="text" class="form-control" id="tagName" required>
                        </div>

                        <div class="mb-3">
                            <label for="tagType" class="form-label">Type *</label>
                            <select class="form-select" id="tagType" required>
                                <option value="">Vælg type...</option>
                                <option value="workflow">Workflow - Trigger automatisering</option>
                                <option value="status">Status - Tilstand/fase</option>
                                <option value="category">Category - Emne/område</option>
                                <option value="priority">Priority - Hastighed</option>
                                <option value="billing">Billing - Økonomi</option>
                                <option value="brand">Brand - Leverandør/produktbrand</option>
                                <option value="type">Type - Sagstype/arbejdstype</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="tagCatchWords" class="form-label">Catch words</label>
                            <textarea class="form-control" id="tagCatchWords" rows="3" placeholder="fx: office 365, outlook, smtp"></textarea>
                            <small class="text-muted">Brug komma eller ny linje mellem ord. Bruges til auto-forslag på sager.</small>
                        </div>

                        <div class="mb-3">
                            <label for="tagDescription" class="form-label">Beskrivelse</label>
                            <textarea class="form-control" id="tagDescription" rows="3"></textarea>
                            <small class="text-muted">Forklaring af hvad tagget gør eller betyder</small>
                        </div>

                        <div class="mb-3">
                            <label for="tagColor" class="form-label">Farve *</label>
                            <div class="input-group">
                                <input type="color" class="form-control form-control-color" id="tagColor" value="#0f4c75">
                                <input type="text" class="form-control" id="tagColorHex" value="#0f4c75" pattern="^#[0-9A-Fa-f]{6}$">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="tagIcon" class="form-label">Ikon (valgfrit)</label>
                            <input type="text" class="form-control" id="tagIcon" placeholder="bi-star">
                            <small class="text-muted">Bootstrap Icons navn (fx: bi-star, bi-flag)</small>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="tagActive" checked>
                            <label class="form-check-label" for="tagActive">
                                Aktiv
                            </label>
                        </div>
                    </form>
                </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="saveTagBtn">Gem</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script>
        let allTags = [];
        let currentFilter = 'all';
        let usageDebounceTimer = null;
        const usageState = {
            filters: {
                tag_name: '',
                tag_type: '',
                module: ''
            },
            page: 1,
            page_size: 25,
            sort_by: 'tagged_at',
            sort_dir: 'desc',
            total: 0,
            total_pages: 0
        };

        // Load tags on page load
        document.addEventListener('DOMContentLoaded', () => {
            loadTags();
            loadTagUsage();
            setupEventListeners();
            const initialSection = window.location.hash === '#search' ? 'search' : 'admin';
            switchTagSection(initialSection, false);
        });

        function switchTagSection(section, updateHash = true) {
            const normalized = section === 'search' ? 'search' : 'admin';
            document.querySelectorAll('#sectionTabs .nav-link').forEach(link => {
                link.classList.toggle('active', link.dataset.section === normalized);
            });

            document.getElementById('tagAdminSection').classList.toggle('d-none', normalized !== 'admin');
            document.getElementById('tagSearchSection').classList.toggle('d-none', normalized !== 'search');

            if (updateHash) {
                const hash = normalized === 'search' ? '#search' : '#admin';
                window.history.replaceState(null, '', hash);
            }
        }

        function setupEventListeners() {
            // Section tabs
            document.querySelectorAll('#sectionTabs button').forEach(btn => {
                btn.addEventListener('click', () => {
                    switchTagSection(btn.dataset.section);
                });
            });

            // Type filter tabs
            document.querySelectorAll('#typeFilter a').forEach(tab => {
                tab.addEventListener('click', (e) => {
                    e.preventDefault();
                    document.querySelectorAll('#typeFilter a').forEach(t => t.classList.remove('active'));
                    e.target.closest('a').classList.add('active');
                    currentFilter = e.target.closest('a').dataset.type;
                    renderTags();
                });
            });

            // Color picker sync
            document.getElementById('tagColor').addEventListener('input', (e) => {
                document.getElementById('tagColorHex').value = e.target.value;
            });
            document.getElementById('tagColorHex').addEventListener('input', (e) => {
                const color = e.target.value;
                if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
                    document.getElementById('tagColor').value = color;
                }
            });

            // Type change updates color
            document.getElementById('tagType').addEventListener('change', (e) => {
                const type = e.target.value;
                const colorMap = {
                    'workflow': '#ff6b35',
                    'status': '#ffd700',
                    'category': '#0f4c75',
                    'priority': '#dc3545',
                    'billing': '#2d6a4f',
                    'brand': '#006d77',
                    'type': '#5c677d'
                };
                if (colorMap[type]) {
                    document.getElementById('tagColor').value = colorMap[type];
                    document.getElementById('tagColorHex').value = colorMap[type];
                }
            });

            // Save button
            document.getElementById('saveTagBtn').addEventListener('click', saveTag);

            // Usage filters
            document.getElementById('usageFilterTagName').addEventListener('input', () => {
                usageState.filters.tag_name = document.getElementById('usageFilterTagName').value.trim();
                usageState.page = 1;
                debounceUsageLoad();
            });
            document.getElementById('usageFilterTagType').addEventListener('change', () => {
                usageState.filters.tag_type = document.getElementById('usageFilterTagType').value;
                usageState.page = 1;
                loadTagUsage();
            });
            document.getElementById('usageFilterModule').addEventListener('change', () => {
                usageState.filters.module = document.getElementById('usageFilterModule').value;
                usageState.page = 1;
                loadTagUsage();
            });

            document.getElementById('resetUsageFiltersBtn').addEventListener('click', () => {
                usageState.filters = { tag_name: '', tag_type: '', module: '' };
                usageState.page = 1;
                document.getElementById('usageFilterTagName').value = '';
                document.getElementById('usageFilterTagType').value = '';
                document.getElementById('usageFilterModule').value = '';
                loadTagUsage();
            });

            document.getElementById('usagePrevBtn').addEventListener('click', () => {
                if (usageState.page > 1) {
                    usageState.page -= 1;
                    loadTagUsage();
                }
            });

            document.getElementById('usageNextBtn').addEventListener('click', () => {
                if (usageState.page < usageState.total_pages) {
                    usageState.page += 1;
                    loadTagUsage();
                }
            });

            document.querySelectorAll('.usage-sort-btn').forEach(btn => {
                btn.addEventListener('click', () => {
                    const sortBy = btn.dataset.sortBy;
                    if (usageState.sort_by === sortBy) {
                        usageState.sort_dir = usageState.sort_dir === 'asc' ? 'desc' : 'asc';
                    } else {
                        usageState.sort_by = sortBy;
                        usageState.sort_dir = sortBy === 'tagged_at' ? 'desc' : 'asc';
                    }
                    usageState.page = 1;
                    updateSortIndicators();
                    loadTagUsage();
                });
            });

            // Modal reset on close
            document.getElementById('createTagModal').addEventListener('hidden.bs.modal', () => {
                document.getElementById('tagForm').reset();
                document.getElementById('tagId').value = '';
                document.querySelector('#createTagModal .modal-title').textContent = 'Opret Tag';
            });
        }

        async function loadTags() {
            try {
                const response = await fetch('/api/v1/tags');
                if (!response.ok) throw new Error('Failed to load tags');
                allTags = await response.json();
                renderTags();
            } catch (error) {
                console.error('Error loading tags:', error);
                document.getElementById('tagsList').innerHTML = `
                    <div class="alert alert-danger m-3">
                        <i class="bi bi-exclamation-triangle"></i> Fejl ved indlæsning af tags
                    </div>
                `;
            }
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#39;');
        }

        function debounceUsageLoad() {
            if (usageDebounceTimer) {
                clearTimeout(usageDebounceTimer);
            }
            usageDebounceTimer = setTimeout(() => loadTagUsage(), 280);
        }

        function updateSortIndicators() {
            document.querySelectorAll('.usage-sort-btn').forEach(btn => {
                const icon = btn.querySelector('i');
                if (!icon) return;
                btn.classList.remove('active');
                icon.className = 'bi bi-chevron-expand';
                if (btn.dataset.sortBy === usageState.sort_by) {
                    btn.classList.add('active');
                    icon.className = usageState.sort_dir === 'asc' ? 'bi bi-sort-up' : 'bi bi-sort-down';
                }
            });
        }

        function renderUsageTable(items) {
            const tbody = document.getElementById('usageTableBody');
            if (!Array.isArray(items) || !items.length) {
                tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">Ingen taggede rækker matcher filtrene.</td></tr>';
                return;
            }

            tbody.innerHTML = items.map(row => {
                const taggedAt = row.tagged_at ? new Date(row.tagged_at).toLocaleString('da-DK') : '-';
                const color = /^#[0-9A-Fa-f]{6}$/.test(String(row.tag_color || '')) ? row.tag_color : '#0f4c75';
                const inactiveBadge = row.tag_is_active ? '' : '<span class="badge bg-secondary ms-2">Inaktiv</span>';
                const entityTitle = escapeHtml(row.entity_title || `#${row.entity_id || ''}`);
                const entityCell = row.entity_url
                    ? `<a href="${escapeHtml(row.entity_url)}" class="text-decoration-none fw-semibold">${entityTitle}</a>`
                    : `<span class="fw-semibold">${entityTitle}</span>`;

                return `
                    <tr>
                        <td>
                            <span class="tag-badge" style="background:${color}; color:#fff; margin:0;">${escapeHtml(row.tag_name)}</span>
                            ${inactiveBadge}
                        </td>
                        <td><span class="badge bg-light text-dark text-uppercase">${escapeHtml(row.tag_type)}</span></td>
                        <td><span class="module-badge"><i class="bi bi-box"></i>${escapeHtml(row.module)}</span></td>
                        <td>${entityCell}</td>
                        <td><span class="text-muted">${escapeHtml(row.entity_type)}</span></td>
                        <td><strong>#${escapeHtml(row.entity_id)}</strong></td>
                        <td class="small text-muted">${escapeHtml(taggedAt)}</td>
                    </tr>
                `;
            }).join('');
        }

        function renderUsageSummary() {
            const summary = document.getElementById('usageSummary');
            const prevBtn = document.getElementById('usagePrevBtn');
            const nextBtn = document.getElementById('usageNextBtn');

            const total = usageState.total;
            const page = usageState.page;
            const pageSize = usageState.page_size;
            const from = total ? ((page - 1) * pageSize + 1) : 0;
            const to = total ? Math.min(page * pageSize, total) : 0;

            summary.textContent = `Viser ${from}-${to} af ${total} rækker`;
            prevBtn.disabled = page <= 1;
            nextBtn.disabled = page >= usageState.total_pages;
        }

        function fillModuleFilter(options) {
            const select = document.getElementById('usageFilterModule');
            const currentValue = usageState.filters.module;
            const base = '<option value="">Alle moduler</option>';
            const rows = (options || []).map(option => {
                return `<option value="${escapeHtml(option.value)}">${escapeHtml(option.label)}</option>`;
            }).join('');
            select.innerHTML = `${base}${rows}`;
            select.value = currentValue || '';
        }

        async function loadTagUsage() {
            const tbody = document.getElementById('usageTableBody');
            tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted py-4">Indlæser...</td></tr>';

            try {
                const params = new URLSearchParams({
                    page: String(usageState.page),
                    page_size: String(usageState.page_size),
                    sort_by: usageState.sort_by,
                    sort_dir: usageState.sort_dir
                });

                if (usageState.filters.tag_name) params.set('tag_name', usageState.filters.tag_name);
                if (usageState.filters.tag_type) params.set('tag_type', usageState.filters.tag_type);
                if (usageState.filters.module) params.set('module', usageState.filters.module);

                const response = await fetch(`/api/v1/tags/usage?${params.toString()}`);
                if (!response.ok) {
                    throw new Error('Kunne ikke hente tag søgning');
                }

                const payload = await response.json();
                usageState.total = Number(payload?.pagination?.total || 0);
                usageState.total_pages = Number(payload?.pagination?.total_pages || 0);
                usageState.page = Number(payload?.pagination?.page || usageState.page);

                fillModuleFilter(payload.module_options || []);
                renderUsageTable(payload.items || []);
                renderUsageSummary();
                updateSortIndicators();
            } catch (error) {
                tbody.innerHTML = `<tr><td colspan="7" class="text-center text-danger py-4">Fejl ved indlæsning af tag søgning: ${escapeHtml(error.message)}</td></tr>`;
                document.getElementById('usageSummary').textContent = 'Fejl ved datahentning';
            }
        }

        function renderTags() {
            const container = document.getElementById('tagsList');
            const filteredTags = currentFilter === 'all' 
                ? allTags 
                : allTags.filter(t => t.type === currentFilter);

            if (filteredTags.length === 0) {
                container.innerHTML = `
                    <div class="text-center p-4 text-muted">
                        <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                        <p class="mt-3">Ingen tags fundet</p>
                    </div>
                `;
                return;
            }

            container.innerHTML = filteredTags.map(tag => `
                <div class="tag-list-item list-group-item" data-type="${tag.type}">
                    <div class="d-flex align-items-center">
                        <div class="color-preview me-3" style="background-color: ${tag.color};">
                            ${tag.icon ? `<i class="bi ${tag.icon}" style="font-size: 1.5rem; color: white; line-height: 40px;"></i>` : ''}
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex align-items-center mb-1">
                                <h5 class="mb-0 me-2">${tag.name}</h5>
                                <span class="tag-badge tag-type-${tag.type}">${tag.type}</span>
                                ${!tag.is_active ? '<span class="badge bg-secondary ms-2">Inaktiv</span>' : ''}
                            </div>
                            ${tag.description ? `<p class="text-muted mb-0 small">${tag.description}</p>` : ''}
                            ${Array.isArray(tag.catch_words) && tag.catch_words.length ? `<p class="mb-0 mt-1"><small class="text-muted">Catch words: ${tag.catch_words.join(', ')}</small></p>` : ''}
                        </div>
                        <div class="btn-group">
                            <button class="btn btn-sm btn-outline-primary" onclick="editTag(${tag.id})">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteTag(${tag.id}, '${tag.name}')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        async function saveTag() {
            const tagId = document.getElementById('tagId').value;
            const tagData = {
                name: document.getElementById('tagName').value,
                type: document.getElementById('tagType').value,
                description: document.getElementById('tagDescription').value || null,
                color: document.getElementById('tagColorHex').value,
                icon: document.getElementById('tagIcon').value || null,
                is_active: document.getElementById('tagActive').checked,
                catch_words: document.getElementById('tagCatchWords').value
                    .split(/[\n,]+/)
                    .map(v => v.trim().toLowerCase())
                    .filter(v => v.length > 1)
            };

            try {
                const url = tagId ? `/api/v1/tags/${tagId}` : '/api/v1/tags';
                const method = tagId ? 'PUT' : 'POST';
                
                const response = await fetch(url, {
                    method: method,
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(tagData)
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.detail || 'Failed to save tag');
                }

                bootstrap.Modal.getInstance(document.getElementById('createTagModal')).hide();
                await loadTags();
            } catch (error) {
                alert('Fejl: ' + error.message);
            }
        }

        function editTag(tagId) {
            const tag = allTags.find(t => t.id === tagId);
            if (!tag) return;

            document.getElementById('tagId').value = tag.id;
            document.getElementById('tagName').value = tag.name;
            document.getElementById('tagType').value = tag.type;
            document.getElementById('tagDescription').value = tag.description || '';
            document.getElementById('tagColor').value = tag.color;
            document.getElementById('tagColorHex').value = tag.color;
            document.getElementById('tagIcon').value = tag.icon || '';
            document.getElementById('tagActive').checked = tag.is_active;
            document.getElementById('tagCatchWords').value = Array.isArray(tag.catch_words) ? tag.catch_words.join(', ') : '';

            document.querySelector('#createTagModal .modal-title').textContent = 'Rediger Tag';
            new bootstrap.Modal(document.getElementById('createTagModal')).show();
        }

        async function deleteTag(tagId, tagName) {
            if (!confirm(`Slet tag "${tagName}"?\n\nDette vil også fjerne tagget fra alle steder det er brugt.`)) {
                return;
            }

            try {
                const response = await fetch(`/api/v1/tags/${tagId}`, {
                    method: 'DELETE'
                });

                if (!response.ok) throw new Error('Failed to delete tag');
                await loadTags();
            } catch (error) {
                alert('Fejl ved sletning: ' + error.message);
            }
        }
    </script>
{% endblock %}