(function() {
    function inject3DFinder() {
        if (document.getElementById('car-battery-3d-finder')) return;

        // يمكنك تعديل الألوان من هنا مباشرة حسب هوية متجرك
        const customStyles = `
        <style>
            :root {
                --finder-bg: #ffffff;
                --finder-primary: #111111;
                --finder-accent: #000000;
                --finder-text: #333333;
                --finder-border: #e2e8f0;
            }

            .battery-finder-container {
                background: var(--finder-bg);
                padding: 35px 30px;
                border-radius: 20px;
                /* تأثير 3D وعمق بصري فخم */
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.8);
                transform: translateY(0);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                margin: 30px auto;
                max-width: 1100px;
                width: 92%;
                direction: rtl;
                text-align: right;
                position: relative;
                z-index: 10;
            }

            .battery-finder-container:hover {
                box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
            }

            .battery-finder-container h3 {
                text-align: center;
                margin-bottom: 25px;
                font-size: 22px;
                font-weight: 800;
                color: var(--finder-text);
                letter-spacing: -0.5px;
            }

            .finder-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
                margin-bottom: 25px;
            }

            .finder-select-wrapper select {
                width: 100%;
                padding: 14px 16px;
                border: 2px solid var(--finder-border);
                border-radius: 12px;
                font-size: 15px;
                font-family: inherit;
                background-color: #f8fafc;
                color: var(--finder-text);
                outline: none;
                transition: all 0.3s ease;
                appearance: none;
                background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27292.4%27%20height%3D%27292.4%27%3E%3Cpath%20fill%3D%27%23333333%27%20d%3D%27M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%27%2F%3E%3C%2Fsvg%3E");
                background-repeat: no-repeat;
                background-position: left 15px center;
                background-size: 10px;
                cursor: pointer;
            }

            .finder-select-wrapper select:focus {
                border-color: var(--finder-primary);
                background-color: #fff;
                box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
            }

            .finder-select-wrapper select:disabled {
                background-color: #edf2f7;
                cursor: not-allowed;
                opacity: 0.7;
            }

            .finder-btn-wrapper {
                text-align: center;
            }

            .finder-submit-btn {
                background: var(--finder-primary);
                color: #fff;
                border: none;
                padding: 15px 45px;
                font-size: 16px;
                font-weight: 700;
                border-radius: 12px;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
                width: 100%;
                max-width: 300px;
            }

            .finder-submit-btn:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
                background: #222;
            }

            .finder-submit-btn:disabled {
                background: #cbd5e1;
                box-shadow: none;
                cursor: not-allowed;
                transform: none;
            }

            /* تجاوب الجوال والتابلت */
            @media (max-width: 768px) {
                .battery-finder-container {
                    padding: 20px 15px;
                    margin: 15px auto;
                    border-radius: 14px;
                }
                .battery-finder-container h3 {
                    font-size: 18px;
                    margin-bottom: 15px;
                }
                .finder-grid {
                    grid-template-columns: 1fr;
                    gap: 12px;
                    margin-bottom: 18px;
                }
                .finder-select-wrapper select {
                    padding: 12px 14px;
                    font-size: 14px;
                }
                .finder-submit-btn {
                    padding: 12px 20px;
                    font-size: 15px;
                    max-width: 100%;
                }
            }
        </style>
        `;

        const finderHTML = `
        <div id="car-battery-3d-finder" class="battery-finder-container">
            <h3>🔍 ابحث عن البطارية المناسبة لسيارتك بدقة</h3>
            <div class="finder-grid">
                <div class="finder-select-wrapper">
                    <select id="bf-brand">
                        <option value="">اختر ماركة السيارة (الشركة)</option>
                        <option value="تويوتا">تويوتا</option>
                        <option value="نيسان">نيسان</option>
                        <option value="هيونداي">هيونداي</option>
                    </select>
                </div>
                <div class="finder-select-wrapper">
                    <select id="bf-model" disabled>
                        <option value="">اختر الموديل</option>
                    </select>
                </div>
                <div class="finder-select-wrapper">
                    <select id="bf-year" disabled>
                        <option value="">اختر سنة الصنع</option>
                    </select>
                </div>
            </div>
            <div class="finder-btn-wrapper">
                <button id="bf-search-btn" class="finder-submit-btn" disabled>اعرض البطاريات المناسبة</button>
            </div>
        </div>
        `;

        // إدراج التنسيقات والهيكل بعد البنر الأول مباشرة في المتجر
        document.head.insertAdjacentHTML('beforeend', customStyles);
        
        // البحث عن مكان البنر الأول في ثيم رائد لإدراج الأداة تحته مباشرة
        const firstBanner = document.querySelector('section') || document.querySelector('.main-slider') || document.querySelector('main');
        if (firstBanner) {
            firstBanner.insertAdjacentHTML('afterend', finderHTML);
        } else {
            document.body.insertAdjacentHTML('afterbegin', finderHTML);
        }
    }

    function initBatteryLogic() {
        const brandSelect = document.getElementById("bf-brand");
        const modelSelect = document.getElementById("bf-model");
        const yearSelect = document.getElementById("bf-year");
        const searchBtn = document.getElementById("bf-search-btn");

        if (!brandSelect || !modelSelect || !yearSelect || !searchBtn) return;

        const carData = {
            "تويوتا": {
                "كامري": ["2020", "2021", "2022", "2023", "2024", "2025"],
                "كورولا": ["2020", "2021", "2022", "2023", "2024"]
            },
            "نيسان": {
                "التيما": ["2021", "2022", "2023", "2024"],
                "صني": ["2020", "2021", "2022", "2023"]
            }
        };

        brandSelect.addEventListener("change", function() {
            const brand = this.value;
            modelSelect.innerHTML = '<option value="">اختر الموديل</option>';
            yearSelect.innerHTML = '<option value="">اختر سنة الصنع</option>';
            modelSelect.disabled = true;
            yearSelect.disabled = true;
            searchBtn.disabled = true;

            if (brand && carData[brand]) {
                modelSelect.disabled = false;
                Object.keys(carData[brand]).forEach(model => {
                    const opt = document.createElement("option");
                    opt.value = model;
                    opt.textContent = model;
                    modelSelect.appendChild(opt);
                });
            }
        });

        modelSelect.addEventListener("change", function() {
            const brand = brandSelect.value;
            const model = this.value;
            yearSelect.innerHTML = '<option value="">اختر سنة الصنع</option>';
            yearSelect.disabled = true;
            searchBtn.disabled = true;

            if (model && carData[brand][model]) {
                yearSelect.disabled = false;
                carData[brand][model].forEach(year => {
                    const opt = document.createElement("option");
                    opt.value = year;
                    opt.textContent = year;
                    yearSelect.appendChild(opt);
                });
            }
        });

        yearSelect.addEventListener("change", function() {
            if (this.value) {
                searchBtn.disabled = false;
            } else {
                searchBtn.disabled = true;
            }
        });

        searchBtn.addEventListener("click", function() {
            const brand = brandSelect.value;
            const model = modelSelect.value;
            const year = yearSelect.value;

            if (brand && model && year) {
                const searchQuery = `${brand} ${model} ${year}`;
                window.location.href = `/search?q=${encodeURIComponent(searchQuery)}`;
            }
        });
    }

    window.addEventListener('DOMContentLoaded', () => {
        inject3DFinder();
        initBatteryLogic();
    });

    setTimeout(() => {
        inject3DFinder();
        initBatteryLogic();
    }, 800);
})();