<script>
    dlApi = {
        target: "demo_page",      // your site ID - provided by Ring DAS
        tid: 'EA-1746213',        // your tenant ID - provided by Ring DAS
        dsainfo: 1,               // enable DSA transparency info
        cmd: []                   // command queue
    };
</script>
<!-- SDK URL - provided by your Ring DAS account manager -->
<script src="https://das-cdn.idealo.com/build/dlApi/minit.boot.min.js" async></script>

dlApi.cmd.push(function (dlApi) {
    dlApi.consent({npa: 0});  // 0 = consent given, 1 = no consent
});

dlApi.cmd.push(function (dlApi) {
    // Fetch ad using fetchNativeAd
    dlApi.fetchNativeAd({
        slot: 'branded_products',                   // fixed value for Branded Products
        div: 'branded-products-container',          // container ID for viewability tracking
        opts: {
            offers_limit: 5                         // maximum number of products returned from ad server
        },
        tplCode: '1746213/Sponsored-Product-Plus',  // fixed value for Branded Products
        asyncRender: true,                          // manually count impression with ad.render()
    }).then(async function (ad) {
        if (!ad) {
            console.log('[Branded Products] No ad available');
            return;
        }

        console.log('[Branded Products] Ad response:', ad);

        // 1. Extract data from ad server
        const bannerImage = ad.fields?.bannerImage || '';      // Brand logo URL
        const offers = ad.fields?.feed?.offers || [];
        const dsaInfo = ad.dsa;

        // 2. Extract product IDs from offers
        const productIds = offers.map(offer => offer.product_id);
        console.log('[Branded Products] Product IDs to fetch:', productIds);

        // 3. Fetch product details from YOUR shop (implement this function)
        const productDetails = await fetchProductDetailsFromShop(productIds);

        // 4. Combine shop data with ad server tracking URLs
        // Construct click tracking URLs (base URL + offer parameter)
        // If meta.adclick is empty, use offer_url directly (without encoding)
        const productsWithTracking = productDetails.map((product, index) => ({
            ...product,
            trackingUrl: ad.meta.adclick
                ? ad.meta.adclick + encodeURIComponent(offers[index]?.offer_url || '')
                : (offers[index]?.offer_url || '')
        }));

        // 5. Render the ad with combined data
        renderBrandedProducts(bannerImage, productsWithTracking, dsaInfo);

        // 6. Count impression after rendering
        ad.render();
    }).catch(function (err) {
        console.error('[Branded Products] Ad could not be loaded:', err);
    });

    // Trigger ad fetch
    dlApi.fetch();
});

/**
 * Fetch product details from your shop's product API
 * @param {string[]} productIds - Array of product IDs from ad server
 * @returns {Promise<Array>} - Product details with image, price, name, URL
 */
async function fetchProductDetailsFromShop(productIds) {
    // Example: Call your shop's product API
    const products = await Promise.all(
        productIds.map(async (productId) => {
            // Replace with your actual product API endpoint
            const response = await fetch(`/api/products/${productId}`);
            const product = await response.json();

            return {
                product_id: productId,
                image: product.imageUrl,
                name: product.title,
                price: product.price,
                url: product.detailPageUrl
            };
        })
    );

    return products.filter(p => p !== null);  // Filter out any failed fetches
}

function renderBrandedProducts(bannerImage, products, dsaInfo) {
    const container = document.getElementById('branded-products-container');
    const MAX_PRODUCTS = 5;

    // Build products HTML using shop data + ad server tracking URLs
    let productsHtml = '';
    products.slice(0, MAX_PRODUCTS).forEach(function(product) {
        const price = new Intl.NumberFormat('de-DE', {
            style: 'currency',
            currency: 'EUR'
        }).format(product.price);

        productsHtml += `
            <a href="${product.url}" class="product-tile"
               target="_blank" rel="noopener nofollow sponsored"
               onclick="new Image().src='${product.trackingUrl}';">
                <img src="${product.image}" alt="${escapeHtml(product.name)}">
                <div class="product-name">${escapeHtml(product.name)}</div>
                <div class="product-price">${price}</div>
            </a>
        `;
    });

    // Build DSA info HTML (Digital Services Act transparency)
    let dsaHtml = '';
    if (dsaInfo) {
        dsaHtml = `
            <div class="dsa-info">
                <span class="dsa-icon" title="Ad transparency">i</span>
                <div class="dsa-tooltip">
                    <div>Advertiser: ${dsaInfo.behalf || 'N/A'}</div>
                    <div>Paid by: ${dsaInfo.paid || 'N/A'}</div>
                </div>
            </div>
        `;
    }

    // Render complete format
    // bannerImage = from ad server
    // products = from YOUR shop + trackingUrl from ad server
    container.innerHTML = `
        <div class="sponsored-header">
            <span class="sponsored-badge">Sponsored</span>
            ${dsaHtml}
        </div>
        <div class="brand-section">
            <img class="brand-logo" src="${bannerImage}" alt="Brand Logo">
        </div>
        <div class="products-section">
            ${productsHtml}
        </div>
    `;
}

