#!/bin/bash

# Usage: ./generate_gallery.sh /path/to/images output_folder

set -e

IMAGE_DIR="$1"
OUTPUT_DIR="$2"

if [[ ! -d "$IMAGE_DIR" ]]; then
    echo "Error: $IMAGE_DIR is not a valid directory."
    exit 1
fi

mkdir -p "$OUTPUT_DIR"
cp "$IMAGE_DIR"/*.jpg "$OUTPUT_DIR/"

HTML_FILE="$OUTPUT_DIR/index.html"
CSS_FILE="$OUTPUT_DIR/style.css"
JS_FILE="$OUTPUT_DIR/script.js"

# Generate style.css
cat > "$CSS_FILE" <<EOF
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #111;
    color: #fff;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
}
.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3; /* or 1 / 1 for square */
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.2s;
    cursor: pointer;
}
.gallery img:hover {
    transform: scale(1.02);
}
.fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    display: none;
}
.fullscreen img {
    max-width: 100%;
    max-height: 100%;
}

/* Navigation Buttons */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.3);
    border: none;
    font-size: 3rem;
    padding: 0.5rem 1rem;
    color: #fff;
    cursor: pointer;
    user-select: none;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    transition: background 0.2s;
}
.nav-btn:hover {
    background: rgba(255, 255, 255, 0.6);
}
#prevBtn {
    left: 20px;
}
#nextBtn {
    right: 20px;
}

/* Autoplay Button */
.autoplay-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.3);
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    color: #fff;
    cursor: pointer;
    user-select: none;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    transition: background 0.2s;
}
.autoplay-btn:hover {
    background: rgba(255, 255, 255, 0.6);
}
EOF


# Generate script.js
# Generate script.js
cat > "$JS_FILE" <<EOF
document.addEventListener('DOMContentLoaded', function() {
    const fullscreen = document.getElementById('fullscreen');
    const fullscreenImg = fullscreen.querySelector('img');
    const images = Array.from(document.querySelectorAll('.gallery img'));
    let currentIndex = 0;

    function openFullscreen(index) {
        currentIndex = index;
        fullscreenImg.src = images[currentIndex].src;
        fullscreen.style.display = 'flex';
    }

    function showNext() {
        currentIndex = (currentIndex + 1) % images.length;
        fullscreenImg.src = images[currentIndex].src;
    }

    function showPrev() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        fullscreenImg.src = images[currentIndex].src;
    }

    images.forEach((img, index) => {
        img.addEventListener('click', () => openFullscreen(index));
    });

    fullscreen.addEventListener('click', (e) => {
        if (e.target === fullscreen) fullscreen.style.display = 'none';
    });

    document.getElementById('nextBtn').addEventListener('click', (e) => {
        e.stopPropagation();
        showNext();
    });

    document.getElementById('prevBtn').addEventListener('click', (e) => {
        e.stopPropagation();
        showPrev();
    });

    document.addEventListener('keydown', (e) => {
        if (fullscreen.style.display === 'flex') {
            if (e.key === 'ArrowRight') showNext();
            if (e.key === 'ArrowLeft') showPrev();
            if (e.key === 'Escape') fullscreen.style.display = 'none';
        }
    });
let autoplayInterval = null;

function toggleAutoplay() {
    const playPauseBtn = document.getElementById('playPauseBtn');
    if (autoplayInterval) {
        clearInterval(autoplayInterval);
        autoplayInterval = null;
        playPauseBtn.textContent = '▶️';
    } else {
        autoplayInterval = setInterval(showNext, 3000);
        playPauseBtn.textContent = '⏸️';
    }
}

document.getElementById('playPauseBtn').addEventListener('click', (e) => {
    e.stopPropagation();
    toggleAutoplay();
});

});
EOF

# Start of HTML file
cat > "$HTML_FILE" <<EOF
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="gallery">
EOF

# Loop through images and append them inside the gallery div
for img in "$OUTPUT_DIR"/*.jpg; do
    filename=$(basename "$img")
    echo "        <img src=\"$filename\" alt=\"$filename\">" >> "$HTML_FILE"
done

# Close gallery div and append fullscreen overlay & script
cat >> "$HTML_FILE" <<EOF
    </div>
    <div id="fullscreen" class="fullscreen">
        <button id="prevBtn" class="nav-btn">❮</button>
        <img src="" alt="fullscreen image">
        <button id="nextBtn" class="nav-btn">❯</button>
        <button id="playPauseBtn" class="autoplay-btn">▶️</button>
    </div>
    <script src="script.js"></script>
</body>
</html>
EOF

echo "Gallery created in: $OUTPUT_DIR"