frontend/js/initial.js

// =============================================
// UrbanFlow — initial.js (Mobile-First)
// Added: touch events, mobile upload UX
// =============================================

let videoId  = null;
let runConfig = {};

// ---- Step navigation ----
function showStep(name) {
    ['modules', 'upload', 'draw'].forEach(s => {
        const el = document.getElementById('step-' + s);
        if (el) el.classList.add('hidden');
    });
    const target = document.getElementById('step-' + name);
    if (target) target.classList.remove('hidden');

    // The canvas has no measurable size while its step is hidden, so it can
    // only be sized once the step is actually on screen.
    if (name === 'draw') initCanvas();

    if (name === 'upload') {
        document.getElementById('upload-progress-container').classList.add('hidden');
        document.getElementById('dropzone').classList.remove('hidden');
        document.getElementById('upload-bar').style.width = '0%';
        document.getElementById('upload-percentage').innerText = '0%';
        document.getElementById('upload-text').innerText = 'Uploading...';
        document.getElementById('upload-text').classList.remove('text-red-500');
    }
}

// ---- File input / dropzone ----
const dropzone  = document.getElementById('dropzone');
const fileInput = document.getElementById('file-input');

if (fileInput) {
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length) uploadFile(fileInput.files[0]);
    });
}

if (dropzone) {
    // Desktop drag-and-drop
    dropzone.addEventListener('dragover', e => {
        e.preventDefault();
        dropzone.classList.add('dz-active');
    });
    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('dz-active');
    });
    dropzone.addEventListener('drop', e => {
        e.preventDefault();
        dropzone.classList.remove('dz-active');
        if (e.dataTransfer.files.length) uploadFile(e.dataTransfer.files[0]);
    });
}

// ---- Upload ----
let currentXHR = null;

const MAX_UPLOAD_BYTES = 500 * 1024 * 1024;

function uploadFile(file) {
    if (currentXHR) currentXHR.abort();

    const dropzoneEl = document.getElementById('dropzone');
    const prog       = document.getElementById('upload-progress-container');
    const bar        = document.getElementById('upload-bar');
    const pct        = document.getElementById('upload-percentage');
    const txt        = document.getElementById('upload-text');

    const fail = (msg) => {
        txt.innerText = msg;
        txt.classList.add('text-red-500');
        if (fileInput) fileInput.value = '';
        // Give the dropzone back so the user can retry without a page reload.
        setTimeout(() => { if (!videoId) showStep('upload'); }, 2600);
    };

    if (file.size > MAX_UPLOAD_BYTES) {
        if (dropzoneEl) dropzoneEl.classList.add('hidden');
        if (prog)       prog.classList.remove('hidden');
        fail('File too large — 500MB maximum');
        return;
    }

    if (dropzoneEl) dropzoneEl.classList.add('hidden');
    if (prog)       prog.classList.remove('hidden');

    // ---- Simulated progress (proxy-buffer-safe) ----
    // The HF proxy buffers the body, so upload.onprogress usually reports 100%
    // long before the server has actually stored the file. Simulate up to 90%,
    // then hand the remaining band to the real post-upload stages so the bar
    // only ever moves forward.
    const fileMB        = file.size / (1024 * 1024);
    const estDurationMs = Math.min(Math.max(fileMB * 1000, 3000), 60000);
    const targetPct     = 90;
    const tickMs        = 200;
    const stepPerTick   = targetPct / (estDurationMs / tickMs);

    let simPct = 0;
    const setPct = (v) => {
        simPct = Math.max(simPct, v);          // never move backwards
        bar.style.width = simPct.toFixed(1) + '%';
        pct.innerText   = Math.floor(simPct) + '%';
    };

    const simInterval = setInterval(() => {
        if (simPct < targetPct) {
            setPct(simPct + stepPerTick);
        } else {
            // Plateau reached: the bytes are sent, the server is still working.
            // Say so instead of leaving a frozen bar with no explanation.
            txt.innerText = 'Processing on server...';
        }
    }, tickMs);

    const form = new FormData();
    form.append('file', file);

    fetch('api/event', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ event: 'UPLOAD_STARTED', meta: { size: fileMB.toFixed(2) } })
    }).catch(()=>{});

    const xhr = new XMLHttpRequest();
    currentXHR = xhr;
    xhr.open('POST', 'upload');
    xhr.timeout = 10 * 60 * 1000;   // large files on a cold Space are slow

    xhr.upload.onprogress = e => {
        if (e.lengthComputable) setPct(Math.min(e.loaded / e.total * targetPct, targetPct));
    };

    xhr.onerror   = () => { clearInterval(simInterval); fail('Network error — check your connection and retry'); };
    xhr.ontimeout = () => { clearInterval(simInterval); fail('Upload timed out — try a shorter clip'); };
    xhr.onabort   = () => { clearInterval(simInterval); };

    xhr.onload = () => {
        clearInterval(simInterval);

        let res = null;
        try { res = JSON.parse(xhr.responseText); } catch (e) { /* non-JSON error page */ }

        if (xhr.status !== 200 || !res || !res.video_id) {
            // Surface the server's own message (rate limit, too large, bad type).
            fail((res && res.error) || `Upload failed (${xhr.status || 'no response'})`);
            return;
        }

        videoId = res.video_id;
        setPct(94);
        txt.innerText = 'Extracting metadata...';

        fetch('config/' + videoId)
            .then(r => r.ok ? r.json() : Promise.reject(new Error('config')))
            .then(cfg => {
                setPct(97);
                runConfig      = cfg;
                runConfig.conf = 0.12;
                runConfig.iou  = 0.60;
                txt.innerText  = 'Loading preview frame...';

                fetch('api/event', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ event: 'UPLOAD_SUCCESS', meta: { video_id: videoId } })
                }).catch(()=>{});

                if (fileInput) fileInput.value = '';

                // Only hit 100% and switch screens once the frame is decoded and
                // on screen — otherwise the user gets a blank step after "100%".
                return loadFirstFrame();
            })
            .then(ok => {
                // Without a decoded frame there is nothing to draw the counting
                // line on, and taps would map to meaningless coordinates.
                if (!ok) { videoId = null; fail('Could not read this video — try another file'); return; }
                setPct(100);
                txt.innerText = 'Ready';
                setTimeout(() => showStep('draw'), 400);
            })
            .catch(() => { videoId = null; fail('Could not read this video — try another file'); });
    };

    xhr.send(form);
}

