/*
 * Dorayaki web client.
 *
 * A client of the recognition server, nothing else: live frames go out over
 * /v1/stream, stills go out over /v1/recognize. Point it at another server with
 * ?server=https://host:port and pass a token with ?token=...
 */

const params = new URLSearchParams(location.search);
const SERVER = (params.get('server') || '').replace(/\/$/, '');
const TOKEN = params.get('token') || '';

const I18N = {
    en: {
        subtitle: 'Smart Supermarket Shelf AI & Inventory Recognition',
        live: 'Live', photo: 'Photo', start: 'Start', stop: 'Stop',
        capture: 'Take photo', upload: 'Upload image', empty: 'Empty spaces',
        stageEmpty: 'Start the live scan, or open Photo mode to inspect a shelf image.',
        cardTitle: 'Product details', cardPlaceholder: 'Tap a product on the shelf to see its details.',
        metricOn: 'On shelf', metricOut: 'Sold / dispatched', metricReceipt: 'Received', metricExpiry: 'Expires',
        dispense: 'Dispense 1 unit', matchTitle: 'Feature matching',
        matchPlaceholder: 'Tap a product, then “Show matching”.', showMatch: 'Show matching',
        inviewLive: 'In view', inviewPhoto: 'On this photo',
        inviewPlaceholder: 'Recognized products appear here.',
        cameraTitle: 'Take shelf photo', snapshot: 'Capture',
        offline: 'Offline', connecting: 'Connecting', liveBadge: 'Live', photoBadge: 'Photo',
        recognized: 'Recognized', needsConfirm: 'Check this', unrecognized: 'Not in catalog',
        identifying: 'Identifying…', detected: 'Detecting…', emptySlot: 'Empty shelf space',
        emptySlotNote: 'No product detected here', candidatesTitle: 'Possible matches',
        hintGlare: 'Glare — tilt the camera', hintBlur: 'Hold steady', hintTooFar: 'Move closer',
        noCamera: 'Live camera needs https or localhost.',
        cameraDenied: 'Camera access was denied.',
        connectionLost: 'Connection lost — retrying…', unknownMethod: 'Unknown algorithm',
        noServer: 'Server unreachable', confirmEmpty: 'Hide empty spaces', showEmpty: 'Show empty spaces',
        facings: 'facings', inView: 'in view', products: 'products',
    },
    ja: {
        subtitle: 'スマートスーパーマーケット棚認識 & 在庫管理AI',
        live: 'ライブ', photo: '写真', start: '開始', stop: '停止',
        capture: 'カメラ撮影', upload: '画像アップロード', empty: '空きスペース',
        stageEmpty: 'ライブスキャンを開始するか、写真モードで棚画像を確認してください。',
        cardTitle: '商品情報', cardPlaceholder: '棚の商品をタップすると詳細が表示されます。',
        metricOn: '陳列在庫数', metricOut: '販売済 / 出庫数', metricReceipt: '受入日', metricExpiry: '賞味期限',
        dispense: '1点出庫 / 購入する', matchTitle: '特徴点マッチング',
        matchPlaceholder: '商品をタップして「照合を表示」を押してください。', showMatch: '照合を表示',
        inviewLive: '表示中の商品', inviewPhoto: 'この写真の商品',
        inviewPlaceholder: '認識した商品がここに表示されます。',
        cameraTitle: '棚の写真を撮影', snapshot: '撮影する',
        offline: '未接続', connecting: '接続中', liveBadge: 'ライブ', photoBadge: '写真',
        recognized: '認識済み', needsConfirm: '要確認', unrecognized: '未登録',
        identifying: '識別中…', detected: '検出中…', emptySlot: '棚の空きスペース',
        emptySlotNote: 'ここに商品はありません', candidatesTitle: '候補',
        hintGlare: '反射しています — 角度を変えてください', hintBlur: 'カメラを固定してください', hintTooFar: '近づいてください',
        noCamera: 'ライブカメラには https または localhost が必要です。',
        cameraDenied: 'カメラの使用が許可されていません。',
        connectionLost: '接続が切れました — 再接続中…', unknownMethod: '不明なアルゴリズム',
        noServer: 'サーバーに接続できません', confirmEmpty: '空きスペースを隠す', showEmpty: '空きスペースを表示',
        facings: 'フェイス', inView: '表示中', products: '商品',
    },
};

const state = {
    lang: 'en',
    mode: 'live',
    method: 'hybrid',
    showEmpty: true,
    catalog: new Map(),
    catalogVersion: '',
    ws: null,
    wsState: 'idle',
    video: null,
    stream: null,
    frames: 0,
    results: 0,
    rtts: [],
    detectMs: [],
    dropped: 0,
    lastFrameAt: 0,
    inFlight: false,
    inflightLimit: 1,
    sendWidth: 1280,
    quality: 0.75,
    tracks: new Map(),      // track_id -> {box, target, state, identity, product, lastSeen}
    slots: [],
    selectedTrack: null,
    selectedDetection: null,
    currentImageId: null,
    photoDetections: [],
    photoWidth: 0,
    photoHeight: 0,
    reconnectDelay: 1000,
    sendTimer: null,
    lastHint: null,
};

