<?php
/**
 * ==========================
 * 🔐 IGNY8 FILE RULE HEADER
 * ==========================
 * @file         : image-gallery.php
 * @location     : /assets/shortcodes/image-gallery.php
 * @type         : Shortcode
 * @scope        : Global
 * @allowed      : Shortcode registration, frontend rendering, image display
 * @reusability  : Globally Reusable
 * @notes        : Image gallery shortcodes for frontend display
 */

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

/**
 * Display specific in-article image by ID
 * 
 * Usage: [igny8-image id="desktop-1"]
 * 
 * @param array $atts Shortcode attributes
 * @return string HTML output
 */
add_shortcode('igny8-image', function($atts) {
    $atts = shortcode_atts(['id' => ''], $atts);
    $post_id = get_the_ID();
    
    if (empty($post_id)) {
        return '';
    }
    
    $images = get_post_meta($post_id, '_igny8_inarticle_images', true);
    if (!is_array($images)) {
        return '';
    }

    // Display specific image by ID
    if (!empty($atts['id']) && isset($images[$atts['id']])) {
        $image_data = $images[$atts['id']];
        
        // Device detection - only show if device matches
        $is_mobile = wp_is_mobile();
        $is_desktop = !$is_mobile;
        
        // Check if image should be displayed based on device
        $should_display = false;
        if (strpos($atts['id'], 'desktop-') === 0 && $is_desktop) {
            $should_display = true;
        } elseif (strpos($atts['id'], 'mobile-') === 0 && $is_mobile) {
            $should_display = true;
        }
        
        if (!$should_display) {
            return '';
        }
        
        $attachment_id = intval($image_data['attachment_id']);
        
        if ($attachment_id > 0) {
            return wp_get_attachment_image($attachment_id, 'large', false, [
                'class' => 'igny8-inarticle-image',
                'data-image-id' => esc_attr($atts['id']),
                'data-device' => esc_attr($image_data['device']),
                'alt' => esc_attr($image_data['label'])
            ]);
        }
    }

    return '';
});

/**
 * Display all in-article images
 * 
 * Usage: [igny8-images]
 * 
 * @param array $atts Shortcode attributes
 * @return string HTML output
 */
add_shortcode('igny8-images', function($atts) {
    $atts = shortcode_atts([
        'device' => '', // Filter by device type (desktop/mobile)
        'size' => 'large', // Image size
        'class' => 'igny8-image-gallery' // CSS class
    ], $atts);
    
    $post_id = get_the_ID();
    
    if (empty($post_id)) {
        return '';
    }
    
    $images = get_post_meta($post_id, '_igny8_inarticle_images', true);
    if (!is_array($images) || empty($images)) {
        return '';
    }

    $output = '<div class="' . esc_attr($atts['class']) . '">';
    $output .= '<p style="background: #f0f0f0; padding: 10px; border-left: 4px solid #0073aa; margin: 10px 0; font-weight: bold;">This is coming from shortcode</p>';
    
    foreach ($images as $label => $image_data) {
        // Filter by device if specified
        if (!empty($atts['device']) && $image_data['device'] !== $atts['device']) {
            continue;
        }
        
        $attachment_id = intval($image_data['attachment_id']);
        
        if ($attachment_id > 0) {
            $output .= wp_get_attachment_image($attachment_id, $atts['size'], false, [
                'class' => 'igny8-inarticle-image',
                'data-image-id' => esc_attr($label),
                'data-device' => esc_attr($image_data['device']),
                'alt' => esc_attr($image_data['label'])
            ]);
        }
    }
    
    $output .= '</div>';
    
    return $output;
});

/**
 * Display desktop images only
 * 
 * Usage: [igny8-desktop-images]
 * 
 * @param array $atts Shortcode attributes
 * @return string HTML output
 */
