document.addEventListener("DOMContentLoaded", function() {
    console.log("--- Tire Filter (Supports P/LT & Small Widths) Started ---");

    if (window.location.pathname !== "/" && window.location.pathname !== "/index.php") return;

    let tireData = {};

    function scrapeTireData() {
        const allLinks = document.querySelectorAll('a, span, .nav-link, .category-item');
        let foundAny = false;

        allLinks.forEach(item => {
            let text = item.innerText.trim();
            
            // تحديث المنطق: يبحث عن (اختياري P أو LT) ثم (رقمين أو ثلاثة) / (رقمين) / (رقمين)
            // Regex: /(?:P|LT)?\s*(\d{2,3})\/(\d{2})\/(\d{2})/i
            let match = text.match(/(?:P|LT)?\s*(\d{2,3})\/(\d{2})\/(\d{2})/i);
            
            if (match) {
                let w = match[1], h = match[2], r = match[3];
                if (!tireData[w]) tireData[w] = {};
                if (!tireData[w][h]) tireData[w][h] = [];
                if (!tireData[w][h].includes(r)) tireData[w][h].push(r);
                foundAny = true;
            }
        });
        return foundAny;
    }

    function buildUI() {
        if (document.getElementById('tire-injector')) return;
        const target = document.querySelector('header') || document.body;
        const html = `
            <style>
                #tire-injector { background: #fff; padding: 25px; margin: 15px auto; border-radius: 12px; text-align: center; max-width: 1050px; box-shadow: 0 8px 25px rgba(0,0,0,0.1); direction: rtl; border: 1px solid #eee; position: relative; z-index: 9999; }
                .tire-flex { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
                .tire-sel { padding: 12px; border: 1px solid #ccc; border-radius: 8px; flex: 1; min-width: 160px; font-size: 15px; background:#fff; color:#333; }
                .tire-btn { background: #ff7900; color: #fff; border: none; padding: 12px 45px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 16px; }
                .tire-title { font-weight: bold; margin-bottom: 20px; color: #222; font-size: 1.4rem; }
            </style>
            <div id="tire-injector">
                <h3 class="tire-title">🔍 ابحث عن المقاس المناسب لسيارتك</h3>
                <div class="tire-flex">
                    <select id="js-width" class="tire-sel"><option value="" disabled selected>1. العرض</option></select>
                    <select id="js-height" class="tire-sel" disabled><option value="" disabled selected>2. الارتفاع</option></select>
                    <select id="js-rim" class="tire-sel" disabled><option value="" disabled selected>3. الجنط</option></select>
                    <button onclick="runTireSearch()" class="tire-btn">بحث</button>
                </div>
            </div>`;
        const div = document.createElement("div");
        div.innerHTML = html;
        target.insertAdjacentElement('afterend', div);
    }

    function populateOptions() {
        const wSel = document.getElementById('js-width');
        if (!wSel || Object.keys(tireData).length === 0) return;

        wSel.innerHTML = '<option value="" disabled selected>1. العرض</option>';
        // ترتيب الأرقام تصاعدياً بشكل صحيح
        Object.keys(tireData).sort((a, b) => a - b).forEach(w => wSel.add(new Option(w, w)));

        wSel.onchange = function() {
            const hSel = document.getElementById('js-height');
            const rSel = document.getElementById('js-rim');
            hSel.disabled = false;
            hSel.innerHTML = '<option value="" disabled selected>2. الارتفاع</option>';
            rSel.innerHTML = '<option value="" disabled selected>3. الجنط</option>';
            rSel.disabled = true;
            Object.keys(tireData[this.value]).sort((a, b) => a - b).forEach(h => hSel.add(new Option(h, h)));
        };

        document.getElementById('js-height').onchange = function() {
            const rSel = document.getElementById('js-rim');
            rSel.disabled = false;
            rSel.innerHTML = '<option value="" disabled selected>3. الجنط</option>';
            tireData[document.getElementById('js-width').value][this.value].sort((a, b) => a - b).forEach(r => rSel.add(new Option(r, r)));
        };
    }

    buildUI();
    let checkCount = 0;
    let dataCheck = setInterval(() => {
        if (scrapeTireData()) {
            populateOptions();
            clearInterval(dataCheck);
        }
        if (checkCount > 30) clearInterval(dataCheck);
        checkCount++;
    }, 300);
});

function runTireSearch() {
    var w = document.getElementById("js-width").value;
    var h = document.getElementById("js-height").value;
    var r = document.getElementById("js-rim").value;
    if(w && h && r) window.location.href = "/search?q=" + w + "/" + h + "/" + r;
    else alert("الرجاء اختيار جميع المقاسات");
}