<?php

class Orphic_WP_Block_Option_Page {

  public function render_option_page() {
    global $try_to_activate_license;
    $try_to_activate_license = false;

    $this->handle_license_form();

    $this->register_javascript();
    $this->register_css();

    $global_color_palette_name = $this->get_global_color_palette_name();
    $theme_json_colors = $this->get_theme_json_colors();
    //give the theme.json colors to the javascript
    wp_localize_script('orphic-wp-block-option-page-script', 'themeJsonColors', $theme_json_colors);

    $plugin_colors = $this->get_plugin_colors_custom();
    $default_colors = Orphic_UI_Public::DEFAULT_COLORS;
    $active_blocks = $this->get_active_orphic_blocks();
    $active_modules = get_option(ConstBlockOrphicOptionName::ACTIVE_MODULES, array());
?>
    <div class="orphic-block-bg-admin-page">
    </div>
    <div class="orphic-block-decoration-admin-pagen">
      <svg width="100%" height="100%">

        <!-- Let's define the pattern -->
        <!-- The width and height should be the size of a single square plus the space -->
        <pattern id="pattern-checkers" x="0" y="0" width="71" height="71" patternUnits="userSpaceOnUse">
          <!-- One instance of the checker, filling the entire pattern -->
          <!-- We will define the `fill` in the CSS for flexible use -->
          <rect class="checker" x="0" y="0" width="70" height="70"></rect>
        </pattern>

        <!-- Define the shape that will contain our pattern as the fill -->
        <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-checkers)"></rect>

      </svg>

    </div>
    <div class="wrap">
      <h1>
        <svg width="1707" height="270" viewBox="0 0 1707 270" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1497.78 187.168V171.936C1492.77 182.358 1482.94 189.173 1468.71 189.173C1446.47 189.173 1432.24 172.939 1432.24 150.491V89.5634H1448.87V146.683C1448.87 162.116 1457.89 172.939 1473.32 172.939C1488.16 172.939 1497.17 162.918 1497.78 148.086V89.5634H1514.61V187.168H1497.78Z" fill="black" />
          <path d="M1559.28 89.5634V187.168H1542.64V89.5634H1559.28ZM1540.04 58.899C1540.04 52.686 1544.85 47.8759 1550.86 47.8759C1557.47 47.8759 1562.08 52.686 1562.08 58.899C1562.08 65.1121 1557.47 69.7218 1550.86 69.7218C1544.85 69.7218 1540.04 65.1121 1540.04 58.899Z" fill="black" />
          <path d="M0.777344 128.378C0.777344 58.3638 53.9036 5.23755 123.918 5.23755C193.932 5.23755 247.058 58.3638 247.058 128.378C247.058 198.392 193.932 251.518 123.918 251.518C53.9036 251.518 0.777344 198.392 0.777344 128.378ZM32.442 128.378C32.442 180.801 71.8469 221.613 123.918 221.613C176.34 221.613 215.745 180.801 215.745 128.378C215.745 76.3071 176.34 35.1431 123.918 35.1431C71.8469 35.1431 32.442 76.3071 32.442 128.378Z" fill="black" />
          <path d="M293.203 248V8.75586H363.921C408.603 8.75586 439.212 33.7358 439.212 75.9553C439.212 110.435 417.75 130.489 389.956 137.174C418.454 150.543 443.082 191.355 451.878 248H420.565C409.658 188.541 379.753 148.08 348.44 148.08H323.46V248H293.203ZM407.899 78.77C407.899 52.7346 388.9 37.6059 363.921 37.6059H323.46V119.23H363.921C388.9 119.23 407.899 104.805 407.899 78.77Z" fill="black" />
          <path d="M495.23 248V8.75586H565.596C610.278 8.75586 640.887 35.4949 640.887 80.5291C640.887 125.915 610.278 152.302 565.596 152.302H525.487V248H495.23ZM609.575 80.8809C609.575 51.6791 590.576 37.6059 565.596 37.6059H525.487V123.452H565.596C590.576 123.452 609.575 110.083 609.575 80.8809Z" fill="black" />
          <path d="M852.351 248V142.099H715.489V248H685.232V8.75586H715.489V113.249H852.351V8.75586H882.608V248H852.351Z" fill="black" />
          <path d="M944.637 248V8.75586H974.895V248H944.637Z" fill="black" />
          <path d="M1206.99 199.799V234.982C1189.05 245.537 1167.24 251.518 1144.02 251.518C1074 251.518 1020.88 198.392 1020.88 128.378C1020.88 58.3638 1074 5.23755 1144.02 5.23755C1167.24 5.23755 1189.05 11.2187 1206.99 21.7736V57.3083C1190.81 43.587 1169 35.1431 1144.02 35.1431C1091.95 35.1431 1052.54 76.3071 1052.54 128.378C1052.54 180.801 1091.59 221.613 1144.02 221.613C1169 221.613 1191.16 213.169 1206.99 199.799Z" fill="black" />
          <path d="M1636.13 21.2104C1709.45 79.1784 1709.45 190.386 1636.13 248.354M1338.84 21.2104V248.354" stroke="#0065FF" stroke-width="30.0632" stroke-linecap="square" />
        </svg>

