<?php
// phpcs:ignoreFile WordPress.NamingConventions.PrefixAllGlobals

defined( 'ABSPATH' ) || exit;

$is_pro = zs_seo_is_pro();

// Get all images from Media Library
$images = get_posts( [
    'post_type'      => 'attachment',
    'post_mime_type' => [ 'image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml' ],
    'post_status'    => 'inherit',
    'posts_per_page' => 200,
    'orderby'        => 'date',
    'order'          => 'DESC',
] );

// Separate: missing alt vs has alt
$missing_alt = [];
$has_alt     = [];
$total_size  = 0;
foreach ( $images as $img ) {
    $alt = get_post_meta( $img->ID, '_wp_attachment_image_alt', true );
    if ( empty( trim( $alt ) ) ) {
        $missing_alt[] = $img;
    } else {
        $has_alt[] = $img;
    }
    $file = get_attached_file( $img->ID );
    if ( $file && file_exists( $file ) ) {
        $total_size += filesize( $file );
    }
}

$total_size_mb = round( $total_size / 1024 / 1024, 1 );
?>

<div class="wrap zs-seo-wrap">
    <div class="zs-seo-header">
        <h1>&#x1F5BC; <?php esc_html_e('Image Manager', 'zs-seo-audit-optimization'); ?></h1>
        <p><?php esc_html_e('Manage alt text, optimize file sizes, and convert images to modern formats.', 'zs-seo-audit-optimization'); ?></p>
    </div>

    <!-- ── Tab Navigation ── -->
    <div class="zs-seo-tab-nav">
        <button class="zs-seo-tab-btn active" data-tab="alt-text">
            &#x270F; <?php esc_html_e('Alt Text Manager', 'zs-seo-audit-optimization'); ?>
            <?php if ( count( $missing_alt ) > 0 ) : ?>
                <span class="zs-seo-tab-badge zs-seo-tab-badge--warn"><?php echo count( $missing_alt ); ?></span>
            <?php endif; ?>
        </button>
        
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         TAB 1: Alt Text Manager
    ═══════════════════════════════════════════════════════════ -->
    <div class="zs-seo-tab-panel" id="zs-seo-tab-alt-text">

        <!-- Stats Bar -->
        <div class="zs-seo-cards" style="grid-template-columns: repeat(4, 1fr);">
            <div class="zs-seo-card">
                <div class="zs-seo-card-icon">&#x1F5BC;</div>
                <div class="zs-seo-card-data">
                    <span class="zs-seo-card-number"><?php echo count( $images ); ?></span>
                    <span class="zs-seo-card-label"><?php esc_html_e('Total Images', 'zs-seo-audit-optimization'); ?></span>
                </div>
            </div>
            <div class="zs-seo-card">
                <div class="zs-seo-card-icon">&#x1F534;</div>
                <div class="zs-seo-card-data">
                    <span class="zs-seo-card-number" style="color:#d63031;"><?php echo count( $missing_alt ); ?></span>
                    <span class="zs-seo-card-label"><?php esc_html_e('Missing Alt Text', 'zs-seo-audit-optimization'); ?></span>
                </div>
            </div>
            <div class="zs-seo-card">
                <div class="zs-seo-card-icon">&#x2705;</div>
                <div class="zs-seo-card-data">
                    <span class="zs-seo-card-number" style="color:#00b894;"><?php echo count( $has_alt ); ?></span>
                    <span class="zs-seo-card-label"><?php esc_html_e('Has Alt Text', 'zs-seo-audit-optimization'); ?></span>
                </div>
            </div>
            <div class="zs-seo-card">
                <div class="zs-seo-card-icon">&#x1F4CA;</div>
                <div class="zs-seo-card-data">
                    <span class="zs-seo-card-number" style="color:#00b894;"><?php echo esc_html( count( $images ) > 0 ? round( ( count( $has_alt ) / count( $images ) ) * 100 ) : 0 ); ?>%
                    </span>
                    <span class="zs-seo-card-label"><?php esc_html_e('Alt Coverage', 'zs-seo-audit-optimization'); ?></span>
                </div>
            </div>
        </div>

        <?php if ( ! empty( $missing_alt ) ) : ?>
        <!-- Bulk Actions Bar -->
        <div class="zs-seo-box">
            <div class="zs-seo-bulk-bar">
                <label class="zs-seo-check-all-wrap">
                    <input type="checkbox" id="zs-seo-select-all" />
                    <strong><?php esc_html_e('Select All', 'zs-seo-audit-optimization'); ?></strong>
                </label>
                <div class="zs-seo-bulk-actions">
                    <button type="button" id="zs-seo-bulk-auto-generate" class="button button-primary" disabled>
                        &#x1F916; <?php esc_html_e('Auto Generate Alt (Selected)', 'zs-seo-audit-optimization'); ?>
                    </button>
                    <button type="button" id="zs-seo-bulk-save" class="button" disabled>
                        &#x1F4BE; <?php esc_html_e('Save All Edited', 'zs-seo-audit-optimization'); ?>
                    </button>
                    <span id="zs-seo-selected-count" class="zs-seo-selected-label">0 selected</span>
                </div>
            </div>
        </div>

        <!-- Image Grid — Missing Alt -->
        <div class="zs-seo-box">
            <h2>&#x1F534; <?php esc_html_e('Missing Alt Text', 'zs-seo-audit-optimization'); ?> <span style="font-size:13px;font-weight:400;color:#636e72;">(<?php echo count($missing_alt); ?> images)</span></h2>
            <div class="zs-seo-image-grid" id="zs-seo-image-grid">
                <?php foreach ( $missing_alt as $img ) :
                    $src      = wp_get_attachment_image_url( $img->ID, 'thumbnail' );
                    $full_src = wp_get_attachment_image_url( $img->ID, 'medium' );
                    $filename = basename( get_attached_file( $img->ID ) );
                    $title    = $img->post_title;
                ?>
                <div class="zs-seo-img-card" data-id="<?php echo esc_attr( $img->ID ); ?>" data-src="<?php echo esc_url( $full_src ); ?>" data-filename="<?php echo esc_attr( $filename ); ?>">
                    <div class="zs-seo-img-check">
                        <input type="checkbox" class="zs-seo-img-select" data-id="<?php echo esc_attr( $img->ID ); ?>" />
                    </div>
                    <div class="zs-seo-img-preview">
                        <?php if ( $src ) : ?>
                            <img src="<?php echo esc_url( $src ); ?>" alt="" loading="lazy" />
                        <?php else : ?>
                            <div class="zs-seo-img-placeholder">SVG</div>
                        <?php endif; ?>
                    </div>
                    <div class="zs-seo-img-filename" title="<?php echo esc_attr( $filename ); ?>">
                        <?php echo esc_html( mb_strimwidth( $filename, 0, 25, '...' ) ); ?>
                    </div>
                    <div class="zs-seo-img-alt-wrap">
                        <input type="text"
                               class="zs-seo-alt-input widefat"
                               data-id="<?php echo esc_attr( $img->ID ); ?>"
                               placeholder="<?php esc_attr_e('Enter alt text...', 'zs-seo-audit-optimization'); ?>"
                               value="" />
                    </div>
                    <div class="zs-seo-img-actions">
                        <button type="button"
                                class="button button-small zs-seo-auto-generate"
                                data-id="<?php echo esc_attr( $img->ID ); ?>"
                                data-src="<?php echo esc_url( $full_src ); ?>"
                                data-filename="<?php echo esc_attr( $filename ); ?>"
                                data-title="<?php echo esc_attr( $title ); ?>">
                            &#x1F916; <?php esc_html_e('Auto', 'zs-seo-audit-optimization'); ?>
                        </button>
                        <button type="button"
                                class="button button-primary button-small zs-seo-save-alt"
                                data-id="<?php echo esc_attr( $img->ID ); ?>">
                            &#x1F4BE; <?php esc_html_e('Save', 'zs-seo-audit-optimization'); ?>
                        </button>
                    </div>
                    <div class="zs-seo-img-status" id="zs-seo-status-<?php echo esc_attr( $img->ID ); ?>"></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Already has alt text -->
        <?php if ( ! empty( $has_alt ) ) : ?>
        <div class="zs-seo-box">
            <h2>&#x2705; <?php esc_html_e('Images With Alt Text', 'zs-seo-audit-optimization'); ?> <span style="font-size:13px;font-weight:400;color:#636e72;">(<?php echo count($has_alt); ?> images)</span></h2>
            <div class="zs-seo-image-grid zs-seo-image-grid-done">
                <?php foreach ( $has_alt as $img ) :
                    $src = wp_get_attachment_image_url( $img->ID, 'thumbnail' );
                    $alt = get_post_meta( $img->ID, '_wp_attachment_image_alt', true );
                    $filename = basename( get_attached_file( $img->ID ) );
                ?>
                <div class="zs-seo-img-card zs-seo-img-done" data-id="<?php echo esc_attr( $img->ID ); ?>">
                    <div class="zs-seo-img-preview">
                        <?php if ( $src ) : ?>
                            <img src="<?php echo esc_url( $src ); ?>" alt="<?php echo esc_attr( $alt ); ?>" loading="lazy" />
                        <?php else : ?>
                            <div class="zs-seo-img-placeholder">SVG</div>
                        <?php endif; ?>
                        <div class="zs-seo-img-done-badge">&#x2713;</div>
                    </div>
                    <div class="zs-seo-img-filename"><?php echo esc_html( mb_strimwidth( $filename, 0, 25, '...' ) ); ?></div>
                    <div class="zs-seo-img-alt-current"><?php echo esc_html( mb_strimwidth( $alt, 0, 40, '...' ) ); ?></div>
                    <div class="zs-seo-img-actions">
                        <button type="button" class="button button-small zs-seo-edit-alt" data-id="<?php echo esc_attr( $img->ID ); ?>" data-alt="<?php echo esc_attr( $alt ); ?>">
                            &#x270F; <?php esc_html_e('Edit', 'zs-seo-audit-optimization'); ?>
                        </button>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>
    </div><!-- /tab-alt-text -->

    
</div><!-- /wrap -->
