<?php
namespace AITheme\Elementor\Widgets;

use Elementor\Controls_Manager;
use Elementor\Repeater;

if (!defined('ABSPATH')) exit;

class Gallery_Lightbox extends AI_Widget_Base {
    public function get_name() { return 'ai_gallery_lightbox'; }
    public function get_title() { return __('Gallery Lightbox', 'ai-theme'); }
    public function get_icon() { return 'eicon-zoom-in'; }
    public function get_categories() { return array('ai-theme-gallery'); }

    protected function register_controls() {
        $this->start_controls_section('content_section', ['label' => __('Content', 'ai-theme'), 'tab' => Controls_Manager::TAB_CONTENT]);
        $this->add_control('title', ['label' => __('Title', 'ai-theme'), 'type' => Controls_Manager::TEXT]);

        $repeater = new Repeater();
        $repeater->add_control('image', ['label' => __('Image', 'ai-theme'), 'type' => Controls_Manager::MEDIA]);
        $repeater->add_control('caption', ['label' => __('Caption', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $this->add_control('images', ['label' => __('Images', 'ai-theme'), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls()]);
        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();
        ?>
        <div class="ai-gallery ai-gallery-lightbox bg-gradient-to-br from-gray-900 to-gray-800 py-16">
            <div class="ai-container">
                <?php if (!empty($s['title'])) : ?>
                <div class="text-center mb-12">
                    <h2 class="ai-gallery-title text-4xl font-bold text-white mb-4"><?php echo esc_html($s['title']); ?></h2>
                </div>
                <?php endif; ?>
                <div class="grid md:grid-cols-3 gap-6">
                    <?php foreach ($s['images'] as $img) : ?>
                    <a href="<?php echo esc_url($img['image']['url']); ?>" class="ai-gallery-item group relative overflow-hidden rounded-2xl bg-gray-700 aspect-[4/3] cursor-pointer border-2 border-transparent hover:border-white/30 transition-all" data-lightbox="gallery">
                        <img src="<?php echo esc_url($img['image']['url']); ?>" alt="<?php echo esc_attr($img['caption']); ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                        <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                            <div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                                <span class="text-2xl">&#128444;</span>
                            </div>
                        </div>
                    </a>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <?php
    }
}
