import re

def main():
    with open('app/modules/sag/templates/detail.html', 'r', encoding='utf-8') as f:
        html = f.read()

    # --- 1. Topbar fix ---
    topbar_pattern = re.compile(r'<!-- Quick Info Bar \(Redesigned\) -->.*?<!-- Tabs Navigation -->', re.DOTALL)
    
    new_topbar = """<!-- Hero Header (Redesigned) -->
    <div class="card mb-4 border-0 shadow-sm hero-header" style="border-radius: 8px;">
        <div class="card-body p-3 px-4">
            <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                
                <!-- Left: Who & What -->
                <div class="d-flex flex-wrap align-items-center gap-4">
                    <div class="d-flex align-items-center">
                        <span class="badge" style="background: var(--accent); font-size: 1.1rem; padding: 0.5em 0.8em; margin-right: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">#{{ case.id }}</span>
                        <span class="badge {{ 'bg-success' if case.status == 'åben' else 'bg-secondary' }}" style="font-size: 0.9rem; padding: 0.5em 0.8em;">{{ case.status }}</span>
                    </div>
                    
                    <div class="d-flex flex-column">
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.70rem; letter-spacing: 0.5px;">Kunde</span>
                        {% if customer %}
                        <a href="/customers/{{ customer.id }}" class="fw-bold fs-5 text-dark text-decoration-none hover-primary">
                            {{ customer.name }}
                        </a>
                        {% else %}
                        <span class="fs-5 text-muted">Ingen kunde</span>
                        {% endif %}
                    </div>

                    <div class="d-flex flex-column">
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.70rem; letter-spacing: 0.5px;">Kontakt</span>
                        {% if hovedkontakt %}
                        <span class="fw-bold fs-6 text-dark hover-primary" style="cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px;" onclick="showKontaktModal()" title="Se kontaktinfo">
                            {{ hovedkontakt.first_name ~ ' ' ~ hovedkontakt.last_name }}
                        </span>
                        {% else %}
                        <span class="fs-6 text-muted fst-italic">Ingen</span>
                        {% endif %}
                    </div>

                    <div class="d-flex flex-column border-end pe-4">
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.70rem; letter-spacing: 0.5px;">Afdeling</span>
                        <span class="fs-6 hover-primary" style="cursor: pointer;" onclick="showAfdelingModal()" title="Ændre afdeling">
                            {{ customer.department if customer and customer.department else 'N/A' }}
                        </span>
                    </div>
                    
                    <div class="d-flex flex-column pe-4">
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.70rem; letter-spacing: 0.5px;">Ansvarlig</span>
                        <div class="d-flex gap-2">
                            <select id="assignmentUserSelect" class="form-select form-select-sm shadow-none" style="border: none; background-color: #f8f9fa; font-weight: bold; width: auto; font-size: 0.9rem;" onchange="saveAssignment()">
                                <option value="">Ingen (Bruger)</option>
                                {% for user in assignment_users or [] %}
                                <option value="{{ user.user_id }}" {% if case.ansvarlig_bruger_id == user.user_id %}selected{% endif %}>{{ user.display_name }}</option>
                                {% endfor %}
                            </select>
                            <select id="assignmentGroupSelect" class="form-select form-select-sm shadow-none" style="border: none; background-color: #f8f9fa; font-weight: bold; width: auto; font-size: 0.9rem;" onchange="saveAssignment()">
                                <option value="">Ingen (Gruppe)</option>
                                {% for group in assignment_groups or [] %}
                                <option value="{{ group.id }}" {% if case.assigned_group_id == group.id %}selected{% endif %}>{{ group.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Right: Time & Dates -->
                <div class="d-flex flex-wrap align-items-center gap-4">
                    <div class="d-flex flex-column text-end border-end pe-4">
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.70rem; letter-spacing: 0.5px;">Datoer <i class="bi bi-info-circle text-muted" title="Oprettet / Opdateret"></i></span>
                        <div class="small mt-1">
                            <span class="text-muted fw-bold" style="font-size: 0.8rem;">Opr:</span> {{ case.created_at.strftime('%d/%m-%y') if case.created_at else '-' }}
                            <span class="text-muted mx-1">|</span>
                            <span class="text-muted" style="font-size: 0.8rem;">Opd:</span> {{ case.updated_at.strftime('%d/%m-%y') if case.updated_at else '-' }}
                        </div>
                    </div>

                    <div class="d-flex flex-column text-end">
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.70rem; letter-spacing: 0.5px;">Deadline</span>
                        <div class="d-flex align-items-center justify-content-end mt-1">
                            {% if case.deadline %}
                                <span class="badge bg-light text-dark border {{ 'text-danger border-danger' if is_deadline_overdue else '' }}" style="font-size: 0.85rem; font-weight: 500;">
                                    <i class="bi bi-clock me-1"></i>{{ case.deadline.strftime('%d/%m-%y') }}
                                </span>
                            {% else %}
                                <span class="text-muted small fst-italic">Ingen</span>
                            {% endif %}
                            <button class="btn btn-link btn-sm p-0 ms-1 text-muted" onclick="openDeadlineModal()" title="Rediger deadline"><i class="bi bi-pencil-square"></i></button>
                        </div>
                    </div>

                    <div class="d-flex flex-column text-end">
                        <span class="text-muted text-uppercase fw-bold" style="font-size: 0.70rem; letter-spacing: 0.5px;">Udsat</span>
                        <div class="d-flex align-items-center justify-content-end mt-1">
                            {% if case.deferred_until %}
                                <span class="badge bg-light text-dark border" style="font-size: 0.85rem; font-weight: 500;">
                                    <i class="bi bi-calendar-event me-1"></i>{{ case.deferred_until.strftime('%d/%m-%y') }}
                                </span>
                            {% else %}
                                <span class="text-muted small fst-italic">Nej</span>
                            {% endif %}
                            <button class="btn btn-link btn-sm p-0 ms-1 text-muted" onclick="openDeferredModal()" title="Rediger udsættelse"><i class="bi bi-pencil-square"></i></button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Tabs Navigation -->"""
    html, n = topbar_pattern.subn(new_topbar, html)
    print(f"Topbar replaced: {n}")

    # --- 2. Hovedbeskrivelsen! ---
    desc_pattern = re.compile(r'<!-- Main Case Info -->.*?<div class="row mb-3">\s*<div class="col-12 mb-3">\s*<div class="card h-100 d-flex flex-column" data-module="pipeline"', re.DOTALL)
    
    new_desc = """<!-- MAIN HERO CARD: Titel & Beskrivelse -->
        <div class="col-12 mb-4 mt-2">
            <div class="card shadow-sm border-0 border-start border-4 border-primary" style="background-color: var(--bg-card); border-radius: 8px;">
                <div class="card-body p-4 pt-4 pb-5 position-relative">
                    <div class="d-flex justify-content-between align-items-start mb-4">
                        <div class="w-100 pe-3">
                            <h2 class="mb-2 fw-bolder" style="color: var(--accent); font-size: 1.8rem; letter-spacing: -0.5px;">
                                {{ case.titel }}
                            </h2>
                            <div class="d-flex align-items-center gap-2 mb-1 mt-2">
                                <span class="badge {{ 'bg-success' if case.status == 'åben' else 'bg-secondary' }} px-2 py-1 shadow-sm">{{ case.status }}</span>
                                <span class="badge bg-light text-dark border px-2 py-1">{{ case.template_key or case.type or 'ticket' }}</span>
                            </div>
                        </div>
                        
                        <div class="d-flex gap-2 flex-shrink-0 mt-1">
                            <a href="/sag/{{ case.id }}/edit" class="btn btn-outline-primary shadow-sm" style="border-radius: 6px;">
                                <i class="bi bi-pencil me-1"></i>Rediger sag
                            </a>
                            <button onclick="confirmDeleteCase()" class="btn btn-outline-danger shadow-sm" style="border-radius: 6px;" title="Slet sag">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mt-4 pt-3 border-top border-light">
                        <div class="d-flex align-items-center mb-3">
                            <i class="bi bi-card-text fs-5 text-muted me-2"></i>
                            <h6 class="text-muted text-uppercase small mb-0 fw-bold" style="letter-spacing: 0.05em;">Opgavebeskrivelse</h6>
                        </div>
                        
                        <div class="description-section rounded bg-white p-4 shadow-sm border" style="min-height: 120px;">
                            <div class="prose text-dark" style="font-size: 1.05rem; line-height: 1.7; white-space: pre-wrap;">{{ case.beskrivelse or '<div class="text-center p-3"><p class="text-muted fst-italic mb-2">Ingen opgavebeskrivelse tilføjet endnu.</p></div>' | safe }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- ROW 1B: Pipeline -->
    <div class="row mb-3">
        <div class="col-12 mb-3">
            <div class="card h-100 d-flex flex-column" data-module="pipeline" """

    html, n2 = desc_pattern.subn(new_desc, html)
    print(f"Desc replaced: {n2}")

    with open('app/modules/sag/templates/detail.html', 'w', encoding='utf-8') as f:
        f.write(html)

if __name__ == '__main__':
    main()