      </h1>
      <h3><?php _e('A set of Gutenberg blocks that enhance your page building experience.', 'orphic-ui'); ?></h3>

      <div class="orphic-wp-block-option-page-theme-container">
        <div class="orphic-wp-block-option-page-theme-container-header">
          <div class="orphic-wp-block-option-page-tabs">
            <button class="orphic-wp-block-option-page-tab" data-tab="options"><?php _e('Options', 'orphic-ui'); ?></button>
            <button class="orphic-wp-block-option-page-tab" data-tab="style"><?php _e('Style', 'orphic-ui'); ?></button>
            <button class="orphic-wp-block-option-page-tab" data-tab="blocks"><?php _e('Blocks', 'orphic-ui'); ?></button>
            <button class="orphic-wp-block-option-page-tab" data-tab="modules"><?php _e('Modules', 'orphic-ui'); ?></button>
          </div>
        </div>
        <div class="orphic-wp-block-option-page-header-tab-container">
          <h2 class="orphic-wp-block-option-page-header-tab-container-title"></h2>
          <button class="orphic-wp-block-option-page-button save-button"><?php _e('Save', 'orphic-ui'); ?></button>
        </div>

        <!-- Options tab -->
        <div class="orphic-wp-block-option-page-tab-content" data-tab-content="options">
          <!-- License section -->
          <?php
          // Afficher le message de succès/erreur
          $option_license_status = get_option(ConstBlockOrphicOptionValue::LICENSE_STATUS, 0);
          ?>
          <?php if ($try_to_activate_license) : ?>
            <div class="notice-<?php echo $option_license_status ? 'success' : 'error'; ?> is-dismissible">
              <p><?php echo  $option_license_status ? 'License updated successfully.' : 'License activation failed.'; ?></p>
            </div>
          <?php endif; ?>
          <div class="orphic-wp-block-option-page-license-container">
            <h3><?php _e('License', 'orphic-ui'); ?></h3>
            <form method="post" action="">
              <?php wp_nonce_field('orphic_license_action', 'orphic_license_nonce'); ?>
              <div class="license-input-wrapper">
                <input
                  type="text"
                  name="orphic_license_key"
                  class="orphic-wp-block-option-page-license-input"
                  value="<?php echo esc_attr(get_option(ConstBlockOrphicOptionValue::TOKEN, '')); ?>"
                  placeholder="Enter your license key">
                <input type="submit" name="orphic_save_license" class="orphic-wp-block-option-page-button" value="Activate License">
                <?php
                // Vérifier si la licence est valide
                $license_status = get_option(ConstBlockOrphicOptionValue::LICENSE_STATUS, []);
                if ($license_status == 1):
                ?>
                  <span class="license-status valid"><?php _e('License Active', 'orphic-ui'); ?></span>
                <?php else: ?>
                  <span class="license-status invalid"><?php _e('License Inactive', 'orphic-ui'); ?></span>
                <?php endif; ?>
              </div>
            </form>
          </div>

