<?php
/**
 * Property Gallery Template Part
 *
 * @package HomeProz
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

$gallery = isset($args['gallery']) ? $args['gallery'] : array();
$property_id = isset($args['property_id']) ? $args['property_id'] : get_the_ID();

// Build images array - combine featured image with gallery
$images = array();

// Add featured image first if available
if (has_post_thumbnail($property_id)) {
    $featured_id = get_post_thumbnail_id($property_id);
    $images[] = array(
        'id' => $featured_id,
        'url' => wp_get_attachment_image_url($featured_id, 'large'),
        'full' => wp_get_attachment_image_url($featured_id, 'full'),
        'alt' => get_post_meta($featured_id, '_wp_attachment_image_alt', true),
    );
}

// Add gallery images
if ($gallery && is_array($gallery)) {
    foreach ($gallery as $attachment_id) {
        // Skip if same as featured image
        if (isset($featured_id) && $attachment_id == $featured_id) {
            continue;
        }
        $images[] = array(
            'id' => $attachment_id,
            'url' => wp_get_attachment_image_url($attachment_id, 'large'),
            'full' => wp_get_attachment_image_url($attachment_id, 'full'),
            'alt' => get_post_meta($attachment_id, '_wp_attachment_image_alt', true),
        );
    }
}

$image_count = count($images);
?>

<div class="property-gallery" data-gallery-count="<?php echo esc_attr($image_count); ?>">
    <?php if ($image_count > 0) : ?>
        <!-- Main Image -->
        <div class="gallery-main">
            <button class="gallery-main-image" type="button" data-lightbox-trigger aria-label="Open gallery">
                <img src="<?php echo esc_url($images[0]['url']); ?>" alt="<?php echo esc_attr($images[0]['alt'] ?: 'Property photo'); ?>" />
                <?php if ($image_count > 1) : ?>
                    <span class="gallery-count">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                            <circle cx="8.5" cy="8.5" r="1.5"/>
                            <polyline points="21 15 16 10 5 21"/>
                        </svg>
                        <?php echo esc_html($image_count); ?> Photos
                    </span>
                <?php endif; ?>
            </button>
        </div>

        <?php if ($image_count > 1) : ?>
            <!-- Thumbnails -->
            <div class="gallery-thumbnails">
                <?php foreach (array_slice($images, 0, 5) as $index => $image) : ?>
                    <button
                        class="gallery-thumbnail <?php echo $index === 0 ? 'is-active' : ''; ?>"
                        type="button"
                        data-index="<?php echo esc_attr($index); ?>"
                        aria-label="View image <?php echo esc_attr($index + 1); ?>"
                    >
                        <img src="<?php echo esc_url(wp_get_attachment_image_url($image['id'], 'thumbnail')); ?>" alt="" loading="lazy" />
                        <?php if ($index === 4 && $image_count > 5) : ?>
                            <span class="thumbnail-more">+<?php echo esc_html($image_count - 5); ?></span>
                        <?php endif; ?>
                    </button>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Lightbox -->
        <div class="gallery-lightbox" id="property-lightbox" aria-hidden="true">
            <div class="lightbox-overlay"></div>
            <div class="lightbox-container">
                <button class="lightbox-close" type="button" aria-label="Close gallery">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6" y1="6" x2="18" y2="18"/>
                    </svg>
                </button>

                <button class="lightbox-nav lightbox-prev" type="button" aria-label="Previous image">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="15 18 9 12 15 6"/>
                    </svg>
                </button>

                <div class="lightbox-image-container">
                    <img class="lightbox-image" src="" alt="" />
                </div>

                <button class="lightbox-nav lightbox-next" type="button" aria-label="Next image">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="9 18 15 12 9 6"/>
                    </svg>
                </button>

                <div class="lightbox-counter">
                    <span class="lightbox-current">1</span> / <span class="lightbox-total"><?php echo esc_html($image_count); ?></span>
                </div>
            </div>

            <!-- Store image data for JS -->
            <script type="application/json" id="gallery-images-data">
                <?php echo wp_json_encode(array_map(function($img) {
                    return array(
                        'url' => $img['full'],
                        'alt' => $img['alt'],
                    );
                }, $images)); ?>
            </script>
        </div>

    <?php else : ?>
        <!-- No Images Placeholder -->
        <div class="gallery-placeholder">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <polyline points="9 22 9 12 15 12 15 22"/>
            </svg>
            <p>No photos available</p>
        </div>
    <?php endif; ?>
</div>
