const API = '/api/samtal.php';
const token = new URLSearchParams(location.search).get('token') || '';

const SECTIONS = [
    { title: 'Trivsel & Arbetsmiljö', icon: '😊', questions: [
        { id: 'trivsel',     type: 'textarea', label: 'Hur trivs du på ditt jobb och med ditt jobb?' },
        { id: 'mindre_om',   type: 'textarea', label: 'Är det något av dina jobb du tycker mindre om? Något du trivs bäst med? Varför?' },
        { id: 'extra_saker', type: 'textarea', label: 'Är det någon av dina kunder som ber dig göra extra saker som inte ingår? Vem/Vilka och Vad?' },
        { id: 'transport',   type: 'textarea', label: 'Hur tar du dig till dina jobb och tycker du det fungerar bra?' },
        { id: 'stadtid',     type: 'textarea', label: 'Hur upplever du att städtiden är på dina platser? Är det någon plats du behöver stressa på/känner du? Någon där du tycker du har bra med tid?' },
    ]},
    { title: 'Utrustning & Material', icon: '🧹', questions: [
        { id: 'redskap',       type: 'textarea', label: 'Tycker du att dina arbetsredskap fungerar? Är det något du känner du skulle behöva vilja ha som förbättrar och förenklar städningen som inte finns?' },
        { id: 'medel',         type: 'textarea', label: 'Våra medel som vi har – vad tycker du om dem?' },
        { id: 'blanda_medel',  type: 'radio',    label: 'Har du fått information om, och vet hur du skall blanda medel i flaskorna?', options: ['Ja','Nej','Delvis'] },
        { id: 'fargkoder',     type: 'radio',    label: 'Vet du färgkoder på våra microdukar?', options: ['Ja','Nej'] },
        { id: 'dammsugare',    type: 'textarea', label: 'Brukar du kolla dammsugarpåsen, hur ofta? Vad gör du om dammsugaren inte suger så bra? Kan du lösa ett stopp själv?' },
        { id: 'moppar',        type: 'textarea', label: 'Vad använder du för moppar och till vad använder du dem till? (Dvs de små garnmopparna och de långa stativmopparna)' },
        { id: 'tvatt',         type: 'textarea', label: 'Hur hanterar du tvätt av dina microdukar och moppar?' },
    ]},
    { title: 'Beställningar & Kläder', icon: '📦', questions: [
        { id: 'bestallning', type: 'textarea', label: 'Tycker du att du har koll på beställningar? (Papper, tvål, säckar osv.) Har du fått information eller vet om hur långt tid före du skall skicka beställningen till din arbetsledare? Och hur du skall tänka när du beställer?' },
        { id: 'klader',      type: 'radio',    label: 'Har du kläder för ombyte och de är hela och ser bra ut?', options: ['Ja','Nej','Behöver nya'] },
    ]},
    { title: 'ID-bricka & Schema', icon: '🪪', questions: [
        { id: 'id_bricka',     type: 'radio',    label: 'Har du en ID-bricka (Sk Id 06)? All personal skall ha en sådan på sig för att kunna visa vid ev. kontroll.', options: ['Ja','Nej'] },
        { id: 'schema',        type: 'textarea', label: 'Har du tillgång och använder vår schema-vy i telefon/e-data? Vet du att du kan se arbetsbeskrivning och detaljer ang. tex larm osv?' },
        { id: 'meddela_info',  type: 'radio',    label: 'Det är viktigt att meddela din arbetsledare om något larm ändras eller portkoder och annan viktig information – känner du till detta?', options: ['Ja','Nej'] },
    ]},
    { title: 'Kvalitet & Arbetsledare', icon: '⭐', questions: [
        { id: 'kvalitetskontroller', type: 'textarea', label: 'Vi skickar kvalitetskontroller till din mail. Ser du dem och tittar på ev. kommentarer och förbättringar vi önskar att du gör? Detta är väldigt viktigt.' },
        { id: 'arbetsledare_info',   type: 'textarea', label: 'Har du information och vet vem som är din arbetsledare till dina kunder? Tycker du att du får den information och kontakt med din arbetsledare när du behöver? Har du något önskemål ang detta?' },
    ]},
    { title: 'Ledighet & Övrigt', icon: '🏖️', questions: [
        { id: 'ledighet',   type: 'textarea', label: 'Vet du om hur lång tid i förväg du skall ansöka om ledighet (förutom semester)? Vad du ska göra om du blir sjuk?' },
        { id: 'extra_jobb', type: 'textarea', label: 'Vet du vad som gäller angående extra jobb hos kund, tid etc?' },
    ]},
    { title: 'Erfarenhet inom städ', icon: '✅', questions: [
        { id: 'erfarenhet',  type: 'checkboxes', label: 'Vilka av nedan olika områden inom städ har du gjort, och kan tänka dig jobba med? Markera med ett kryss.', options: ['Kontorsstädning','Butikstädning','Hemstädning','Trappstädning','Fönsterputsning','Golvvård','Storstädning','Flyttstädning','Hygienstädning','Trädgårdsskötsel'] },
        { id: 'skurmaskin',  type: 'radio',      label: 'Kan du köra en skurmaskin?', options: ['Ja','Nej'] },
        { id: 'ovrigt',      type: 'textarea',   label: 'Övrig information du vill förmedla/önskar?' },
    ]},
];