          <?php if (in_array('google-map', $active_blocks)) : ?>
            <div class="orphic-wp-block-option-page-google-map-api-key-container">
              <h3 class="orphic-wp-block-option-page-google-map-api-key-title"><?php _e('google map api key', 'orphic-ui'); ?></h3>
              <input type="text" class="orphic-wp-block-option-page-google-map-api-key-input" value="<?php echo get_option('orphic_wp_block_google_map_api_key'); ?>">
            </div>
          <?php endif; ?>
        </div>

        <!-- Style tab -->
        <div class="orphic-wp-block-option-page-tab-content" data-tab-content="style">
          <div class="orphic-wp-block-option-page-theme-container-choice">
            <button class="orphic-wp-block-option-page-button classic-button <?php echo $global_color_palette_name == ConstBlockOrphicOptionValue::GLOBAL_COLOR_PALETTE_CLASSIC ? 'active' : ''; ?>">
              classic
            </button>
            <button class="orphic-wp-block-option-page-button custom-button <?php echo $global_color_palette_name == ConstBlockOrphicOptionValue::GLOBAL_COLOR_PALETTE_CUSTOM ? 'active' : ''; ?>">
              custom
            </button>
          </div>

          <!-- Affichage des couleurs classiques (non modifiables) -->
          <div class="orphic-wp-block-option-page-theme-container-classic-colors <?php echo $global_color_palette_name == ConstBlockOrphicOptionValue::GLOBAL_COLOR_PALETTE_CLASSIC ? 'visible' : ''; ?>">
            <h3><?php _e('Classic colors', 'orphic-ui'); ?></h3>
            <div class="orphic-wp-block-option-page-theme-container-classic-colors-container">
              <?php if (empty($default_colors)): ?>
                <p><?php _e('No default colors found pls contact the support', 'orphic-ui'); ?></p>
              <?php else: ?>
                <?php foreach ($default_colors as $color): ?>
                  <div class="classic-color-box">
                    <div class="color-box" style="background-color: <?php echo esc_attr($color['color']); ?>"></div>
                    <span class="color-label"><?php echo esc_html($color['name']); ?></span>
                  </div>
                <?php endforeach; ?>
              <?php endif; ?>
            </div>
          </div>

          <!-- Affichage des couleurs personnalisées (modifiables) -->
          <div class="orphic-wp-block-option-page-theme-container-choice-color <?php echo $global_color_palette_name == ConstBlockOrphicOptionValue::GLOBAL_COLOR_PALETTE_CUSTOM ? 'visible' : ''; ?>">
            <h3><?php _e('Set custom colors', 'orphic-ui'); ?></h3>
            <div class="orphic-wp-block-option-page-theme-container-choice-color-container">
              <?php foreach ($plugin_colors as $color) : ?>
                <div class="color-picker-container" data-color-slug="<?php echo $color['slug']; ?>" data-color-save="<?php echo $color['color']; ?>">
                  <div class="color-picker"></div>
                  <span class="color-picker-label"><?php echo $color['name']; ?></span>
                </div>
              <?php endforeach; ?>
            </div>
          </div>

