/* Baustelle PWA Hauptlogik. Alle Routen + Views in einer Datei. */

const main = () => document.getElementById('main');
const title = (s) => document.getElementById('page-title').textContent = s;

window.showToast = function (msg, kind) {
    const t = document.createElement('div');
    t.className = 'toast' + (kind ? ' ' + kind : '');
    t.textContent = msg;
    document.getElementById('toast-container').appendChild(t);
    setTimeout(() => t.remove(), 2800);
};

function showLoader(text) {
    main().innerHTML = '<div class="loader">' + (text || 'Lade…') + '</div>';
}

function setNav(visible, active) {
    const nav = document.getElementById('bottom-nav');
    nav.style.display = visible ? '' : 'none';
    nav.querySelectorAll('button').forEach(b => {
        b.classList.toggle('active', b.dataset.route === active);
    });
}

function setBack(visible, hash) {
    const btn = document.getElementById('back-btn');
    btn.style.display = visible ? '' : 'none';
    btn.onclick = () => { if (hash) router.go(hash); else history.back(); };
}

/* ----- Auth-Check ----- */
async function ensureAuth() {
    const t = await api.getToken();
    if (!t) {
        router.go('#/login');
        return false;
    }
    return true;
}

/* ====== ROUTES ====== */

router.on('/login', async () => {
    title('Anmelden');
    setNav(false);
    setBack(false);
    main().innerHTML = `
        <form class="login-form" id="login-form">
            <h2>🔧 Baustelle</h2>
            <input type="text" name="login" placeholder="Benutzername" autocomplete="username" required>
            <input type="password" name="password" placeholder="Passwort" autocomplete="current-password" required>
            <button type="submit" class="btn btn-large">Anmelden</button>
        </form>
    `;
    document.getElementById('login-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const fd = new FormData(e.target);
        try {
            await api.login(fd.get('login'), fd.get('password'));
            showToast('Erfolgreich angemeldet');
            router.go('#/orders');
        } catch (err) {
            showToast(err.message, 'error');
        }
    });
});

router.on('/orders', async () => {
    if (!(await ensureAuth())) return;
    title('Aufträge');
    setNav(true, 'orders');
    setBack(false);
    showLoader('Lade Aufträge…');

    try {
        const data = await api.listOrders({ open: 1 });
        if (!data.orders.length) {
            main().innerHTML = '<div class="empty-state"><div class="icon">📭</div>Keine offenen Aufträge</div>';
            return;
        }
        const html = `
            <div class="search-bar"><input type="search" id="order-search" placeholder="🔍 Suchen…"></div>
            <div id="order-list">${renderOrderList(data.orders)}</div>
        `;
        main().innerHTML = html;
        document.querySelectorAll('.order-card').forEach(c => {
            c.addEventListener('click', () => router.go('#/orders/' + c.dataset.id));
        });
        document.getElementById('order-search').addEventListener('input', async (e) => {
            const q = e.target.value;
            const d = await api.listOrders({ q, open: 1 });
            document.getElementById('order-list').innerHTML = renderOrderList(d.orders);
            document.querySelectorAll('.order-card').forEach(c => {
                c.addEventListener('click', () => router.go('#/orders/' + c.dataset.id));
            });
        });
    } catch (e) {
        main().innerHTML = '<div class="empty-state"><div class="icon">⚠️</div>' + e.message + '</div>';
    }
});

function renderOrderList(orders) {
    return orders.map(o => `
        <div class="order-card" data-id="${o.id}">
            <div class="ref">${escapeHtml(o.ref)}</div>
            <div class="name">${escapeHtml(o.customer.name || '')}</div>
            <div class="meta">
                <span>${escapeHtml((o.customer.zip || '') + ' ' + (o.customer.town || ''))}</span>
                ${o.bericht_count > 0 ? `<span class="badge">📑 ${o.bericht_count}</span>` : ''}
            </div>
        </div>
    `).join('');
}

