<%@ Page Title="Server-Sent Events Progress" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Server-Sent Events Progress - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Server-Sent Events Progress</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Server-Sent Events Progress</div>
    <div class="demo-card-body">
        <p class="demo-description">
            This conceptual demo shows how server-sent events (SSE) can provide real-time progress
            updates from the server during chunked uploads. The server pushes processing status
            as chunks are received and assembled.
        </p>

        <div id="uploader"></div>
        <div class="mt-3">
            <h6>Server Events Stream</h6>
            <div id="sseLog" class="p-2 bg-dark text-success border rounded font-monospace"
                 style="max-height:200px;overflow-y:auto;font-size:.8rem;">
                <div class="text-muted">Waiting for upload to start...</div>
            </div>
        </div>

        <div class="code-panel">
            <pre><code>// Client: start SSE listener after upload begins
var uploader = AjaxUploader.create('#uploader', {
    uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
    chunked: true,
    chunkSize: 2 * 1024 * 1024,
    onTaskStart: function(task) {
        // Connect to SSE endpoint for server-side progress
        var sse = new EventSource('/api/upload/progress/' + task.id);
        sse.onmessage = function(e) {
            var data = JSON.parse(e.data);
            logSSE('Server: chunk ' + data.chunk + ' received');
        };
    }
});

// Server: implement SSE endpoint via Generic Handler (.ashx)
// or WebAPI controller</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    var sseLog = document.getElementById('sseLog');
    var chunkCount = 0;

    function logSSE(msg) {
        var div = document.createElement('div');
        div.textContent = '> ' + msg;
        sseLog.appendChild(div);
        sseLog.scrollTop = sseLog.scrollHeight;
    }

    AjaxUploader.create(document.getElementById('uploader'), {
        uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/chunk") %>',
        chunked: true,
        chunkSize: 2 * 1024 * 1024,
        onTaskStart: function(task) {
            sseLog.innerHTML = '';
            chunkCount = 0;
            logSSE('Connection established for: ' + task.fileName);
        },
        onTaskProgress: function(task) {
            chunkCount++;
            logSSE('Chunk #' + chunkCount + ' received - ' + Math.round(task.percent) + '% complete');
        },
        onTaskComplete: function(task) {
            logSSE('Assembly complete: ' + task.fileName);
            logSSE('All ' + chunkCount + ' chunks merged successfully.');
            logSSE('Stream closed.');
        },
        onTaskError: function(task, err) {
            logSSE('ERROR: ' + err);
        }
    });
</script>
</asp:Content>