          <!-- Breakpoint settings section -->
          <div class="orphic-wp-block-option-page-theme-container-breakpoint-settings">
            <h3><?php _e('Breakpoint Settings', 'orphic-ui'); ?></h3>
            <p><?php _e('Adjust the pixel values to define the responsive breakpoints for different devices. These settings determine when the layout changes for mobile, tablet, and desktop views.', 'orphic-ui'); ?></p>
            <div class="orphic-wp-block-option-page-theme-container-breakpoint-settings-container">
              <div class="breakpoint-setting">
                <label for="mobile-breakpoint">Mobile Only Below</label>
                <div class="breakpoint-setting-input-container">
                  <?php $mobile = get_option(ConstBlockOrphicOptionName::BREAKPOINT_MOBILE); ?>
                  <select id="mobile-breakpoint">
                    <option value="600" <?php selected($mobile, 600); ?>>600px</option>
                    <option value="650" <?php selected($mobile, 650); ?>>650px</option>
                    <option value="700" <?php selected($mobile, 700); ?>>700px</option>
                    <option value="750" <?php selected($mobile, 750); ?>>750px</option>
                    <option value="768" <?php selected($mobile, 768); ?>>768px (default mobile)</option>
                    <option value="800" <?php selected($mobile, 800); ?>>800px</option>
                    <option value="850" <?php selected($mobile, 850); ?>>850px</option>
                    <option value="900" <?php selected($mobile, 900); ?>>900px</option>
                    <option value="950" <?php selected($mobile, 950); ?>>950px (default desktop)</option>
                    <option value="1000" <?php selected($mobile, 1000); ?>>1000px</option>
                    <option value="1024" <?php selected($mobile, 1024); ?>>1024px</option>
                    <option value="1100" <?php selected($mobile, 1100); ?>>1100px</option>
                    <option value="1200" <?php selected($mobile, 1200); ?>>1200px</option>
                    <option value="1300" <?php selected($mobile, 1300); ?>>1300px</option>
                    <option value="1400" <?php selected($mobile, 1400); ?>>1400px</option>