router.on('/orders/:id', async (args) => {
    if (!(await ensureAuth())) return;
    setNav(true, 'orders');
    setBack(true, '#/orders');
    showLoader('Lade Auftrag…');

    try {
        const data = await api.getOrder(args.id);
        const photos = await api.listOrderPhotos(args.id).catch(() => ({ photos: [] }));
        title(data.order.ref);

        main().innerHTML = `
            <div class="detail-section">
                <h3>Kunde</h3>
                <p><strong>${escapeHtml(data.customer.name)}</strong></p>
                <p>${escapeHtml(data.customer.address || '')}</p>
                <p>${escapeHtml((data.customer.zip || '') + ' ' + (data.customer.town || ''))}</p>
                ${data.customer.phone ? `<p><a href="tel:${escapeHtml(data.customer.phone)}">📞 ${escapeHtml(data.customer.phone)}</a></p>` : ''}
            </div>

            ${data.order.auftragsbeschreibung ? `
            <div class="detail-section">
                <h3>Beschreibung</h3>
                <p>${escapeHtml(data.order.auftragsbeschreibung)}</p>
            </div>` : ''}

            <button class="btn btn-large" id="btn-take-photo">📷 Foto aufnehmen</button>
            <input type="file" id="camera-input" class="hidden-input" accept="image/*" capture="environment" multiple>
            <button class="btn btn-secondary" id="btn-pick-photo">📂 Aus Galerie wählen</button>
            <input type="file" id="gallery-input" class="hidden-input" accept="image/*" multiple>

            <div class="detail-section" style="margin-top:16px;">
                <h3>Hochgeladene Fotos (${photos.photos.length})</h3>
                <div class="photo-grid" id="photo-grid">
                    ${photos.photos.map(p => `<div class="thumb" data-relpath="${escapeHtml(p.relpath)}"><div class="thumb-placeholder">⏳</div></div>`).join('')}
                </div>
            </div>
        `;

        loadThumbs();

        const camInput = document.getElementById('camera-input');
        const galInput = document.getElementById('gallery-input');
        document.getElementById('btn-take-photo').onclick = () => camInput.click();
        document.getElementById('btn-pick-photo').onclick = () => galInput.click();

        async function handleFiles(files) {
            for (const f of files) {
                await uploadPhoto(args.id, f);
            }
            // Reload Photo-Liste
            try {
                const np = await api.listOrderPhotos(args.id);
                document.getElementById('photo-grid').innerHTML =
                    np.photos.map(p => `<div class="thumb" data-relpath="${escapeHtml(p.relpath)}"><div class="thumb-placeholder">⏳</div></div>`).join('');
                loadThumbs();
            } catch (e) {}
        }
        camInput.addEventListener('change', () => handleFiles(camInput.files));
        galInput.addEventListener('change', () => handleFiles(galInput.files));
    } catch (e) {
        main().innerHTML = '<div class="empty-state"><div class="icon">⚠️</div>' + e.message + '</div>';
    }
});

async function uploadPhoto(orderId, file) {
    showToast('Optimiere & sende ' + file.name);
    const blob = await resizeImage(file, 2000);
    if (!navigator.onLine) {
        await offline.enqueuePhoto(orderId, blob, file.name);
        showToast('Offline — Foto in Queue', 'warn');
        return;
    }
    try {
        await api.uploadOrderPhoto(orderId, blob, file.name);
        showToast('✓ ' + file.name + ' hochgeladen');
    } catch (e) {
        await offline.enqueuePhoto(orderId, blob, file.name);
        showToast('Upload fehlgeschlagen — in Queue', 'error');
    }
}

async function resizeImage(file, maxSide) {
    return new Promise((resolve) => {
        const img = new Image();
        const url = URL.createObjectURL(file);
        img.onload = () => {
            URL.revokeObjectURL(url);
            const scale = Math.min(1, maxSide / Math.max(img.width, img.height));
            if (scale === 1) { resolve(file); return; }
            const c = document.createElement('canvas');
            c.width  = Math.round(img.width * scale);
            c.height = Math.round(img.height * scale);
            c.getContext('2d').drawImage(img, 0, 0, c.width, c.height);
            c.toBlob(b => resolve(b || file), 'image/jpeg', 0.85);
        };
        img.onerror = () => { URL.revokeObjectURL(url); resolve(file); };
        img.src = url;
    });
}

/**
 * Lädt alle sichtbaren Thumbnails im aktuellen Photo-Grid.
 * Nutzt /api/photo.php mit JWT (Header kann <img src> nicht schicken,
 * deshalb Blob-URLs).
 */
async function loadThumbs() {
    const thumbs = document.querySelectorAll('.photo-grid .thumb[data-relpath]');
    for (const t of thumbs) {
        const rel = t.dataset.relpath;
        try {
            // Erst Thumbnail versuchen (_small), bei Misserfolg das Original
            let url = await api.getPhotoBlobUrl(rel, 'small');
            if (!url) url = await api.getPhotoBlobUrl(rel);
            if (url) {
                t.innerHTML = '<img loading="lazy" src="' + url + '">';
            } else {
                t.innerHTML = '<div class="thumb-placeholder">❌</div>';
            }
        } catch (e) {
            t.innerHTML = '<div class="thumb-placeholder">❌</div>';
        }
    }
}

router.on('/reports', async () => {
    if (!(await ensureAuth())) return;
    title('Berichte');
    setNav(true, 'reports');
    setBack(false);
    main().innerHTML = '<div class="empty-state"><div class="icon">📑</div>Berichte-Liste folgt</div>';
});

router.on('/settings', async () => {
    if (!(await ensureAuth())) return;
    title('Einstellungen');
    setNav(true, 'settings');
    setBack(false);

    const user = await idb.get('user') || {};
    main().innerHTML = `
        <div class="detail-section">
            <h3>Konto</h3>
            <p><strong>${escapeHtml(user.name || user.login || 'Unbekannt')}</strong></p>
            <p class="label">${escapeHtml(user.login || '')}</p>
        </div>
        <button class="btn btn-secondary" id="btn-sync">🔄 Offline-Queue synchronisieren</button>
        <button class="btn btn-secondary" id="btn-logout">🚪 Abmelden</button>
        <p class="label" style="text-align:center;margin-top:24px;">Baustelle PWA v1.0</p>
    `;
    document.getElementById('btn-sync').onclick = async () => {
        await offline.syncQueue();
        showToast('Sync ausgelöst');
    };
    document.getElementById('btn-logout').onclick = async () => {
        await api.logout();
        router.go('#/login');
    };
});

/* Bottom nav */
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('#bottom-nav button').forEach(b => {
        b.addEventListener('click', () => router.go('#/' + b.dataset.route));
    });
});

function escapeHtml(s) {
    return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}