bmc_hub/app/conversations/frontend/templates/my_conversations.html

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

{% block title %}Mine Samtaler - BMC Hub{% endblock %}

{% block content %}
<div class="container-fluid pb-5">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3">
        <div>
            <h1 class="h2 fw-bold text-primary mb-1"><i class="bi bi-mic me-2"></i>Mine samtaler</h1>
            <p class="text-muted mb-0 small">Administrer og analysér dine optagede telefonsamtaler.</p>
        </div>
        <div class="d-flex gap-2">
            <div class="btn-group" role="group">
                <input type="radio" class="btn-check" name="filterradio" id="btnradio1" autocomplete="off" checked onclick="filterView('all')">
                <label class="btn btn-outline-primary btn-sm" for="btnradio1">Alle</label>

                <input type="radio" class="btn-check" name="filterradio" id="btnradio2" autocomplete="off" onclick="filterView('private')">
                <label class="btn btn-outline-primary btn-sm" for="btnradio2">Private</label>
            </div>
            <button class="btn btn-primary btn-sm shadow-sm" onclick="loadMyConversations()">
                <i class="bi bi-arrow-clockwise"></i> Opdater
            </button>
        </div>
    </div>

    <div class="row g-4">
        <!-- Sidebar: List of Conversations -->
        <div class="col-lg-4 col-xl-3">
            <div class="card shadow-sm h-100 border-0">
                <div class="card-header bg-white border-bottom-0 pt-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-light border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" class="form-control bg-light border-start-0" id="conversationSearch" placeholder="Søg..." onkeyup="filterConversations()">
                    </div>
                </div>
                <div class="card-body p-0 overflow-auto" style="max-height: 80vh;" id="conversationsList">
                    <div class="text-center py-5">
                        <div class="spinner-border text-primary spinner-border-sm"></div>
                        <p class="mt-2 text-muted small">Indlæser...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content: Detailed One View -->
        <div class="col-lg-8 col-xl-9">
            <div id="conversationDetail" class="h-100">
                <!-- Placeholder State -->
                <div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted py-5 border rounded-3 bg-light">
                    <i class="bi bi-chat-square-quote display-4 mb-3 text-secondary"></i>
                    <h5>Vælg en samtale for at se detaljer</h5>
                    <p class="small">Klik på en samtale i listen til venstre.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .list-group-item-action { cursor: pointer; border-left: 3px solid transparent; }
    .list-group-item-action:hover { background-color: #f8f9fa; }
    .list-group-item-action.active { background-color: #e9ecef; color: #000; border-left-color: var(--bs-primary); border-color: rgba(0,0,0,0.125); }
    .timestamp-link { cursor: pointer; color: var(--bs-primary); text-decoration: none; font-weight: 500;}
    .timestamp-link:hover { text-decoration: underline; }
    .transcript-line { transition: background-color 0.2s; border-radius: 4px; padding: 2px 4px; }
    .transcript-line:hover { background-color: #fff3cd; }
</style>

<script>
let allConversations = [];
let currentConversationId = null;

document.addEventListener('DOMContentLoaded', () => {
    loadMyConversations();
});

async function loadMyConversations() {
    try {
        const response = await fetch('/api/v1/conversations');
        if (!response.ok) throw new Error('Fejl ved hentning');
        
        allConversations = await response.json();
        renderConversationList(allConversations);
        
        // If we have data and no selection, select the first one
        if (allConversations.length > 0 && !currentConversationId) {
            selectConversation(allConversations[0].id);
        } else if (currentConversationId) {
            // Refresh current view if needed
            selectConversation(currentConversationId); 
        }
        
    } catch(e) {
        console.error("Error loading conversations:", e);
        document.getElementById('conversationsList').innerHTML = 
            '<div class="p-3 text-center text-danger small">Kunne ikke hente liste. <br><button class="btn btn-link btn-sm" onclick="loadMyConversations()">Prøv igen</button></div>';
    }
}

function renderConversationList(list) {
    const container = document.getElementById('conversationsList');
    if(list.length === 0) {
        container.innerHTML = '<div class="text-center py-5 text-muted small">Ingen samtaler fundet</div>';
        return;
    }
    
    container.innerHTML = '<div class="list-group list-group-flush">' + list.map(c => `
        <a onclick="selectConversation(${c.id})" class="list-group-item list-group-item-action py-3 ${currentConversationId === c.id ? 'active' : ''}" id="conv-item-${c.id}" data-type="${c.is_private ? 'private' : 'public'}" data-text="${(c.title||'').toLowerCase()}">
            <div class="d-flex w-100 justify-content-between mb-1">
                <strong class="mb-1 text-truncate" style="max-width: 70%;">${c.title}</strong>
                <small class="text-muted" style="font-size: 0.75rem;">${new Date(c.created_at).toLocaleDateString()}</small>
            </div>
            <div class="d-flex justify-content-between align-items-center">
                <small class="text-muted text-truncate" style="max-width: 150px;">
                    ${c.customer_id ? '<i class="bi bi-building"></i> Kunde #' + c.customer_id : 'Ingen kunde'}
                </small>
                
                ${c.is_private ? '<i class="bi bi-lock-fill text-warning small"></i>' : ''}
                ${c.category === 'Support' ? '<span class="badge bg-info text-dark rounded-pill" style="font-size:0.6rem">Support</span>' : ''}
                ${c.category === 'Sales' ? '<span class="badge bg-success rounded-pill" style="font-size:0.6rem">Salg</span>' : ''}
            </div>
        </a>
    `).join('') + '</div>';
}

function selectConversation(id) {
    currentConversationId = id;
    const conv = allConversations.find(c => c.id === id);
    if (!conv) return;

    // Highlight active item
    document.querySelectorAll('.list-group-item-action').forEach(el => el.classList.remove('active'));
    const activeItem = document.getElementById(`conv-item-${id}`);
    if(activeItem) activeItem.classList.add('active');

    // Render Detail View
    const detailContainer = document.getElementById('conversationDetail');
    
    // Simulate segments if not present (simple sentence splitting)
    const segments = conv.transcript ? splitIntoSegments(conv.transcript) : [];
    const formattedTranscript = segments.map((seg, idx) => {
        // Mock timestamps if simple text
        const time = formatTime(idx * 5); // Fake 5 sec increments for demo if no real timestamps
        return `<div class="d-flex mb-3 transcript-line">
            <div class="me-3 text-muted font-monospace small pt-1" style="min-width: 50px;">
                <a href="#" onclick="seekAudio(${idx * 5}); return false;" class="timestamp-link">${time}</a>
            </div>
            <div class="flex-grow-1">${seg}</div>
        </div>`;
    }).join('');

    detailContainer.innerHTML = `
        <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-white py-3 border-bottom-0">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h3 class="mb-1 fw-bold text-dark">${conv.title}</h3>
                        <p class="text-muted small mb-2">
                            <i class="bi bi-clock"></i> ${new Date(conv.created_at).toLocaleString()} 
                            <span class="mx-2">•</span> 
                            <span class="badge bg-light text-dark border">${conv.category || 'Generelt'}</span>
                        </p>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="dropdown">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><h6 class="dropdown-header">Handlinger</h6></li>
                            <li><a class="dropdown-item" href="#" onclick="togglePrivacy(${conv.id}, ${!conv.is_private})">${conv.is_private ? 'Gør offentlig' : 'Gør privat'}</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#" onclick="deleteConversation(${conv.id})">Slet samtale</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="card-body overflow-auto">
                <!-- Audio Player -->
                <div class="card bg-light border-0 mb-4">
                    <div class="card-body p-3">
                         <div class="d-flex align-items-center mb-2">
                             <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width:40px;height:40px">
                                <i class="bi bi-play-fill fs-4"></i>
                             </div>
                             <div class="flex-grow-1">
                                <h6 class="mb-0 small fw-bold">Optagelse</h6>
                                <span class="text-muted small" style="font-size: 0.7rem">MP3 • ${conv.duration_seconds || '--:--'}</span>
                             </div>
                         </div>
                        <audio controls class="w-100" id="audioPlayer">
                            <source src="/api/v1/conversations/${conv.id}/audio" type="audio/mpeg">
                        </audio>
                    </div>
                </div>

                <!-- Summary Section -->
                <div class="mb-4">
                    <h6 class="text-uppercase text-muted small fw-bold mb-2">Resumé</h6>
                    <div class="p-3 bg-light rounded-3 border-start border-4 border-info">
                        ${conv.summary || '<span class="text-muted fst-italic">Intet resumé genereret endnu.</span>'}
                    </div>
                </div>

                <!-- Transcript Section -->
                <div>
                     <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="text-uppercase text-muted small fw-bold mb-0">Transskription</h6>
                        <button class="btn btn-sm btn-link text-decoration-none p-0" onclick="copyTranscript()">Kopier tekst</button>
                    </div>
                    
                    ${conv.transcript ? 
                        `<div class="p-2">${formattedTranscript}</div>` : 
                        '<div class="alert alert-info small">Ingen transskription tilgængelig.</div>'
                    }
                </div>
            </div>
        </div>
    `;
}

function splitIntoSegments(text) {
    // If text already has timestamps like [00:00], preserve them.
    // Otherwise split by sentence endings.
    if (!text) return [];
    
    // Very basic sentence splitter
    return text.match( /[^\.!\?]+[\.!\?]+/g ) || [text];
}

function formatTime(seconds) {
    const m = Math.floor(seconds / 60);
    const s = Math.floor(seconds % 60);
    return `${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`;
}

function seekAudio(seconds) {
    const audio = document.getElementById('audioPlayer');
    if(audio) {
        audio.currentTime = seconds;
        audio.play();
    }
}

function copyTranscript() {
    // Logic to copy text
    const conv = allConversations.find(c => c.id === currentConversationId);
    if(conv && conv.transcript) {
        navigator.clipboard.writeText(conv.transcript);
        alert('Tekst kopieret!');
    }
}

// ... Keep existing helper functions (togglePrivacy, deleteConversation, etc) but allow them to refresh list properly ...

async function togglePrivacy(id, makePrivate) {
    await fetch(`/api/v1/conversations/${id}`, {
        method: 'PATCH',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({is_private: makePrivate})
    });
    // Update local state without full reload
    const c = allConversations.find(x => x.id === id);
    if(c) c.is_private = makePrivate;
    loadMyConversations(); // Reload for sorting/filtering
}

async function deleteConversation(id) {
    if(!confirm('Vil du slette denne samtale?')) return;
    const hard = confirm('Permanent sletning?');
    await fetch(`/api/v1/conversations/${id}?hard_delete=${hard}`, { method: 'DELETE' });
    currentConversationId = null;
    loadMyConversations();
    document.getElementById('conversationDetail').innerHTML = '<div class="d-flex flex-column align-items-center justify-content-center h-100 text-muted py-5"><i class="bi bi-check-circle display-4 mb-3"></i><h5>Slettet</h5></div>';
}

function filterView(type) {
    const items = document.querySelectorAll('.list-group-item');
    items.forEach(item => {
        if (type === 'all') item.classList.remove('d-none');
        else if (type === 'private') {
             item.dataset.type === 'private' ? item.classList.remove('d-none') : item.classList.add('d-none');
        }
    });
}
function filterConversations() {
    const query = document.getElementById('conversationSearch').value.toLowerCase();
    const items = document.querySelectorAll('.list-group-item');
    items.forEach(item => {
        const text = item.dataset.text;
        text.includes(query) ? item.classList.remove('d-none') : item.classList.add('d-none');
    });
}

</script>
{% endblock %}