                  </select>
                  <button class="reset-default orphic-wp-block-option-page-button " data-default="768">Reset Default</button>
                </div>
              </div>
              <div class="breakpoint-setting">
                <label for="tablet-breakpoint">Tablet Show From</label>
                <div class="breakpoint-setting-input-container">
                  <?php $tablet_min = get_option(ConstBlockOrphicOptionName::BREAKPOINT_TABLET_MIN); ?>
                  <select id="tablet-breakpoint">
                    <option value="600" <?php selected($tablet_min, 600); ?>>600px</option>
                    <option value="650" <?php selected($tablet_min, 650); ?>>650px</option>
                    <option value="700" <?php selected($tablet_min, 700); ?>>700px</option>
                    <option value="750" <?php selected($tablet_min, 750); ?>>750px</option>
                    <option value="768" <?php selected($tablet_min, 768); ?>>768px (default)</option>
                    <option value="800" <?php selected($tablet_min, 800); ?>>800px</option>
                    <option value="850" <?php selected($tablet_min, 850); ?>>850px</option>
                    <option value="900" <?php selected($tablet_min, 900); ?>>900px</option>
                    <option value="950" <?php selected($tablet_min, 950); ?>>950px (default desktop)</option>
                    <option value="1000" <?php selected($tablet_min, 1000); ?>>1000px</option>
                  </select>
                  <button class="reset-default orphic-wp-block-option-page-button" data-default="768">Reset Default</button>
                </div>
              </div>
              <div class="breakpoint-setting">
                <label for="tablet-breakpoint-max">Tablet Up To</label>
                <?php $tablet_max = get_option(ConstBlockOrphicOptionName::BREAKPOINT_TABLET_MAX); ?>
                <div class="breakpoint-setting-input-container">
                  <select id="tablet-breakpoint-max">
                    <option value="800" <?php selected($tablet_max, 800); ?>>800px</option>
                    <option value="850" <?php selected($tablet_max, 850); ?>>850px</option>
                    <option value="900" <?php selected($tablet_max, 900); ?>>900px</option>
                    <option value="950" <?php selected($tablet_max, 950); ?>>950px (default desktop)</option>
                    <option value="1000" <?php selected($tablet_max, 1000); ?>>1000px</option>
                    <option value="1024" <?php selected($tablet_max, 1024); ?>>1024px (default tablet max)</option>
                    <option value="1100" <?php selected($tablet_max, 1100); ?>>1100px</option>
                    <option value="1200" <?php selected($tablet_max, 1200); ?>>1200px</option>
                    <option value="1300" <?php selected($tablet_max, 1300); ?>>1300px</option>
                    <option value="1400" <?php selected($tablet_max, 1400); ?>>1400px</option>
                  </select>
                  <button class="reset-default orphic-wp-block-option-page-button" data-default="950">Reset Default</button>
                </div>
              </div>
              <div class="breakpoint-setting">
                <label for="desktop-breakpoint">Desktop Only Above</label>
                <div class="breakpoint-setting-input-container">
                  <?php $desktop = get_option(ConstBlockOrphicOptionName::BREAKPOINT_DESKTOP); ?>
                  <select id="desktop-breakpoint">
                    <option value="600" <?php selected($desktop, 600); ?>>600px</option>
                    <option value="650" <?php selected($desktop, 650); ?>>650px</option>
                    <option value="700" <?php selected($desktop, 700); ?>>700px</option>
                    <option value="750" <?php selected($desktop, 750); ?>>750px</option>
                    <option value="768" <?php selected($desktop, 768); ?>>768px (default mobile)</option>
                    <option value="800" <?php selected($desktop, 800); ?>>800px</option>
                    <option value="850" <?php selected($desktop, 850); ?>>850px</option>
                    <option value="900" <?php selected($desktop, 900); ?>>900px</option>
                    <option value="950" <?php selected($desktop, 950); ?>>950px (default desktop)</option>
                    <option value="1000" <?php selected($desktop, 1000); ?>>1000px</option>
                    <option value="1024" <?php selected($desktop, 1024); ?>>1024px</option>
                    <option value="1100" <?php selected($desktop, 1100); ?>>1100px</option>
                    <option value="1200" <?php selected($desktop, 1200); ?>>1200px</option>
                    <option value="1300" <?php selected($desktop, 1300); ?>>1300px</option>
                    <option value="1400" <?php selected($desktop, 1400); ?>>1400px</option>
                  </select>
                  <button class="reset-default orphic-wp-block-option-page-button" data-default="950">Reset Default</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Blocks tab -->
        <div class="orphic-wp-block-option-page-tab-content" data-tab-content="blocks">
          <div class="orphic-wp-block-option-page-blocks-section">
            <div class="orphic-wp-block-option-page-blocks-grid">
              <?php
              foreach (ConstBlockOrphicBlockList::BLOCKS as $block):
                // Vérifier si le bloc est en développement et si le mode dev est activé
                if (isset($block['experimental']) && $block['experimental'] && (!defined('ORPHIC_EXPERIMENTAL_MODE') || !ORPHIC_EXPERIMENTAL_MODE)) {
                  continue; // Ignorer ce bloc s'il est en dev et que le mode dev n'est pas activé
                }
              ?>
                <div class="orphic-wp-block-option-page-block-card <?php echo (isset($block['experimental']) && $block['experimental']) ? 'experimental-block' : ''; ?>">
                  <div class="block-card-header">
                    <div class="block-card-icon">
                      <!-- Placeholder icon, vous pourrez ajouter les vraies icônes plus tard -->
                      <?php echo $block['svg'] ?? ' <svg viewBox="0 0 24 24" width="24" height="24">
                        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"></path>
                      </svg>'; ?>

