<?php

use Meliconnect\Meliconnect\Core\Helpers\Helper;

if (! defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

$headerTitle          = esc_html__('Synchronization Dashboard', 'meliconnect');

require MELICONNECT_PLUGIN_ROOT . 'includes/Core/Views/Partials/header.php';



$sync_settings = Helper::getMeliconnectOptions('sync');
$sync_enabled = empty($sync_settings['meliconnect_sync_enabled']) || $sync_settings['meliconnect_sync_enabled'] === 'false' ? false : true;
$sync_settings_url = admin_url('admin.php?page=meliconnect-settings#synchronization');


?>

<div class="meliconnect-container">

    <?php if (!$sync_enabled): ?>

        <div class="meliconnect-box">
            <div class="meliconnect-notification meliconnect-is-warning">
                <strong>Synchronization is disabled.</strong><br><br>
                You need to enable it from settings to view Sync State and Logs.<br><br>

                <a href="<?php echo esc_url($sync_settings_url); ?>" target="_blank" class="meliconnect-button meliconnect-is-primary">
                    Go to Settings
                </a>
            </div>
        </div>

    <?php else: ?>

        <!-- 🔹 Header -->
        <!-- <div class="meliconnect-level">
            <div class="meliconnect-level-left">
                <div class="meliconnect-level-item">
                    <h2 class="meliconnect-title">Synchronization Process</h2>
                </div>
            </div>


        </div> -->
        <div class="meliconnect-tabs meliconnect-is-boxed">
            <ul>
                <li class="meliconnect-is-active" data-tab="state"><a>Sync State</a></li>
                <li data-tab="logs"><a>Sync Logs</a></li>
            </ul>
        </div>


        <div id="state-tab">

            <div class="meliconnect-level">
                <div class="meliconnect-level-left">
                </div>
                <div class="meliconnect-level-right">
                    <div class="meliconnect-sync-main-button">
                        <button id="run-seeder" class="meliconnect-button meliconnect-is-warning">
                            <span class="meliconnect-icon"><i class="fas fa-seedling"></i></span>
                            <span>Run Seeder</span>
                        </button>
                        <button id="refresh" class="meliconnect-button meliconnect-is-primary " type="button">
                            <span class="meliconnect-icon"><i class="fas fa-sync"></i></span><span>Refresh</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- 🔹 Filters Card -->
            <div class="meliconnect-box" style="position:relative;">
                <div class="meliconnect-loading" style="display:none;">
                    <div class="meliconnect-loader"></div>
                </div>

                <div class="meliconnect-columns">

                    <!-- Status -->
                    <div class="meliconnect-column">
                        <label class="meliconnect-label">Status</label>
                        <div class="meliconnect-control">
                            <div class="meliconnect-select meliconnect-is-fullwidth">
                                <select id="filter-status">
                                    <option value="">All</option>
                                    <option value="pending">Pending</option>
                                    <option value="processing">Processing</option>
                                    <option value="error">Error</option>
                                    <option value="synced">Synced</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="meliconnect-column">
                        <label class="meliconnect-label">Type</label>
                        <div class="meliconnect-control">
                            <div class="meliconnect-select meliconnect-is-fullwidth">
                                <select id="filter-type">
                                    <option value="">All</option>
                                    <option value="stock">Stock</option>
                                    <option value="price">Price</option>
                                    <option value="product">Product</option>
                                    <option value="full">Full</option>
                                </select>
                            </div>
                        </div>
                    </div>



                    <!-- Seller -->
                    <div class="meliconnect-column">
                        <label class="meliconnect-label">Seller</label>
                        <div class="meliconnect-control">
                            <input
                                class="meliconnect-input"
                                type="text"
                                id="filter-seller"
                                placeholder="Seller ID">
                        </div>
                    </div>

                    <!-- Listing -->
                    <div class="meliconnect-column">
                        <label class="meliconnect-label">Listing</label>
                        <div class="meliconnect-control">
                            <input
                                class="meliconnect-input"
                                type="text"
                                id="filter-listing"
                                placeholder="Listing ID">
                        </div>
                    </div>


                    <!-- Needs Sync -->
                    <div class="meliconnect-column">
                        <label class="meliconnect-label">Sync State</label>
                        <div class="meliconnect-control">
                            <div class="meliconnect-select meliconnect-is-fullwidth">
                                <select id="filter-needs-sync">
                                    <option value="">All</option>
                                    <option value="1">Needs Sync</option>
                                    <option value="0">Clean</option>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 🔹 Table Card -->
            <div id="sync-total" class="meliconnect-has-text-grey"></div>
            <div class="meliconnect-box">

                <div class="meliconnect-table-container">
                    <table class="meliconnect-table meliconnect-is-striped meliconnect-is-hoverable" id="sync-table">

                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Woo</th>
                                <th>Meli</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Needs</th>
                                <th>Source</th>
                                <th>Priority</th>
                                <th>Retries</th>
                                <th>Locked</th>
                                <th>Updated</th>
                                <th>Error</th>
                                <!-- <th>Actions</th> -->
                            </tr>
                        </thead>

                        <tbody>
                            <!-- AJAX -->
                        </tbody>

                    </table>
                </div>

            </div>
        </div>

        <div id="logs-tab" style="display:none;">
            <?php include MELICONNECT_PLUGIN_ROOT . 'includes/Core/Views/syncdashboardlogs.php'; ?>
        </div>
    <?php endif; ?>
</div>