<?php
/**
 * Image Generator View Template
 * 
 * AI-powered image generation and enhancement interface
 * 
 * @package AIProductContentImageGenerator
 * @since 1.0.0
 */

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

$apcig_ai_provider_manager = new \AIProductContentImageGenerator\Services\AIProviderManager();
$apcig_image_generator = new \AIProductContentImageGenerator\Services\ImageGenerator($apcig_ai_provider_manager);

$apcig_providers = $apcig_ai_provider_manager->get_configured_providers();
$apcig_image_styles = $apcig_image_generator->get_image_styles();
$apcig_image_sizes = $apcig_image_generator->get_image_sizes();

$apcig_products = wc_get_products([
    'limit' => 50,
    'status' => 'publish',
    'orderby' => 'date',
    'order' => 'DESC'
]);
?>

<div class="apcig-image-generator">
    <!-- Generation Methods -->
    <div class="apcig-tabs">
        <div class="apcig-tab-nav" style="display: none;">
            <button class="apcig-tab-button active" data-tab="text-to-image">
                <span class="dashicons dashicons-format-image"></span>
                <?php esc_html_e('Text to Image', 'contengen-ai-product-content-image-generator'); ?>
            </button>
        </div>

        <!-- Text to Image Tab -->
        <div class="apcig-tab-content active" id="text-to-image">
            <div class="apcig-generation-layout">
                <!-- Input Panel -->
                <div class="apcig-input-panel">
                    <div class="apcig-card">
                        <div class="apcig-card-header">
                            <h3><?php esc_html_e('Generate Lifestyle & A+ Images', 'contengen-ai-product-content-image-generator'); ?></h3>
                            <p class="apcig-card-subtitle"><?php esc_html_e('Create lifestyle and marketing images based on your existing product images', 'contengen-ai-product-content-image-generator'); ?></p>
                        </div>
                        <div class="apcig-card-body">
                            <form id="image-generation-form" class="apcig-form">
                                <!-- Product Selection -->
                                <div class="apcig-form-group">
                                    <label class="apcig-label"><?php esc_html_e('Select Product', 'contengen-ai-product-content-image-generator'); ?></label>
                                    <select name="product_id" class="apcig-select" required>
                                        <option value=""><?php esc_html_e('Choose a product...', 'contengen-ai-product-content-image-generator'); ?></option>
                                        <?php foreach ($apcig_products as $apcig_product): ?>
                                        <option value="<?php echo esc_attr($apcig_product->get_id()); ?>">
                                            <?php echo esc_html($apcig_product->get_name()); ?>
                                            <?php if ($apcig_product->get_sku()): ?>
                                                (<?php echo esc_html($apcig_product->get_sku()); ?>)
                                            <?php endif; ?>
                                        </option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>

                                <!-- Product Image Preview -->
                                <div class="apcig-form-group" id="product-image-preview" style="display: none;">
                                    <label class="apcig-label"><?php esc_html_e('Current Product Image', 'contengen-ai-product-content-image-generator'); ?></label>
                                    <div class="apcig-current-image-container">
                                        <img id="current-product-image" src="" alt="Product Image" style="max-width: 200px; border-radius: 8px; border: 2px solid #E5E7EB;">
                                        <p class="apcig-help-text"><?php esc_html_e('Lifestyle and A+ images will be generated based on this product image', 'contengen-ai-product-content-image-generator'); ?></p>
                                    </div>
                                </div>

                                <!-- Image Context/Description -->
                                <div class="apcig-form-group">
                                    <label class="apcig-label"><?php esc_html_e('Lifestyle Context', 'contengen-ai-product-content-image-generator'); ?></label>
                                    <textarea name="description" class="apcig-textarea" rows="3" placeholder="<?php esc_attr_e('Describe the lifestyle setting or context...', 'contengen-ai-product-content-image-generator'); ?>" required></textarea>
                                    <small class="apcig-help-text">
                                        <?php esc_html_e('Describe the setting where you want to show the product. Example: "Person using the product in a modern home office" or "Product displayed on a kitchen counter with fresh ingredients"', 'contengen-ai-product-content-image-generator'); ?>
                                    </small>
                                </div>

                                <!-- Style Selection -->
                                <div class="apcig-form-group">
                                    <label class="apcig-label"><?php esc_html_e('Image Style', 'contengen-ai-product-content-image-generator'); ?></label>
                                    <div class="apcig-style-grid">
                                        <?php foreach ($apcig_image_styles as $apcig_style_key => $apcig_style_config): ?>
                                        <label class="apcig-style-option">
                                            <input type="radio" name="style" value="<?php echo esc_attr($apcig_style_key); ?>" <?php checked($apcig_style_key, 'lifestyle'); ?>>
                                            <div class="apcig-style-preview">
                                                <div class="apcig-style-icon">
                                                    <span class="dashicons dashicons-format-image"></span>
                                                </div>
                                                <div class="apcig-style-name"><?php echo esc_html($apcig_style_config['name']); ?></div>
                                            </div>
                                        </label>
                                        <?php endforeach; ?>
                                    </div>
                                </div>

                                <!-- Generation Settings -->
                                <div class="apcig-settings-grid">
                                    <div class="apcig-form-group">
                                        <label class="apcig-label"><?php esc_html_e('Image Size', 'contengen-ai-product-content-image-generator'); ?></label>
                                        <select name="size" class="apcig-select">
                                            <?php foreach ($apcig_image_sizes as $apcig_size_key => $apcig_size_name): ?>
                                            <option value="<?php echo esc_attr($apcig_size_key); ?>" <?php selected($apcig_size_key, '1024x1024'); ?>>
                                                <?php echo esc_html($apcig_size_name); ?>
                                            </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>

                                    <div class="apcig-form-group">
                                        <label class="apcig-label"><?php esc_html_e('Number of Images', 'contengen-ai-product-content-image-generator'); ?></label>
                                        <select name="count" class="apcig-select">
                                            <option value="1">1 <?php esc_html_e('image', 'contengen-ai-product-content-image-generator'); ?></option>
                                            <option value="2">2 <?php esc_html_e('images', 'contengen-ai-product-content-image-generator'); ?></option>
                                            <option value="3">3 <?php esc_html_e('images', 'contengen-ai-product-content-image-generator'); ?></option>
                                            <option value="4">4 <?php esc_html_e('images', 'contengen-ai-product-content-image-generator'); ?></option>
                                        </select>
                                    </div>

                                    <div class="apcig-form-group">
                                        <label class="apcig-label"><?php esc_html_e('AI Provider', 'contengen-ai-product-content-image-generator'); ?></label>
                                        <select name="provider" class="apcig-select">
                                            <?php foreach ($apcig_providers as $apcig_provider_id => $apcig_provider_config): ?>
                                            <option value="<?php echo esc_attr($apcig_provider_id); ?>">
                                                <?php echo esc_html($apcig_provider_config['name']); ?>
                                            </option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>

                                <div class="apcig-form-notice apcig-notice-info">
                                    <span class="dashicons dashicons-info"></span>
                                    <p><?php esc_html_e('Note: The selected product must have an existing product image. Lifestyle and A+ images will be generated based on that image.', 'contengen-ai-product-content-image-generator'); ?></p>
                                </div>

                                <button type="submit" class="apcig-btn apcig-btn-primary apcig-btn-large">
                                    <span class="dashicons dashicons-camera"></span>
                                    <?php esc_html_e('Generate Lifestyle Images', 'contengen-ai-product-content-image-generator'); ?>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Preview Panel -->
                <div class="apcig-preview-panel">
                    <div class="apcig-card">
                        <div class="apcig-card-header">
                            <h3><?php esc_html_e('Generated Images', 'contengen-ai-product-content-image-generator'); ?></h3>
                        </div>
                        <div class="apcig-card-body">
                            <div id="image-preview-area" class="apcig-preview-area">
                                <div class="apcig-preview-placeholder">
                                    <span class="dashicons dashicons-format-image"></span>
                                    <p><?php esc_html_e('Generated images will appear here', 'contengen-ai-product-content-image-generator'); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Generation History -->
    <div class="apcig-card apcig-mt-xl">
        <div class="apcig-card-header">
            <h3><?php esc_html_e('Recent Generations', 'contengen-ai-product-content-image-generator'); ?></h3>
            <button type="button" class="apcig-btn apcig-btn-secondary apcig-btn-sm" id="clear-history">
                <?php esc_html_e('Clear History', 'contengen-ai-product-content-image-generator'); ?>
            </button>
        </div>
        <div class="apcig-card-body">
            <div id="generation-history" class="apcig-history-grid">
                <div class="apcig-history-placeholder">
                    <span class="dashicons dashicons-clock"></span>
                    <p><?php esc_html_e('Your recent image generations will appear here', 'contengen-ai-product-content-image-generator'); ?></p>
                </div>
            </div>
        </div>
    </div>
</div>