const el = (id) => document.getElementById(id);
const t = (key) => (I18N[state.lang] || I18N.en)[key] || key;

function api(path) {
    return (SERVER || '') + path;
}

function headers() {
    return TOKEN ? { Authorization: `Bearer ${TOKEN}` } : {};
}

// ---------------------------------------------------------------- rendering

const overlay = el('overlay');
const ctx = overlay.getContext('2d');
const videoEl = el('video');
const photoEl = el('photo');
state.video = videoEl;
let displayWidth = 0;
let displayHeight = 0;

function setCanvasSize(width, height) {
    displayWidth = width;
    displayHeight = height;
    overlay.width = width;
    overlay.height = height;
}

function chip(text, x, y, background, color) {
    ctx.font = '700 12px "Plus Jakarta Sans", "Noto Sans JP", sans-serif';
    const width = ctx.measureText(text).width + 12;
    const height = 18;
    const boxY = Math.max(0, y - height - 3);
    ctx.fillStyle = background;
    ctx.beginPath();
    ctx.roundRect(x, boxY, width, height, 6);
    ctx.fill();
    ctx.fillStyle = color;
    ctx.fillText(text, x + 6, boxY + 13);
}

function drawBox(box, { color, dashed = false, fill = null, width = 2 }) {
    ctx.save();
    ctx.lineWidth = width;
    ctx.strokeStyle = color;
    if (dashed) ctx.setLineDash([6, 4]);
    if (fill) {
        ctx.fillStyle = fill;
        ctx.fillRect(box[0], box[1], box[2] - box[0], box[3] - box[1]);
    }
    ctx.strokeRect(box[0], box[1], box[2] - box[0], box[3] - box[1]);
    ctx.restore();
}

function render() {
    ctx.clearRect(0, 0, overlay.width, overlay.height);
    const now = performance.now();

    if (state.mode === 'photo' && state.photoDetections.length) {
        drawPhotoDetections();
    }

    for (const [trackId, track] of state.tracks) {
        const target = track.target;
        if (!track.box) track.box = [...target];
        for (let i = 0; i < 4; i += 1) {
            track.box[i] += (target[i] - track.box[i]) * 0.35;
        }
        const age = now - track.lastSeen;
        const alpha = Math.max(0, 1 - age / 400);
        if (alpha <= 0.02) continue;

        const identity = track.identity || { state: 'unconfirmed' };
        const selected = state.selectedTrack === trackId;
        ctx.globalAlpha = alpha;
        if (identity.state === 'recognized') {
            drawBox(track.box, { color: selected ? '#10b981' : '#22c55e', width: selected ? 4 : 2, fill: 'rgba(34,197,94,0.10)' });
            const name = track.product ? track.product.product_name : identity.sku_id;
            const price = track.product ? ` ¥${Math.round(track.product.price)}` : '';
            chip(`${name}${price}`, track.box[0], track.box[1], '#22c55e', '#ffffff');
        } else if (identity.state === 'needs_confirmation') {
            drawBox(track.box, { color: '#f59e0b', width: 2, dashed: true, fill: 'rgba(245,158,11,0.08)' });
            chip(t('needsConfirm'), track.box[0], track.box[1], '#f59e0b', '#ffffff');
        } else if (identity.state === 'unrecognized') {
            drawBox(track.box, { color: '#94a3b8', width: 2 });
        } else if (identity.state === 'unconfirmed') {
            drawBox(track.box, { color: 'rgba(226,232,240,0.55)', width: 1, dashed: true });
        } else {
            drawBox(track.box, { color: 'rgba(148,163,184,0.8)', width: 1, dashed: true });
        }
        ctx.globalAlpha = 1;
    }

    if (state.showEmpty && state.mode === 'live') {
        for (const slot of state.slots) {
            drawBox(slot.box, { color: '#ef4444', width: 3, fill: 'rgba(239,68,68,0.20)' });
            chip(`EMPTY ~${slot.missing_items_est}`, slot.box[0], slot.box[1], '#ef4444', '#ffffff');
        }
    }
    requestAnimationFrame(render);
}
requestAnimationFrame(render);