// =============================================
// CANVAS — Spatial Boundary Drawing
// Supports both mouse (desktop) and touch (mobile)
// =============================================
const canvas = document.getElementById('drawing-canvas');
const ctx    = canvas ? canvas.getContext('2d') : null;
let points   = [];
let imgNatW  = 0, imgNatH = 0;

// Resolves true once the frame is decoded and painted, false if it failed.
// Never rejects — a missing preview should not abort the whole flow.
function loadFirstFrame() {
    return new Promise(resolve => {
        const img         = document.getElementById('frame-img');
        const placeholder = document.getElementById('frame-placeholder');
        if (!img) { resolve(false); return; }

        img.onload = () => {
            imgNatW = img.naturalWidth;
            imgNatH = img.naturalHeight;
            img.style.display = 'block';
            if (placeholder) placeholder.style.display = 'none';
            initCanvas();
            resolve(true);
        };

        img.onerror = () => {
            console.error('Failed to load first frame');
            img.style.display = 'none';
            if (placeholder) {
                placeholder.style.display = 'flex';
                placeholder.innerHTML =
                    '<i class="fa-solid fa-circle-exclamation text-4xl mb-3 opacity-50" style="color:#c89a6c"></i>' +
                    '<span class="font-bold text-[10px] uppercase tracking-widest opacity-50 block mt-2">Frame Load Error</span>';
            }
            resolve(false);
        };

        img.src = 'first-frame/' + videoId;
    });
}

function initCanvas() {
    if (!canvas || !canvas.offsetWidth) return;   // hidden step has no size yet
    canvas.width  = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    // Redraw existing points after resize
    redrawCanvas();
}

window.addEventListener('resize', initCanvas);

// ---- Coordinate helpers ----
// The frame uses object-contain, so it is letterboxed whenever the canvas
// aspect ratio differs from the video's (it always does on mobile, where CSS
// forces 4/3). Mapping canvas pixels straight to image pixels therefore put
// the counting line in the wrong place. Everything below goes through the
// displayed image rect instead.
function getImageRect() {
    if (!imgNatW || !imgNatH) {
        return { x: 0, y: 0, w: canvas.width, h: canvas.height };
    }
    const scale = Math.min(canvas.width / imgNatW, canvas.height / imgNatH);
    const w = imgNatW * scale;
    const h = imgNatH * scale;
    return { x: (canvas.width - w) / 2, y: (canvas.height - h) / 2, w, h };
}

function getCanvasCoords(clientX, clientY) {
    const rect = canvas.getBoundingClientRect();
    const box  = getImageRect();
    // Clamp into the visible frame so taps on the letterbox bars still land.
    const cx = Math.min(Math.max(clientX - rect.left, box.x), box.x + box.w);
    const cy = Math.min(Math.max(clientY - rect.top, box.y), box.y + box.h);
    return {
        rx: Math.round((cx - box.x) / box.w * imgNatW),
        ry: Math.round((cy - box.y) / box.h * imgNatH),
    };
}

