{% extends "base.html" %}

{% block title %}Pending Deployments - Seismo Fleet Manager{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="/tools" class="text-sm text-seismo-orange hover:text-seismo-burgundy">← Back to Tools</a>
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mt-1">Pending Deployments</h1>
    <p class="text-gray-600 dark:text-gray-400 mt-1">
        Captures from the field waiting to be classified.
        <a href="/deploy" class="text-seismo-orange hover:text-seismo-navy">Capture a new one →</a>
    </p>
</div>

<!-- Filter pills -->
<div class="flex gap-2 mb-6">
    <button onclick="switchPdStatus('awaiting')" id="pd-tab-awaiting"
            class="px-4 py-2 rounded-lg text-sm font-medium bg-seismo-orange text-white">
        Awaiting <span id="pd-count-awaiting" class="ml-1 text-xs opacity-80"></span>
    </button>
    <button onclick="switchPdStatus('assigned')" id="pd-tab-assigned"
            class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        Assigned
    </button>
    <button onclick="switchPdStatus('cancelled')" id="pd-tab-cancelled"
            class="px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
        Cancelled
    </button>
</div>

<div id="pd-list" class="space-y-4">
    <div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">Loading…</div>
</div>

<!-- Classify modal -->
<div id="classify-modal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto" style="min-height: 480px;">
        <div class="sticky top-0 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-gray-700 px-5 py-4 flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Classify pending deployment</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    <span id="classify-unit-label" class="font-mono text-seismo-orange"></span>
                    captured at
                    <span id="classify-captured-at"></span>
                </p>
            </div>
            <button onclick="closeClassifyModal()" class="text-gray-400 hover:text-gray-700 dark:hover:text-gray-200">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <div class="p-5 space-y-5">
            <!-- Mode toggle -->
            <div class="flex gap-2">
                <button onclick="setClassifyMode('existing')" id="mode-existing"
                        class="flex-1 px-3 py-2 text-sm rounded-lg bg-seismo-orange text-white">
                    Assign to existing location
                </button>
                <button onclick="setClassifyMode('new')" id="mode-new"
                        class="flex-1 px-3 py-2 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600">
                    Create new location
                </button>
            </div>

            <!-- Existing mode: project + location pickers -->
            <div id="classify-existing-pane" class="space-y-3">
                <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Project</label>
                    <select id="existing-project-select" onchange="onExistingProjectChange()"
                            class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
                        <option value="">Loading projects…</option>
                    </select>
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Location</label>
                    <select id="existing-location-select"
                            class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
                        <option value="">Pick a project first</option>
                    </select>
                </div>
            </div>

            <!-- New mode: project (existing/new) + location name -->
            <div id="classify-new-pane" class="hidden space-y-3">
                <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Project</label>
                    <div class="flex gap-2 mt-1">
                        <select id="new-project-select" onchange="onNewProjectMode()"
                                class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
                            <option value="">— Create new project —</option>
                        </select>
                    </div>
                </div>
                <div id="new-project-name-wrap" class="space-y-2">
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">New project name</label>
                    <input id="new-project-name" type="text" placeholder="e.g. Carnegie Museum HVAC"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
                    <p class="text-xs text-gray-500 dark:text-gray-400">Project type will be Vibration Monitoring.</p>
                </div>
                <div>
                    <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Location name</label>
                    <input id="new-location-name" type="text" placeholder="e.g. NE corner, near loading dock"
                           class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm">
                </div>
                <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                    <input type="checkbox" id="use-captured-coords" checked
                           class="rounded border-gray-300 text-seismo-orange focus:ring-seismo-orange">
                    Use the photo's GPS coords <span id="captured-coords-hint" class="text-xs text-gray-500 dark:text-gray-400"></span>
                </label>
            </div>

            <div>
                <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Assignment notes (optional)</label>
                <textarea id="classify-notes" rows="2"
                          class="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white text-sm"></textarea>
            </div>

            <div id="classify-error" class="hidden text-sm text-red-600"></div>
        </div>

        <div class="sticky bottom-0 bg-white dark:bg-slate-800 border-t border-gray-200 dark:border-gray-700 px-5 py-3 flex justify-end gap-2">
            <button onclick="closeClassifyModal()"
                    class="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                Cancel
            </button>
            <button id="classify-submit" onclick="submitClassify()"
                    class="px-4 py-2 text-sm bg-seismo-orange hover:bg-orange-600 text-white rounded-lg font-medium">
                Classify
            </button>
        </div>
    </div>
</div>

<script>
let _pdState = {
    currentStatus:  'awaiting',
    rows:           [],
    classifyingId:  null,
    classifyingPd:  null,
    classifyMode:   'existing',     // 'existing' | 'new'
    projectsCache:  null,
};

function _esc(s) {
    if (s == null) return '';
    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

function _fmtDateTime(iso) {
    if (!iso) return '—';
    return iso.replace('T', ' ').slice(0, 16);
}

async function loadPdList() {
    const list = document.getElementById('pd-list');
    list.innerHTML = '<div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">Loading…</div>';
    try {
        const r = await fetch(`/api/deployments/pending?status=${encodeURIComponent(_pdState.currentStatus)}`);
        if (!r.ok) throw new Error('HTTP ' + r.status);
        const data = await r.json();
        _pdState.rows = data.pending_deployments || [];
        renderPdList();
        // Refresh awaiting count badge.
        if (_pdState.currentStatus === 'awaiting') {
            document.getElementById('pd-count-awaiting').textContent = data.count > 0 ? `(${data.count})` : '';
        }
    } catch (e) {
        list.innerHTML = `<div class="text-center py-8 text-red-500 text-sm">Load failed: ${_esc(e.message)}</div>`;
    }
}

function renderPdList() {
    const list = document.getElementById('pd-list');
    if (_pdState.rows.length === 0) {
        const blurb = {
            awaiting:  'No captures awaiting classification.',
            assigned:  'No assigned captures yet.',
            cancelled: 'No cancelled captures.',
        }[_pdState.currentStatus] || '';
        list.innerHTML = `<div class="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">${blurb}</div>`;
        return;
    }
    list.innerHTML = _pdState.rows.map(pd => _renderPdCard(pd)).join('');
}

function _renderPdCard(pd) {
    const photoUrl = pd.photo_url || '';
    const coords = pd.coordinates
        ? `<span class="font-mono text-xs">${_esc(pd.coordinates)}</span>`
        : '<span class="text-xs italic text-gray-400">no GPS in photo</span>';
    const noteHtml = pd.operator_note
        ? `<p class="text-xs text-gray-600 dark:text-gray-300 mt-1 italic">"${_esc(pd.operator_note)}"</p>`
        : '';

    let footerActions = '';
    if (pd.status === 'awaiting') {
        footerActions = `<div class="flex gap-2 mt-3">
            <button onclick="openClassifyModal('${_esc(pd.id)}')"
                    class="px-4 py-2 bg-seismo-orange hover:bg-orange-600 text-white text-sm rounded-lg font-medium">
                Classify
            </button>
            <button onclick="cancelPending('${_esc(pd.id)}')"
                    class="px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 text-sm rounded-lg">
                Cancel
            </button>
        </div>`;
    } else if (pd.status === 'assigned') {
        footerActions = `<div class="mt-3 text-xs text-green-700 dark:text-green-400">
            Promoted ${_fmtDateTime(pd.promoted_at)} → assignment <span class="font-mono">${_esc((pd.resulting_assignment_id || '').slice(0, 8))}…</span>
        </div>`;
    } else if (pd.status === 'cancelled') {
        footerActions = `<div class="mt-3 text-xs text-gray-500 dark:text-gray-400">
            Cancelled ${_fmtDateTime(pd.cancelled_at)}${pd.cancelled_reason ? ` — ${_esc(pd.cancelled_reason)}` : ''}
        </div>`;
    }

    return `<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-4 flex gap-4">
        <div class="shrink-0 w-32 h-32 bg-gray-100 dark:bg-slate-900 rounded-lg overflow-hidden">
            ${photoUrl
                ? `<img src="${_esc(photoUrl)}" class="w-full h-full object-cover" alt="install">`
                : `<div class="w-full h-full flex items-center justify-center text-gray-400 text-xs">(no photo)</div>`}
        </div>
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 flex-wrap">
                <a href="/unit/${_esc(pd.unit_id)}" class="font-mono font-semibold text-seismo-orange hover:text-seismo-navy">
                    ${_esc(pd.unit_id)}
                </a>
                <span class="text-xs text-gray-500 dark:text-gray-400">captured ${_fmtDateTime(pd.captured_at)}</span>
            </div>
            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">${coords}</div>
            ${noteHtml}
            ${footerActions}
        </div>
    </div>`;
}

function switchPdStatus(status) {
    _pdState.currentStatus = status;
    const tabs = { awaiting: 'pd-tab-awaiting', assigned: 'pd-tab-assigned', cancelled: 'pd-tab-cancelled' };
    Object.entries(tabs).forEach(([k, id]) => {
        const btn = document.getElementById(id);
        if (k === status) {
            btn.classList.add('bg-seismo-orange', 'text-white');
            btn.classList.remove('bg-gray-100', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
        } else {
            btn.classList.remove('bg-seismo-orange', 'text-white');
            btn.classList.add('bg-gray-100', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
        }
    });
    loadPdList();
}

// ── Classify modal ──────────────────────────────────────────────────
async function openClassifyModal(pendingId) {
    const pd = _pdState.rows.find(r => r.id === pendingId);
    if (!pd) return;
    _pdState.classifyingId = pendingId;
    _pdState.classifyingPd = pd;

    document.getElementById('classify-unit-label').textContent = pd.unit_id;
    document.getElementById('classify-captured-at').textContent = _fmtDateTime(pd.captured_at);
    document.getElementById('classify-notes').value = '';
    document.getElementById('classify-error').classList.add('hidden');
    document.getElementById('new-project-name').value = '';
    document.getElementById('new-location-name').value = '';

    // Coords hint for "use captured coords" checkbox.
    const hint = document.getElementById('captured-coords-hint');
    if (pd.coordinates) {
        hint.textContent = `(${pd.coordinates})`;
        document.getElementById('use-captured-coords').checked = true;
        document.getElementById('use-captured-coords').disabled = false;
    } else {
        hint.textContent = '(no GPS in photo — uncheck unless you want a placeholder)';
        document.getElementById('use-captured-coords').checked = false;
        document.getElementById('use-captured-coords').disabled = true;
    }

    setClassifyMode('existing');

    document.getElementById('classify-modal').classList.remove('hidden');

    // Load projects if not cached.
    if (!_pdState.projectsCache) {
        await _loadProjects();
    }
    _populateProjectSelects();
}

function closeClassifyModal() {
    document.getElementById('classify-modal').classList.add('hidden');
}

async function _loadProjects() {
    try {
        const r = await fetch('/api/projects/list');
        const data = r.ok ? await r.json() : { projects: [] };
        // Endpoint shape varies; tolerate either { projects: [...] } or a flat array.
        _pdState.projectsCache = Array.isArray(data) ? data : (data.projects || []);
    } catch (e) {
        _pdState.projectsCache = [];
    }
}

function _populateProjectSelects() {
    // Sort active projects first, then alphabetical.
    const projs = (_pdState.projectsCache || []).slice().sort((a, b) => {
        if ((a.status || '') !== (b.status || '')) {
            if (a.status === 'active') return -1;
            if (b.status === 'active') return 1;
        }
        return (a.name || '').localeCompare(b.name || '');
    });

    const existingSel = document.getElementById('existing-project-select');
    existingSel.innerHTML = '<option value="">— Pick a project —</option>' + projs.map(p =>
        `<option value="${_esc(p.id)}">${_esc(p.name)}${p.status && p.status !== 'active' ? ` (${p.status})` : ''}</option>`
    ).join('');

    const newSel = document.getElementById('new-project-select');
    newSel.innerHTML = '<option value="">— Create new project —</option>' + projs.map(p =>
        `<option value="${_esc(p.id)}">${_esc(p.name)}</option>`
    ).join('');
}

async function onExistingProjectChange() {
    const projectId = document.getElementById('existing-project-select').value;
    const locSel = document.getElementById('existing-location-select');
    if (!projectId) {
        locSel.innerHTML = '<option value="">Pick a project first</option>';
        return;
    }
    locSel.innerHTML = '<option value="">Loading…</option>';
    try {
        const r = await fetch(`/api/projects/${projectId}/locations-json?location_type=vibration`);
        const locs = await r.json();
        if (!Array.isArray(locs) || locs.length === 0) {
            locSel.innerHTML = '<option value="">(no locations — use Create new location instead)</option>';
            return;
        }
        locSel.innerHTML = '<option value="">— Pick a location —</option>' + locs.map(l =>
            `<option value="${_esc(l.id)}">${_esc(l.name)}</option>`
        ).join('');
    } catch (e) {
        locSel.innerHTML = `<option value="">Load failed: ${_esc(e.message)}</option>`;
    }
}

function setClassifyMode(mode) {
    _pdState.classifyMode = mode;
    const ex = document.getElementById('mode-existing');
    const nw = document.getElementById('mode-new');
    document.getElementById('classify-existing-pane').classList.toggle('hidden', mode !== 'existing');
    document.getElementById('classify-new-pane').classList.toggle('hidden', mode !== 'new');
    const activeCls = ['bg-seismo-orange', 'text-white'];
    const dormantCls = ['bg-gray-100', 'dark:bg-gray-700', 'text-gray-700', 'dark:text-gray-300', 'hover:bg-gray-200', 'dark:hover:bg-gray-600'];
    if (mode === 'existing') {
        ex.classList.add(...activeCls); ex.classList.remove(...dormantCls);
        nw.classList.remove(...activeCls); nw.classList.add(...dormantCls);
    } else {
        nw.classList.add(...activeCls); nw.classList.remove(...dormantCls);
        ex.classList.remove(...activeCls); ex.classList.add(...dormantCls);
    }
}

function onNewProjectMode() {
    const sel = document.getElementById('new-project-select');
    const wrap = document.getElementById('new-project-name-wrap');
    wrap.classList.toggle('hidden', !!sel.value);
}

async function submitClassify() {
    const btn   = document.getElementById('classify-submit');
    const errEl = document.getElementById('classify-error');
    errEl.classList.add('hidden');
    btn.disabled = true; btn.textContent = 'Classifying…';

    const body = { notes: document.getElementById('classify-notes').value.trim() };

    if (_pdState.classifyMode === 'existing') {
        const locId = document.getElementById('existing-location-select').value;
        if (!locId) {
            errEl.textContent = 'Pick a location.';
            errEl.classList.remove('hidden');
            btn.disabled = false; btn.textContent = 'Classify';
            return;
        }
        body.location_id = locId;
    } else {
        const existingProj = document.getElementById('new-project-select').value;
        const newName      = document.getElementById('new-project-name').value.trim();
        const locName      = document.getElementById('new-location-name').value.trim();
        if (!locName) {
            errEl.textContent = 'Location name required.';
            errEl.classList.remove('hidden');
            btn.disabled = false; btn.textContent = 'Classify';
            return;
        }
        if (existingProj) {
            body.project_id = existingProj;
        } else {
            if (!newName) {
                errEl.textContent = 'Project name (or pick an existing project) required.';
                errEl.classList.remove('hidden');
                btn.disabled = false; btn.textContent = 'Classify';
                return;
            }
            body.project_name    = newName;
            body.project_type_id = 'vibration_monitoring';
        }
        body.location_name        = locName;
        body.use_captured_coords  = document.getElementById('use-captured-coords').checked;
    }

    try {
        const r = await fetch(`/api/deployments/pending/${_pdState.classifyingId}/promote`, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify(body),
        });
        if (!r.ok) {
            const e = await r.json().catch(() => ({detail: 'HTTP ' + r.status}));
            throw new Error(e.detail || 'HTTP ' + r.status);
        }
        closeClassifyModal();
        loadPdList();
    } catch (e) {
        errEl.textContent = e.message;
        errEl.classList.remove('hidden');
        btn.disabled = false; btn.textContent = 'Classify';
    }
}

async function cancelPending(pendingId) {
    const reason = prompt('Cancel this capture?\n\nOptional reason:');
    if (reason === null) return;   // user hit Cancel on the prompt
    try {
        const r = await fetch(`/api/deployments/pending/${pendingId}/cancel`, {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ reason }),
        });
        if (!r.ok) {
            const e = await r.json().catch(() => ({detail: 'HTTP ' + r.status}));
            throw new Error(e.detail || 'HTTP ' + r.status);
        }
        loadPdList();
    } catch (e) {
        alert('Cancel failed: ' + e.message);
    }
}

// Kick off the initial load.
loadPdList();
// Refresh awaiting count every 30s for the badge.
setInterval(() => {
    if (_pdState.currentStatus === 'awaiting') loadPdList();
}, 30000);
</script>
{% endblock %}