Poznámky k implementaci:
    - Stav konta je uložen na serveru přes ForrestHubLib (dbVar* a dbArray*).
    - Každá karta je identifikována jen sériovým číslem (UID) z Web NFC: event.serialNumber.
    - Ceny/částky ukládáme v haléřích (integer) kvůli přesnosti.
    - Stránky jsou rozlišené podle posledního segmentu URL: /<hra>/<stranka> (např. /nfc-banka/dobiti).
    - QR kódy s rychlým odkazem pro kiosky; volitelné nastavení přes ?moje=<URL-encoded JSON>.

    Inspirace práce s forrestHubLib:
    - Použití dbArray* a pravidelné načítání dat (chat) :contentReference[oaicite:0]{index=0}
    - Vícero "podstránek" v jedné HTML (pošta) :contentReference[oaicite:1]{index=1}
    - Periodické vyčítání a jednoduchý stav/overlay (semafor) :contentReference[oaicite:2]{index=2}, :contentReference[oaicite:3]{index=3}
-->

<div class="container py-4" id="appRoot">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h3 mb-0">
            <i class="fa-solid fa-wave-square text-primary me-2"></i>NFC Banka
            <small class="text-muted" id="pageTitle"></small>
        </h1>
        <div class="d-flex align-items-center gap-2">
            <span class="badge bg-secondary" id="nfcSupportBadge" title="Detekce podpory Web NFC">NFC: ?</span>
            <span class="badge bg-info text-dark" id="secureContextBadge" title="Vyžaduje HTTPS nebo localhost">Secure: ?</span>
            <div class="input-group input-group-sm" style="width: 220px;">
                <span class="input-group-text"><i class="fa-solid fa-user"></i></span>
                <input id="operatorName" class="form-control" placeholder="Obsluha…">
            </div>
        </div>
    </div>

    <!-- Navigace mezi podstránkami -->
    <ul class="nav nav-pills mb-4" id="pageNav"></ul>

    <!-- DASHBOARD -->
    <div id="page-dashboard" class="page d-none">
        <div class="row g-3">
            <div class="col-12 col-lg-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fa-solid fa-bolt text-warning me-2"></i>Rychlé odkazy (QR)</h5>
                        <p class="text-muted mb-2">Naskenuj QR pro otevření konkrétního kiosku na tomto zařízení.</p>
                        <div class="row g-3">
                            <div class="col-4 text-center">
                                <div id="qr-dobiti"></div>
                                <div class="small mt-2">/dobiti</div>
                            </div>
                            <div class="col-4 text-center">
                                <div id="qr-platba"></div>
                                <div class="small mt-2">/platba</div>
                            </div>
                            <div class="col-4 text-center">
                                <div id="qr-stav"></div>
                                <div class="small mt-2">/stav</div>
                            </div>
                        </div>
                        <hr>
                        <div class="small">
                            <label class="form-label">Volitelné nastavení do QR (<code>?moje=</code>):</label>
                            <textarea id="qrConfig" class="form-control form-control-sm" rows="3" placeholder='{"operator":"Lenka","defaultAmountCZK":50}'></textarea>
                            <button class="btn btn-sm btn-outline-primary mt-2" id="regenQrBtn">
                                <i class="fa-solid fa-qrcode me-1"></i>Vygenerovat s nastavením
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-8">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title"><i class="fa-solid fa-book text-success me-2"></i>Krátká dokumentace</h5>
                        <ol class="mb-0 small">
                            <li>Vyber stránku <strong>Dobití</strong>, <strong>Platba</strong> nebo <strong>Stav</strong>.</li>
                            <li>Stiskni <strong>Scan NFC</strong> a přilož kartu. Používá se <em>pouze</em> sériové číslo.</li>
                            <li>Stav konta se drží na serveru – sdílené napříč zařízeními.</li>
                            <li>Pokud Web NFC není dostupné (HTTP / iOS), použij ruční zadání UID.</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- DOBITÍ -->
    <div id="page-dobiti" class="page d-none">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title"><i class="fa-solid fa-plus-circle text-success me-2"></i>Dobití kreditu</h5>
                <div class="row g-3 align-items-end">
                    <div class="col-sm-6 col-lg-4">
                        <label class="form-label">Karta (UID)</label>
                        <div class="input-group">
                            <input id="topupCard" class="form-control" placeholder="– naskenuj nebo zadej –">
                            <button class="btn btn-outline-secondary" id="btnTopupScan"><i class="fa-solid fa-wifi"></i> Scan NFC</button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <label class="form-label">Částka (Kč)</label>
                        <div class="input-group">
                            <input id="topupAmount" class="form-control" placeholder="50">
                            <button class="btn btn-outline-info" data-quick="50">+50</button>
                            <button class="btn btn-outline-info" data-quick="100">+100</button>
                            <button class="btn btn-outline-info" data-quick="200">+200</button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <label class="form-label">Jméno (volitelné)</label>
                        <input id="topupName" class="form-control" placeholder="např. Tým Alfa">
                    </div>
                    <div class="col-sm-6 col-lg-2 d-grid">
                        <button class="btn btn-success" id="btnTopup"><i class="fa-solid fa-circle-arrow-up me-1"></i>Připsat</button>
                    </div>
                </div>

                <hr>
                <div id="topupInfo" class="small text-muted"></div>
            </div>
        </div>
    </div>

    <!-- PLATBA -->
    <div id="page-platba" class="page d-none">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title"><i class="fa-solid fa-cart-shopping text-danger me-2"></i>Platba</h5>
                <div class="row g-3 align-items-end">
                    <div class="col-sm-6 col-lg-4">
                        <label class="form-label">Karta (UID)</label>
                        <div class="input-group">
                            <input id="payCard" class="form-control" placeholder="– naskenuj nebo zadej –">
                            <button class="btn btn-outline-secondary" id="btnPayScan"><i class="fa-solid fa-wifi"></i> Scan NFC</button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <label class="form-label">Částka (Kč)</label>
                        <div class="input-group">
                            <input id="payAmount" class="form-control" placeholder="30">
                            <button class="btn btn-outline-info" data-quick="20">20</button>
                            <button class="btn btn-outline-info" data-quick="50">50</button>
                            <button class="btn btn-outline-info" data-quick="100">100</button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-2 d-grid">
                        <button class="btn btn-danger" id="btnPay"><i class="fa-solid fa-circle-minus me-1"></i>Strhnout</button>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="alert p-2 border d-flex align-items-center" id="payBalanceBox">
                            <i class="fa-solid fa-wallet me-2 text-secondary"></i>
                            <div>
                                <div class="small text-muted">Aktuální zůstatek</div>
                                <div id="payBalance" class="fw-bold">–</div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr>
                <div id="payInfo" class="small text-muted"></div>
            </div>
        </div>
    </div>

    <!-- STAV & HISTORIE -->
    <div id="page-stav" class="page d-none">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title"><i class="fa-solid fa-magnifying-glass-chart text-primary me-2"></i>Stav účtu & historie</h5>
                <div class="row g-3 align-items-end">
                    <div class="col-sm-6 col-lg-4">
                        <label class="form-label">Karta (UID)</label>
                        <div class="input-group">
                            <input id="stateCard" class="form-control" placeholder="– naskenuj nebo zadej –">
                            <button class="btn btn-outline-secondary" id="btnStateScan"><i class="fa-solid fa-wifi"></i> Scan NFC</button>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3 d-grid">
                        <button class="btn btn-outline-primary" id="btnStateLoad"><i class="fa-solid fa-rotate me-1"></i>Načíst</button>
                    </div>
                    <div class="col-sm-12 col-lg-5">
                        <div class="alert p-2 border d-flex align-items-center">
                            <i class="fa-solid fa-wallet me-2 text-secondary"></i>
                            <div>
                                <div class="small text-muted">Zůstatek</div>
                                <div id="stateBalance" class="fw-bold">–</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive mt-3">
                    <table class="table table-sm align-middle">
                        <thead>
                            <tr>
                                <th>Čas</th>
                                <th>Typ</th>
                                <th class="text-end">Částka</th>
                                <th class="text-end">Nový stav</th>
                                <th>Terminál</th>
                                <th>Obsluha</th>
                            </tr>
                        </thead>
                        <tbody id="stateHistory"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <footer class="text-center text-muted small mt-4">
        <i class="fa-solid fa-circle-info me-1"></i>
        Web NFC vyžaduje <strong>HTTPS</strong> (nebo <strong>localhost</strong>) a je podporováno především v prohlížečích na Androidu.
    </footer>