function drawPhotoDetections() {
    for (const detection of state.photoDetections) {
        const identity = detection.identity || {};
        const selected = state.selectedDetection === detection.id;
        if (identity.state === 'recognized') {
            drawBox(detection.box, { color: selected ? '#10b981' : '#22c55e', width: selected ? 4 : 2, fill: 'rgba(34,197,94,0.08)' });
            chip(identity.sku_id || '', detection.box[0], detection.box[1], '#22c55e', '#fff');
        } else if (identity.state === 'needs_confirmation') {
            drawBox(detection.box, { color: '#f59e0b', width: 2, dashed: true });
        } else if (identity.state === 'unrecognized') {
            drawBox(detection.box, { color: '#94a3b8', width: 2 });
        } else {
            drawBox(detection.box, { color: '#22c55e', width: 2 });
        }
    }
    if (state.showEmpty) {
        for (const slot of state.slots) {
            drawBox(slot.box, { color: '#ef4444', width: 3, fill: 'rgba(239,68,68,0.20)' });
            chip(`EMPTY ~${slot.missing_items_est}`, slot.box[0], slot.box[1], '#ef4444', '#ffffff');
        }
    }
}

// ---------------------------------------------------------------- i18n / chrome

function applyLanguage() {
    document.querySelectorAll('[id^="t-"]').forEach((node) => {
        const key = node.id.slice(2).replace(/-([a-z])/g, (m, c) => c.toUpperCase());
        const value = t(key);
        if (value && value !== key) node.textContent = value;
    });
    el('langText').textContent = state.lang === 'en' ? '日本語 / JA' : 'English / EN';
    el('inViewCount').textContent = String(state.mode === 'live' ? state.tracks.size : state.photoDetections.length);
    updateInViewTitle();
    updateEmptyButton();
    setConnection(state.wsState);
}

function updateInViewTitle() {
    el('t-inview-title').textContent = state.mode === 'live' ? t('inviewLive') : t('inviewPhoto');
}

function updateEmptyButton() {
    el('t-empty').textContent = state.showEmpty ? t('confirmEmpty') : t('showEmpty');
}

function setConnection(status) {
    state.wsState = status;
    const pill = el('connPill');
    pill.dataset.state = status;
    const label = { idle: t('offline'), connecting: t('connecting'), live: t('liveBadge'), photo: t('photoBadge'), error: t('noServer') }[status] || t('offline');
    el('connText').textContent = label;
}

function setStatus(kind, text) {
    const badge = el('statusBadge');
    badge.className = `status-badge badge-${{ recognized: 'success', needs: 'warning', danger: 'danger' }[kind] || 'neutral'}`;
    badge.textContent = text;
}

function showHint(kind, text) {
    const banner = el('hintBanner');
    if (!text) { banner.hidden = true; return; }
    banner.hidden = false;
    banner.dataset.kind = kind || 'info';
    banner.textContent = text;
}

// ---------------------------------------------------------------- HUD

function updateHud() {
    const hud = el('hud');
    if (state.mode !== 'live' || !state.results) {
        hud.textContent = state.mode === 'live' ? '—' : `${state.photoDetections.length} ${t('products')}`;
        return;
    }
    const rtt = state.rtts.length ? median(state.rtts.slice(-30)) : 0;
    const detect = state.detectMs.length ? median(state.detectMs.slice(-30)) : 0;
    hud.dataset.detail = hud.dataset.detail === '1' ? '1' : '0';
    if (hud.dataset.detail === '1') {
        hud.textContent = `${state.results} frames · rtt ${rtt.toFixed(0)}ms · detect ${detect.toFixed(0)}ms · dropped ${state.dropped}`;
    } else {
        hud.textContent = `${(state.results / Math.max(1, (performance.now() - state.startedAt) / 1000)).toFixed(1)}/s · ${rtt.toFixed(0)}ms`;
    }
}

function median(values) {
    const sorted = [...values].sort((a, b) => a - b);
    return sorted[Math.floor(sorted.length / 2)] || 0;
}
setInterval(updateHud, 500);

function clearCard() {
    el('cardPlaceholder').hidden = false;
    el('cardBody').hidden = true;
    el('scoreLabel').textContent = '';
    setStatus('neutral', '');
}

// ---------------------------------------------------------------- catalog

async function loadCatalog() {
    try {
        const response = await fetch(api('/v1/catalog'), { headers: headers() });
        if (!response.ok) throw new Error(`catalog ${response.status}`);
        const data = await response.json();
        state.catalogVersion = data.catalog_version;
        state.catalog = new Map(data.products.map((product) => [product.sku_id, product]));
        renderInView();
    } catch (error) {
        console.warn('catalog load failed', error);
    }
}

function productFor(skuId) {
    return skuId ? state.catalog.get(skuId) : null;
}

function thumbUrl(skuId) {
    return productFor(skuId) ? api(`/v1/catalog/${skuId}/image`) : '';
}

// ---------------------------------------------------------------- live mode

