<?php
namespace AITheme\Elementor\Widgets;

use Elementor\Controls_Manager;
use Elementor\Repeater;

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

class Portfolio_Filterable extends AI_Widget_Base {
    public function get_name() { return 'ai_portfolio_filterable'; }
    public function get_title() { return __('Portfolio Filterable', 'ai-theme'); }
    public function get_icon() { return 'eicon-filter'; }
    public function get_categories() { return array('ai-theme-portfolio'); }

    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('title', ['label' => __('Title', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $repeater->add_control('category', ['label' => __('Category', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $repeater->add_control('link', ['label' => __('Link', 'ai-theme'), 'type' => Controls_Manager::URL]);
        $this->add_control('items', ['label' => __('Portfolio Items', 'ai-theme'), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls()]);
        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();
        $categories = array_unique(array_filter(array_column($s['items'], 'category')));
        ?>
        <section class="ai-portfolio ai-portfolio-filterable bg-white py-16">
            <div class="ai-container">
                <?php if (!empty($s['title'])) : ?>
                <div class="text-center mb-8">
                    <h2 class="ai-portfolio-title text-4xl font-bold text-gray-900 mb-4"><?php echo esc_html($s['title']); ?></h2>
                </div>
                <?php endif; ?>

                <?php if (!empty($categories)) : ?>
                <div class="ai-portfolio-filters flex flex-wrap justify-center gap-3 mb-12">
                    <button class="ai-filter-btn active px-6 py-2 rounded-lg font-medium transition-all bg-blue-600 text-white" data-filter="*">
                        <?php _e('All', 'ai-theme'); ?>
                    </button>
                    <?php foreach ($categories as $cat) : ?>
                    <button class="ai-filter-btn px-6 py-2 rounded-lg font-medium transition-all bg-gray-100 text-gray-700 hover:bg-gray-200" data-filter="<?php echo esc_attr(sanitize_title($cat)); ?>">
                        <?php echo esc_html($cat); ?>
                    </button>
                    <?php endforeach; ?>
                </div>
                <?php endif; ?>

                <div class="ai-portfolio-items grid md:grid-cols-3 gap-8">
                    <?php foreach ($s['items'] as $item) : ?>
                    <div class="ai-portfolio-item group" data-category="<?php echo esc_attr(sanitize_title($item['category'])); ?>">
                        <a href="<?php echo esc_url($item['link']['url'] ?? '#'); ?>">
                            <div class="relative overflow-hidden rounded-xl mb-4 bg-gray-200 aspect-[4/3]">
                                <img
                                    src="<?php echo esc_url($item['image']['url']); ?>"
                                    alt="<?php echo esc_attr($item['title']); ?>"
                                    class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                                >
                                <div class="ai-portfolio-overlay absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                                    <button class="bg-white text-gray-900 px-4 py-2 rounded-lg font-medium flex items-center gap-2">
                                        <?php _e('View', 'ai-theme'); ?>
                                        <span>👁️</span>
                                    </button>
                                </div>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 mb-2"><?php echo esc_html($item['title']); ?></h3>
                            <?php if (!empty($item['category'])) : ?>
                            <span class="text-gray-600 text-sm"><?php echo esc_html($item['category']); ?></span>
                            <?php endif; ?>
                        </a>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>
        <?php
    }
}
