<?php
/**
 * Image Boost — Dashboard View
 */

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

$imgboost_stats = ImgBoost_Stats::get_dashboard_stats();
$imgboost_level = get_option('imgboost_compression_level', 'pro');
$imgboost_levels = ['normal', 'pro'];
?>

<div class="imgboost-wrap">
    <!-- Hero Header -->
    <div class="imgboost-header">
        <div class="imgboost-header-content">
            <div class="imgboost-header-left">
                <div class="imgboost-logo">
                    <span class="dashicons dashicons-images-alt2"></span>
                </div>
                <div>
                    <h1><?php esc_html_e('Image Boost', 'image-boost'); ?></h1>
                    <p class="imgboost-subtitle"><?php esc_html_e('Powerful Local Image Optimization — Zero API, Zero Limits', 'image-boost'); ?></p>
                </div>
            </div>
            <div class="imgboost-header-right">
                <div class="imgboost-engine-badge">
                    <span class="imgboost-engine-icon">⚙️</span>
                    <span><?php echo esc_html(ucfirst($imgboost_stats['engine'])); ?> Engine</span>
                </div>
                <div class="imgboost-format-badges">
                    <?php if ($imgboost_stats['webp_support']) : ?>
                        <span class="imgboost-fmt-badge imgboost-fmt-active">WebP ✓</span>
                    <?php else : ?>
                        <span class="imgboost-fmt-badge imgboost-fmt-inactive">WebP ✗</span>
                    <?php endif; ?>
                    <?php if ($imgboost_stats['avif_support']) : ?>
                        <span class="imgboost-fmt-badge imgboost-fmt-active">AVIF ✓</span>
                    <?php else : ?>
                        <span class="imgboost-fmt-badge imgboost-fmt-inactive">AVIF ✗</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="imgboost-stats-grid">
        <div class="imgboost-stat-card imgboost-stat-total">
            <div class="imgboost-stat-icon">🖼️</div>
            <div class="imgboost-stat-info">
                <span class="imgboost-stat-number" id="stat-total"><?php echo esc_html($imgboost_stats['total_images']); ?></span>
                <span class="imgboost-stat-label"><?php esc_html_e('Total Images', 'image-boost'); ?></span>
            </div>
        </div>

        <div class="imgboost-stat-card imgboost-stat-optimized">
            <div class="imgboost-stat-icon">✅</div>
            <div class="imgboost-stat-info">
                <span class="imgboost-stat-number" id="stat-optimized"><?php echo esc_html($imgboost_stats['optimized_count']); ?></span>
                <span class="imgboost-stat-label"><?php esc_html_e('Optimized', 'image-boost'); ?></span>
            </div>
        </div>

        <div class="imgboost-stat-card imgboost-stat-saved">
            <div class="imgboost-stat-icon">💾</div>
            <div class="imgboost-stat-info">
                <span class="imgboost-stat-number" id="stat-saved"><?php echo esc_html($imgboost_stats['total_saved_human']); ?></span>
                <span class="imgboost-stat-label"><?php esc_html_e('Space Saved', 'image-boost'); ?></span>
            </div>
        </div>

        <div class="imgboost-stat-card imgboost-stat-avg">
            <div class="imgboost-stat-icon">📊</div>
            <div class="imgboost-stat-info">
                <span class="imgboost-stat-number" id="stat-avg"><?php echo esc_html($imgboost_stats['avg_savings']); ?>%</span>
                <span class="imgboost-stat-label"><?php esc_html_e('Avg. Compression', 'image-boost'); ?></span>
            </div>
        </div>
    </div>

    <!-- Progress Ring & Quick Actions -->
    <div class="imgboost-progress-section" style="display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap;">
        
        <div class="imgboost-progress-left" style="display: flex; align-items: center; gap: 30px; flex-wrap: wrap;">
            <div class="imgboost-progress-ring-container">
                <svg class="imgboost-progress-ring" viewBox="0 0 120 120">
                    <circle class="imgboost-progress-bg" cx="60" cy="60" r="52" />
                    <circle class="imgboost-progress-fill" cx="60" cy="60" r="52"
                        style="stroke-dashoffset: <?php echo esc_attr(326.7 - (326.7 * $imgboost_stats['percent_done'] / 100)); ?>;" />
                </svg>
                <div class="imgboost-progress-text">
                    <span class="imgboost-progress-pct"><?php echo esc_html($imgboost_stats['percent_done']); ?>%</span>
                    <span class="imgboost-progress-label"><?php esc_html_e('Optimized', 'image-boost'); ?></span>
                </div>
            </div>
            <div class="imgboost-progress-info">
                <p><strong><?php echo esc_html($imgboost_stats['optimized_count']); ?></strong> <?php esc_html_e('of', 'image-boost'); ?> <strong><?php echo esc_html($imgboost_stats['total_images']); ?></strong> <?php esc_html_e('images optimized', 'image-boost'); ?></p>
                
                <?php if ($imgboost_stats['pending_count'] > 0) : ?>
                    <a href="<?php echo esc_url(admin_url('admin.php?page=image-boost-bulk')); ?>" class="imgboost-btn imgboost-btn-primary">
                        ⚡ <?php
                        /* translators: %d: number of remaining images */
                        printf(esc_html__('Optimize %d Remaining Images', 'image-boost'), esc_html($imgboost_stats['pending_count']));
                        ?>
                    </a>
                <?php else : ?>
                    <div class="imgboost-all-done">
                        <span>🎉</span>
                        <p><?php esc_html_e('All images are optimized!', 'image-boost'); ?></p>
                    </div>
                <?php endif; ?>
            </div>
        </div>

        <div class="imgboost-progress-right imgboost-quick-toggles" style="flex: 1; min-width: 250px; max-width: 320px; background: rgba(0,0,0,0.15); padding: 25px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); margin-left: auto;">
            <h4 style="margin: 0 0 20px 0; color: #fff; font-size: 15px; display: flex; align-items: center; gap: 8px;">
                <span class="dashicons dashicons-admin-generic"></span> <?php esc_html_e('Quick Toggles', 'image-boost'); ?>
            </h4>
            
            <div class="imgboost-quick-toggle-item" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                <span style="font-size: 13px; font-weight: 500; color: var(--imgboost-text-muted);"><?php esc_html_e('Auto-Optimize', 'image-boost'); ?></span>
                <label class="imgboost-toggle">
                    <input type="checkbox" class="imgboost-quick-toggle-btn" data-setting="imgboost_auto_optimize" <?php checked(get_option('imgboost_auto_optimize', 1), 1); ?>>
                    <span class="imgboost-toggle-slider" style="transform: scale(0.85); transform-origin: right;"></span>
                </label>
            </div>

            <div class="imgboost-quick-toggle-item" style="display: flex; justify-content: space-between; align-items: center;">
                <span style="font-size: 13px; font-weight: 500; color: var(--imgboost-text-muted);"><?php esc_html_e('Keep Original Backups', 'image-boost'); ?></span>
                <label class="imgboost-toggle">
                    <input type="checkbox" class="imgboost-quick-toggle-btn" data-setting="imgboost_backup_enabled" <?php checked(get_option('imgboost_backup_enabled', 1), 1); ?>>
                    <span class="imgboost-toggle-slider" style="transform: scale(0.85); transform-origin: right;"></span>
                </label>
            </div>
        </div>

    </div>

    <!-- Analytics Chart & Slider -->
    <div class="imgboost-analytics-grid">
        <div class="imgboost-chart-card">
            <h3><span class="dashicons dashicons-chart-area"></span> <?php esc_html_e('30-Day Savings Data', 'image-boost'); ?></h3>
            <div style="position: relative; flex-grow: 1; min-height: 200px; width: 100%; margin-top: 15px;">
                <canvas id="imgboost-savings-chart"></canvas>
            </div>
        </div>
        
        <div class="imgboost-slider-card">
            <h3><span class="dashicons dashicons-image-flip-horizontal"></span> <?php esc_html_e('Before / After Comparison', 'image-boost'); ?></h3>
            <p style="color: var(--imgboost-text-muted); font-size: 13px; margin-top: 15px;">
                <?php esc_html_e('Optimize an image and use the Restore button in the Media Library to compare before and after versions.', 'image-boost'); ?>
            </p>
        </div>
    </div>

    <!-- Compression Level Cards -->
    <div class="imgboost-section">
        <h2 class="imgboost-section-title"><?php esc_html_e('Compression Level', 'image-boost'); ?></h2>
        <div class="imgboost-levels-grid">
            <?php
            $imgboost_level_data = [
                'normal' => [
                    'icon'    => '🟢',
                    'name'    => __('Normal', 'image-boost'),
                    'tag'     => __('Lossless', 'image-boost'),
                    'desc'    => __('Strips metadata without any quality loss. Perfect for photographers.', 'image-boost'),
                    'savings' => '5-15%',
                    'color'   => '#28a745',
                ],
                'pro' => [
                    'icon'    => '🔵',
                    'name'    => __('Pro', 'image-boost'),
                    'tag'     => __('Smart Lossy', 'image-boost'),
                    'desc'    => __('Intelligent compression with imperceptible quality loss. Best for most sites.', 'image-boost'),
                    'savings' => '40-60%',
                    'color'   => '#007bff',
                ],
            ];

            foreach ($imgboost_level_data as $imgboost_key => $imgboost_data) :
                $imgboost_is_active = $imgboost_level === $imgboost_key;
                $imgboost_locked_class = '';
            ?>
                <div class="imgboost-level-card <?php echo $imgboost_is_active ? 'imgboost-level-active' : ''; ?>" data-level="<?php echo esc_attr($imgboost_key); ?>" style="--level-color: <?php echo esc_attr($imgboost_data['color']); ?>;">
                    <div class="imgboost-level-header">
                        <span class="imgboost-level-icon"><?php echo esc_html($imgboost_data['icon']); ?></span>
                        <span class="imgboost-level-name"><?php echo esc_html($imgboost_data['name']); ?></span>
                        <span class="imgboost-level-tag" style="background: <?php echo esc_attr($imgboost_data['color']); ?>20; color: <?php echo esc_attr($imgboost_data['color']); ?>;">
                            <?php echo esc_html($imgboost_data['tag']); ?>
                        </span>
                    </div>
                    <p class="imgboost-level-desc"><?php echo esc_html($imgboost_data['desc']); ?></p>
                    <div class="imgboost-level-savings">
                        <span class="imgboost-level-savings-label"><?php esc_html_e('Expected savings:', 'image-boost'); ?></span>
                        <span class="imgboost-level-savings-value"><?php echo esc_html($imgboost_data['savings']); ?></span>
                    </div>
                    <?php if ($imgboost_is_active) : ?>
                        <div class="imgboost-level-active-badge">✓ <?php esc_html_e('Active', 'image-boost'); ?></div>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>

            <!-- Ultra PRO teaser card (display only, no code) -->
            <div class="imgboost-level-card" style="--level-color: #a855f7; opacity: 0.75; border: 1px dashed #a855f7;">
                <div class="imgboost-level-header">
                    <span class="imgboost-level-icon">🟣</span>
                    <span class="imgboost-level-name"><?php esc_html_e('Ultra', 'image-boost'); ?></span>
                    <span class="imgboost-level-tag" style="background:#a855f720;color:#a855f7;"><?php esc_html_e('Maximum', 'image-boost'); ?></span>
                    <span style="margin-left:auto;background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;">PRO</span>
                </div>
                <p class="imgboost-level-desc"><?php esc_html_e('Aggressive compression using advanced algorithms. Up to 70-85% savings. Ideal for mobile-first sites.', 'image-boost'); ?></p>
                <div class="imgboost-level-savings">
                    <span class="imgboost-level-savings-label"><?php esc_html_e('Expected savings:', 'image-boost'); ?></span>
                    <span class="imgboost-level-savings-value" style="color:#a855f7;">70-85%</span>
                </div>
                <a href="https://eslamdev.com/my_plugin/image-boost/" target="_blank" rel="noopener noreferrer" style="display:block;margin-top:12px;text-align:center;background:linear-gradient(135deg,#a855f7,#6366f1);color:#fff;padding:8px;border-radius:6px;font-size:13px;font-weight:600;text-decoration:none;">
                    <?php esc_html_e('Upgrade to Pro →', 'image-boost'); ?>
                </a>
            </div>
        </div>
    </div>
</div>