function esc(v) {
    return String(v).replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;').replaceAll("'",'&#039;');
}

function slugify(v) {
    return v.toLowerCase().replace(/[^a-z0-9_-]+/g, '-');
}

function renderForm(personalNamn) {
    let html = '';

    html += '<div class="card"><div class="name-card-header">'
        + '<svg class="name-card-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>'
        + '<label class="label" for="name">Ditt namn</label></div>'
        + '<input class="input" id="name" type="text" value="' + esc(personalNamn) + '" readonly></div>';

    html += '<nav class="section-nav" aria-label="Sektioner">';
    SECTIONS.forEach((s, i) => {
        html += '<button type="button" class="chip' + (i === 0 ? ' active' : '') + '" data-section-btn="' + i + '">' + s.icon + ' ' + esc(s.title) + '</button>';
    });
    html += '</nav>';

    SECTIONS.forEach((s, i) => {
        html += '<section class="section-panel card' + (i === 0 ? ' active' : '') + '" data-section-panel="' + i + '">';
        html += '<h2 class="section-card-title"><span>' + s.icon + '</span>' + esc(s.title) + '</h2>';
        html += '<p class="muted">Sektion ' + (i + 1) + ' av ' + SECTIONS.length + '</p>';

        s.questions.forEach(q => {
            html += '<div class="question"><label class="label" for="' + q.id + '">' + esc(q.label) + '</label>';

            if (q.type === 'textarea') {
                html += '<textarea class="textarea" id="' + q.id + '" name="answers[' + q.id + ']" placeholder="Skriv ditt svar här..."></textarea>';
            } else if (q.type === 'radio') {
                html += '<div class="options-inline">';
                q.options.forEach(opt => {
                    const oid = q.id + '-' + slugify(opt);
                    html += '<label class="option-item" for="' + oid + '"><input type="radio" name="answers[' + q.id + ']" value="' + esc(opt) + '" id="' + oid + '">' + esc(opt) + '</label>';
                });
                html += '</div>';
            } else if (q.type === 'checkboxes') {
                html += '<div class="options-grid">';
                q.options.forEach(opt => {
                    const oid = q.id + '-' + slugify(opt);
                    html += '<label class="option-item" for="' + oid + '"><input type="checkbox" name="answers[' + q.id + '][]" value="' + esc(opt) + '" id="' + oid + '">' + esc(opt) + '</label>';
                });
                html += '</div>';
            }

            html += '</div>';
        });

        html += '</section>';
    });

    document.getElementById('form-content').innerHTML = html;
    initNavigation();
}