// Image coords -> canvas coords, recomputed on every draw so the line stays
// correct after a resize or an orientation change.
function toCanvasPoint(p) {
    const box = getImageRect();
    return {
        x: box.x + (p.rx / (imgNatW || 1)) * box.w,
        y: box.y + (p.ry / (imgNatH || 1)) * box.h,
    };
}

function addPoint(coords) {
    if (points.length >= 2) return;
    points.push(coords);
    redrawCanvas();
    if (points.length === 2 && canvas) {
        canvas.style.cursor = 'default';
    }
}

function redrawCanvas() {
    if (!ctx) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const pts = points.map(toCanvasPoint);
    pts.forEach(p => drawDot(p.x, p.y));
    if (pts.length === 2) drawLine(pts);
}

// ---- Mouse events (desktop) ----
if (canvas) {
    canvas.addEventListener('mousedown', e => {
        e.preventDefault();
        addPoint(getCanvasCoords(e.clientX, e.clientY));
    });
}

// ---- Touch events (mobile) ----
if (canvas) {
    canvas.addEventListener('touchstart', e => {
        e.preventDefault(); // prevent scroll while drawing
        if (e.touches.length === 0) return;
        const touch = e.touches[0];
        addPoint(getCanvasCoords(touch.clientX, touch.clientY));
    }, { passive: false });

    // touchmove: prevent page scroll when finger is on canvas
    canvas.addEventListener('touchmove', e => {
        e.preventDefault();
    }, { passive: false });
}

// ---- Drawing helpers ----
function drawDot(x, y) {
    if (!ctx) return;
    ctx.beginPath();
    ctx.arc(x, y, 6, 0, Math.PI * 2); // slightly larger dot for mobile visibility
    ctx.fillStyle   = '#c89a6c';
    ctx.fill();
    ctx.strokeStyle = '#f0ece6';
    ctx.lineWidth   = 2;
    ctx.stroke();
}

function drawLine(pts) {
    if (!ctx || !pts || pts.length < 2) return;
    ctx.beginPath();
    ctx.moveTo(pts[0].x, pts[0].y);
    ctx.lineTo(pts[1].x, pts[1].y);
    ctx.strokeStyle = '#c89a6c';
    ctx.lineWidth   = 3;
    ctx.stroke();
}

function resetCanvas() {
    points = [];
    if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (canvas) canvas.style.cursor = 'crosshair';
}

function startRun() {
    if (points.length < 2) return;
    // Two points in the same spot define no line — the backend would compute a
    // zero-length segment and silently count nothing.
    if (points[0].rx === points[1].rx && points[0].ry === points[1].ry) {
        resetCanvas();
        return;
    }
    const line = [[points[0].rx, points[0].ry], [points[1].rx, points[1].ry]];
    sessionStorage.setItem('funky_run', JSON.stringify({
        video_id: videoId,
        line:     line,
        config:   runConfig
    }));
    sessionStorage.setItem('uf_active_tab', 'settings');
    
    fetch('api/event', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ event: 'DRAW_LINE_COMPLETED', meta: { video_id: videoId } })
    }).catch(()=>{});

    window.location.replace('/vehicles');
}

// =============================================
// Onboarding
// =============================================
let _obStep = 0;

function triggerIconPulse() {
    const activeStep = document.querySelector('.onboard-step.active i');
    if (activeStep) {
        activeStep.classList.add('pulse-once');
        setTimeout(() => activeStep.classList.remove('pulse-once'), 400);
    }
}

function nextOnboardStep() {
    _obStep++;
    if (_obStep >= 3) { closeOnboarding(); return; }
    document.querySelectorAll('.onboard-step').forEach((s, i) => s.classList.toggle('active', i === _obStep));
    document.querySelectorAll('.onboard-dot').forEach((d, i)  => d.classList.toggle('active', i === _obStep));
    if (_obStep === 2) document.getElementById('onboard-next').innerText = 'Get Started';
    triggerIconPulse();
}

function closeOnboarding() {
    const overlay = document.getElementById('onboard-overlay');
    if (overlay) overlay.style.display = 'none';
}

function openOnboarding() {
    const onboard = document.getElementById('onboard-overlay');
    if (onboard) {
        _obStep = 0;
        document.querySelectorAll('.onboard-step').forEach((s, i) => s.classList.toggle('active', i === _obStep));
        document.querySelectorAll('.onboard-dot').forEach((d, i)  => d.classList.toggle('active', i === _obStep));
        document.getElementById('onboard-next').innerText = 'Next';
        onboard.style.display = 'flex';
        triggerIconPulse();
    }
}