<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>
<div class="wrap mt-primelink-wrap mt_primelink-statistics">
    <?php
    ob_start();
    ?>
    <span class="mt_primelink-summary-pill"><?php esc_html_e( 'HOT', 'primelink' ); ?></span>
    <?php
    $header_actions     = ob_get_clean();
    $header_eyebrow     = __( 'Statistics & Analytics', 'primelink' );
    $header_title       = __( 'Statistics & Analytics Dashboard', 'primelink' );
    $header_description = __( 'Comprehensive insights into your import and export performance, trends, and history.', 'primelink' );

    include MT_PRIMELINK_PATH . 'templates/admin/partials/header.php';
    ?>

    <!-- Tabs -->
    <div class="mt_primelink-tabs" style="margin-bottom:20px;">
        <button class="button mt_primelink-tab-button active" data-tab="import">
            <?php esc_html_e( 'Import', 'primelink' ); ?>
        </button>
        <button class="button mt_primelink-tab-button" data-tab="export">
            <?php esc_html_e( 'Export', 'primelink' ); ?>
        </button>
    </div>

    <!-- Import Tab Content -->
    <div class="mt_primelink-tab-content" id="tab-import" style="display:block;">
        <!-- Type Filter for Import -->
        <div class="mt_primelink-card mt_primelink-card--glass" style="margin-bottom:20px;">
            <div class="mt_primelink-card-body">
                <div class="mt_primelink-form-row" style="display:flex;gap:12px;align-items:center;">
                    <label for="mt_primelink-import-type-filter" style="font-weight:600;"><?php esc_html_e( 'Filter by Type:', 'primelink' ); ?></label>
                    <select id="mt_primelink-import-type-filter" class="widefat" style="max-width:200px;">
                        <option value=""><?php esc_html_e( 'All Types', 'primelink' ); ?></option>
                        <option value="product"><?php esc_html_e( 'Products', 'primelink' ); ?></option>
                        <option value="order"><?php esc_html_e( 'Orders', 'primelink' ); ?></option>
                        <option value="customer"><?php esc_html_e( 'Customers', 'primelink' ); ?></option>
                        <option value="coupon"><?php esc_html_e( 'Coupons', 'primelink' ); ?></option>
                        <option value="category"><?php esc_html_e( 'Product Categories', 'primelink' ); ?></option>
                        <option value="tag"><?php esc_html_e( 'Product Tags', 'primelink' ); ?></option>
                        <option value="attribute"><?php esc_html_e( 'Product Attributes', 'primelink' ); ?></option>
                        <option value="variation"><?php esc_html_e( 'Product Variations', 'primelink' ); ?></option>
                        <option value="review"><?php esc_html_e( 'Product Reviews', 'primelink' ); ?></option>
                        <option value="download"><?php esc_html_e( 'Product Downloads', 'primelink' ); ?></option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Date Range Filter -->
        <div class="mt_primelink-card mt_primelink-card--glass" style="margin-bottom:20px;">
            <div class="mt_primelink-card-body">
                <div class="mt_primelink-form-row" style="display:flex;gap:12px;align-items:flex-end;">
                    <div style="flex:1;">
                        <label for="mt_primelink-stats-date-from"><?php esc_html_e( 'From Date', 'primelink' ); ?></label>
                        <input type="date" id="mt_primelink-stats-date-from" class="widefat" />
                    </div>
                    <div style="flex:1;">
                        <label for="mt_primelink-stats-date-to"><?php esc_html_e( 'To Date', 'primelink' ); ?></label>
                        <input type="date" id="mt_primelink-stats-date-to" class="widefat" />
                    </div>
                    <div>
                        <button type="button" class="button button-primary" id="mt_primelink-stats-apply-filter">
                            <?php esc_html_e( 'Apply Filter', 'primelink' ); ?>
                        </button>
                        <button type="button" class="button" id="mt_primelink-stats-reset-filter">
                            <?php esc_html_e( 'Reset', 'primelink' ); ?>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overview Stats -->
        <div class="mt_primelink-statistics__overview">
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Total Imports', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value" id="stat-total-imports">0</div>
            </div>
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Items Created', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value is-success" id="stat-total-created">0</div>
            </div>
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Items Updated', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value is-info" id="stat-total-updated">0</div>
            </div>
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Items Skipped', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value is-warning" id="stat-total-skipped">0</div>
            </div>
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Errors', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value is-error" id="stat-total-errors">0</div>
            </div>
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Success Rate', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value" id="stat-success-rate">0%</div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="mt_primelink-statistics__charts" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-bottom:20px;">
            <!-- Timeline Chart -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Import Activity Timeline', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <canvas id="chart-timeline" style="max-height:300px;"></canvas>
                </div>
            </div>

            <!-- Status Distribution -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Status Distribution', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <canvas id="chart-status" style="max-height:300px;"></canvas>
                </div>
            </div>
        </div>

        <!-- Performance & Type Stats -->
        <div class="mt_primelink-statistics__details" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-bottom:20px;">
            <!-- Performance Stats -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Performance Metrics', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Average Runtime', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-avg-runtime">-</span>
                    </div>
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Total Runtime', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-total-runtime">-</span>
                    </div>
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Average Speed', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-avg-speed">-</span>
                    </div>
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Min Runtime', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-min-runtime">-</span>
                    </div>
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Max Runtime', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-max-runtime">-</span>
                    </div>
                </div>
            </div>

            <!-- Type Distribution -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Imports by Type', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <canvas id="chart-types" style="max-height:300px;"></canvas>
                </div>
            </div>
        </div>

        <!-- Top Imports & Recent Activity -->
        <div class="mt_primelink-statistics__tables" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:20px;">
            <!-- Top Imports -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Top 10 Imports', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <div id="stat-top-imports" class="mt_primelink-stat-table">
                        <div class="mt_primelink-empty"><?php esc_html_e( 'Loading...', 'primelink' ); ?></div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Recent Activity', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <div id="stat-recent-activity" class="mt_primelink-stat-table">
                        <div class="mt_primelink-empty"><?php esc_html_e( 'Loading...', 'primelink' ); ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Tab Content -->
    <div class="mt_primelink-tab-content" id="tab-export" style="display:none;">
        <!-- Type Filter for Export -->
        <div class="mt_primelink-card mt_primelink-card--glass" style="margin-bottom:20px;">
            <div class="mt_primelink-card-body">
                <div class="mt_primelink-form-row" style="display:flex;gap:12px;align-items:center;">
                    <label for="mt_primelink-export-type-filter" style="font-weight:600;"><?php esc_html_e( 'Filter by Type:', 'primelink' ); ?></label>
                    <select id="mt_primelink-export-type-filter" class="widefat" style="max-width:200px;">
                        <option value=""><?php esc_html_e( 'All Types', 'primelink' ); ?></option>
                        <option value="product"><?php esc_html_e( 'Products', 'primelink' ); ?></option>
                        <option value="order"><?php esc_html_e( 'Orders', 'primelink' ); ?></option>
                        <option value="customer"><?php esc_html_e( 'Customers', 'primelink' ); ?></option>
                        <option value="coupon"><?php esc_html_e( 'Coupons', 'primelink' ); ?></option>
                        <option value="category"><?php esc_html_e( 'Product Categories', 'primelink' ); ?></option>
                        <option value="tag"><?php esc_html_e( 'Product Tags', 'primelink' ); ?></option>
                        <option value="attribute"><?php esc_html_e( 'Product Attributes', 'primelink' ); ?></option>
                        <option value="variation"><?php esc_html_e( 'Product Variations', 'primelink' ); ?></option>
                        <option value="review"><?php esc_html_e( 'Product Reviews', 'primelink' ); ?></option>
                        <option value="download"><?php esc_html_e( 'Product Downloads', 'primelink' ); ?></option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Date Range Filter -->
        <div class="mt_primelink-card mt_primelink-card--glass" style="margin-bottom:20px;">
            <div class="mt_primelink-card-body">
                <div class="mt_primelink-form-row" style="display:flex;gap:12px;align-items:flex-end;">
                    <div style="flex:1;">
                        <label for="mt_primelink-export-stats-date-from"><?php esc_html_e( 'From Date', 'primelink' ); ?></label>
                        <input type="date" id="mt_primelink-export-stats-date-from" class="widefat" />
                    </div>
                    <div style="flex:1;">
                        <label for="mt_primelink-export-stats-date-to"><?php esc_html_e( 'To Date', 'primelink' ); ?></label>
                        <input type="date" id="mt_primelink-export-stats-date-to" class="widefat" />
                    </div>
                    <div>
                        <button type="button" class="button button-primary" id="mt_primelink-export-stats-apply-filter">
                            <?php esc_html_e( 'Apply Filter', 'primelink' ); ?>
                        </button>
                        <button type="button" class="button" id="mt_primelink-export-stats-reset-filter">
                            <?php esc_html_e( 'Reset', 'primelink' ); ?>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overview Stats -->
        <div class="mt_primelink-statistics__overview">
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Total Exports', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value" id="stat-export-total-exports">0</div>
            </div>
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Items Exported', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value is-success" id="stat-export-total-exported">0</div>
            </div>
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Errors', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value is-error" id="stat-export-total-errors">0</div>
            </div>
            <div class="mt_primelink-dash-card glass">
                <div class="mt_primelink-dash-label"><?php esc_html_e( 'Success Rate', 'primelink' ); ?></div>
                <div class="mt_primelink-dash-value" id="stat-export-success-rate">0%</div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="mt_primelink-statistics__charts" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-bottom:20px;">
            <!-- Timeline Chart -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Export Activity Timeline', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <canvas id="chart-export-timeline" style="max-height:300px;"></canvas>
                </div>
            </div>

            <!-- Status Distribution -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Status Distribution', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <canvas id="chart-export-status" style="max-height:300px;"></canvas>
                </div>
            </div>
        </div>

        <!-- Performance & Type Stats -->
        <div class="mt_primelink-statistics__details" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px;margin-bottom:20px;">
            <!-- Performance Stats -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Performance Metrics', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Average Runtime', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-export-avg-runtime">-</span>
                    </div>
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Total Runtime', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-export-total-runtime">-</span>
                    </div>
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Average Speed', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-export-avg-speed">-</span>
                    </div>
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Min Runtime', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-export-min-runtime">-</span>
                    </div>
                    <div class="mt_primelink-stat-metric">
                        <span class="mt_primelink-stat-metric__label"><?php esc_html_e( 'Max Runtime', 'primelink' ); ?></span>
                        <span class="mt_primelink-stat-metric__value" id="stat-export-max-runtime">-</span>
                    </div>
                </div>
            </div>

            <!-- Type Distribution -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Exports by Type', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <canvas id="chart-export-types" style="max-height:300px;"></canvas>
                </div>
            </div>
        </div>

        <!-- Top Exports & Recent Activity -->
        <div class="mt_primelink-statistics__tables" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:20px;">
            <!-- Top Exports -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Top 10 Exports', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <div id="stat-top-exports" class="mt_primelink-stat-table">
                        <div class="mt_primelink-empty"><?php esc_html_e( 'Loading...', 'primelink' ); ?></div>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="mt_primelink-card mt_primelink-card--glass">
                <div class="mt_primelink-card-header">
                    <h3><?php esc_html_e( 'Recent Activity', 'primelink' ); ?></h3>
                </div>
                <div class="mt_primelink-card-body">
                    <div id="stat-export-recent-activity" class="mt_primelink-stat-table">
                        <div class="mt_primelink-empty"><?php esc_html_e( 'Loading...', 'primelink' ); ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
