const tabTariffMap = { standard: 1, silver: 2, gold: 28 };

document.addEventListener('DOMContentLoaded', function () {
    const tooltipTriggerList = [].slice.call(
        document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
        new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // JS to fetch country list by region
    async function handleChangeRegion(regionSelect, countrySelect) {
        const region = regionSelect.value;
        countrySelect.innerHTML = '<option>Loading countries...</option>';

        if (!region) {
            countrySelect.innerHTML = '<option value="">Please select a region</option>';
            return;
        }

        try {
            const res = await fetch('tariffs/ajax_get_countries_by_region.php?region=' + encodeURIComponent(region));

            if (!res.ok) {
                throw new Error('Network response not ok');
            }

            const data = await res.json();
            let options = '<option value="">Please select a country</option>';
            data.forEach(item => {
                options += `<option value="${item.country_code}">${item.country_name}</option>`;
            });

            countrySelect.innerHTML = options;
        } catch (error) {
            console.error(error);
            countrySelect.innerHTML = '<option value="">Error loading countries</option>';
        }
    }

    // JS to fetch tariffs by country
    async function handleChangeCountry(countrySelect) {
        const ObjSelectedCountry = countrySelect ? countrySelect : '';

        if (!ObjSelectedCountry) {
            results.innerHTML = '';
            return;
        }

        const prefix = countrySelect.value; // country code - 44
        const name = countrySelect.options[countrySelect.selectedIndex].text; // country name - United Kingdom
        const type = tabTariffMap[countrySelect.id.split('-')[1]]; // 1, 2, 28
        const type_text = countrySelect.id.split('-')[1] // standard, silver, gold
        const results = document.getElementById('tariffs-'+type_text);

        const q = `prefix=${prefix}&name=${name}&tariff=${type}`;
        results.innerHTML = `<hr><div class="alert message-background"><img src="/products/images/layout/tariffs/loading.gif" alt="Loading call rates" title="Loading call rates" /> Loading call rates ${name} (${prefix})</div>`;

        try {
            const res = await fetch('tariffs/ajax_render_destination_rates.php?' + q);
            if (!res.ok) {
                throw new Error('Network response not ok');
            }

            const html = await res.text();
            results.innerHTML = html || '<hr><div class="alert alert-warning"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>No results returned</div>';
        } catch (error) {
            console.error(error);
            results.innerHTML = '<hr><div class="alert alert-danger"><i class="fa fa-times-circle-o" aria-hidden="true"></i>loading call rates</div>';
        }
    }

    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        const regionSelect = card.querySelector('.region-dropdown');
        const countrySelect = card.querySelector('.country-dropdown');
        // const prefix

        if (regionSelect && countrySelect) {
            regionSelect.addEventListener('change', () => handleChangeRegion(regionSelect, countrySelect));
            countrySelect.addEventListener('change', () => handleChangeCountry(countrySelect));
        } else {
            return;
        }
    });

    // Prevent page reload when search country
    document
        .querySelectorAll('form[id^="countrySearchForm-"]')
        .forEach(form => {
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                const tab = this.id.replace('countrySearchForm-', '');
                handleClickGetCallRates(tab);
            });
        });
});

// JS to get prefixes
async function handleClickShowPrefixes(prefix, tariff, id) {
    const container = document.getElementById('prefixList-' + id);
    const row = document.getElementById('prefix-row-' + id);
    const button = document.getElementById('prefix-btn-' + id);

    if (!container || !row || !button) {
        console.error("Missing elements for id=" + id);
        return;
    }

    if (row.style.display === '' || row.style.display === 'table-row') {
        row.style.display = 'none';
        button.textContent = "Show prefixes";
        return;
    }

    row.style.display = 'table-row';
    button.textContent = "Hide prefixes";
    container.innerHTML = "<div class='p-3 mt-4'>Prefixes loading...</div>";

    const url = `tariffs/ajax_render_prefixes.php?pref=${encodeURIComponent(prefix)}&tariff=${encodeURIComponent(tariff)}`;

    try {
        const response = await fetch(url);
        const data = await response.text();

        container.innerHTML = data;

        row.style.display = 'table-row';
    } catch (error) {
        container.innerHTML =
            "<div class='alert alert-danger'>Error retrieving prefixes.</div>";
    }
}

// Search by country
async function handleClickGetCallRates(tab) {
    const input = document.getElementById('search-country-' + tab);
    const container = document.getElementById('tariffs-' + tab);
    const tariff = tab // tab text

    if (!input || !container) return;

    // Read the value immediately
    const countryname = input.value.trim();

    if (!countryname) {
        input.focus();
        return;
    }

    container.innerHTML = `<hr><div class="alert message-background"><img src="/products/images/layout/tariffs/loading.gif" alt="Loading countris for prefixes" title="Loading countris for prefixes" />Please wait while loading data for ${countryname}</div>`;

    const url = `tariffs/ajax_search_and_render_destinations.php?tariff=${encodeURIComponent(tariff)}&name=${encodeURIComponent(countryname)}`;

    try {
        const response = await fetch(url);
        const html = await response.text();
        container.innerHTML = html;

    } catch (err) {
        console.error(err);
        container.innerHTML = "<div class='alert alert-danger'>Unable to load results.</div>";
    }
}

// JS to fetch trariffs by country by search
async function handleClickDestinationImage(prefix, name, tariffTab) {
    if (!prefix || !name || !tariffTab) return;

    const type = tabTariffMap[tariffTab]; // numeric: 1,2,28
    const results = document.getElementById('tariffs-' + tariffTab);

    if (!results) return;

    const q = `prefix=${prefix}&name=${name}&tariff=${type}`;
    results.innerHTML = `<hr><div class="alert message-background">
        <img src="/products/images/layout/tariffs/loading.gif" alt="Loading call rates" />
        Loading call rates ${name} (${prefix})
    </div>`;

    try {
        const res = await fetch('tariffs/ajax_render_destination_rates.php?' + q);
        const html = await res.text();
        results.innerHTML = html || '<hr><div class="alert alert-warning">No results returned</div>';
    } catch (error) {
        console.error(error);
        results.innerHTML = '<hr><div class="alert alert-danger">Error loading call rates</div>';
    }
}

// JS to fetch trariffs by country by search
async function handleClickShowFullList(destination, name, tariffTab) {
    if (!destination || !name || !tariffTab) return;

    const type = tabTariffMap[tariffTab]; // numeric: 1,2,28
    const results = document.getElementById('tariffs-' + tariffTab);

    if (!results) return;

    const q = `code=${destination}&destination=${name}&tariff=${type}`;
    results.innerHTML = `<hr><div class="alert message-background">
        <img src="/products/images/layout/tariffs/loading.gif" alt="Loading call rates" />
        Loading call rates ${name} (${destination})
    </div>`;

    try {
        const res = await fetch('tariffs/ajax_render_all_destination_rates.php?' + q);
        const html = await res.text();
        results.innerHTML = html || '<hr><div class="alert alert-warning">No results returned</div>';
    } catch (error) {
        console.error(error);
        results.innerHTML = '<hr><div class="alert alert-danger">Error loading call rates</div>';
    }
}