function initNavigation() {
    const panels     = Array.from(document.querySelectorAll('[data-section-panel]'));
    const chipBtns   = Array.from(document.querySelectorAll('[data-section-btn]'));
    const prevBtn    = document.getElementById('prev-btn');
    const nextBtn    = document.getElementById('next-btn');
    const submitBtn  = document.getElementById('submit-btn');
    const lastIndex  = panels.length - 1;
    let activeIndex  = 0;

    function paint() {
        panels.forEach((p, i) => p.classList.toggle('active', i === activeIndex));
        chipBtns.forEach((b, i) => b.className = 'chip' + (i === activeIndex ? ' active' : ''));
        prevBtn.disabled = activeIndex === 0;
        if (activeIndex === lastIndex) {
            nextBtn.setAttribute('hidden', '');
            submitBtn.removeAttribute('hidden');
        } else {
            nextBtn.removeAttribute('hidden');
            submitBtn.setAttribute('hidden', '');
        }
    }

    function goTo(i) {
        if (i < 0 || i > lastIndex) return;
        activeIndex = i;
        paint();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    chipBtns.forEach(b => b.addEventListener('click', () => goTo(parseInt(b.getAttribute('data-section-btn')))));
    prevBtn.addEventListener('click',  () => goTo(activeIndex - 1));
    nextBtn.addEventListener('click',  () => goTo(activeIndex + 1));
    paint();
}

function collectAnswers() {
    const answers = {};
    SECTIONS.forEach(s => {
        s.questions.forEach(q => {
            if (q.type === 'textarea') {
                const el = document.getElementById(q.id);
                if (el) answers[q.id] = el.value;
            } else if (q.type === 'radio') {
                const checked = document.querySelector('input[name="answers[' + q.id + ']"]:checked');
                answers[q.id] = checked ? checked.value : '';
            } else if (q.type === 'checkboxes') {
                answers[q.id] = Array.from(document.querySelectorAll('input[name="answers[' + q.id + '][]"]:checked')).map(el => el.value);
            }
        });
    });
    return answers;
}

function showError(msg) {
    document.getElementById('state-loading').style.display = 'none';
    document.getElementById('state-form').style.display = 'none';
    document.getElementById('error-msg').textContent = msg;
    document.getElementById('state-error').style.display = 'block';
}

function showSubmitted() {
    document.getElementById('state-loading').style.display = 'none';
    document.getElementById('state-form').style.display = 'none';
    document.getElementById('state-submitted').style.display = 'block';
}

async function init() {
    if (!token) { showError('Länken är inte giltig. Kontakta din arbetsledare.'); return; }

    try {
        const res  = await fetch(API + '?action=invite.by_token&token=' + encodeURIComponent(token));
        const data = await res.json();

        if (!data.ok) { showError(data.error || 'Länken är inte giltig.'); return; }
        if (data.data.submitted_at) { showSubmitted(); return; }
        if (data.data.is_expired)   { showError('Länken har gått ut. Kontakta din arbetsledare.'); return; }

        renderForm(data.data.personal_namn);
        document.getElementById('state-loading').style.display = 'none';
        document.getElementById('state-form').style.display = 'block';
    } catch (e) {
        showError('Nätverksfel. Ladda om sidan eller kontakta din arbetsledare.');
    }
}

document.getElementById('questionnaire-form').addEventListener('submit', async function (e) {
    e.preventDefault();

    const name = document.getElementById('name');
    if (name && name.value.trim() === '') {
        alert('Du behöver fylla i ditt namn innan du skickar.');
        name.focus();
        return;
    }

    const btn = document.getElementById('submit-btn');
    btn.disabled = true;
    btn.textContent = 'Skickar…';

    try {
        const res  = await fetch(API + '?action=response.submit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ token, answers: collectAnswers() }),
        });
        const data = await res.json();
        if (data.ok) {
            showSubmitted();
        } else {
            showError(data.error || 'Ett fel uppstod vid inskickning.');
        }
    } catch (e) {
        btn.disabled = false;
        btn.textContent = 'Skicka in svar';
        alert('Nätverksfel. Försök igen.');
    }
});

init();