                    </div>
                    <?php if (isset($block['experimental']) && $block['experimental']): ?>
                      <div class="experimental-badge"><?php _e('EXPERIMENTAL', 'orphic-ui'); ?></div>
                    <?php endif; ?>
                    <label class="block-card-toggle">
                      <input type="checkbox"
                        id="<?php echo $block['key'] ?>"
                        name="orphic-blocks-seclector-checkboxes"
                        class="orphic-blocks-seclector-checkboxes"
                        value="<?php echo $block['key'] ?>"
                        <?php echo in_array($block['key'], $active_blocks) ? 'checked' : '' ?> />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  <div class="block-card-content">
                    <h3 class="block-card-title"><?php echo $block['label'] ?></h3>
                    <p class="block-card-description">
                      <?php echo isset($block['description']) ? $block['description'] : __('A custom block to enhance your page building experience.', 'orphic-ui'); ?>
                    </p>
                  </div>
                </div>
              <?php endforeach; ?>
            </div>
          </div>
        </div>

        <!-- Modules tab -->
        <div class="orphic-wp-block-option-page-tab-content" data-tab-content="modules">
          <div class="orphic-wp-block-option-page-blocks-section">
            <div class="orphic-wp-block-option-page-blocks-grid">
              <?php foreach (ConstBlockOrphicModuleList::MODULES as $module): ?>
                <div class="orphic-wp-block-option-page-block-card">
                  <div class="block-card-header">
                    <div class="block-card-icon">
                      <svg viewBox="0 0 24 24" width="24" height="24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1-10c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path>
                      </svg>
                    </div>
                    <label class="block-card-toggle">
                      <input type="checkbox"
                        id="<?php echo $module['key'] ?>"
                        name="orphic-modules-selector-checkboxes"
                        class="orphic-modules-selector-checkboxes"
                        value="<?php echo $module['key'] ?>"
                        <?php echo in_array($module['key'], $active_modules) ? 'checked' : '' ?> />
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  <div class="block-card-content">
                    <h3 class="block-card-title"><?php echo $module['label'] ?></h3>
                    <p class="block-card-description">
                      <?php echo $module['description'] ?>
                    </p>
                    <div class="module-card-meta">
                      <span class="module-type <?php echo $module['type'] ?>">
                        <?php echo strtoupper($module['type']) ?>
                      </span>
                    </div>
                  </div>
                </div>
              <?php endforeach; ?>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="orphic-wp-block-option-page-footer-info-container">
      <a class="orphic-wp-block-option-page-info" href="https://orphic.ca/" target="_blank">
        <?php _e('Made by Orphic', 'orphic-ui'); ?>
      </a>
    </div>
<?php
  }

  public function register_javascript() {
    wp_enqueue_script('orphic-wp-block-option-page-script', ORPHIC_PLUGIN_UI_DIR_URL . 'public/orphic-wp-block-option-page/wp-block-option-page.js', array('jquery', 'pickr'), '1.0.0', true);
    wp_localize_script('orphic-wp-block-option-page-script', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php')));

    // Enregistrement du nouveau script pour les tabs
    wp_enqueue_script('orphic-wp-block-option-page-tabs', ORPHIC_PLUGIN_UI_DIR_URL . 'public/orphic-wp-block-option-page/tabs.js', array('jquery'), '1.0.0', true);

    //pickr
    wp_enqueue_script('pickr', ORPHIC_PLUGIN_UI_DIR_URL . 'public/js/pickr.es5.min.js', array(), '1.0.0', true);
  }

  public function register_css() {
    //pickr
    wp_enqueue_style('pickr', ORPHIC_PLUGIN_UI_DIR_URL . 'public/css/pickr.min.css', array(), '1.0.0', 'all');

    //font only for this page because it's a custom page
    wp_enqueue_style('orphic-font-bold', ORPHIC_PLUGIN_UI_DIR_URL . 'public/assets/fonts/jakarta/PlusJakartaSans-Bold.ttf', array(), '1.0.0', 'all');
    wp_enqueue_style('orphic-font-extrabold', ORPHIC_PLUGIN_UI_DIR_URL . 'public/assets/fonts/jakarta/PlusJakartaSans-ExtraBold.ttf', array(), '1.0.0', 'all');
    wp_enqueue_style('orphic-font-extralight', ORPHIC_PLUGIN_UI_DIR_URL . 'public/assets/fonts/jakarta/PlusJakartaSans-ExtraLight.ttf', array(), '1.0.0', 'all');
    wp_enqueue_style('orphic-font-light', ORPHIC_PLUGIN_UI_DIR_URL . 'public/assets/fonts/jakarta/PlusJakartaSans-Light.ttf', array(), '1.0.0', 'all');
    wp_enqueue_style('orphic-font-medium', ORPHIC_PLUGIN_UI_DIR_URL . 'public/assets/fonts/jakarta/PlusJakartaSans-Medium.ttf', array(), '1.0.0', 'all');
    wp_enqueue_style('orphic-font-regular', ORPHIC_PLUGIN_UI_DIR_URL . 'public/assets/fonts/jakarta/PlusJakartaSans-Regular.ttf', array(), '1.0.0', 'all');
    wp_enqueue_style('orphic-font-semibold', ORPHIC_PLUGIN_UI_DIR_URL . 'public/assets/fonts/jakarta/PlusJakartaSans-SemiBold.ttf', array(), '1.0.0', 'all');

    //page style
    wp_enqueue_style('orphic-wp-block-option-page-style', ORPHIC_PLUGIN_UI_DIR_URL . 'public/orphic-wp-block-option-page/wp-block-option-page.css', array('orphic-font-bold', 'orphic-font-extrabold', 'orphic-font-extralight', 'orphic-font-light', 'orphic-font-medium', 'orphic-font-regular', 'orphic-font-semibold'), '1.0.0', 'all');
  }


  public function get_global_color_palette_name() {
    return get_option('orphic_wp_block_global_color_palette_name');
  }

  //find the theme.json colors
  public static function get_theme_json_colors() {
    $theme_json_file = get_stylesheet_directory() . '/theme.json';

    if (file_exists($theme_json_file)) {
      $theme_json_content = file_get_contents($theme_json_file);
      $theme_json_data = json_decode($theme_json_content, true);

      if (isset($theme_json_data['settings']['color']['palette'])) {
        return $theme_json_data['settings']['color']['palette'];
      }
    }

    return array(); // Return an empty array if no colors are found
  }

  public function get_plugin_colors_custom() {
    return get_option(ConstBlockOrphicOptionName::PLUGIN_COLORS_CUSTOM);
  }

  public function get_active_orphic_blocks() {
    $active_blocks = get_option(ConstBlockOrphicOptionName::ACTIVE_BLOCKS);
    if (!is_array($active_blocks)) return array();
    return $active_blocks;
  }

  public function handle_license_form() {
    // Traitement du formulaire de licence
    if (isset($_POST['orphic_save_license']) && check_admin_referer('orphic_license_action', 'orphic_license_nonce')) {
      $GLOBALS['try_to_activate_license'] = true;

      $license_key = sanitize_text_field($_POST['orphic_license_key']);

      // Sauvegarder la clé
      update_option(ConstBlockOrphicOptionValue::TOKEN, $license_key);

      // Vérifier la validité et enregistrer le site
      $register_response = wp_remote_post(ORPHIC_UI_URL . 'wp-json/opm/v1/register-website', [
        'body' => [
          'token' => $license_key,
          'website' => get_site_url(),
          'date' => date('Y-m-d'),
          'version' => ORPHIC_BLOCK_UI_VERSION // Assurez-vous que cette constante existe
        ]
      ]);

      if (!is_wp_error($register_response)) {
        $response_data = json_decode(wp_remote_retrieve_body($register_response), true);

        if ($response_data['success']) {
          update_option(ConstBlockOrphicOptionValue::LICENSE_STATUS, 1);
          return;
        }

        // Si pas de succès, on désactive la licence
        update_option(ConstBlockOrphicOptionValue::LICENSE_STATUS, 0);
      } else {
        // En cas d'erreur de connexion
        update_option(ConstBlockOrphicOptionValue::LICENSE_STATUS, 0);
      }
    }
  }
}
