<?php
namespace AITheme\Elementor\Widgets;

use Elementor\Controls_Manager;

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

class Text_Article extends AI_Widget_Base {
    public function get_name() { return 'ai_text_article'; }
    public function get_title() { return __('Text Article', 'ai-theme'); }
    public function get_icon() { return 'eicon-post-content'; }
    public function get_categories() { return array('ai-theme-text'); }

    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]);
        $this->add_control('subtitle', ['label' => __('Subtitle', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $this->add_control('author', ['label' => __('Author', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $this->add_control('date', ['label' => __('Date', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $this->add_control('featured_image', ['label' => __('Featured Image', 'ai-theme'), 'type' => Controls_Manager::MEDIA]);
        $this->add_control('content', ['label' => __('Content', 'ai-theme'), 'type' => Controls_Manager::WYSIWYG]);
        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();
        ?>
        <article class="ai-text ai-text-article py-16 bg-gradient-to-b from-gray-50 to-white">
            <div class="ai-container-narrow">
                <header class="ai-article-header mb-12">
                    <?php if (!empty($s['title'])) : ?>
                    <h1 class="text-5xl font-bold text-gray-900 mb-4 leading-tight"><?php echo esc_html($s['title']); ?></h1>
                    <?php endif; ?>
                    <?php if (!empty($s['subtitle'])) : ?>
                    <p class="ai-article-subtitle text-2xl text-gray-600 font-light"><?php echo esc_html($s['subtitle']); ?></p>
                    <?php endif; ?>
                    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-purple-600 mt-6"></div>
                </header>
                <?php if (!empty($s['author']) || !empty($s['date'])) : ?>
                <div class="ai-article-meta flex items-center gap-6 mb-12 pb-8 border-b border-gray-200">
                    <?php if (!empty($s['author'])) : ?>
                    <div class="flex items-center gap-2">
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
                            <?php echo esc_html(substr($s['author'], 0, 1)); ?>
                        </div>
                        <span class="ai-article-author font-semibold text-gray-900"><?php echo esc_html($s['author']); ?></span>
                    </div>
                    <?php endif; ?>
                    <?php if (!empty($s['date'])) : ?>
                    <span class="ai-article-date text-gray-600"><?php echo esc_html($s['date']); ?></span>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
                <?php if (!empty($s['featured_image']['url'])) : ?>
                <img src="<?php echo esc_url($s['featured_image']['url']); ?>" alt="" class="ai-article-image w-full rounded-xl mb-12">
                <?php endif; ?>
                <?php if (!empty($s['content'])) : ?>
                <div class="ai-article-content prose prose-xl max-w-none text-gray-800 leading-relaxed text-lg"><?php echo wp_kses_post($s['content']); ?></div>
                <?php endif; ?>
            </div>
        </article>
        <?php
    }
}
