<?php
if (!defined('ABSPATH')) exit;

$ai = Dima_AI::get_instance();
$usage = $ai->check_usage_limit();
$api_key_set = !empty(get_option('dima_ai_api_key'));
?>

<div class="wrap dima-ai-page">
    <h1>🤖 تولید محتوا با هوش مصنوعی GapGPT</h1>
    
    <?php if (!$api_key_set): ?>
    <div class="notice notice-warning">
        <p>
            <strong>⚠️ کلید API تنظیم نشده است!</strong> 
            برای استفاده از هوش مصنوعی، ابتدا کلید API را در 
            <a href="<?php echo admin_url('admin.php?page=dima-shop-settings&tab=ai'); ?>">تنظیمات AI</a> 
            وارد کنید.
            <a href="https://gapgpt.app" target="_blank" class="button button-primary">دریافت کلید API</a>
        </p>
    </div>
    <?php endif; ?>
    
    <!-- Usage Stats -->
    <div class="ai-stats-cards">
        <div class="ai-stat-card">
            <div class="stat-icon">📊</div>
            <div class="stat-info">
                <div class="stat-value"><?php echo $usage['used']; ?>/<?php echo $usage['limit']; ?></div>
                <div class="stat-label">استفاده امروز</div>
            </div>
        </div>
        <div class="ai-stat-card">
            <div class="stat-icon">⏳</div>
            <div class="stat-info">
                <div class="stat-value"><?php echo $usage['remaining']; ?></div>
                <div class="stat-label">باقی‌مانده</div>
            </div>
        </div>
        <div class="ai-stat-card">
            <div class="stat-icon">✅</div>
            <div class="stat-info">
                <div class="stat-value"><?php echo $usage['allowed'] ? 'فعال' : 'غیرفعال'; ?></div>
                <div class="stat-label">وضعیت</div>
            </div>
        </div>
    </div>
    
    <!-- Tabs -->
    <div class="ai-tabs">
        <button class="ai-tab active" data-tab="description">✍️ توضیحات محصول</button>
        <button class="ai-tab" data-tab="title">💡 عنوان SEO</button>
        <button class="ai-tab" data-tab="keywords">🔑 کلمات کلیدی</button>
        <button class="ai-tab" data-tab="image">🎨 تولید تصویر</button>
        <button class="ai-tab" data-tab="blog">📝 مقاله بلاگ</button>
        <button class="ai-tab" data-tab="translate">🌐 ترجمه</button>
        <button class="ai-tab" data-tab="improve">✨ بهبود متن</button>
    </div>
    
    <!-- Tab Contents -->
    <div class="ai-tab-content">
        
        <!-- Description Tab -->
        <div class="ai-tab-panel active" id="tab-description">
            <h2>تولید توضیحات محصول</h2>
            <p class="description">توضیحات حرفه‌ای و جذاب برای محصول خود تولید کنید</p>
            
            <div class="ai-form">
                <div class="form-group">
                    <label>نام محصول: *</label>
                    <input type="text" id="ai-product-name" class="regular-text" placeholder="مثلاً: گوشی سامسونگ گلکسی S24">
                </div>
                
                <div class="form-group">
                    <label>دسته‌بندی:</label>
                    <input type="text" id="ai-category" class="regular-text" placeholder="مثلاً: موبایل و تبلت">
                </div>
                
                <div class="form-group">
                    <label>کلمات کلیدی:</label>
                    <input type="text" id="ai-keywords" class="regular-text" placeholder="مثلاً: سامسونگ، گلکسی، دوربین">
                </div>
                
                <div class="form-group">
                    <label>لحن:</label>
                    <select id="ai-tone">
                        <option value="professional">حرفه‌ای</option>
                        <option value="friendly">دوستانه</option>
                        <option value="luxury">لوکس</option>
                        <option value="technical">تخصصی</option>
                        <option value="simple">ساده</option>
                    </select>
                </div>
                
                <button type="button" class="button button-primary button-large" id="ai-generate-desc">
                    🤖 تولید توضیحات
                </button>
            </div>
            
            <div class="ai-result" id="ai-desc-result" style="display:none;">
                <div class="result-header">
                    <h3>نتیجه:</h3>
                    <button class="button" id="copy-desc-btn">📋 کپی</button>
                    <button class="button" id="use-desc-btn">✓ استفاده در محصول</button>
                </div>
                <div class="result-content" id="ai-desc-content"></div>
            </div>
        </div>
        
        <!-- Title Tab -->
        <div class="ai-tab-panel" id="tab-title">
            <h2>پیشنهاد عنوان SEO</h2>
            <p class="description">۵ عنوان بهینه برای موتورهای جستجو</p>
            
            <div class="ai-form">
                <div class="form-group">
                    <label>نام محصول: *</label>
                    <input type="text" id="ai-title-name" class="regular-text">
                </div>
                <div class="form-group">
                    <label>دسته‌بندی:</label>
                    <input type="text" id="ai-title-category" class="regular-text">
                </div>
                <button type="button" class="button button-primary" id="ai-generate-title">
                    💡 تولید عناوین
                </button>
            </div>
            
            <div class="ai-result" id="ai-title-result" style="display:none;">
                <div class="result-header"><h3>عناوین پیشنهادی:</h3></div>
                <ul class="title-suggestions" id="ai-title-list"></ul>
            </div>
        </div>
        
        <!-- Keywords Tab -->
        <div class="ai-tab-panel" id="tab-keywords">
            <h2>تولید کلمات کلیدی</h2>
            
            <div class="ai-form">
                <div class="form-group">
                    <label>نام محصول: *</label>
                    <input type="text" id="ai-kw-name" class="regular-text">
                </div>
                <div class="form-group">
                    <label>توضیحات کوتاه:</label>
                    <textarea id="ai-kw-desc" rows="3" class="large-text"></textarea>
                </div>
                <button type="button" class="button button-primary" id="ai-generate-kw">
                    🔑 تولید کلمات کلیدی
                </button>
            </div>
            
            <div class="ai-result" id="ai-kw-result" style="display:none;">
                <div class="result-header">
                    <h3>کلمات کلیدی:</h3>
                    <button class="button" id="copy-kw-btn">📋 کپی</button>
                </div>
                <div class="result-content" id="ai-kw-content"></div>
            </div>
        </div>
        
        <!-- Image Tab -->
        <div class="ai-tab-panel" id="tab-image">
            <h2>تولید تصویر محصول</h2>
            <p class="description">تصویر حرفه‌ای برای محصول خود بسازید</p>
            
            <div class="ai-form">
                <div class="form-group">
                    <label>توضیح تصویر: *</label>
                    <textarea id="ai-image-prompt" rows="4" class="large-text" placeholder="مثلاً: یک گوشی هوشمند مشکی با صفحه نمایش بزرگ روی میز سفید"></textarea>
                </div>
                
                <div class="form-group">
                    <label>سبک:</label>
                    <select id="ai-image-style">
                        <option value="professional">حرفه‌ای استودیویی</option>
                        <option value="lifestyle">سبک زندگی</option>
                        <option value="minimal">مینیمال</option>
                        <option value="luxury">لوکس</option>
                        <option value="modern">مدرن</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>اندازه:</label>
                    <select id="ai-image-size">
                        <option value="1024x1024">مربع (1024×1024)</option>
                        <option value="1024x1792">عمودی (1024×1792)</option>
                        <option value="1792x1024">افقی (1792×1024)</option>
                    </select>
                </div>
                
                <button type="button" class="button button-primary" id="ai-generate-image">
                    🎨 تولید تصویر
                </button>
            </div>
            
            <div class="ai-result" id="ai-image-result" style="display:none;">
                <div class="result-header">
                    <h3>تصویر تولید شده:</h3>
                    <button class="button" id="use-image-btn">✓ استفاده در محصول</button>
                </div>
                <div class="image-preview" id="ai-image-preview"></div>
            </div>
        </div>
        
        <!-- Blog Tab -->
        <div class="ai-tab-panel" id="tab-blog">
            <h2>تولید مقاله بلاگ</h2>
            
            <div class="ai-form">
                <div class="form-group">
                    <label>موضوع مقاله: *</label>
                    <input type="text" id="ai-blog-topic" class="large-text" placeholder="مثلاً: راهنمای خرید گوشی هوشمند">
                </div>
                <div class="form-group">
                    <label>کلمات کلیدی:</label>
                    <input type="text" id="ai-blog-keywords" class="large-text">
                </div>
                <div class="form-group">
                    <label>طول مقاله:</label>
                    <select id="ai-blog-length">
                        <option value="short">کوتاه (۵۰۰ کلمه)</option>
                        <option value="medium" selected>متوسط (۱۰۰۰ کلمه)</option>
                        <option value="long">بلند (۲۰۰۰ کلمه)</option>
                    </select>
                </div>
                <button type="button" class="button button-primary" id="ai-generate-blog">
                    📝 تولید مقاله
                </button>
            </div>
            
            <div class="ai-result" id="ai-blog-result" style="display:none;">
                <div class="result-header">
                    <h3>مقاله تولید شده:</h3>
                    <button class="button" id="copy-blog-btn">📋 کپی</button>
                </div>
                <div class="result-content" id="ai-blog-content"></div>
            </div>
        </div>
        
        <!-- Translate Tab -->
        <div class="ai-tab-panel" id="tab-translate">
            <h2>ترجمه متن</h2>
            
            <div class="ai-form">
                <div class="form-group">
                    <label>متن اصلی: *</label>
                    <textarea id="ai-translate-text" rows="5" class="large-text"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>زبان مبدأ:</label>
                        <select id="ai-translate-from">
                            <option value="fa">فارسی</option>
                            <option value="en">انگلیسی</option>
                            <option value="ar">عربی</option>
                            <option value="fr">فرانسوی</option>
                            <option value="de">آلمانی</option>
                            <option value="tr">ترکی</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>زبان مقصد:</label>
                        <select id="ai-translate-to">
                            <option value="en">انگلیسی</option>
                            <option value="fa">فارسی</option>
                            <option value="ar">عربی</option>
                            <option value="fr">فرانسوی</option>
                            <option value="de">آلمانی</option>
                            <option value="tr">ترکی</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="button button-primary" id="ai-translate-btn">
                    🌐 ترجمه
                </button>
            </div>
            
            <div class="ai-result" id="ai-translate-result" style="display:none;">
                <div class="result-header">
                    <h3>ترجمه:</h3>
                    <button class="button" id="copy-translate-btn">📋 کپی</button>
                </div>
                <div class="result-content" id="ai-translate-content"></div>
            </div>
        </div>
        
        <!-- Improve Tab -->
        <div class="ai-tab-panel" id="tab-improve">
            <h2>بهبود متن</h2>
            
            <div class="ai-form">
                <div class="form-group">
                    <label>متن شما: *</label>
                    <textarea id="ai-improve-text" rows="5" class="large-text"></textarea>
                </div>
                <div class="form-group">
                    <label>نوع بهبود:</label>
                    <select id="ai-improve-type">
                        <option value="grammar">اصلاح گرامری</option>
                        <option value="seo">بهینه‌سازی SEO</option>
                        <option value="shorter">کوتاه‌تر کردن</option>
                        <option value="longer">گسترش متن</option>
                        <option value="professional">رسمی‌تر کردن</option>
                        <option value="friendly">دوستانه‌تر کردن</option>
                    </select>
                </div>
                <button type="button" class="button button-primary" id="ai-improve-btn">
                    ✨ بهبود متن
                </button>
            </div>
            
            <div class="ai-result" id="ai-improve-result" style="display:none;">
                <div class="result-header">
                    <h3>متن بهبود یافته:</h3>
                    <button class="button" id="copy-improve-btn">📋 کپی</button>
                </div>
                <div class="result-content" id="ai-improve-content"></div>
            </div>
        </div>
        
    </div>