add_shortcode('igny8-desktop-images', function($atts) {
    $atts = shortcode_atts([
        'size' => 'large',
        'class' => 'igny8-desktop-gallery'
    ], $atts);
    
    return do_shortcode('[igny8-images device="desktop" size="' . $atts['size'] . '" class="' . $atts['class'] . '"]');
});

/**
 * Display mobile images only
 * 
 * Usage: [igny8-mobile-images]
 * 
 * @param array $atts Shortcode attributes
 * @return string HTML output
 */
add_shortcode('igny8-mobile-images', function($atts) {
    $atts = shortcode_atts([
        'size' => 'large',
        'class' => 'igny8-mobile-gallery'
    ], $atts);
    
    return do_shortcode('[igny8-images device="mobile" size="' . $atts['size'] . '" class="' . $atts['class'] . '"]');
});

/**
 * Display image count
 * 
 * Usage: [igny8-image-count]
 * 
 * @param array $atts Shortcode attributes
 * @return string HTML output
 */
add_shortcode('igny8-image-count', function($atts) {
    $atts = shortcode_atts(['device' => ''], $atts);
    
    $post_id = get_the_ID();
    
    if (empty($post_id)) {
        return '0';
    }
    
    $images = get_post_meta($post_id, '_igny8_inarticle_images', true);
    if (!is_array($images)) {
        return '0';
    }
    
    if (!empty($atts['device'])) {
        $count = 0;
        foreach ($images as $image_data) {
            if ($image_data['device'] === $atts['device']) {
                $count++;
            }
        }
        return (string) $count;
    }
    
    return (string) count($images);
});

/**
 * Display image gallery with responsive design
 * 
 * Usage: [igny8-responsive-gallery]
 * 
 * @param array $atts Shortcode attributes
 * @return string HTML output
 */
add_shortcode('igny8-responsive-gallery', function($atts) {
    $atts = shortcode_atts([
        'desktop_size' => 'large',
        'mobile_size' => 'medium',
        'class' => 'igny8-responsive-gallery'
    ], $atts);
    
    $post_id = get_the_ID();
    
    if (empty($post_id)) {
        return '';
    }
    
    $images = get_post_meta($post_id, '_igny8_inarticle_images', true);
    if (!is_array($images) || empty($images)) {
        return '';
    }

    $output = '<div class="' . esc_attr($atts['class']) . '">';
    
    // Desktop images
    $desktop_images = array_filter($images, function($img) {
        return $img['device'] === 'desktop';
    });
    
    if (!empty($desktop_images)) {
        $output .= '<div class="igny8-desktop-images" style="display: block;">';
        foreach ($desktop_images as $label => $image_data) {
            $attachment_id = intval($image_data['attachment_id']);
            if ($attachment_id > 0) {
                $output .= wp_get_attachment_image($attachment_id, $atts['desktop_size'], false, [
                    'class' => 'igny8-desktop-image',
                    'data-image-id' => esc_attr($label)
                ]);
            }
        }
        $output .= '</div>';
    }
    
    // Mobile images
    $mobile_images = array_filter($images, function($img) {
        return $img['device'] === 'mobile';
    });
    
    if (!empty($mobile_images)) {
        $output .= '<div class="igny8-mobile-images" style="display: none;">';
        foreach ($mobile_images as $label => $image_data) {
            $attachment_id = intval($image_data['attachment_id']);
            if ($attachment_id > 0) {
                $output .= wp_get_attachment_image($attachment_id, $atts['mobile_size'], false, [
                    'class' => 'igny8-mobile-image',
                    'data-image-id' => esc_attr($label)
                ]);
            }
        }
        $output .= '</div>';
    }
    
    $output .= '</div>';
    
    // Add responsive CSS
    $output .= '<style>
        @media (max-width: 768px) {
            .igny8-desktop-images { display: none !important; }
            .igny8-mobile-images { display: block !important; }
        }
        @media (min-width: 769px) {
            .igny8-desktop-images { display: block !important; }
            .igny8-mobile-images { display: none !important; }
        }
    </style>';
    
    return $output;
});
