document.addEventListener('DOMContentLoaded', function () {
    const styles = `
        #reviews-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
        }
        .embedded_body {
            margin: 0px;
            display: flex;
            justify-content: center;
            font-family: Arial, sans-serif;
        }
        .review-column {
            width: 31%;
            max-width: 360px
        }
        .review-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .review-stars {
            color: #E7B541;
            font-size: 17px;
        }
        .google-icon {
        	height: 30px;
        	width: 30px;
           	background-image: url('https://ziehkredit.dev2.saas.do/file/get/1721305917_da9cO3HYPRy5MCy8rJXTVt70QToIwysc');
			background-size: cover; /* Deckt den gesamten Body ab, ohne das Bild zu wiederholen */
    		background-position: center; /* Zentriert das Bild */
        }
        .review-google {
            width: 25px;
            height: 25px;
        }
        .review-card, .review-summary-card {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            padding: 26px;
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }
        .review-summary-card{
         	text-align: center;
        }
        .review-summary-card .google-icon{
        	width: 50px;
        	height: 50px;
        	margin-bottom: 20px;
        }
        .review-summary-card .review-stars{
        	font-size: 30px;
        	margin-bottom: 20px;
        }
        .review-author {
            font-size: 20px;
            color: #333;
            font-weight: bold;
            margin-bottom: 15px;
        }
        .review-text {
            font-size: 16px;
            color: #666;
            margin-bottom: 25px;
        }
        .review-date {
            font-size: 14px;
            color: #999;
            margin-bottom: 10px;
        }
        .reviewer {
            display: flex;
            align-items: center;
            margin-top: auto;
        }
        .reviewer img {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }
        .reviewer-name {
            font-size: 16px;
            color: #333;
        }
        .center-div {
        	display: flex;
        	justify-content: center;
        }

    `;
    const styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    styleSheet.innerText = styles;
    document.head.appendChild(styleSheet);

    const reviewsContainer = document.createElement('div');
    reviewsContainer.id = 'reviews-container';
   	document.getElementById("embedded_body").appendChild(reviewsContainer);

    for (let i = 1; i <= 3; i++) {
        const reviewColumn = document.createElement('div');
        reviewColumn.className = 'review-column';
        reviewColumn.id = `review-column-${i}`;
        reviewsContainer.appendChild(reviewColumn);
    }

    const placeId = 'ChIJ3W5isPbtvUcRpxeGnYK1DYk';
    const apiUrl = `https://ziehkredit.dev2.saas.do/flux/176/ab290974504ca3b6ca7e396fe4bed640?place_id=${placeId}`;
    
    let reviewData = null

    async function fetchReviews() {
        try {
            const response = await fetch(apiUrl);
            const data = await response.json();
            reviewData = data.result;
            setupColumns();
        } catch (error) {
            console.error('Error fetching reviews:', error);
        }
    }

    function setupColumns() {
	    const screenWidth = window.innerWidth;
	    const numColumns = screenWidth > 1000 ? 3 : (screenWidth > 600 ? 2 : 1);
	    reviewsContainer.innerHTML = '';  // Entfernen existierender Spalten
	    for (let i = 1; i <= numColumns; i++) {
	        const reviewColumn = document.createElement('div');
	        reviewColumn.className = 'review-column';
	        reviewColumn.style.width = `${100 / numColumns - 3}%`;  // Setze die Breite abhängig von der Anzahl der Spalten
	        reviewColumn.id = `review-column-${i}`;
	        reviewsContainer.appendChild(reviewColumn);
	    }
	    displayReviews();
	}

    function displayReviews() {
	    // Dynamisches Abrufen der aktuellen Spalten im Container
	    const columns = document.querySelectorAll('#reviews-container .review-column');
	    
	    const summaryCard = document.createElement('div');
	    summaryCard.className = 'review-summary-card';
	    summaryCard.innerHTML = `
	        <div>
	            <div class="center-div">
	                <div class="google-icon"></div>
	            </div>
	            <div class="review-stars">${getStars(reviewData.rating)}</div>
	            <div><strong>${reviewData.rating}</strong> Sterne bei <strong>${reviewData.user_ratings_total}</strong> <a href="${reviewData.url}" target="_blank">Bewertungen</a></div>
	        </div>
	    `;

	    // Füge die Zusammenfassungskarte zur ersten Spalte hinzu
	    if (columns.length > 0) {
	        columns[0].appendChild(summaryCard);
	    }
	    
	    reviewData.reviews.forEach((review, index) => {
	        const stars = getStars(review.rating);
	        const reviewCard = document.createElement('div');
	        reviewCard.className = 'review-card';
	        reviewCard.innerHTML = `
	            <div class="review-header">
	                <div class="review-stars">${stars}</div>
	                <div class="google-icon"></div>
	            </div>
	            <div class="review-author">${review.author_name}'s Review</div>
	            <div class="review-text">${review.text}</div>
	            <div class="reviewer">
	                <img src="${review.profile_photo_url}" alt="reviewer photo">
	                <div class="reviewer-name">${review.author_name}<br>
	                    <span class="review-date">${review.relative_time_description}</span>
	                </div>
	            </div>
	        `;

	        // Verteilung der Review Cards auf verfügbare Spalten
	        const columnIndex = (index + 1) % columns.length;
	        columns[columnIndex].appendChild(reviewCard);
	    });
	}


    function getStars(rating) {
        let stars = '';
        for (let i = 0; i < rating; i++) {
            stars += '\u2605 ';
        }
        return stars;
    }
    window.addEventListener('resize', setupColumns);
    fetchReviews();
});