class SccPreloaderOverlay {

  constructor() {

    this.injectStyles();

    this.injectHTML();

  }



  injectStyles() {

    const style = document.createElement('style');

    style.textContent = `

      #scc-preloader-overlay {

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, 0.6);

        z-index: 999999999;

        display: none;

        align-items: center;

        justify-content: center;

        flex-direction: column;

      }



      #scc-preloader-spinner {

        border: 6px solid #f3f3f3;

        border-top: 6px solid #3498db;

        border-radius: 50%;

        width: 50px;

        height: 50px;

        animation: scc-spin 1s linear infinite;

        margin-bottom: 20px;

      }



      @keyframes scc-spin {

        0% { transform: rotate(0deg); }

        100% { transform: rotate(360deg); }

      }



      #scc-preloader-message {

        color: white;

        font-size: 1.4rem;

        font-family: sans-serif;

        text-align: center;

        background: rgba(0, 0, 0, 0.8);

        padding: 0.8em 1.5em;

        border-radius: 8px;

        box-shadow: 0 0 10px #000;

        max-width: 80%;

      }

    `;

    document.head.appendChild(style);

  }



  injectHTML() {

    const overlay = document.createElement('div');

    overlay.id = 'scc-preloader-overlay';

    overlay.innerHTML = `

      <div id="scc-preloader-spinner"></div>

      <div id="scc-preloader-message">Loading...</div>

    `;

    document.body.appendChild(overlay);

  }



  show(message = 'Loading...') {

    const overlay = document.getElementById('scc-preloader-overlay');

    const msg = document.getElementById('scc-preloader-message');

    if (overlay && msg) {

      msg.textContent = message;

      overlay.style.display = 'flex';

    }

  }



  hide() {

    const overlay = document.getElementById('scc-preloader-overlay');

    if (overlay) {

      overlay.style.display = 'none';

    }

  }

}





const SCCCustomizer = {

    openOverlay: function (isGravity) {

        if (document.getElementById('scc-overlay')) return;



        const overlay = document.createElement('div');

        overlay.id = 'scc-overlay';

        overlay.innerHTML = `

            <div class="scc-modal">

                <h2>Select a CSS Snippet</h2>

                <div id="scc-list">Loading...</div>

                <button onclick="SCCCustomizer.closeOverlay()">Close</button>

            </div>

        `;

        document.body.appendChild(overlay);

        this.fetchPosts(isGravity);  // Pass isGravity to fetchPosts

    },



    closeOverlay: function () {

        const overlay = document.getElementById('scc-overlay');

        if (overlay) overlay.remove();

    },



    fetchPosts: function (isGravity) {

        fetch(SCCCustomizer_Menu_Settings.rest_url, {

            headers: {

                'X-WP-Nonce': SCCCustomizer_Menu_Settings.nonce

            }

        })

        .then(res => res.json())

        .then(data => {

            const list = document.getElementById('scc-list');

            if (!data.length) {

                list.innerHTML = '<p>No CSS snippets found. Please create one first.</p>';

                return;

            }



            list.innerHTML = '<ul>' + data.map(post => `

                <li>

                    <a href="#" onclick="SCCCustomizer.selectPost(${post.id}, ${isGravity}); return false;">

                        ${post.title} (ID: ${post.id}) ${post.active == '1' ? '<span class="status status-active">Active</span>' : '<span class="status status-inactive">Inactive</span>'}

                    </a>

                </li>

            `).join('') + '</ul>';

        })

        .catch(err => {

            document.getElementById('scc-list').innerHTML = '<p>Error loading posts.</p>';

            console.error(err);

        });

    },



    selectPost: function (id, isGravity) {

        const url = new URL(window.location.href);

        url.searchParams.set('scc_customizer', 'true');

        url.searchParams.set('scc', id);

        

        // Check if isGravity is true, and if so, append gravity_customizer=true

        if (isGravity) {

            url.searchParams.set('gravity_customizer', 'true');

        }



        window.location.href = url.toString();

    }

};