async function listCameras() {
    const select = el('sourceSelect');
    select.innerHTML = '';
    if (!navigator.mediaDevices || !window.isSecureContext) {
        const option = document.createElement('option');
        option.value = 'file';
        option.textContent = t('noCamera');
        select.appendChild(option);
    } else {
        try {
            const devices = await navigator.mediaDevices.enumerateDevices();
            for (const device of devices.filter((d) => d.kind === 'videoinput')) {
                const option = document.createElement('option');
                option.value = device.deviceId;
                option.textContent = device.label || 'Camera';
                select.appendChild(option);
            }
        } catch (error) { /* permission not granted yet */ }
    }
    const fileOption = document.createElement('option');
    fileOption.value = 'file';
    fileOption.textContent = '🎞 ' + (state.lang === 'en' ? 'Video file…' : '動画ファイル…');
    select.appendChild(fileOption);
}

function connectStream() {
    if (state.ws && (state.ws.readyState === WebSocket.OPEN || state.ws.readyState === WebSocket.CONNECTING)) return;
    setConnection('connecting');
    const base = SERVER || `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}`;
    const url = `${base.replace(/^http/, 'ws')}/v1/stream${TOKEN ? `?token=${encodeURIComponent(TOKEN)}` : ''}`;
    const socket = new WebSocket(url);
    socket.binaryType = 'arraybuffer';
    state.ws = socket;

    socket.onopen = () => {
        state.reconnectDelay = 1000;
        setConnection('live');
        socket.send(JSON.stringify({ type: 'config', method: state.method, empty_slots: state.showEmpty }));
        startSending();
    };
    socket.onmessage = (event) => {
        const message = JSON.parse(event.data);
        if (message.type === 'result') handleResult(message);
        else if (message.type === 'inspect_result') handleInspect(message);
        else if (message.type === 'error' && message.message) console.warn('server error', message);
    };
    socket.onclose = () => {
        stopSending();
        if (state.mode === 'live' && state.stream) {
            setConnection('error');
            setTimeout(connectStream, state.reconnectDelay);
            state.reconnectDelay = Math.min(10000, state.reconnectDelay * 2);
        } else {
            setConnection('idle');
        }
    };
    socket.onerror = () => setConnection('error');
}

function startSending() {
    stopSending();
    state.startedAt = performance.now();
    state.sendTimer = setInterval(sendFrame, 1000 / 30);
}

function stopSending() {
    if (state.sendTimer) clearInterval(state.sendTimer);
    state.sendTimer = null;
    state.inFlight = false;
}

function sendFrame() {
    const video = state.video;
    if (!video || video.readyState < 2 || document.hidden) return;
    if (state.inFlight && state.inflightLimit <= 1) return;
    if (!state.ws || state.ws.readyState !== WebSocket.OPEN) return;

    const sourceWidth = video.videoWidth;
    const sourceHeight = video.videoHeight;
    if (!sourceWidth || !sourceHeight) return;
    const width = Math.min(state.sendWidth, sourceWidth);
    const height = Math.round(sourceHeight * (width / sourceWidth));
    const canvas = state.captureCanvas || (state.captureCanvas = document.createElement('canvas'));
    canvas.width = width;
    canvas.height = height;
    const captureCtx = canvas.getContext('2d');
    captureCtx.drawImage(video, 0, 0, width, height);
    canvas.toBlob((blob) => {
        if (!blob) return;
        blob.arrayBuffer().then((buffer) => {
            const frameId = ++state.frames & 0xffffffff;
            const payload = new Uint8Array(4 + buffer.byteLength);
            new DataView(payload.buffer).setUint32(0, frameId, false);
            payload.set(new Uint8Array(buffer), 4);
            state.ws.send(payload);
            state.frameSentAt = new Map([[frameId, performance.now()]]);
            state.inFlight = true;
        });
    }, 'image/jpeg', state.quality);
}

function handleResult(message) {
    state.results += 1;
    state.inFlight = false;
    const sentAt = state.frameSentAt && state.frameSentAt.get(message.frame_id);
    if (sentAt) state.rtts.push(performance.now() - sentAt);
    state.detectMs.push(message.timing_ms.detect);
    state.dropped = message.stats.frames_dropped;

    const seen = new Set();
    for (const track of message.tracks) {
        seen.add(track.track_id);
        const existing = state.tracks.get(track.track_id);
        state.tracks.set(track.track_id, {
            box: existing ? existing.box : [...track.box],
            target: track.box,
            identity: track.identity,
            product: track.product || productFor(track.identity.sku_id),
            lastSeen: performance.now(),
        });
    }
    for (const [trackId, track] of state.tracks) {
        if (!seen.has(trackId) && performance.now() - track.lastSeen > 400) state.tracks.delete(trackId);
    }
    state.slots = message.empty_slots || [];
    el('inViewCount').textContent = String(message.summary.in_view);

    const hint = message.quality && message.quality.hint;
    if (hint !== state.lastHint) {
        state.lastHint = hint;
        if (hint === 'glare') showHint('warning', t('hintGlare'));
        else if (hint === 'blur') showHint('warning', t('hintBlur'));
        else if (hint === 'too_far') showHint('warning', t('hintTooFar'));
        else showHint(null, '');
    }
    renderInView();
    if (state.selectedTrack !== null && !state.cardPinned) {
        const track = state.tracks.get(state.selectedTrack);
        if (track) showTrackCard(track);
    }
}

