Music Audio File Player And MP3 Ringtone Search Topic Creator

function processImage(originalImg, title = "Music Player & Ringtone Search", defaultSearch = "Cool MP3 Ringtone") {
    // Create the main wrapper container
    const container = document.createElement('div');
    container.style.cssText = 'font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 420px; width: 100%; margin: 0 auto; padding: 25px; border-radius: 16px; background: #ffffff; box-shadow: 0 8px 24px rgba(0,0,0,0.12); text-align: center; color: #333; box-sizing: border-box;';

    // Title element
    const titleEl = document.createElement('h2');
    titleEl.innerText = title;
    titleEl.style.cssText = 'font-size: 1.3rem; font-weight: 700; margin-top: 0; margin-bottom: 25px; color: #222;';
    container.appendChild(titleEl);

    // Album Art (using the original image)
    const imgWrapper = document.createElement('div');
    imgWrapper.style.cssText = 'width: 200px; height: 200px; margin: 0 auto 25px auto; border-radius: 50%; padding: 5px; background: linear-gradient(135deg, #e2e8f0, #cbd5e1); box-shadow: 0 4px 10px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;';
    
    const img = document.createElement('img');
    img.src = originalImg.src;
    img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%; pointer-events: none;';
    imgWrapper.appendChild(img);
    container.appendChild(imgWrapper);

    // Web Animations API for spinning the album art like a vinyl record
    const spinAnimation = img.animate(
        [ { transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' } ],
        { duration: 5000, iterations: Infinity }
    );
    spinAnimation.pause(); // Start paused

    // 1. Audio Player Section
    const audioSection = document.createElement('div');
    audioSection.style.cssText = 'margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #e2e8f0; text-align: left;';
    
    const audioInputLabel = document.createElement('label');
    audioInputLabel.innerText = "1. Load Local Audio/MP3 File:";
    audioInputLabel.style.cssText = 'display: block; font-size: 0.95rem; margin-bottom: 10px; font-weight: 600; color: #475569;';
    
    const audioInput = document.createElement('input');
    audioInput.type = 'file';
    audioInput.accept = 'audio/*';
    audioInput.style.cssText = 'margin-bottom: 15px; font-size: 0.85rem; width: 100%; display: block;';

    const audioEl = document.createElement('audio');
    audioEl.controls = true;
    audioEl.style.cssText = 'width: 100%; outline: none; height: 40px; border-radius: 8px;';

    // Handle file upload and playback
    let currentObjectUrl = null;
    audioInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            if (currentObjectUrl) URL.revokeObjectURL(currentObjectUrl);
            currentObjectUrl = URL.createObjectURL(file);
            audioEl.src = currentObjectUrl;
            audioEl.play().catch(err => console.log("Autoplay prevented:", err));
        }
    });

    // Link animation to audio playback events
    audioEl.addEventListener('play', () => spinAnimation.play());
    audioEl.addEventListener('pause', () => spinAnimation.pause());
    audioEl.addEventListener('ended', () => spinAnimation.pause());

    audioSection.appendChild(audioInputLabel);
    audioSection.appendChild(audioInput);
    audioSection.appendChild(audioEl);
    container.appendChild(audioSection);

    // 2. MP3 Ringtone Search & Topic Creator Section
    const searchSection = document.createElement('div');
    searchSection.style.cssText = 'text-align: left;';

    const searchLabel = document.createElement('label');
    searchLabel.innerText = "2. Ringtone Search & Topic Creator:";
    searchLabel.style.cssText = 'display: block; font-size: 0.95rem; margin-bottom: 10px; font-weight: 600; color: #475569;';

    const searchGroup = document.createElement('div');
    searchGroup.style.cssText = 'display: flex; gap: 8px; margin-bottom: 15px;';

    const searchInput = document.createElement('input');
    searchInput.type = 'text';
    searchInput.value = defaultSearch;
    searchInput.placeholder = 'e.g., iPhone Remix...';
    searchInput.style.cssText = 'flex: 1; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.9rem; outline: none; box-sizing: border-box; font-family: inherit; transition: border-color 0.2s;';
    searchInput.addEventListener('focus', () => searchInput.style.borderColor = '#3b82f6');
    searchInput.addEventListener('blur', () => searchInput.style.borderColor = '#cbd5e1');

    const searchBtn = document.createElement('button');
    searchBtn.innerText = 'Create Topic';
    searchBtn.style.cssText = 'padding: 10px 16px; border: none; background: #3b82f6; color: #fff; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 600; font-family: inherit; transition: background 0.2s;';
    searchBtn.addEventListener('mouseover', () => searchBtn.style.background = '#2563eb');
    searchBtn.addEventListener('mouseout', () => searchBtn.style.background = '#3b82f6');
    
    const resultsDiv = document.createElement('div');
    resultsDiv.style.cssText = 'font-size: 0.85rem; color: #334155; text-align: left; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; display: none; margin-top: 10px;';

    // Mock search logic to generate a "topic" and fake ringtones
    searchBtn.addEventListener('click', () => {
        const query = searchInput.value.trim();
        if (!query) return;
        
        resultsDiv.style.display = 'block';
        resultsDiv.innerHTML = `
            <div style="font-weight: 700; margin-bottom: 10px; color: #0f172a; font-size: 0.95rem;">
                Topic Thread: "${query}"
            </div>
            <div style="margin-bottom: 8px;">Generated Ringtone Matches:</div>
            <ul style="margin: 0; padding-left: 20px; line-height: 1.6;">
                <li><a href="#" style="color: #3b82f6; text-decoration: none;">Download "${query}" (Original Mix).mp3</a></li>
                <li><a href="#" style="color: #3b82f6; text-decoration: none;">${query} - Bass Boosted Ringtone.mp3</a></li>
                <li><a href="#" style="color: #3b82f6; text-decoration: none;">${query} - 8-bit Alarm Sound.mp3</a></li>
            </ul>
        `;
        
        // Disable mock links
        const links = resultsDiv.querySelectorAll('a');
        links.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                alert('Success! Note: As this is a client-side layout tool, actual MP3 generation from text requires a backend server.');
            });
            link.addEventListener('mouseover', () => link.style.textDecoration = 'underline');
            link.addEventListener('mouseout', () => link.style.textDecoration = 'none');
        });
    });

    searchGroup.appendChild(searchInput);
    searchGroup.appendChild(searchBtn);
    searchSection.appendChild(searchLabel);
    searchSection.appendChild(searchGroup);
    searchSection.appendChild(resultsDiv);

    container.appendChild(searchSection);

    return container;
}