{{template "dashboard/layout.html" .}}

{{define "content"}}
<div class="card shadow-sm border-0">
    <div class="card-header py-3" style="background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);">
        <h5 class="mb-0 text-white"><i class='bx bx-star me-2'></i> Favorites</h5>
    </div>
    <div class="card-body">
        <div id="favorites-list">
            <div class="text-center py-5 text-muted">
                <i class='bx bx-loader-alt bx-spin bx-lg'></i>
                <p class="mt-2">Loading...</p>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
var favoritesData = [];

function formatDate(timestamp) {
    if (!timestamp) return '-';
    var d = new Date(parseInt(timestamp) * 1000);
    if (isNaN(d.getTime())) return '-';
    var year = d.getFullYear();
    var month = ('0' + (d.getMonth() + 1)).slice(-2);
    var day = ('0' + d.getDate()).slice(-2);
    var hours = ('0' + d.getHours()).slice(-2);
    var minutes = ('0' + d.getMinutes()).slice(-2);
    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
}

function removeFavorite(docId, index) {
    BootstrapModal.confirm('Remove this from your favorites?', {icon: 3, title: 'Confirm'}, function() {
        $.ajax({
            url: '/api/documents/' + docId + '/favorite',
            type: 'DELETE',
            dataType: 'json',
            success: function(res) {
                if (res.success) {
                    BootstrapModal.msg('Removed from favorites.', {icon: 1});
                    favoritesData.splice(index, 1);
                    renderFavorites();
                } else {
                    BootstrapModal.msg(res.message || 'Could not remove from favorites.', {icon: 2});
                }
            },
            error: function() {
                BootstrapModal.msg('Something went wrong. Please try again.', {icon: 2});
            }
        });
    });
}

function renderFavorites() {
    var $container = $('#favorites-list');
    if (favoritesData.length === 0) {
        $container.html('<div class="text-center py-5 text-muted"><i class="bx bx-star bx-lg"></i><p class="mt-2">You don\'t have any favorites yet.</p></div>');
        return;
    }
    
    var html = '<div class="table-responsive"><table class="table table-hover align-middle">';
    html += '<thead class="table-light"><tr>';
    html += '<th style="width: 50px;">#</th>';
    html += '<th>Title</th>';
    html += '<th style="width: 150px;">Category</th>';
    html += '<th style="width: 120px;">Added</th>';
    html += '<th style="width: 150px;">Actions</th>';
    html += '</tr></thead><tbody>';
    
    favoritesData.forEach(function(item, index) {
        html += '<tr>';
        html += '<td>' + (index + 1) + '</td>';
        html += '<td>';
        html += '<a href="' + (item.url || '#') + '" class="text-decoration-none" target="_blank">';
        html += '<i class="bx bx-file-blank me-1 text-primary"></i>';
        html += '<strong>' + (item.title || 'Untitled') + '</strong>';
        html += '</a>';
        if (item.description) {
            html += '<br><small class="text-muted">' + item.description + '</small>';
        }
        html += '</td>';
        html += '<td><span class="badge bg-secondary">' + (item.category || '-') + '</span></td>';
        html += '<td><small class="text-muted">' + formatDate(item.created_at) + '</small></td>';
        html += '<td>';
        html += '<a href="' + (item.url || '#') + '" class="btn btn-sm btn-outline-primary me-1" target="_blank">';
        html += '<i class="bx bx-show me-1"></i>View</a>';
        html += '<button class="btn btn-sm btn-outline-danger" onclick="removeFavorite(' + item.document_id + ', ' + index + ')">';
        html += '<i class="bx bx-x me-1"></i>Remove</button>';
        html += '</td>';
        html += '</tr>';
    });
    
    html += '</tbody></table></div>';
    $container.html(html);
}

$(function() {
    $.get('/api?mod=user&act=favorites', function(res) {
        if (res.success && res.data && res.data.length > 0) {
            favoritesData = res.data;
            renderFavorites();
        } else {
            $('#favorites-list').html('<div class="text-center py-5 text-muted"><i class="bx bx-star bx-lg"></i><p class="mt-2">You don\'t have any favorites yet.</p></div>');
        }
    }).fail(function() {
        $('#favorites-list').html('<div class="text-center py-5 text-muted"><i class="bx bx-error-circle bx-lg"></i><p class="mt-2">Couldn\'t load favorites. Please refresh the page.</p></div>');
    });
});
</script>
{{end}}