// ---------------------------------------------------------------- photo mode

async function loadSamples() {
    try {
        const response = await fetch(api('/v1/samples'), { headers: headers() });
        const data = await response.json();
        const select = el('sampleSelect');
        select.innerHTML = '';
        for (const sample of data.samples) {
            const option = document.createElement('option');
            option.value = sample.id;
            option.textContent = sample.label;
            select.appendChild(option);
        }
        if (data.samples.length) loadSample(data.samples[0].id);
    } catch (error) {
        console.warn('samples failed', error);
    }
}

async function loadSample(sampleId) {
    const response = await fetch(api(`/v1/samples/${sampleId}`), { headers: headers() });
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    await recognizeBlob(blob, url);
}

async function recognizeBlob(blob, previewUrl) {
    setConnection('photo');
    setStatus('neutral', t('identifying'));
    const photo = el('photo');
    photo.src = previewUrl || URL.createObjectURL(blob);
    photo.hidden = false;
    el('video').hidden = true;
    el('stageEmpty').hidden = true;
    await photo.decode().catch(() => {});

    const response = await fetch(api('/v1/recognize?classify=false&empty_slots=true'), {
        method: 'POST',
        headers: { 'Content-Type': 'image/jpeg', ...headers() },
        body: blob,
    });
    if (!response.ok) {
        setStatus('danger', t('noServer'));
        return;
    }
    const data = await response.json();
    state.currentImageId = data.image_id;
    state.photoDetections = data.detections;
    state.photoWidth = data.width;
    state.photoHeight = data.height;
    state.slots = data.empty_slots || [];
    setCanvasSize(photo.naturalWidth || data.width, photo.naturalHeight || data.height);
    el('inViewCount').textContent = String(data.detections.length);
    setStatus('neutral', t('detected'));
    classifyPhoto();
}

async function classifyPhoto(detectionIds = null) {
    if (!state.currentImageId) return;
    setStatus('neutral', t('identifying'));
    const response = await fetch(api(`/v1/images/${state.currentImageId}/classify`), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', ...headers() },
        body: JSON.stringify({ method: state.method, detection_ids: detectionIds }),
    });
    if (!response.ok) { setStatus('danger', t('noServer')); return; }
    const data = await response.json();
    const byId = new Map(data.identities.map((row) => [row.detection_id, row.identity]));
    for (const detection of state.photoDetections) {
        if (byId.has(detection.id)) detection.identity = byId.get(detection.id);
    }
    const summary = data.summary || {};
    setStatus('recognized', `${summary.recognized || 0} / ${data.identities.length}`);
    renderInView();
}

function renderInView() {
    const list = el('inViewList');
    const counts = new Map();
    if (state.mode === 'live') {
        for (const track of state.tracks.values()) {
            const identity = track.identity || {};
            if (identity.state === 'recognized' && identity.sku_id) {
                counts.set(identity.sku_id, (counts.get(identity.sku_id) || 0) + 1);
            }
        }
    } else {
        for (const detection of state.photoDetections) {
            const identity = detection.identity || {};
            if (identity.state === 'recognized' && identity.sku_id) {
                counts.set(identity.sku_id, (counts.get(identity.sku_id) || 0) + 1);
            }
        }
    }
    if (!counts.size) {
        list.innerHTML = `<div class="placeholder small">${t('inviewPlaceholder')}</div>`;
        return;
    }
    const rows = [...counts.entries()].sort((a, b) => b[1] - a[1]).map(([skuId, facings]) => {
        const product = productFor(skuId);
        const name = product ? product.product_name : skuId;
        const price = product ? `¥${Math.round(product.price)}` : '';
        return `<div class="inview-row" data-sku="${skuId}">
            <img class="inview-thumb" src="${thumbUrl(skuId)}" alt="">
            <div class="inview-text"><div class="inview-name">${name}</div>
            <div class="inview-meta">${price} · ${t('facings')} ${facings}</div></div>
            <div class="inview-facings">${facings}</div></div>`;
    }).join('');
    list.innerHTML = rows;
    list.querySelectorAll('.inview-row').forEach((row) => {
        row.addEventListener('click', () => selectBySku(row.dataset.sku));
    });
}

function selectBySku(skuId) {
    if (state.mode === 'photo') {
        const detection = state.photoDetections.find((d) => (d.identity || {}).sku_id === skuId);
        if (detection) selectPhotoDetection(detection);
        return;
    }
    for (const [trackId, track] of state.tracks) {
        const identity = track.identity || {};
        if (identity.sku_id === skuId) {
            state.selectedTrack = trackId;
            // Show the product this row names, even if the track has since moved
            // to a neighbour: the row is the user's intent. Pinning stops the
            // per-frame refresh from replacing the card the user just opened.
            state.cardPinned = true;
            showProductCard(productFor(skuId), identity);
            break;
        }
    }
}