// Helper function to escape HTML special characters
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Node.js backend
const NETWORK_ID = '1746213';  // Branded Products network ID
const BIDDER_URL = `https://das.idealo.com/${NETWORK_ID}/bid`;

const requestBody = {
    id: Math.random().toString(16).substring(2, 15),
    imp: [{
        id: 'imp-1',
        tagid: 'branded_products',                  // fixed value for Branded Products
        secure: 1,
        native: { request: "{}" },
        ext: {
            offers_limit: 5,                       // maximum number of products returned from ad server
            no_redirect: true                      // adclick URLs fire tracking only, no redirect
        }
    }],
    site: { id: 'demo_page' },                      // your site ID
    user: {
        ext: {
            npa: false                              // false = consent given, true = no consent
        }
    },
    ext: {
        network: NETWORK_ID,
        keyvalues: {},                              // optional targeting parameters
        is_non_prebid_request: true
    },
    regs: {
        gdpr: 1,                                    // 1 = GDPR applies, 0 = does not apply
        gpp: 'YOUR_GPP_STRING',                     // optional: TCF-compliant consent string from CMP
        ext: {
            dsa: 1                                  // request DSA transparency info
        }
    },
    tmax: 1000                                      // request timeout in milliseconds
};

// Send as GET request with body in data= parameter
const encodedData = encodeURIComponent(JSON.stringify(requestBody));
const response = await fetch(`${BIDDER_URL}?data=${encodedData}`);

// Check for no ad available (204 No Content)
if (response.status === 204) {
    console.log('No ad available');
}

const bidResponse = await response.json();

const bid = bidResponse?.seatbid?.[0]?.bid?.[0];
if (!bid) {
    return null;  // No bid in response
}

// Parse adm (it's a JSON string)
const adm = JSON.parse(bid.adm);

// 1. Extract data from ad server
const bannerImage = adm.fields?.bannerImage || null;   // Brand logo URL
const offers = adm.fields?.feed?.offers || [];          // Array with product_id

// 2. Extract product IDs
const productIds = offers.map(offer => offer.product_id);
console.log('Product IDs from ad server:', productIds);

// 3. Fetch product details from YOUR shop database
const shopProducts = await fetchProductsFromDatabase(productIds);

// 4. Combine shop data with ad server tracking URLs (base URL + offer parameter)
// If meta.adclick is empty, use offer_url directly (without encoding)
const products = shopProducts.map((product, index) => ({
    ...product,
    trackingUrl: adm.meta.adclick
        ? adm.meta.adclick + encodeURIComponent(offers[index]?.offer_url || '')
        : (offers[index]?.offer_url || '')
}));

// 5. Extract DSA transparency info
const dsaInfo = bid.ext?.dsa ? {
    advertiser: bid.ext.dsa.behalf,
    payer: bid.ext.dsa.paid
} : null;

// 6. Prepare data for rendering
const adData = {
    bannerImage,              // From ad server
    products,                 // From YOUR shop + trackingUrl from ad server
    dsaInfo,
    rawResponse: bidResponse,
    containerId: 'branded-products-container'
};

/**
 * Fetch product details from your database
 * @param {string[]} productIds - Product IDs from ad server
 */
async function fetchProductsFromDatabase(productIds) {
    // Replace with your actual database query
    const products = await db.products.findMany({
        where: { id: { in: productIds } },
        select: {
            id: true,
            imageUrl: true,
            title: true,
            price: true,
            detailPageUrl: true
        }
    });

    return products.map(p => ({
        product_id: p.id,
        image: p.imageUrl,
        name: p.title,
        price: p.price,
        url: p.detailPageUrl
    }));
}

<!-- Render branded products banner -->
<div id="branded-products-container" class="branded-products">
    <div class="sponsored-header">
        <span class="sponsored-badge">Sponsored</span>
        <% if (adData.dsaInfo) { %>
        <div class="dsa-info">
            <span>Advertiser: <%= adData.dsaInfo.advertiser %></span>
            <span>Paid by: <%= adData.dsaInfo.payer %></span>
        </div>
        <% } %>
    </div>

    <!-- Brand logo from AD SERVER -->
    <div class="brand-section">
        <img class="brand-logo" src="<%= adData.bannerImage %>" alt="Brand Logo">
    </div>

    <!-- Product details from YOUR SHOP + tracking URLs from AD SERVER -->
    <div class="products-section">
        <% adData.products.slice(0, 5).forEach(function(product) { %>
        <a href="<%= product.url %>" class="product-tile"
           target="_blank" rel="noopener nofollow sponsored"
           onclick="new Image().src='<%= product.trackingUrl %>';">
            <img src="<%= product.image %>" alt="<%= product.name %>">
            <div class="product-name"><%= product.name %></div>
            <div class="product-price">
                <%= new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price) %>
            </div>
        </a>
        <% }); %>
    </div>
</div>

<!-- Register for viewability and impression tracking -->
<script>
    dlApi.cmd.push(function () {
        dlApi.registerBidResponse(<%- JSON.stringify(adData.rawResponse) %>, 'branded-products-container');
    });
</script>