</div>

<style>
.dima-ai-page { max-width: 1000px; }
.ai-stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 20px 0; }
.ai-stat-card { background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.ai-stat-card .stat-icon { font-size: 32px; }
.ai-stat-card .stat-value { font-size: 24px; font-weight: 800; color: #4f46e5; }
.ai-stat-card .stat-label { font-size: 13px; color: #6b7280; }

.ai-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 20px; border-bottom: 2px solid #e5e7eb; padding-bottom: 10px; }
.ai-tab { padding: 10px 18px; background: white; border: 1px solid #e5e7eb; border-radius: 8px 8px 0 0; cursor: pointer; font-weight: 600; transition: all 0.2s; }
.ai-tab:hover { background: #f9fafb; }
.ai-tab.active { background: #4f46e5; color: white; border-color: #4f46e5; }

.ai-tab-panel { display: none; background: white; padding: 30px; border-radius: 12px; border: 1px solid #e5e7eb; }
.ai-tab-panel.active { display: block; }
.ai-tab-panel h2 { margin-top: 0; color: #1f2937; }

.ai-form { margin: 20px 0; }
.ai-form .form-group { margin-bottom: 16px; }
.ai-form label { display: block; font-weight: 600; margin-bottom: 6px; color: #374151; }
.ai-form input[type="text"], .ai-form textarea, .ai-form select { width: 100%; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 14px; }
.ai-form input:focus, .ai-form textarea:focus, .ai-form select:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.ai-result { margin-top: 24px; background: #f9fafb; border: 2px solid #4f46e5; border-radius: 12px; padding: 20px; }
.ai-result .result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; }
.ai-result .result-header h3 { margin: 0; color: #4f46e5; }
.ai-result .result-content { background: white; padding: 16px; border-radius: 8px; line-height: 1.8; white-space: pre-wrap; max-height: 500px; overflow-y: auto; }

.title-suggestions { list-style: none; padding: 0; }
.title-suggestions li { background: white; padding: 12px 16px; margin-bottom: 8px; border-radius: 8px; border-right: 4px solid #4f46e5; cursor: pointer; transition: all 0.2s; }
.title-suggestions li:hover { background: #f3f4f6; transform: translateX(-5px); }

.image-preview { text-align: center; }
.image-preview img { max-width: 100%; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

.ai-loading { text-align: center; padding: 40px; }
.ai-loading .spinner { float: none; margin: 0 auto 15px; }
</style>

<script>
jQuery(document).ready(function($) {
    // Tab Switching
    $('.ai-tab').on('click', function() {
        var tab = $(this).data('tab');
        $('.ai-tab').removeClass('active');
        $(this).addClass('active');
        $('.ai-tab-panel').removeClass('active');
        $('#tab-' + tab).addClass('active');
    });
    
    // Show Loading
    function showLoading($result) {
        $result.html('<div class="ai-loading"><span class="spinner is-active"></span><p>🤖 در حال پردازش با هوش مصنوعی...</p></div>').show();
    }
    
    // Generate Description
    $('#ai-generate-desc').on('click', function() {
        var $btn = $(this);
        var $result = $('#ai-desc-result');
        
        $btn.prop('disabled', true).text('در حال تولید...');
        showLoading($result);
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'dima_ai_generate_description',
                nonce: dima_shop.nonce,
                product_name: $('#ai-product-name').val(),
                category: $('#ai-category').val(),
                keywords: $('#ai-keywords').val(),
                tone: $('#ai-tone').val()
            },
            success: function(response) {
                if (response.success) {
                    $('#ai-desc-content').text(response.data.content);
                    $result.show();
                } else {
                    alert('❌ ' + response.data.message);
                    $result.hide();
                }
            },
            complete: function() {
                $btn.prop('disabled', false).text('🤖 تولید توضیحات');
            }
        });
    });
    
    // Copy Description
    $('#copy-desc-btn').on('click', function() {
        var text = $('#ai-desc-content').text();
        navigator.clipboard.writeText(text);
        $(this).text('✓ کپی شد!');
        setTimeout(() => $(this).text('📋 کپی'), 2000);
    });
    
    // Generate Title
    $('#ai-generate-title').on('click', function() {
        var $btn = $(this);
        var $result = $('#ai-title-result');
        
        $btn.prop('disabled', true);
        showLoading($result);
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'dima_ai_generate_title',
                nonce: dima_shop.nonce,
                product_name: $('#ai-title-name').val(),
                category: $('#ai-title-category').val()
            },
            success: function(response) {
                if (response.success) {
                    var html = '';
                    response.data.titles.forEach(function(title) {
                        if (title.trim()) {
                            html += '<li>' + title.trim() + '</li>';
                        }
                    });
                    $('#ai-title-list').html(html);
                    $result.show();
                } else {
                    alert('❌ ' + response.data.message);
                    $result.hide();
                }
            },
            complete: function() {
                $btn.prop('disabled', false);
            }
        });
    });
    
    // Generate Keywords
    $('#ai-generate-kw').on('click', function() {
        var $btn = $(this);
        var $result = $('#ai-kw-result');
        
        $btn.prop('disabled', true);
        showLoading($result);
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'dima_ai_generate_keywords',
                nonce: dima_shop.nonce,
                product_name: $('#ai-kw-name').val(),
                description: $('#ai-kw-desc').val()
            },
            success: function(response) {
                if (response.success) {
                    $('#ai-kw-content').text(response.data.keywords);
                    $result.show();
                } else {
                    alert('❌ ' + response.data.message);
                }
            },
            complete: function() {
                $btn.prop('disabled', false);
            }
        });
    });
    
    // Generate Image
    $('#ai-generate-image').on('click', function() {
        var $btn = $(this);
        var $result = $('#ai-image-result');
        
        $btn.prop('disabled', true).text('⏳ در حال تولید تصویر (ممکن است ۳۰ ثانیه طول بکشد)...');
        showLoading($result);
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            timeout: 120000,
            data: {
                action: 'dima_ai_generate_image',
                nonce: dima_shop.nonce,
                prompt: $('#ai-image-prompt').val(),
                style: $('#ai-image-style').val(),
                size: $('#ai-image-size').val(),
                filename: 'ai-product'
            },
            success: function(response) {
                if (response.success) {
                    $('#ai-image-preview').html('<img src="' + response.data.image_url + '" alt="Generated Image">');
                    $result.show();
                } else {
                    alert('❌ ' + response.data.message);
                    $result.hide();
                }
            },
            complete: function() {
                $btn.prop('disabled', false).text('🎨 تولید تصویر');
            }
        });
    });
    
    // Generate Blog
    $('#ai-generate-blog').on('click', function() {
        var $btn = $(this);
        var $result = $('#ai-blog-result');
        
        $btn.prop('disabled', true);
        showLoading($result);
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            timeout: 120000,
            data: {
                action: 'dima_ai_generate_blog',
                nonce: dima_shop.nonce,
                topic: $('#ai-blog-topic').val(),
                keywords: $('#ai-blog-keywords').val(),
                length: $('#ai-blog-length').val()
            },
            success: function(response) {
                if (response.success) {
                    $('#ai-blog-content').text(response.data.content);
                    $result.show();
                } else {
                    alert('❌ ' + response.data.message);
                }
            },
            complete: function() {
                $btn.prop('disabled', false);
            }
        });
    });
    
    // Translate
    $('#ai-translate-btn').on('click', function() {
        var $btn = $(this);
        var $result = $('#ai-translate-result');
        
        $btn.prop('disabled', true);
        showLoading($result);
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'dima_ai_translate',
                nonce: dima_shop.nonce,
                text: $('#ai-translate-text').val(),
                source_lang: $('#ai-translate-from').val(),
                target_lang: $('#ai-translate-to').val()
            },
            success: function(response) {
                if (response.success) {
                    $('#ai-translate-content').text(response.data.translated);
                    $result.show();
                } else {
                    alert('❌ ' + response.data.message);
                }
            },
            complete: function() {
                $btn.prop('disabled', false);
            }
        });
    });
    
    // Improve Text
    $('#ai-improve-btn').on('click', function() {
        var $btn = $(this);
        var $result = $('#ai-improve-result');
        
        $btn.prop('disabled', true);
        showLoading($result);
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'dima_ai_improve_text',
                nonce: dima_shop.nonce,
                text: $('#ai-improve-text').val(),
                improvement_type: $('#ai-improve-type').val()
            },
            success: function(response) {
                if (response.success) {
                    $('#ai-improve-content').text(response.data.improved);
                    $result.show();
                } else {
                    alert('❌ ' + response.data.message);
                }
            },
            complete: function() {
                $btn.prop('disabled', false);
            }
        });
    });
    
    // Copy buttons
    $('#copy-kw-btn, #copy-blog-btn, #copy-translate-btn, #copy-improve-btn').on('click', function() {
        var $btn = $(this);
        var text = $btn.closest('.ai-result').find('.result-content').text();
        navigator.clipboard.writeText(text);
        var original = $btn.text();
        $btn.text('✓ کپی شد!');
        setTimeout(() => $btn.text(original), 2000);
    });
});
</script>