// ---------------------------------------------------------------- product card

function showTrackCard(track) {
    const identity = track.identity || {};
    if (identity.state === 'recognized') {
        const product = track.product || productFor(identity.sku_id);
        showProductCard(product, identity);
    } else if (identity.state === 'needs_confirmation') {
        showCandidatesCard(identity);
    } else if (identity.state === 'unrecognized') {
        showPlainCard(t('unrecognized'), t('emptySlotNote'));
    } else {
        showPlainCard(t('detected'), '');
    }
}

function showProductCard(product, identity) {
    if (!product) { showPlainCard(t('detected'), ''); return; }
    el('cardPlaceholder').hidden = true;
    el('cardBody').hidden = false;
    el('productSku').hidden = false;
    el('productSku').textContent = product.sku_id;
    el('productName').textContent = product.product_name;
    el('productPrice').textContent = `¥${Math.round(product.price)}`;
    el('productThumb').src = thumbUrl(product.sku_id);
    el('productThumb').hidden = false;
    el('metricOn').textContent = product.number_on;
    el('metricOut').textContent = product.number_out;
    el('metricReceipt').textContent = product.receipt_date || '—';
    el('metricExpiry').textContent = product.expiration_date || '—';
    el('candidates').hidden = true;
    el('showMatchBtn').disabled = false;
    const confidence = identity.confidence ? ` · ${(identity.confidence * 100).toFixed(0)}%` : '';
    el('scoreLabel').textContent = identity.score ? `score ${identity.score}${confidence}` : '';
    setStatus('recognized', t('recognized'));
}

function showCandidatesCard(identity) {
    el('cardPlaceholder').hidden = true;
    el('cardBody').hidden = false;
    el('productSku').hidden = true;
    el('productThumb').hidden = true;
    el('productName').textContent = t('needsConfirm');
    el('productPrice').textContent = '—';
    el('productThumb').src = '';
    el('metricOn').textContent = '—';
    el('metricOut').textContent = '—';
    el('metricReceipt').textContent = '—';
    el('metricExpiry').textContent = '—';
    const candidates = el('candidates');
    const rows = (identity.candidates || []).map((candidate) => {
        const product = productFor(candidate.sku_id);
        const name = product ? product.product_name : candidate.sku_id;
        return `<div class="candidate-row"><span>${name}</span><span>${candidate.score}</span></div>`;
    }).join('');
    candidates.innerHTML = `<div class="candidates-title">${t('candidatesTitle')}</div>${rows}`;
    candidates.hidden = false;
    el('showMatchBtn').disabled = false;
    setStatus('needs', t('needsConfirm'));
}

function showPlainCard(title, note) {
    el('cardPlaceholder').hidden = true;
    el('cardBody').hidden = false;
    el('productSku').hidden = true;
    el('productThumb').hidden = true;
    el('productName').textContent = title;
    el('productPrice').textContent = '';
    el('productThumb').src = '';
    el('metricOn').textContent = '—';
    el('metricOut').textContent = '—';
    el('metricReceipt').textContent = '—';
    el('metricExpiry').textContent = '—';
    el('candidates').hidden = true;
    el('showMatchBtn').disabled = true;
    setStatus('danger', title);
    if (note) el('productPrice').textContent = note;
}

// ---------------------------------------------------------------- interaction

function stagePointToImage(event) {
    const rect = overlay.getBoundingClientRect();
    const scaleX = overlay.width / rect.width;
    const scaleY = overlay.height / rect.height;
    return [(event.clientX - rect.left) * scaleX, (event.clientY - rect.top) * scaleY];
}

overlay.addEventListener('click', (event) => {
    const [x, y] = stagePointToImage(event);
    if (state.mode === 'live') {
        let best = null;
        for (const [trackId, track] of state.tracks) {
            const [x1, y1, x2, y2] = track.target;
            if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
                const area = (x2 - x1) * (y2 - y1);
                if (!best || area < best.area) best = { trackId, track, area };
            }
        }
        if (best) {
            state.selectedTrack = best.trackId;
            state.selectedDetection = null;
            state.cardPinned = false;
            showTrackCard(best.track);
        }
        return;
    }
    if (state.mode === 'photo') {
        const [px, py] = photoPointToDetectionSpace(x, y);
        let best = null;
        for (const detection of state.photoDetections) {
            const [x1, y1, x2, y2] = detection.box;
            if (px >= x1 && px <= x2 && py >= y1 && py <= y2) {
                const area = (x2 - x1) * (y2 - y1);
                if (!best || area < best.area) best = { detection, area };
            }
        }
        if (best) selectPhotoDetection(best.detection);
        else {
            const slot = state.slots.find((s) => {
                const [x1, y1, x2, y2] = s.box;
                return px >= x1 && px <= x2 && py >= y1 && py <= y2;
            });
            if (slot) showEmptySlotCard(slot);
        }
    }
});

