tablet-flow.js

const admin = require('firebase-admin');
const puppeteer = require('puppeteer');
const path = require('path');
const fs = require('fs');
const { execSync } = require('child_process');

const SA_PATH = '/var/www/arrivo/serviceAccountKey.json';
const OUT = path.join(__dirname, 'docs', 'screenshots');
const wait = ms => new Promise(r => setTimeout(r, ms));
const HOTEL_ID = 'yZsQrnXZwGUUUvxopJDRIGrW84H2';
const TABLET_URL = `https://arrivo.club/tablet?hotel=${HOTEL_ID}`;

async function run() {
    if (!fs.existsSync(OUT)) fs.mkdirSync(OUT, { recursive: true });

    // Firebase admin - ensure test guest
    const sa = require(SA_PATH);
    admin.initializeApp({ credential: admin.credential.cert(sa) });
    const db = admin.firestore();
    const today = new Date().toISOString().split('T')[0];
    const guestsRef = db.collection('hotels').doc(HOTEL_ID).collection('guests');

    // Find an unchecked guest with a unique last name
    let todayGuests = await guestsRef.where('arrivalDate', '==', today).where('checkedIn', '==', false).get();
    let guestLastName;

    // Count last names to find unique ones
    const nameCount = {};
    todayGuests.forEach(g => {
        const ln = g.data().lastName;
        nameCount[ln] = (nameCount[ln] || 0) + 1;
    });

    // Pick a guest with a unique last name (so search returns exactly 1 result)
    let chosenGuest = null;
    todayGuests.forEach(g => {
        if (!chosenGuest && nameCount[g.data().lastName] === 1) {
            chosenGuest = g;
        }
    });

    if (chosenGuest) {
        const g = chosenGuest.data();
        guestLastName = g.lastName;
        console.log(`Using guest: ${g.firstName} ${g.lastName} (Room ${g.roomNumber})`);
    } else if (!todayGuests.empty) {
        const g = todayGuests.docs[0].data();
        guestLastName = g.lastName;
        console.log(`Using guest: ${g.firstName} ${g.lastName} (Room ${g.roomNumber})`);
    } else {
        await guestsRef.add({
            firstName: 'James', lastName: 'Richardson', arrivalDate: today,
            bookingReference: 'RES9999002', roomNumber: '15',
            checkedIn: false, dinnerBooked: false,
            createdAt: admin.firestore.FieldValue.serverTimestamp()
        });
        guestLastName = 'Richardson';
        console.log('Created test guest: James Richardson');
    }

    const browser = await puppeteer.launch({
        headless: 'new',
        args: ['--no-sandbox', '--disable-setuid-sandbox'],
        defaultViewport: { width: 1024, height: 768, deviceScaleFactor: 2, hasTouch: true }
    });

    const page = await browser.newPage();
    await page.goto(TABLET_URL, { waitUntil: 'networkidle2', timeout: 45000 }).catch(() => {});
    await wait(6000);

    const frames = [];
    let fi = 0;
    async function frame(label) {
        const fp = path.join(OUT, `tframe-${String(fi).padStart(3, '0')}.png`);
        await page.screenshot({ path: fp });
        frames.push(fp);
        console.log(`Frame ${fi}: ${label}`);
        fi++;
    }

    function getText() {
        return page.evaluate(() => document.body.innerText.substring(0, 1000));
    }

    // Helper: find element by text (case-insensitive) and get its bounding box
    async function findByText(searchText) {
        return page.evaluate((text) => {
            const lower = text.toLowerCase();
            const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
            while (walker.nextNode()) {
                const node = walker.currentNode;
                if (node.textContent.toLowerCase().includes(lower)) {
                    let el = node.parentElement;
                    for (let i = 0; i < 10 && el; i++) {
                        const rect = el.getBoundingClientRect();
                        if (rect.width > 20 && rect.height > 20) {
                            return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2, w: rect.width, h: rect.height, tag: el.tagName };
                        }
                        el = el.parentElement;
                    }
                }
            }
            return null;
        }, searchText);
    }

    // Helper: tap element by text using evaluate click (most reliable for React)
    async function tapText(searchText) {
        const result = await page.evaluate((text) => {
            const lower = text.toLowerCase();
            const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
            while (walker.nextNode()) {
                const node = walker.currentNode;
                if (node.textContent.toLowerCase().includes(lower)) {
                    let el = node.parentElement;
                    for (let i = 0; i < 10 && el; i++) {
                        const rect = el.getBoundingClientRect();
                        if (rect.width > 20 && rect.height > 20) {
                            // Dispatch full event sequence for React
                            el.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
                            el.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
                            el.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
                            el.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
                            el.click();
                            return `clicked "${text}" at ${el.tagName} (${Math.round(rect.x)},${Math.round(rect.y)}) ${Math.round(rect.width)}x${Math.round(rect.height)}`;
                        }
                        el = el.parentElement;
                    }
                }
            }
            return null;
        }, searchText);
        if (result) {
            console.log(`  ${result}`);
            return true;
        }
        console.log(`  Not found: "${searchText}"`);
        return false;
    }

    // === STEP 0: SCREENSAVER ===
    console.log('\n=== SCREENSAVER ===');
    await frame('screensaver');
    await page.screenshot({ path: path.join(OUT, 'tablet-screensaver.png') });

    // Tap to wake
    await page.touchscreen.tap(512, 400);
    await wait(3000);

    // === STEP 1: WELCOME ===
    let t = await getText();
    console.log('\n=== WELCOME ===');
    console.log(t.substring(0, 150));
    await frame('welcome');
    await page.screenshot({ path: path.join(OUT, 'tablet-welcome.png') });

    // Tap CHECK IN button
    let tapped = await tapText('CHECK IN');
    if (!tapped) {
        // Try tapping lower center where button might be
        await page.touchscreen.tap(512, 550);
    }
    await wait(3000);

    // Verify we moved to Find Reservation
    t = await getText();
    console.log('\n=== FIND RESERVATION ===');
    console.log(t.substring(0, 200));

    if (t.includes('Tap to begin')) {
        // Still on welcome - try more taps
        console.log('Still on welcome, trying more approaches...');
        // Find the CHECK IN text element and tap it directly
        const checkinLoc = await page.evaluate(() => {
            const els = document.querySelectorAll('*');
            for (const el of els) {
                if (el.textContent.trim() === 'CHECK IN' && el.children.length === 0) {
                    const r = el.getBoundingClientRect();
                    if (r.width > 0) return { x: r.x + r.width/2, y: r.y + r.height/2 };
                }
            }
            // Try all clickable-looking elements
            for (const el of els) {
                const text = el.textContent.trim();
                if (text === 'CHECK IN') {
                    const r = el.getBoundingClientRect();
                    if (r.width > 50) return { x: r.x + r.width/2, y: r.y + r.height/2 };
                }
            }
            return null;
        });
        if (checkinLoc) {
            console.log(`Found CHECK IN at (${checkinLoc.x}, ${checkinLoc.y})`);
            await page.touchscreen.tap(checkinLoc.x, checkinLoc.y);
            await wait(500);
            await page.mouse.click(checkinLoc.x, checkinLoc.y);
            await wait(3000);
        }
        t = await getText();
        console.log('After retries:', t.substring(0, 200));
    }

    await frame('find-reservation');
    await page.screenshot({ path: path.join(OUT, 'tablet-step1.png') });

    // === STEP 2: TYPE LAST NAME ===
    if (t.includes('Find') || t.includes('Reservation') || t.includes('name')) {
        const inputs = await page.$$('input');
        console.log(`\nFound ${inputs.length} input(s)`);
        if (inputs.length > 0) {
            await inputs[0].click();
            await wait(300);
            await inputs[0].type(guestLastName, { delay: 60 });
            await wait(2500);

            t = await getText();
            console.log('\n=== SEARCH RESULTS ===');
            console.log(t.substring(0, 300));
            await frame('search-results');
            await page.screenshot({ path: path.join(OUT, 'tablet-search.png') });

            // Click the guest row using evaluate (React-compatible)
            const clickResult = await page.evaluate((lastName) => {
                // Find the specific guest row by last name
                const allEls = document.querySelectorAll('*');
                // Look for small containers that have the guest name
                let best = null;
                let bestSize = Infinity;
                for (const el of allEls) {
                    const text = el.textContent;
                    if (text.includes(lastName) && text.includes('Room') && text.includes('→')) {
                        const r = el.getBoundingClientRect();
                        const size = r.width * r.height;
                        if (r.width > 100 && r.height > 30 && r.height < 150 && size < bestSize) {
                            best = el;
                            bestSize = size;
                        }
                    }
                }
                if (best) {
                    best.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true }));
                    best.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
                    best.dispatchEvent(new PointerEvent('pointerup', { bubbles: true }));
                    best.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
                    best.click();
                    const r = best.getBoundingClientRect();
                    return `Clicked guest row at (${Math.round(r.x)},${Math.round(r.y)}) ${Math.round(r.width)}x${Math.round(r.height)}`;
                }
                // Fallback: click first → arrow
                for (const el of allEls) {
                    if (el.textContent.trim() === '→' || el.textContent.trim() === '→') {
                        let parent = el.parentElement;
                        if (parent) {
                            parent.click();
                            return 'Clicked → parent';
                        }
                    }
                }
                return null;
            }, guestLastName);

            console.log('\n' + (clickResult || 'Guest row not found'));
            await wait(3000);

            t = await getText();
            console.log('\n=== AFTER SELECTING GUEST ===');
            console.log(t.substring(0, 300));
        }
    }

    // If we're on the guest details page, fill the form first then screenshot
    if (t.includes('Vehicle') || t.includes('Registration') || t.includes('Email')) {
        console.log('\n=== GUEST DETAILS - FILLING FORM ===');
        const inputs = await page.$$('input');
        for (const input of inputs) {
            const info = await page.evaluate(el => ({
                placeholder: el.placeholder || '', type: el.type, value: el.value,
                visible: el.getBoundingClientRect().width > 0
            }), input);
            if (info.visible && !info.value) {
                const ph = info.placeholder.toLowerCase();
                if (ph.includes('email') || info.type === 'email') {
                    await input.click();
                    await input.type('cullin.michael@email.com', { delay: 40 });
                } else {
                    // Registration field
                    await input.click();
                    await input.type('CW23 XRT', { delay: 40 });
                }
                await wait(300);
            }
        }
        await wait(1000);
        // Screenshot the filled form
        await frame('guest-details-filled');
        await page.screenshot({ path: path.join(OUT, 'tablet-step2.png') });

        // Now click Continue
        if (await tapText('Continue')) {
            await wait(3000);
        }
        t = await getText();
        console.log('After Continue:', t.substring(0, 200));
        await frame('after-details');
        await page.screenshot({ path: path.join(OUT, 'tablet-step3.png') });
    } else {
        await frame('after-guest-select');
        await page.screenshot({ path: path.join(OUT, 'tablet-step2.png') });
    }

    // === CONTINUE THROUGH REMAINING STEPS ===
    for (let step = 4; step <= 8; step++) {
        t = await getText();
        console.log(`\n=== STEP ${step} ===`);
        console.log(t.substring(0, 250));

        // Check completion
        if (t.includes('wonderful') || t.includes('enjoy your stay') || t.includes('Thank you') || t.includes('Complete') || t.includes('Confirmed') || t.includes('checked in')) {
            console.log('REACHED CONFIRMATION!');
            await frame('confirmation');
            await page.screenshot({ path: path.join(OUT, `tablet-step${step}.png`) });
            break;
        }

        // Back to welcome = flow done
        if (t.includes('Tap to begin') && step > 4) {
            console.log('Back to welcome - flow complete');
            break;
        }

        // Fill any empty inputs
        const inputs = await page.$$('input');
        for (const input of inputs) {
            const info = await page.evaluate(el => ({
                placeholder: el.placeholder || '', type: el.type, value: el.value,
                visible: el.getBoundingClientRect().width > 0
            }), input);
            if (info.visible && !info.value) {
                const ph = info.placeholder.toLowerCase();
                if (ph.includes('email') || info.type === 'email') {
                    await input.click();
                    await input.type('james@example.com', { delay: 40 });
                } else if (ph.includes('car') || ph.includes('reg') || ph.includes('enter reg')) {
                    await input.click();
                    await input.type('AB12 CDE', { delay: 40 });
                } else if (ph.includes('phone') || ph.includes('tel')) {
                    await input.click();
                    await input.type('+44 7700 900123', { delay: 40 });
                } else if (!ph) {
                    // Generic input - could be registration
                    await input.click();
                    await input.type('AB12 CDE', { delay: 40 });
                }
                await wait(500);
            }
        }

        // Try advance buttons (in order of priority) - case insensitive matching now
        // Prefer "Maybe Later" over "Reserve a Table" to complete flow faster
        let advanced = false;
        for (const label of ['Continue', 'Next', 'Confirm', 'Submit', 'Maybe Later', 'Skip', 'No thanks', 'Not interested', 'Done', 'Complete Check-In', 'Finish', 'Reserve a Table', 'Book Dinner', 'Book']) {
            if (await tapText(label)) {
                advanced = true;
                await wait(3000);
                break;
            }
        }

        if (!advanced) {
            // Try Enter
            await page.keyboard.press('Enter');
            await wait(2000);
        }

        await frame(`step-${step}`);
        await page.screenshot({ path: path.join(OUT, `tablet-step${step}.png`) });
    }

    // Final
    await page.screenshot({ path: path.join(OUT, 'tablet-final.png') });
    await frame('final');

    // Mobile view
    console.log('\n=== MOBILE VIEW ===');
    const mobile = await browser.newPage();
    await mobile.setViewport({ width: 390, height: 844, isMobile: true, hasTouch: true, deviceScaleFactor: 2 });
    await mobile.goto(TABLET_URL, { waitUntil: 'networkidle2', timeout: 30000 }).catch(() => {});
    await wait(5000);
    await mobile.touchscreen.tap(195, 400);
    await wait(3000);
    await mobile.screenshot({ path: path.join(OUT, 'tablet-mobile.png') });
    await mobile.close();
    await page.close();

    // Create GIF
    if (frames.length > 1) {
        console.log(`\nCreating GIF from ${frames.length} frames...`);
        try {
            execSync(`convert -delay 200 -loop 0 -resize 800x600 ${frames.join(' ')} ${path.join(OUT, 'tablet-checkin.gif')}`);
            console.log('GIF created!');
        } catch (e) {
            console.log('GIF failed:', e.message);
        }
        frames.forEach(f => { try { fs.unlinkSync(f); } catch(e) {} });
    }

    await browser.close();
    console.log('\nDone!');
    process.exit(0);
}

run().catch(err => { console.error(err); process.exit(1); });