</div>

<style>
    #appRoot .card { box-shadow: 0 4px 14px rgba(0,0,0,.06); }
    .page:not(.d-none) { animation: fade .2s ease-in; }
    @keyframes fade { from {opacity: 0; transform: translateY(4px);} to {opacity: 1; transform: none;} }
    #qr-dobiti,#qr-platba,#qr-stav { width: 100%; display: inline-block; }
    #qr-dobiti > img, #qr-platba > img, #qr-stav > img { max-width: 100%; height: auto; }
    .input-group .btn[data-quick] { white-space: nowrap; }
    .table td, .table th { vertical-align: middle; }
</style>

<script>
    // ====== Inicializace knihovny ======
    let forrestHubLib = ForrestHubLib.getInstance();

    // ====== Pomocné funkce ======
    const fmtCZK = new Intl.NumberFormat('cs-CZ', { style: 'currency', currency: 'CZK' });
    const nowIso = () => new Date().toISOString();

    function centsFromInput(val) {
        if (typeof val !== 'string') val = String(val ?? '');
        val = val.replace(/\s/g, '').replace(',', '.');
        const num = Number(val);
        if (!isFinite(num)) return null;
        return Math.round(num * 100);
    }
    function czkFromCents(cents) {
        return fmtCZK.format((cents || 0) / 100);
    }
    function keyBalance(uid) { return `acct_${uid}_balance`; }
    function keyName(uid) { return `acct_${uid}_name`; }
    function arrTx(uid) { return `txn_${uid}`; }

    function getProjectSlug() {
        return decodeURIComponent(window.location.pathname.split('/')[1] || '');
    }
    function getCurrentPage() {
        return decodeURIComponent(window.location.pathname.split('/')[2] || 'dashboard');
    }
    function makePageUrl(page, extraQuery="") {
        const base = `${location.protocol}//${location.host}/${getProjectSlug()}/${encodeURIComponent(page)}`;
        return extraQuery ? `${base}?${extraQuery.replace(/^\?/, '')}` : base;
    }

    function uiSetBadges() {
        const nfcSupported = 'NDEFReader' in window;
        const secure = window.isSecureContext || location.hostname === 'localhost';
        const b1 = document.getElementById('nfcSupportBadge');
        const b2 = document.getElementById('secureContextBadge');
        b1.className = `badge ${nfcSupported ? 'bg-success' : 'bg-secondary'}`;
        b1.textContent = `NFC: ${nfcSupported ? 'OK' : 'NE'}`;
        b2.className = `badge ${secure ? 'bg-success' : 'bg-warning text-dark'}`;
        b2.textContent = `Secure: ${secure ? 'OK' : 'NE'}`;
        if (!nfcSupported) forrestHubLib.uiShowAlert('warning', 'Web NFC není k dispozici – použij ruční zadání UID.');
        if (!secure && location.hostname !== 'localhost') forrestHubLib.uiShowAlert('warning', 'Web NFC vyžaduje HTTPS – zde poběží jen ruční zadání.');
    }

    function setOperatorFromStorageOrParam() {
        const input = document.getElementById('operatorName');
        const params = new URLSearchParams(location.search);
        const moje = params.get('moje');
        if (moje) {
            try {
                const cfg = JSON.parse(decodeURIComponent(moje));
                if (cfg.operator) localStorage.setItem('nfc_operator', cfg.operator);
                if (typeof cfg.defaultAmountCZK === 'number') localStorage.setItem('nfc_default_amount_czk', String(cfg.defaultAmountCZK));
            } catch (e) { /* ignore */ }
        }
        input.value = localStorage.getItem('nfc_operator') || '';
        input.addEventListener('input', () => localStorage.setItem('nfc_operator', input.value.trim()));
    }

    function setDefaultAmounts() {
        const def = localStorage.getItem('nfc_default_amount_czk');
        if (def) {
            const val = def;
            const a = document.getElementById('topupAmount');
            const b = document.getElementById('payAmount');
            if (a && !a.value) a.value = val;
            if (b && !b.value) b.value = val;
        }
    }

    function buildNav() {
        const nav = document.getElementById('pageNav');
        const pages = [
            { id: 'dashboard', icon: 'fa-house', text: 'Dashboard' },
            { id: 'dobiti', icon: 'fa-plus', text: 'Dobití' },
            { id: 'platba', icon: 'fa-money-bill', text: 'Platba' },
            { id: 'stav', icon: 'fa-chart-line', text: 'Stav' },
        ];
        nav.innerHTML = '';
        pages.forEach(p => {
            const li = document.createElement('li');
            li.className = 'nav-item';
            const a = document.createElement('a');
            a.className = 'nav-link';
            a.href = makePageUrl(p.id) + location.search; // zachovej ?moje
            a.innerHTML = `<i class="fa-solid ${p.icon} me-1"></i>${p.text}`;
            if (getCurrentPage() === p.id) a.classList.add('active');
            li.appendChild(a);
            nav.appendChild(li);
        });
        document.getElementById('pageTitle').textContent = ` / ${getCurrentPage()}`;
    }

    function showCurrentPage() {
        const page = getCurrentPage();
        document.querySelectorAll('.page').forEach(el => el.classList.add('d-none'));
        const target = document.getElementById(`page-${page}`);
        (target || document.getElementById('page-dashboard')).classList.remove('d-none');
    }

    function attachQuickButtons(container, inputId) {
        container.querySelectorAll('button[data-quick]').forEach(btn => {
            btn.addEventListener('click', () => {
                const v = btn.getAttribute('data-quick');
                const inp = document.getElementById(inputId);
                inp.value = v;
                inp.focus();
            });
        });
    }

    // ====== Web NFC – čtení pouze sériového čísla ======
    async function scanCardUID() {
        if (!('NDEFReader' in window)) throw new Error('Web NFC nepodporováno');
        if (!(window.isSecureContext || location.hostname === 'localhost')) throw new Error('NFC vyžaduje HTTPS/localhost');

        const ndef = new NDEFReader();
        await ndef.scan(); // požádá o oprávnění a čeká na přiložení
        return await new Promise((resolve, reject) => {
            const to = setTimeout(() => reject(new Error('Čas vypršel')), 15000);
            ndef.onreadingerror = () => { clearTimeout(to); reject(new Error('Chyba čtení NFC')); };
            ndef.onreading = (ev) => {
                clearTimeout(to);
                // Pouze sériové číslo
                const uid = (ev.serialNumber || '').trim();
                if (!uid) reject(new Error('Sériové číslo nebylo získáno'));
                else resolve(uid);
            };
        });
    }

    // ====== Serverové operace (stav konta & transakce) ======
    async function getBalance(uid) {
        const res = await forrestHubLib.dbVarGetKey(keyBalance(uid));
        return Number(res || 0) || 0;
    }
    async function setBalance(uid, cents) {
        await forrestHubLib.dbVarSetKey(keyBalance(uid), cents);
    }
    async function setName(uid, name) {
        if (name && name.trim()) await forrestHubLib.dbVarSetKey(keyName(uid), name.trim());
    }
    async function getName(uid) {
        return await forrestHubLib.dbVarGetKey(keyName(uid)) || '';
    }
    async function addTxn(uid, record) {
        await forrestHubLib.dbArrayAddRecord(arrTx(uid), record);
    }
    async function fetchAllTx(uid) {
        return await forrestHubLib.dbArrayFetchAllRecords(arrTx(uid));
    }

    function terminalLabel() {
        return getCurrentPage();
    }
    function operatorLabel() {
        return (document.getElementById('operatorName').value || '').trim();
    }

    // ====== Use-cases ======
    async function doTopup() {
        const uid = (document.getElementById('topupCard').value || '').trim();
        const amountCents = centsFromInput(document.getElementById('topupAmount').value);
        const name = (document.getElementById('topupName').value || '').trim();

        if (!uid) { forrestHubLib.uiShowAlert('warning', 'Zadej/načti UID karty.'); return; }
        if (amountCents === null || amountCents <= 0) { forrestHubLib.uiShowAlert('warning', 'Neplatná částka.'); return; }

        const oldBal = await getBalance(uid);
        const newBal = oldBal + amountCents;

        await setBalance(uid, newBal);
        if (name) await setName(uid, name);

        await addTxn(uid, {
            t: nowIso(), type: 'topup', amount: amountCents, newBal,
            terminal: terminalLabel(), operator: operatorLabel()
        });

        document.getElementById('topupInfo').innerHTML =
            `<span class="text-success">Dobito ${czkFromCents(amountCents)}</span> • Nový stav: <strong>${czkFromCents(newBal)}</strong>` +
            (name ? ` • Jméno: ${name}` : '');

        forrestHubLib.uiShowAlert('success', `Dobito ${czkFromCents(amountCents)} (UID ${uid})`);
    }

    async function doPayment() {
        const uid = (document.getElementById('payCard').value || '').trim();
        const amountCents = centsFromInput(document.getElementById('payAmount').value);

        if (!uid) { forrestHubLib.uiShowAlert('warning', 'Zadej/načti UID karty.'); return; }
        if (amountCents === null || amountCents <= 0) { forrestHubLib.uiShowAlert('warning', 'Neplatná částka.'); return; }

        const oldBal = await getBalance(uid);
        if (oldBal < amountCents) {
            forrestHubLib.uiShowAlert('danger', `Nedostatek prostředků: máš ${czkFromCents(oldBal)}, cena ${czkFromCents(amountCents)}`);
            return;
        }
        const newBal = oldBal - amountCents;
        await setBalance(uid, newBal);
        await addTxn(uid, {
            t: nowIso(), type: 'payment', amount: -amountCents, newBal,
            terminal: terminalLabel(), operator: operatorLabel()
        });

        document.getElementById('payInfo').innerHTML =
            `<span class="text-danger">Strženo ${czkFromCents(amountCents)}</span> • Nový stav: <strong>${czkFromCents(newBal)}</strong>`;
        document.getElementById('payBalance').textContent = czkFromCents(newBal);

        forrestHubLib.uiShowAlert('success', `Zaplaceno ${czkFromCents(amountCents)} (UID ${uid})`);
    }

    async function refreshPayBalanceBox() {
        const uid = (document.getElementById('payCard').value || '').trim();
        document.getElementById('payBalance').textContent = uid ? czkFromCents(await getBalance(uid)) : '–';
    }

    async function loadState() {
        const uid = (document.getElementById('stateCard').value || '').trim();
        if (!uid) { forrestHubLib.uiShowAlert('warning', 'Zadej/načti UID karty.'); return; }

        const [bal, name, tx] = await Promise.all([getBalance(uid), getName(uid), fetchAllTx(uid)]);
        document.getElementById('stateBalance').textContent = czkFromCents(bal);

        const tbody = document.getElementById('stateHistory');
        tbody.innerHTML = '';
        Object.values(tx || {}).reverse().forEach(rec => {
            const tr = document.createElement('tr');
            const typ = rec.type === 'topup' ? 'Dobití' : (rec.type === 'payment' ? 'Platba' : (rec.type || ''));
            tr.innerHTML = `
                <td><code>${new Date(rec.t).toLocaleString()}</code></td>
                <td>${typ}</td>
                <td class="text-end ${rec.amount>=0?'text-success':'text-danger'}">${czkFromCents(rec.amount)}</td>
                <td class="text-end">${czkFromCents(rec.newBal)}</td>
                <td>${rec.terminal||''}</td>
                <td>${rec.operator||''}</td>
            `;
            tbody.appendChild(tr);
        });

        if (name) {
            document.getElementById('stateBalance').insertAdjacentHTML('afterend', ` <span class="text-muted">(${name})</span>`);
        }
    }

    // ====== QR kódy pro kiosky ======
    function makeQrCodes() {
        const cfgStr = document.getElementById('qrConfig').value.trim();
        const query = cfgStr ? `moje=${encodeURIComponent(cfgStr)}` : '';
        const el1 = document.getElementById('qr-dobiti');
        const el2 = document.getElementById('qr-platba');
        const el3 = document.getElementById('qr-stav');
        el1.innerHTML = ''; el2.innerHTML=''; el3.innerHTML='';
        new QRCode(el1, makePageUrl('dobiti', query));
        new QRCode(el2, makePageUrl('platba', query));
        new QRCode(el3, makePageUrl('stav', query));
    }

    // ====== Handlery tlačítek a skenů ======
    async function handleScanTo(inputId) {
        try {
            const uid = await scanCardUID();
            const input = document.getElementById(inputId);
            input.value = uid;
            input.classList.add('is-valid');
            setTimeout(() => input.classList.remove('is-valid'), 800);
            if (inputId === 'payCard') refreshPayBalanceBox();
            forrestHubLib.uiShowAlert('success', `Naskenováno UID: ${uid}`);
        } catch (e) {
            forrestHubLib.uiShowAlert('danger', e.message || 'Chyba skenování');
        }
    }

    // ====== Periodické drobnosti ======
    setInterval(() => {
        if (getCurrentPage() === 'platba') refreshPayBalanceBox();
    }, 1500);

    // ====== Start ======
    document.addEventListener('DOMContentLoaded', () => {
        uiSetBadges();
        setOperatorFromStorageOrParam();
        buildNav();
        showCurrentPage();
        setDefaultAmounts();

        // QR init
        makeQrCodes();
        document.getElementById('regenQrBtn').addEventListener('click', makeQrCodes);

        // Quick amount buttons
        attachQuickButtons(document.getElementById('page-dobiti'), 'topupAmount');
        attachQuickButtons(document.getElementById('page-platba'), 'payAmount');

        // Topup
        document.getElementById('btnTopupScan').addEventListener('click', () => handleScanTo('topupCard'));
        document.getElementById('btnTopup').addEventListener('click', doTopup);

        // Payment
        document.getElementById('btnPayScan').addEventListener('click', () => handleScanTo('payCard'));
        document.getElementById('btnPay').addEventListener('click', doPayment);
        document.getElementById('payCard').addEventListener('input', refreshPayBalanceBox);

        // State
        document.getElementById('btnStateScan').addEventListener('click', () => handleScanTo('stateCard'));
        document.getElementById('btnStateLoad').addEventListener('click', loadState);
    });
</script>