function photoPointToDetectionSpace(x, y) {
    const photo = el('photo');
    const scaleX = state.photoWidth / (photo.naturalWidth || state.photoWidth);
    const scaleY = state.photoHeight / (photo.naturalHeight || state.photoHeight);
    return [x * scaleX, y * scaleY];
}

function selectPhotoDetection(detection) {
    state.selectedDetection = detection.id;
    state.selectedTrack = null;
    const identity = detection.identity || {};
    if (identity.state === 'recognized') showProductCard(productFor(identity.sku_id), identity);
    else if (identity.state === 'needs_confirmation') showCandidatesCard(identity);
    else showPlainCard(t(identity.state === 'unrecognized' ? 'unrecognized' : 'detected'), '');
    inspectCurrent(detection.box);
}

function showEmptySlotCard(slot) {
    el('cardPlaceholder').hidden = true;
    el('cardBody').hidden = false;
    el('productSku').hidden = true;
    el('productThumb').hidden = true;
    el('productName').textContent = t('emptySlot');
    el('productPrice').textContent = t('emptySlotNote');
    el('productThumb').src = '';
    el('metricOn').textContent = '0';
    el('metricOut').textContent = `~${slot.missing_items_est}`;
    el('metricReceipt').textContent = `row ${slot.row_index}`;
    el('metricExpiry').textContent = `${slot.width}×${slot.height}px`;
    el('candidates').hidden = true;
    el('showMatchBtn').disabled = true;
    setStatus('danger', t('emptySlot'));
}

async function inspectCurrent(box) {
    if (!state.currentImageId || !box) return;
    const response = await fetch(api(`/v1/images/${state.currentImageId}/inspect`), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', ...headers() },
        body: JSON.stringify({ box, method: state.method }),
    });
    if (!response.ok) return;
    handleInspect(await response.json());
}

function handleInspect(result) {
    if (result.crop_jpeg_b64) {
        el('productThumb').src = result.crop_jpeg_b64;
    }
    if (result.match_visualization_jpeg_b64) {
        el('matchBox').innerHTML = `<img src="${result.match_visualization_jpeg_b64}" alt="feature matches">`;
    } else {
        el('matchBox').innerHTML = `<span class="match-placeholder">${t('matchPlaceholder')}</span>`;
    }
    const identity = result.identity || {};
    const parts = [];
    if (identity.score) parts.push(`score ${identity.score}`);
    if (identity.confidence) parts.push(`confidence ${(identity.confidence * 100).toFixed(0)}%`);
    if (result.visualized_sku_id) parts.push(`${result.is_candidate ? 'candidate' : 'match'} ${result.visualized_sku_id}`);
    el('scoreLabel').textContent = parts.join(' · ');
}

el('showMatchBtn').addEventListener('click', () => {
    if (state.mode === 'live' && state.selectedTrack !== null) {
        const track = state.tracks.get(state.selectedTrack);
        if (track && state.ws && state.ws.readyState === WebSocket.OPEN) {
            state.ws.send(JSON.stringify({ type: 'inspect', track_id: state.selectedTrack, method: state.method, request_id: String(Date.now()) }));
        }
    } else if (state.mode === 'photo' && state.selectedDetection !== null) {
        const detection = state.photoDetections.find((d) => d.id === state.selectedDetection);
        if (detection) inspectCurrent(detection.box);
    }
});

// ---------------------------------------------------------------- controls

el('modeControl').addEventListener('click', (event) => {
    const button = event.target.closest('.seg-btn');
    if (!button) return;
    setMode(button.dataset.mode);
});

function setMode(mode) {
    state.mode = mode;
    document.querySelectorAll('#modeControl .seg-btn').forEach((b) => b.classList.toggle('active', b.dataset.mode === mode));
    el('liveControls').hidden = mode !== 'live';
    el('photoControls').hidden = mode === 'live';
    el('video').hidden = mode !== 'live';
    el('photo').hidden = mode !== 'photo';
    state.tracks.clear();
    state.slots = [];
    state.photoDetections = [];
    state.selectedTrack = null;
    state.selectedDetection = null;
    state.cardPinned = false;
    el('stageEmpty').hidden = false;
    clearCard();
    updateInViewTitle();
    if (mode === 'photo') {
        setConnection('photo');
        loadSamples();
    } else {
        stopCamera();
        setConnection(state.ws && state.ws.readyState === WebSocket.OPEN ? 'live' : 'idle');
    }
    el('inViewCount').textContent = '0';
    renderInView();
}

el('methodControl').addEventListener('click', async (event) => {
    const button = event.target.closest('.seg-btn');
    if (!button) return;
    state.method = button.dataset.method;
    document.querySelectorAll('#methodControl .seg-btn').forEach((b) => b.classList.toggle('active', b === button));
    if (state.mode === 'live' && state.ws && state.ws.readyState === WebSocket.OPEN) {
        state.ws.send(JSON.stringify({ type: 'config', method: state.method }));
        state.tracks.clear();
    } else if (state.mode === 'photo') {
        await classifyPhoto();
    }
});

