'use strict';

document.addEventListener('DOMContentLoaded', () => {
    const page = document.querySelector('.koperasi-profile-page');
    if (!page) return;

    page.querySelectorAll('[data-koperasi-locked-tab]').forEach(tab => {
        tab.addEventListener('click', event => event.preventDefault());
    });

    page.querySelectorAll('[data-koperasi-survey]').forEach(operasional => {
        const fields = Array.from(operasional.querySelectorAll('[data-koperasi-survey-field]'));
        const conditions = new Map(fields.map(wrapper => [wrapper.dataset.koperasiSurveyField, JSON.parse(wrapper.dataset.koperasiConditions)]));
        const context = JSON.parse(operasional.dataset.koperasiContext);
        const requiredFields = JSON.parse(operasional.dataset.koperasiRequired);
        const selectedValues = name => Array.from(operasional.elements)
            .filter(input => input.name === name || input.name === name + '[]')
            .filter(input => !['checkbox', 'radio'].includes(input.type) || input.checked)
            .map(input => input.value);
        const matches = condition => {
            if (condition.any) return condition.any.some(matches);
            if (condition.source === 'profile') return condition.values.includes(context[condition.field]);
            return active(condition.field) && condition.values.some(value => selectedValues(condition.field).includes(value));
        };
        const active = field => (conditions.get(field) || []).every(matches);
        const updateDependencies = () => {
            fields.forEach(wrapper => {
                const field = wrapper.dataset.koperasiSurveyField;
                const visible = active(field);
                const required = visible && requiredFields.includes(field);
                wrapper.classList.toggle('d-none', !visible);
                wrapper.querySelectorAll('input, select, textarea').forEach(input => {
                    input.disabled = !visible;
                    input.required = required && input.type !== 'checkbox';
                    input.setCustomValidity('');
                });
                const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]');
                if (required && checkboxes.length && !Array.from(checkboxes).some(input => input.checked)) {
                    checkboxes[0].setCustomValidity('Pilih sedikitnya satu pilihan.');
                }
                const indicator = wrapper.querySelector('[data-koperasi-required-indicator]');
                if (indicator) indicator.classList.toggle('d-none', !required);
            });
        };
        operasional.addEventListener('change', event => {
            const input = event.target;
            const group = input.closest('[data-koperasi-exclusive]');
            if (group && input.type === 'checkbox' && input.checked) {
                group.querySelectorAll('input[type="checkbox"]').forEach(option => {
                    if (option !== input && (input.value === group.dataset.koperasiExclusive || option.value === group.dataset.koperasiExclusive)) {
                        option.checked = false;
                    }
                });
            }
            updateDependencies();
        });
        updateDependencies();
    });

    const activeSection = document.getElementById(window.location.hash.slice(1));
    if (activeSection && page.contains(activeSection) && activeSection.matches('[data-koperasi-section]')) {
        const showSection = () => {
            activeSection.scrollIntoView({ behavior: 'instant', block: 'start' });
            activeSection.focus({ preventScroll: true });
        };
        if (document.readyState === 'complete') {
            requestAnimationFrame(showSection);
        } else {
            window.addEventListener('load', () => requestAnimationFrame(showSection), { once: true });
        }
    }

    const form = page.querySelector('[data-koperasi-profile]');
    if (form) {
        const jenis = form.querySelector('[name="jenis_koperasi"]');
        const wrapper = form.querySelector('#koperasi-jenis-lainnya-wrapper');
        const lainnya = form.querySelector('[name="jenis_koperasi_lainnya"]');
        const toggleJenisLainnya = () => {
            const isLainnya = jenis.value === form.dataset.jenisLainnya;
            wrapper.classList.toggle('d-none', !isLainnya);
            lainnya.disabled = !isLainnya;
        };
        jenis.addEventListener('change', toggleJenisLainnya);
        toggleJenisLainnya();

        const fokus = form.querySelector('[name="fokus_komoditas"]');
        const detail = form.querySelector('[name="detail_fokus_komoditas"]');
        const fokusWrapper = form.querySelector('#koperasi-detail-fokus-wrapper');
        const toggleFokus = () => {
            const aktif = fokus.value === fokus.dataset.fokusYa;
            fokusWrapper.classList.toggle('d-none', !aktif);
            detail.disabled = !aktif;
        };
        fokus.addEventListener('change', toggleFokus);
        toggleFokus();
    }

    const formatRupiah = value => {
        const negative = value.trimStart().startsWith('-');
        const digits = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
        return (negative ? '-' : '') + digits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    };

    page.querySelectorAll('[data-koperasi-rupiah]').forEach(input => {
        if (/^-?[\d.]+$/.test(input.value)) input.value = formatRupiah(input.value);
        input.addEventListener('input', () => {
            const digitsBefore = input.value.slice(0, input.selectionStart).replace(/\D/g, '').length;
            input.value = formatRupiah(input.value);
            let cursor = input.value.startsWith('-') ? 1 : 0;
            let count = 0;
            while (cursor < input.value.length && count < digitsBefore) {
                if (/\d/.test(input.value[cursor])) count++;
                cursor++;
            }
            input.setSelectionRange(cursor, cursor);
        });
    });

});