<?php
/**
 * Bulk Sync View
 *
 * Variables in scope:
 *   $total     - total attachment count
 *   $synced    - synced count
 *   $remaining - remaining count
 *
 * @package Wrenio_Media_Offload
 */

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

$wrenio_percent = $total > 0 ? round( ( $synced / $total ) * 100, 1 ) : 0;
?>

<div class="wrenio-media-offload-admin">

    <div class="card">
        <h2 class="title"><?php echo esc_html__( 'Current Status', 'wrenio-media-offload' ); ?></h2>

        <table class="widefat striped" style="margin-bottom: 20px;">
            <tbody>
                <tr>
                    <td><strong><?php echo esc_html__( 'Total media items', 'wrenio-media-offload' ); ?></strong></td>
                    <td><?php echo esc_html( number_format_i18n( $total ) ); ?></td>
                </tr>
                <tr>
                    <td><strong><?php echo esc_html__( 'Synced to R2', 'wrenio-media-offload' ); ?></strong></td>
                    <td><?php echo esc_html( number_format_i18n( $synced ) ); ?> (<?php echo esc_html( $wrenio_percent ); ?>%)</td>
                </tr>
                <tr>
                    <td><strong><?php echo esc_html__( 'Remaining', 'wrenio-media-offload' ); ?></strong></td>
                    <td><?php echo esc_html( number_format_i18n( $remaining ) ); ?></td>
                </tr>
            </tbody>
        </table>

        <div style="background: #f0f0f1; border-radius: 4px; height: 24px; margin-bottom: 20px; overflow: hidden;">
            <div id="overall-progress-bar" style="background: #2271b1; height: 100%; width: <?php echo esc_attr( $wrenio_percent ); ?>%; transition: width 0.3s;"></div>
        </div>
    </div>

    <div class="card" style="margin-top: 20px;">
        <h2 class="title"><?php echo esc_html__( 'Sync Options', 'wrenio-media-offload' ); ?></h2>

        <table class="form-table">
            <tr>
                <th scope="row"><?php echo esc_html__( 'Mode', 'wrenio-media-offload' ); ?></th>
                <td>
                    <label>
                        <input type="radio" name="sync_mode" value="full" checked />
                        <?php echo esc_html__( 'Full sync — process unsynced attachments', 'wrenio-media-offload' ); ?>
                    </label>
                    <br />
                    <label>
                        <input type="radio" name="sync_mode" value="incremental" />
                        <?php echo esc_html__( 'Incremental — upload missing size variants for already-synced attachments', 'wrenio-media-offload' ); ?>
                    </label>
                </td>
            </tr>
            <tr>
                <th scope="row">
                    <label for="batch_size"><?php echo esc_html__( 'Batch Size', 'wrenio-media-offload' ); ?></label>
                </th>
                <td>
                    <input type="number" id="batch_size" value="10" min="1" max="50" />
                    <p class="description"><?php echo esc_html__( 'Files processed per batch (1–50). Lower values are safer on slow hosts.', 'wrenio-media-offload' ); ?></p>
                </td>
            </tr>
            <tr>
                <th scope="row"><?php echo esc_html__( 'Regenerate Metadata', 'wrenio-media-offload' ); ?></th>
                <td>
                    <label>
                        <input type="checkbox" id="regenerate_metadata" value="1" />
                        <?php echo esc_html__( 'Rebuild attachment metadata before uploading (for items missing thumbnail metadata)', 'wrenio-media-offload' ); ?>
                    </label>
                </td>
            </tr>
        </table>

        <p>
            <button type="button" id="start-bulk-sync" class="button button-primary"><?php echo esc_html__( 'Start Sync', 'wrenio-media-offload' ); ?></button>
            <button type="button" id="stop-bulk-sync" class="button button-secondary" style="display: none;"><?php echo esc_html__( 'Stop', 'wrenio-media-offload' ); ?></button>
            <span id="bulk-sync-status" style="margin-left: 12px;"></span>
        </p>

        <div id="batch-progress" style="display: none; margin-top: 16px;">
            <div style="background: #f0f0f1; border-radius: 4px; height: 20px; overflow: hidden;">
                <div id="batch-progress-bar" style="background: #00a32a; height: 100%; width: 0; transition: width 0.3s;"></div>
            </div>
            <p id="batch-progress-status" style="margin-top: 6px; font-size: 13px;"></p>
        </div>
    </div>

    <div class="card" style="margin-top: 20px;">
        <h2 class="title"><?php echo esc_html__( 'Sync Log', 'wrenio-media-offload' ); ?></h2>
        <div id="bulk-sync-log" style="background: #f6f7f7; border: 1px solid #c3c4c7; border-radius: 4px; padding: 10px; max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 12px;"></div>
    </div>
</div>
