<?php defined( 'ABSPATH' ) || exit; ?>

<div class="afi-header">

    <h2 class="afi-title">Overview</h2>
    <p class="afi-subtitle">Welcome back to your image generation dashboard.</p>
</div>

<?php
// Calculate Dynamic Stats
$cafi_count_posts = wp_count_posts('post');
$cafi_total_posts = $cafi_count_posts->publish;

$cafi_missing_images_query = new WP_Query([
    'post_type' => 'post',
    'post_status' => 'publish',
    'posts_per_page' => -1,
    'fields' => 'ids', // Performance: only get IDs
    'meta_query' => [ // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
        [
            'key' => '_thumbnail_id',
            'compare' => 'NOT EXISTS'
        ]
    ]
]);
$cafi_missing_images_count = $cafi_missing_images_query->found_posts;
wp_reset_postdata();
?>

<!-- Stats -->
<div class="afi-stats-grid">
    <div class="afi-card">
        <div style="display:flex; justify-content:space-between; align-items:start;">
            <div>
                <div style="font-size:0.875rem; color:var(--afi-text-muted);">Total Posts</div>
                <div class="afi-stat-value"><?php echo esc_html( number_format_i18n($cafi_total_posts) ); ?></div>
            </div>
            <span class="material-symbols-outlined" style="color:var(--afi-primary); background:rgba(19,91,236,0.1); padding:8px; border-radius:8px;">article</span>
        </div>
    </div>
    
    <div class="afi-card">
        <div style="display:flex; justify-content:space-between; align-items:start;">
            <div>
                <div style="font-size:0.875rem; color:var(--afi-text-muted);">Missing Images</div>
                <div class="afi-stat-value"><?php echo esc_html( number_format_i18n($cafi_missing_images_count) ); ?></div>
            </div>
            <span class="material-symbols-outlined" style="color:#d97706; background:rgba(217,119,6,0.1); padding:8px; border-radius:8px;">image_not_supported</span>
        </div>
    </div>
</div>

<!-- Getting Started Scetion (New) -->
<!-- Getting Started Section -->
<div class="afi-container" style="flex:1;">
    <div class="afi-gs-header-section">
        <div style="flex:1; min-width: 250px;">
            <h1 class="afi-page-title-lrg">Getting Started</h1>
            <p class="afi-page-subtitle-lrg">Follow these four simple steps to automate your featured images and boost your workflow.</p>
        </div>
    </div>
    
    <div class="afi-grid-4">
        <!-- Step 1 -->
        <div class="afi-gs-card">
            <div class="afi-gs-card-top">
                <div class="afi-gs-icon">
                    <span class="material-symbols-outlined">toggle_on</span>
                </div>
                <span class="afi-gs-number">01</span>
            </div>
            <div>
                <h2 class="afi-gs-title">Enable Auto-Generation</h2>
                <p class="afi-gs-desc">Start by turning on the Auto Featured Image option in Settings to automate your visual content.</p>
            </div>
            <a class="afi-gs-link" onclick="jQuery('.afi-nav-item[data-view=\'settings\']').click(); return false;">
                Go to Settings <span class="material-symbols-outlined" style="font-size:1em;">arrow_forward</span>
            </a>
        </div>
        <!-- Step 2 -->
        <div class="afi-gs-card">
            <div class="afi-gs-card-top">
                <div class="afi-gs-icon">
                    <span class="material-symbols-outlined">dashboard_customize</span>
                </div>
                <span class="afi-gs-number">02</span>
            </div>
            <div>
                <h2 class="afi-gs-title">Select Your Layout</h2>
                <p class="afi-gs-desc">Choose a professionally designed layout from our library that best fits your brand's aesthetic.</p>
            </div>
            <a class="afi-gs-link" onclick="jQuery('.afi-nav-item[data-view=\'templates\']').click(); return false;">
                Browse Templates <span class="material-symbols-outlined" style="font-size:1em;">arrow_forward</span>
            </a>
        </div>
        <!-- Step 3 -->
        <div class="afi-gs-card">
            <div class="afi-gs-card-top">
                <div class="afi-gs-icon">
                    <span class="material-symbols-outlined">palette</span>
                </div>
                <span class="afi-gs-number">03</span>
            </div>
            <div>
                <h2 class="afi-gs-title">Customize Styling</h2>
                <p class="afi-gs-desc">Adjust colors, fonts, and positions to match your website's look and feel perfectly.</p>
            </div>
            <a class="afi-gs-link" onclick="jQuery('.afi-nav-item[data-view=\'settings\']').click(); return false;">
                Open Designer <span class="material-symbols-outlined" style="font-size:1em;">arrow_forward</span>
            </a>
        </div>
        <!-- Step 4 -->
        <div class="afi-gs-card">
            <div class="afi-gs-card-top">
                <div class="afi-gs-icon">
                    <span class="material-symbols-outlined">upload_file</span>
                </div>
                <span class="afi-gs-number">04</span>
            </div>
            <div>
                <h2 class="afi-gs-title">Add Brand Logo</h2>
                <p class="afi-gs-desc">Upload your company logo and set its position for a professional touch on every post.</p>
            </div>
            <a class="afi-gs-link" onclick="jQuery('.afi-nav-item[data-view=\'settings\']').click(); return false;">
                Upload Logo <span class="material-symbols-outlined" style="font-size:1em;">arrow_forward</span>
            </a>
        </div>
    </div>
    
    <h2 class="afi-section-header" style="margin-top:3rem; margin-bottom:1rem; font-size:1.4rem;">Quick Actions</h2>
    
    <div class="afi-qa-box">
        <div style="flex:1;">
            <p style="font-size:1.125rem; font-weight:700; margin-bottom:0.25rem; color:var(--afi-text-main);">Ready to see it in action?</p>
            <p style="color:var(--afi-text-muted);">Head over to the settings page to enable your first automated template and preview your results.</p>
        </div>
        <div style="display:flex; gap:0.75rem;">
            <button class="afi-btn-primary" onclick="jQuery('.afi-nav-item[data-view=\'settings\']').click(); return false;">
                Go to Settings
            </button>
            <button class="afi-btn-secondary">
                View Tutorial
            </button>
        </div>
    </div>
    
    <div class="afi-help-box">
        <div style="display:flex; align-items:center; gap:0.75rem;">
            <div style="padding:0.5rem; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,0.05); color:var(--afi-primary);">
                <span class="material-symbols-outlined">support_agent</span>
            </div>
            <div>
                <p style="font-weight:600; color:var(--afi-text-main); margin:0;">Need more help?</p>
                <p style="font-size:0.875rem; color:var(--afi-text-muted); margin:0;">Check out our documentation or contact support.</p>
            </div>
        </div>
        <button style="color:var(--afi-primary); font-size:0.875rem; font-weight:700; background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:0.5rem;">
             Visit Help Center <span class="material-symbols-outlined" style="font-size:1.1em;">open_in_new</span>
        </button>
    </div>
</div>