el('startBtn').addEventListener('click', async () => {
    const source = el('sourceSelect').value;
    if (source === 'file') { pickVideoFile(); return; }
    try {
        state.stream = await navigator.mediaDevices.getUserMedia({
            video: { deviceId: source ? { exact: source } : undefined, facingMode: { ideal: 'environment' }, width: { ideal: 1280 }, height: { ideal: 720 } },
            audio: false,
        });
    } catch (error) {
        showHint('danger', error.name === 'NotAllowedError' ? t('cameraDenied') : t('noCamera'));
        return;
    }
    el('video').srcObject = state.stream;
    videoEl.hidden = false;
    photoEl.hidden = true;
    el('stageEmpty').hidden = true;
    await videoEl.play().catch(() => {});
    setCanvasSize(videoEl.videoWidth || 1280, videoEl.videoHeight || 720);
    el('startBtn').disabled = true;
    el('stopBtn').disabled = false;
    connectStream();
    listCameras();
});

el('stopBtn').addEventListener('click', () => {
    stopCamera();
    if (state.ws) state.ws.close();
    setConnection('idle');
    el('stageEmpty').hidden = false;
});

function stopCamera() {
    stopSending();
    if (state.stream) {
        state.stream.getTracks().forEach((track) => track.stop());
        state.stream = null;
    }
    el('video').srcObject = null;
    el('startBtn').disabled = false;
    el('stopBtn').disabled = true;
}

function pickVideoFile() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'video/*';
    input.onchange = async () => {
        const file = input.files[0];
        if (!file) return;
        const url = URL.createObjectURL(file);
        const video = el('video');
        video.srcObject = null;
        video.src = url;
        video.loop = true;
        video.muted = true;
        video.hidden = false;
        el('photo').hidden = true;
        el('stageEmpty').hidden = true;
        await video.play().catch(() => {});
        setCanvasSize(video.videoWidth || 1280, video.videoHeight || 720);
        el('startBtn').disabled = true;
        el('stopBtn').disabled = false;
        connectStream();
    };
    input.click();
}

el('emptyBtn').addEventListener('click', () => {
    state.showEmpty = !state.showEmpty;
    updateEmptyButton();
    if (state.mode === 'live' && state.ws && state.ws.readyState === WebSocket.OPEN) {
        state.ws.send(JSON.stringify({ type: 'config', empty_slots: state.showEmpty }));
    }
});

el('sampleSelect').addEventListener('change', (event) => loadSample(event.target.value));
el('uploadBtn').addEventListener('click', () => el('fileInput').click());
el('fileInput').addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) recognizeBlob(file);
});

el('captureBtn').addEventListener('click', async () => {
    el('cameraModal').classList.add('open');
    try {
        state.cameraStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' }, width: { ideal: 1280 } }, audio: false });
        el('cameraVideo').srcObject = state.cameraStream;
    } catch (error) {
        showHint('danger', t('cameraDenied'));
        el('cameraModal').classList.remove('open');
    }
});
el('cameraClose').addEventListener('click', closeCameraModal);
el('snapshotBtn').addEventListener('click', () => {
    const video = el('cameraVideo');
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth || 1280;
    canvas.height = video.videoHeight || 720;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    canvas.toBlob((blob) => {
        closeCameraModal();
        if (blob) recognizeBlob(blob);
    }, 'image/jpeg', 0.9);
});
function closeCameraModal() {
    el('cameraModal').classList.remove('open');
    if (state.cameraStream) {
        state.cameraStream.getTracks().forEach((track) => track.stop());
        state.cameraStream = null;
    }
}

el('dispenseBtn').addEventListener('click', async () => {
    const sku = el('productSku').textContent;
    if (!sku || sku === '—') return;
    const response = await fetch(api(`/v1/catalog/${sku}/stock`), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', ...headers() },
        body: JSON.stringify({ delta: -1 }),
    });
    if (!response.ok) return;
    const data = await response.json();
    el('metricOn').textContent = data.product.number_on;
    el('metricOut').textContent = data.product.number_out;
    state.catalog.set(data.product.sku_id, data.product);
    renderInView();
});

el('langBtn').addEventListener('click', () => {
    state.lang = state.lang === 'en' ? 'ja' : 'en';
    applyLanguage();
    listCameras();
});

el('hud').addEventListener('click', () => {
    el('hud').dataset.detail = el('hud').dataset.detail === '1' ? '0' : '1';
    updateHud();
});

document.addEventListener('visibilitychange', () => {
    if (document.hidden) stopSending();
    else if (state.mode === 'live' && state.stream) startSending();
});

// ---------------------------------------------------------------- boot

applyLanguage();
loadCatalog();
setMode('live');
listCameras();