<?php
/**
 * Ably Custom Icon Field Manager
 * Handles ZIP uploads, extracting fonts, parsing selection.json, and managing FontAwesome CDN.
 */

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

class ABLYCUIC_Manager {

    private static $instance = null;

    public static function get_instance() {
        if ( null === self::$instance ) {
            self::$instance = new self();
        }
        return self::$instance;
    }

    /**
     * Locate an IcoMoon export file whether the ZIP has a wrapper directory
     * or places the file at its root.
     *
     * @param string $directory Extracted ZIP directory.
     * @param string $filename File to locate.
     * @return string
     */
    private function find_import_file( $directory, $filename ) {
        $direct = trailingslashit( $directory ) . $filename;
        if ( is_file( $direct ) ) {
            return $direct;
        }

        try {
            $iterator = new RecursiveIteratorIterator(
                new RecursiveDirectoryIterator( $directory, FilesystemIterator::SKIP_DOTS )
            );
            foreach ( $iterator as $file ) {
                if ( $file->isFile() && $file->getFilename() === $filename ) {
                    return $file->getPathname();
                }
            }
        } catch ( UnexpectedValueException $exception ) {
            return '';
        }

        return '';
    }

    public function __construct() {
        add_action('admin_init', array($this, 'register_settings'));
        add_action('admin_post_ablycuic_upload_zip', array($this, 'handle_zip_upload'));
        add_action('admin_post_ablycuic_delete_collection', array($this, 'handle_delete_collection'));
        add_action('admin_menu', array($this, 'add_admin_menu'));
        
        // Enqueue custom fonts and FA on frontend and admin
        add_action('wp_enqueue_scripts', array($this, 'enqueue_custom_fonts'), 20);
        add_action('admin_enqueue_scripts', array($this, 'enqueue_custom_fonts'), 20);

        // Dynamically inject picker trigger into mapped ACF fields
        $this->setup_mapped_fields();
    }

    public function register_settings() {
        register_setting('ablycuic_settings_group', 'ablycuic_fa_cdn', array(
            'sanitize_callback' => array($this, 'sanitize_cdn_urls'),
        ));
        register_setting('ablycuic_settings_group', 'ablycuic_custom_data', array(
            'sanitize_callback' => array($this, 'sanitize_custom_data'),
        )); // Stores the merged custom icons array
        register_setting('ablycuic_settings_group', 'ablycuic_mapped_fields', array(
            'sanitize_callback' => array($this, 'sanitize_mapped_fields'),
        ));
    }

    public function sanitize_cdn_urls($value) {
        $urls = preg_split('/\r\n|\r|\n/', (string) $value);
        $urls = array_filter(array_map('trim', $urls));
        $urls = array_filter(array_map('esc_url_raw', $urls), function ($url) {
            return (bool) preg_match('#^https?://#i', $url);
        });

        return implode("\n", $urls);
    }

    public function sanitize_mapped_fields($value) {
        $fields = array_filter(array_map('trim', explode(',', (string) $value)));
        $fields = array_map('sanitize_key', $fields);

        return implode(', ', array_filter($fields));
    }

    /**
     * Keep the internal custom icon data as an array when Settings API saves it.
     *
     * @param mixed $value Setting value.
     * @return array
     */
    public function sanitize_custom_data($value) {
        if ( ! is_array($value) ) {
            return array();
        }

        $clean = array();
        $clean['icons'] = array();
        foreach ( (array) ($value['icons'] ?? array()) as $class => $label ) {
            $class = sanitize_html_class($class);
            if ( $class ) {
                $clean['icons'][$class] = sanitize_text_field($label);
            }
        }

        foreach ( array('css_files', 'font_files') as $list_key ) {
            $clean[$list_key] = array();
            foreach ( (array) ($value[$list_key] ?? array()) as $file ) {
                $file = sanitize_file_name($file);
                if ( $file ) {
                    $clean[$list_key][] = $file;
                }
            }
        }

        $clean['collections'] = array();
        foreach ( (array) ($value['collections'] ?? array()) as $collection ) {
            if ( ! is_array($collection) ) {
                continue;
            }
            $item = array(
                'id' => sanitize_text_field($collection['id'] ?? ''),
                'name' => sanitize_file_name($collection['name'] ?? ''),
                'imported_at' => absint($collection['imported_at'] ?? 0),
                'css_file' => sanitize_file_name($collection['css_file'] ?? ''),
                'css_files' => array(),
                'font_files' => array(),
                'icons' => array(),
            );
            foreach ( (array) ($collection['css_files'] ?? array()) as $file ) {
                $file = sanitize_file_name($file);
                if ( $file ) $item['css_files'][] = $file;
            }
            foreach ( (array) ($collection['font_files'] ?? array()) as $file ) {
                $file = sanitize_file_name($file);
                if ( $file ) $item['font_files'][] = $file;
            }
            foreach ( (array) ($collection['icons'] ?? array()) as $class ) {
                $class = sanitize_html_class($class);
                if ( $class ) $item['icons'][] = $class;
            }
            if ( $item['id'] ) $clean['collections'][] = $item;
        }

        return $clean;
    }

    public function add_admin_menu() {
        add_menu_page(
            __( 'Custom Icons', 'ably-custom-icon-field-for-acf' ),
            'Custom Icons',
            'manage_options',
            'ablycuic-settings',
            array($this, 'render_admin_page'),
            'dashicons-art',
            80
        );
    }

    public function setup_mapped_fields() {
        $mapped = get_option('ablycuic_mapped_fields');
        if ( empty($mapped) ) {
            return;
        }

        $fields = array_map('trim', explode(',', $mapped));
        foreach ( $fields as $field_name ) {
            if ( ! empty($field_name) ) {
                add_action('acf/render_field/name=' . $field_name, array($this, 'render_mapped_field_picker'));
            }
        }
    }

    public function enqueue_picker_assets() {
        wp_enqueue_style(
            'ably-custom-icon-field-for-acf-picker',
            ABLYCUIC_URL . 'assets/css/icon-picker.css',
            array(),
            ABLYCUIC_VERSION
        );

        wp_enqueue_script(
            'ably-custom-icon-field-for-acf-picker',
            ABLYCUIC_URL . 'assets/js/icon-picker.js',
            array( 'jquery' ),
            ABLYCUIC_VERSION,
            true
        );

        wp_localize_script( 'ably-custom-icon-field-for-acf-picker', 'ablyCuic', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'nonce'   => wp_create_nonce( 'ablycuic_nonce' ),
        ));
    }

    public function render_mapped_field_picker($field) {
        $this->enqueue_picker_assets();

        $value = isset($field['value']) ? sanitize_text_field($field['value']) : '';
        ?>
<div class="ablycuic-icon-picker-wrap ablycuic-icon-picker-mapped" style="margin-top: 10px;">
    <div class="ablycuic-icon-selected" style="display: flex; align-items: center; gap: 10px;">
        <div class="ablycuic-icon-preview <?php echo $value ? '' : 'is-empty'; ?>"
            style="width: 40px; height: 40px; border: 1px solid #ccd0d4; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #fafafa; font-size: 20px;">
            <?php if ( $value ) : ?>
            <i class="<?php echo esc_attr( $value ); ?>"></i>
            <?php else : ?>
            <span class="ablycuic-icon-placeholder"
                style="font-size: 10px; color: #9ca3af; text-transform: uppercase;">None</span>
            <?php endif; ?>
        </div>
        <div class="ablycuic-icon-actions">
            <button type="button" class="ablycuic-icon-btn-select button button-secondary"
                title="<?php echo $value ? 'Cambiar' : 'Seleccionar'; ?>">
                <span class="dashicons dashicons-edit" style="margin-top: 4px;"></span> Elegir Icono
            </button>
            <button type="button" class="ablycuic-icon-btn-clear button" title="Quitar"
                <?php echo ! $value ? 'style="display:none;"' : ''; ?>>
                <span class="dashicons dashicons-no-alt" style="margin-top: 4px;"></span>
            </button>
        </div>
    </div>
</div>
<?php
    }

    public function get_upload_dir() {
        $upload_dir = wp_upload_dir();
        $custom_dir = $upload_dir['basedir'] . '/ab-icons-fonts';
        if (!file_exists($custom_dir)) {
            wp_mkdir_p($custom_dir);
        }
        return $custom_dir;
    }

    public function get_upload_url() {
        $upload_dir = wp_upload_dir();
        return $upload_dir['baseurl'] . '/ab-icons-fonts';
    }

    public function handle_zip_upload() {
        if ( ! current_user_can('manage_options') ) {
            wp_die('No tienes permisos.');
        }
        check_admin_referer('ablycuic_upload_zip_action', 'ablycuic_nonce');

        if ( empty($_FILES['icomoon_zip']['tmp_name']) || ! empty($_FILES['icomoon_zip']['error']) ) {
            wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=no_file'));
            exit;
        }

        $zip_file = isset( $_FILES['icomoon_zip']['tmp_name'] ) ? sanitize_text_field( wp_unslash( $_FILES['icomoon_zip']['tmp_name'] ) ) : '';
        $zip_name = isset( $_FILES['icomoon_zip']['name'] ) ? sanitize_file_name( wp_unslash( $_FILES['icomoon_zip']['name'] ) ) : '';
        $file_type = wp_check_filetype($zip_name, array('zip' => 'application/zip'));
        if ( empty($file_type['type']) || ! is_uploaded_file($zip_file) ) {
            wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=invalid_zip'));
            exit;
        }

        if ( ! class_exists('ZipArchive') ) {
            wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=zip_unavailable'));
            exit;
        }

        $archive = new ZipArchive();
        if ( true !== $archive->open($zip_file) || $archive->numFiles > 1000 ) {
            wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=invalid_zip'));
            exit;
        }
        $uncompressed_size = 0;
        $allowed_entries  = array();
        for ( $index = 0; $index < $archive->numFiles; $index++ ) {
            $entry_name = $archive->getNameIndex($index);
            $entry_path = str_replace('\\', '/', (string) $entry_name);
            $entry_base = basename($entry_path);
            $entry_stat = $archive->statIndex($index);
            $uncompressed_size += isset($entry_stat['size']) ? (int) $entry_stat['size'] : 0;
            if ( strpos($entry_path, '../') !== false || 0 === strpos($entry_path, '/') ) {
                $archive->close();
                wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=unsafe_zip'));
                exit;
            }
            if ( false !== strpos($entry_path, "\0") ) {
                $archive->close();
                wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=unsafe_zip'));
                exit;
            }
            if ( $uncompressed_size > 20 * 1024 * 1024 ) {
                $archive->close();
                wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=unsafe_zip'));
                exit;
            }

            // Extract only files required by an IcoMoon export. Other entries
            // remain inside the uploaded archive and are never written here.
            $entry_extension = strtolower( (string) pathinfo($entry_base, PATHINFO_EXTENSION) );
            $is_font_entry   = preg_match('#(?:^|/)fonts/[^/]+$#i', $entry_path)
                && in_array( $entry_extension, array( 'eot', 'svg', 'ttf', 'woff', 'woff2' ), true );
            if ( 'selection.json' === strtolower($entry_base) || 'style.css' === strtolower($entry_base) || $is_font_entry ) {
                $allowed_entries[] = $entry_name;
            }
        }

        require_once ABSPATH . 'wp-admin/includes/file.php';
        WP_Filesystem();
        global $wp_filesystem;

        $unzip_dir = $this->get_upload_dir() . '/temp_' . time();
        $result = $archive->extractTo( $unzip_dir, $allowed_entries );
        $archive->close();

        if ( true !== $result ) {
            wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=unzip_failed'));
            exit;
        }

        // Parse selection.json
        $selection_file = $this->find_import_file( $unzip_dir, 'selection.json' );
        if ( '' === $selection_file ) {
            $wp_filesystem->delete($unzip_dir, true);
            wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=no_selection'));
            exit;
        }

        $json_data = file_get_contents($selection_file);
        $font_data = json_decode((string) $json_data, true);
        if ( ! is_array($font_data) || empty($font_data['icons']) || ! is_array($font_data['icons']) ) {
            $wp_filesystem->delete($unzip_dir, true);
            wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&error=invalid_selection'));
            exit;
        }
        
        // Extract icons logic will go here
        $new_icons = array();
        if (isset($font_data['icons'])) {
            $prefix = isset($font_data['preferences']['fontPref']['prefix']) ? $font_data['preferences']['fontPref']['prefix'] : 'icon-';
            $font_family = isset($font_data['preferences']['fontPref']['metadata']['fontFamily']) ? $font_data['preferences']['fontPref']['metadata']['fontFamily'] : 'icomoon';
            
            // Generate a unique identifier for this font family version
            $time_id = time();
            $collection_id = wp_generate_uuid4();
            $custom_font_family = 'custom_font_' . $time_id;
            $font_files = array();

            foreach ($font_data['icons'] as $icon) {
                $name = isset($icon['properties']['name']) ? sanitize_title($icon['properties']['name']) : '';
                if ( '' === $name ) {
                    continue;
                }
                $class_name = $prefix . $name;
                $label = ucwords(str_replace(array('-', '_'), ' ', $name));
                $new_icons[$class_name] = $label;
            }

            // Move font files
            $font_dir = $this->get_upload_dir();
            $fonts_source = dirname( $selection_file ) . '/fonts';
            if ( is_dir($fonts_source) ) {
                $files = scandir($fonts_source);
                foreach ($files as $file) {
                    $allowed_font_extensions = array('eot', 'svg', 'ttf', 'woff', 'woff2');
                    if ($file !== '.' && $file !== '..' && is_file($fonts_source . '/' . $file)) {
                        $ext = pathinfo($file, PATHINFO_EXTENSION);
                        if ( ! in_array(strtolower($ext), $allowed_font_extensions, true) ) {
                            continue;
                        }
                        // Rename file to prevent caching
                        $new_filename = 'font_' . $time_id . '.' . $ext;
                        if ( $wp_filesystem->copy($fonts_source . '/' . $file, $font_dir . '/' . $new_filename, true) ) {
                            $font_files[] = $new_filename;
                        }
                    }
                }
            }
            
            // Build custom CSS
            $css_content = "@font-face {\n";
            $css_content .= "  font-family: '" . $custom_font_family . "';\n";
            $css_content .= "  src: url('font_" . $time_id . ".woff') format('woff'),\n";
            $css_content .= "       url('font_" . $time_id . ".ttf') format('truetype');\n";
            $css_content .= "  font-weight: normal; font-style: normal; font-display: block;\n";
            $css_content .= "}\n\n";
            
            $css_content .= "[class^=\"$prefix\"], [class*=\" $prefix\"] {\n";
            $css_content .= "  font-family: '" . $custom_font_family . "' !important;\n";
            $css_content .= "  speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;\n";
            $css_content .= "  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;\n";
            $css_content .= "}\n\n";

            // Extract CSS rules from style.css if present in Icomoon zip
            $style_css = $this->find_import_file( $unzip_dir, 'style.css' );
            if ( file_exists($style_css) ) {
                $style_content = file_get_contents($style_css);
                // Extract before/after definitions, including multicolor rules.
                // IcoMoon may place color declarations after content, so a simple
                // content-only regex would silently omit those icons.
                preg_match_all('/\.([A-Za-z0-9_-]+):(before|after)\s*\{([^}]*)\}/i', $style_content, $matches, PREG_SET_ORDER);
                $font_classes = array();
                foreach ( $matches as $match ) {
                    $class_name = $match[1];
                    $pseudo      = $match[2];
                    $declarations = $match[3];

                    if ( ! preg_match('/content\s*:\s*["\']([^"\']+)["\']/i', $declarations, $content_match) ) {
                        continue;
                    }

                    if ( ! isset($font_classes[$class_name]) ) {
                        // Scope the font family to each icon class so multiple ZIP
                        // fonts using the same prefix can coexist.
                        $css_content .= "." . $class_name . " { font-family: '" . $custom_font_family . "' !important; }\n";
                        $font_classes[$class_name] = true;
                    }

                    $css_content .= "." . $class_name . ":" . $pseudo . " { content: \"" . $content_match[1] . "\";";
                    if ( preg_match('/color\s*:\s*([^;}]*)/i', $declarations, $color_match) ) {
                        $css_content .= " color: " . trim($color_match[1]) . ";";
                    }
                    $css_content .= " }\n";
                }
            }

            $wp_filesystem->put_contents(
                $font_dir . '/custom_icons_' . $time_id . '.css',
                $css_content,
                FS_CHMOD_FILE
            );

            // Save new icons to WP Options, resolving duplicates
            $existing_data = get_option('ablycuic_custom_data', array());
            $merged_icons = isset($existing_data['icons']) ? $existing_data['icons'] : array();
            
            // Keep every imported stylesheet so multiple ZIP collections work together.
            $css_file = 'custom_icons_' . $time_id . '.css';
            $css_files = isset($existing_data['css_files']) && is_array($existing_data['css_files'])
                ? $existing_data['css_files']
                : array();

            // Migrate the previous single-file format when present.
            if ( ! empty($existing_data['css_file']) && ! in_array($existing_data['css_file'], $css_files, true) ) {
                $css_files[] = $existing_data['css_file'];
            }
            if ( ! in_array($css_file, $css_files, true) ) {
                $css_files[] = $css_file;
            }
            $existing_data['css_files'] = $css_files;

            $collections = isset($existing_data['collections']) && is_array($existing_data['collections'])
                ? $existing_data['collections']
                : array();
            $collections[] = array(
                'id'         => $collection_id,
                'name'       => $zip_name ? $zip_name : 'Colección importada',
                'imported_at'=> current_time('timestamp'),
                'css_file'   => $css_file,
                'font_files' => $font_files,
                'icons'      => array_keys($new_icons),
            );
            $existing_data['collections'] = $collections;
            
            foreach ($new_icons as $class => $label) {
                // If the exact class already exists, we overwrite safely because it just updates the label/unicode
                $merged_icons[$class] = $label;
            }
            $existing_data['icons'] = $merged_icons;
            
            update_option('ablycuic_custom_data', $existing_data);
        }

        $wp_filesystem->delete($unzip_dir, true);
        wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&success=1'));
        exit;
    }

    public function handle_delete_collection() {
        if ( ! current_user_can('manage_options') ) {
            wp_die('No tienes permisos.');
        }
        check_admin_referer('ablycuic_delete_collection_action', 'ablycuic_delete_nonce');

        $collection_id = isset($_POST['collection_id']) ? sanitize_text_field(wp_unslash($_POST['collection_id'])) : '';
        $custom_data = get_option('ablycuic_custom_data', array());
        $collections = isset($custom_data['collections']) && is_array($custom_data['collections']) ? $custom_data['collections'] : array();
        if ( 'legacy-imported-icons' === $collection_id && empty($collections) ) {
            $legacy_fonts = array();
            foreach ( (array) glob($this->get_upload_dir() . '/font_*') as $legacy_font ) {
                $legacy_fonts[] = basename($legacy_font);
            }
            $collections[] = array(
                'id' => 'legacy-imported-icons',
                'icons' => array_keys((array) ($custom_data['icons'] ?? array())),
                'css_files' => array_values(array_filter(array_map('sanitize_file_name', (array) $custom_data['css_files']))),
                'font_files' => $legacy_fonts,
            );
        }
        $remaining = array();
        $removed_icons = array();
        $removed_css = array();
        $deleted_collection = false;
        $font_dir = $this->get_upload_dir();

        foreach ( $collections as $collection ) {
            if ( ! is_array($collection) || empty($collection['id']) || $collection['id'] !== $collection_id ) {
                $remaining[] = $collection;
                continue;
            }

            $deleted_collection = true;
            $removed_icons = isset($collection['icons']) && is_array($collection['icons']) ? $collection['icons'] : array();
            $collection_css = isset($collection['css_files']) && is_array($collection['css_files'])
                ? $collection['css_files']
                : array(isset($collection['css_file']) ? $collection['css_file'] : '');
            foreach ( $collection_css as $css_file ) {
                $removed_css[] = sanitize_file_name($css_file);
            }
            foreach ( (array) ($collection['font_files'] ?? array()) as $font_file ) {
                $font_file = sanitize_file_name($font_file);
                if ( $font_file && file_exists($font_dir . '/' . $font_file) ) {
                    wp_delete_file($font_dir . '/' . $font_file);
                }
            }
        }

        $remaining_css = array();
        foreach ( $remaining as $other_collection ) {
            $other_css = isset($other_collection['css_files']) && is_array($other_collection['css_files'])
                ? $other_collection['css_files']
                : array(isset($other_collection['css_file']) ? $other_collection['css_file'] : '');
            foreach ( $other_css as $css_file ) {
                $css_file = sanitize_file_name($css_file);
                if ( $css_file ) {
                    $remaining_css[$css_file] = true;
                }
            }
        }
        foreach ( array_unique($removed_css) as $css_file ) {
            if ( isset($remaining_css[$css_file]) ) {
                continue;
            }
            if ( $css_file && file_exists($font_dir . '/' . $css_file) ) {
                wp_delete_file($font_dir . '/' . $css_file);
            }
        }

        $remaining_icons = array();
        foreach ( $remaining as $other_collection ) {
            foreach ( (array) ($other_collection['icons'] ?? array()) as $icon_class ) {
                $remaining_icons[$icon_class] = true;
            }
        }
        if ( ! empty($removed_icons) && isset($custom_data['icons']) && is_array($custom_data['icons']) ) {
            foreach ( $removed_icons as $icon_class ) {
                if ( ! isset($remaining_icons[$icon_class]) ) {
                    unset($custom_data['icons'][$icon_class]);
                }
            }
        }
        if ( $deleted_collection ) {
            $custom_data['collections'] = $remaining;
            $custom_data['css_files'] = array_values(array_filter(array_map('sanitize_file_name', array_keys($remaining_css))));
            update_option('ablycuic_custom_data', $custom_data);
        }

        wp_safe_redirect(admin_url('admin.php?page=ablycuic-settings&deleted=1'));
        exit;
    }

    public function render_settings_page() {
        $show_success = sanitize_key( (string) filter_input( INPUT_GET, 'success', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) );
        $show_deleted = sanitize_key( (string) filter_input( INPUT_GET, 'deleted', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) );
        $show_error   = sanitize_key( (string) filter_input( INPUT_GET, 'error', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) );
        ?>
<div style="margin-bottom: 30px; width: 100%;">
    <?php if ( $show_success ) : ?>
    <div class="updated notice is-dismissible" style="border-left-color: #059669; margin: 0 0 20px 0;">
        <p style="font-weight:600; color:#059669;">Iconos actualizados correctamente.</p>
    </div>
    <?php endif; ?>
    <?php if ( $show_deleted ) : ?>
    <div class="updated notice is-dismissible" style="border-left-color: #059669; margin: 0 0 20px 0;">
        <p style="font-weight:600; color:#059669;">Colección eliminada correctamente.</p>
    </div>
    <?php endif; ?>
    <?php if ( $show_error ) : ?>
    <div class="error notice is-dismissible" style="margin: 0 0 20px 0;">
        <p>Error al procesar el archivo. Revisa que sea un .zip válido de IcoMoon.</p>
    </div>
    <?php endif; ?>

    <div style="display: flex; gap: 24px; flex-wrap: wrap; width: 100%;">
        <!-- Panel 1: IcoMoon -->
        <div class="ab-settings-card">
            <h3>Importar Iconos de IcoMoon (ZIP)</h3>
            <p style="font-size: 13px; color: #64748b; margin-bottom: 20px; line-height: 1.5;">Sube el archivo
                <strong>.zip</strong> exportado de tu biblioteca de IcoMoon.io. Los iconos nuevos se sumarán a la
                colección actual.
            </p>
            <form action="<?php echo esc_url(admin_url('admin-post.php')); ?>" method="post"
                enctype="multipart/form-data">
                <input type="hidden" name="action" value="ablycuic_upload_zip">
                <?php wp_nonce_field('ablycuic_upload_zip_action', 'ablycuic_nonce'); ?>
                <div style="margin-bottom: 20px;">
                    <input type="file" name="icomoon_zip" accept=".zip" required class="ab-input-field"
                        style="padding: 8px 12px; border: 1px dashed #cbd5e1; background: #f8fafc; cursor: pointer;">
                </div>
                <button type="submit" class="ab-btn-primary">Subir y Procesar ZIP</button>
            </form>
            <?php
            $custom_data = get_option('ablycuic_custom_data', array());
            $collections = isset($custom_data['collections']) && is_array($custom_data['collections']) ? $custom_data['collections'] : array();
            if ( empty($collections) && ! empty($custom_data['css_files']) ) {
                $legacy_fonts = array();
                foreach ( (array) glob($this->get_upload_dir() . '/font_*') as $legacy_font ) {
                    $legacy_fonts[] = basename($legacy_font);
                }
                $collections[] = array(
                    'id' => 'legacy-imported-icons',
                    'name' => 'Colección importada anteriormente',
                    'icons' => array_keys((array) ($custom_data['icons'] ?? array())),
                    'css_files' => array_values(array_filter(array_map('sanitize_file_name', (array) $custom_data['css_files']))),
                    'font_files' => $legacy_fonts,
                );
            }
            if ( ! empty($collections) ) :
            ?>
            <div class="ab-imported-collections">
                <strong>Colecciones importadas</strong>
                <?php foreach ( $collections as $collection ) :
                    if ( empty($collection['id']) ) continue;
                    $collection_name = ! empty($collection['name']) ? $collection['name'] : 'Colección importada';
                    $collection_icons = isset($collection['icons']) && is_array($collection['icons']) ? count($collection['icons']) : 0;
                    $imported_at = ! empty($collection['imported_at']) ? absint($collection['imported_at']) : 0;
                    $collection_date = $imported_at ? date_i18n(get_option('date_format') . ' ' . get_option('time_format'), $imported_at) : 'Fecha no disponible';
                ?>
                <div class="ab-imported-collection">
                    <span><strong><?php echo esc_html($collection_name); ?></strong><small><?php echo esc_html($collection_date . ' · ' . $collection_icons . ' iconos'); ?></small></span>
                    <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>" onsubmit="return confirm('¿Eliminar esta colección y sus iconos?');">
                        <input type="hidden" name="action" value="ablycuic_delete_collection">
                        <input type="hidden" name="collection_id" value="<?php echo esc_attr($collection['id']); ?>">
                        <?php wp_nonce_field('ablycuic_delete_collection_action', 'ablycuic_delete_nonce'); ?>
                        <button type="submit" class="button ab-delete-collection">Eliminar</button>
                    </form>
                </div>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>

        <!-- Panel 2: Configuración del Plugin -->
        <div class="ab-settings-card">
            <h3>Configuración General</h3>
            <form method="post" action="options.php">
                <?php settings_fields('ablycuic_settings_group'); ?>

                <div style="margin-bottom: 20px;">
                    <label
                        style="font-weight: 600; display: block; margin-bottom: 8px; color: #334155; font-size: 14px;">Mapear
                        Campos ACF Existentes</label>
                    <input type="text" name="ablycuic_mapped_fields"
                        value="<?php echo esc_attr(get_option('ablycuic_mapped_fields')); ?>" class="ab-input-field"
                        placeholder="ej: servicio_icono, tour_icono">
                    <p style="font-size: 12px; color: #94a3b8; margin-top: 6px; line-height: 1.4;">
                        Slugs de los campos de texto ACF donde deseas inyectar el selector (separados por comas).
                    </p>
                </div>

                <div style="margin-bottom: 20px;">
                    <label
                        style="font-weight: 600; display: block; margin-bottom: 8px; color: #334155; font-size: 14px;">Iconos
                        Externos (CDNs)</label>
                    <textarea name="ablycuic_fa_cdn" rows="3" class="ab-input-field"
                        style="font-family: monospace; white-space: pre;"
                        placeholder="https://use.fontawesome.com/releases/.../all.css"><?php echo esc_textarea(get_option('ablycuic_fa_cdn')); ?></textarea>
                    <p style="font-size: 12px; color: #94a3b8; margin-top: 6px; line-height: 1.4;">Enlaces CDN para
                        cargar iconos adicionales (uno por línea). Font Awesome es opcional y no se incluye en este plugin; utiliza únicamente URLs y recursos para los que tengas autorización o licencia.</p>
                </div>

                <div>
                    <?php submit_button('Guardar Configuración', 'primary', 'submit', false, ['class' => 'ab-btn-primary', 'style' => 'background: #1e293b; border: 0; padding: 10px 20px; height: auto; line-height: 1; border-radius: 6px; font-weight: 600; color: #fff; cursor: pointer;']); ?>
                </div>
            </form>
        </div>
    </div>

    <?php
            // Stats Panel
            $custom_data = get_option('ablycuic_custom_data', array());
            $custom_icons_count = isset($custom_data['icons']) ? count($custom_data['icons']) : 0;
            ?>
    <div
        style="margin-top: 24px; background: #fff; padding: 15px 20px; border: 1px solid #e2e8f0; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px;">
        <span class="dashicons dashicons-database" style="color: #64748b;"></span>
        <span style="font-size: 13px; font-weight: 600; color: #334155;">
            Colección actual: <strong
                style="color: #390789; font-size: 14px;"><?php echo esc_html( absint( $custom_icons_count ) ); ?></strong> iconos
            personalizados importados.
        </span>
    </div>
</div>
<?php
    }

    public function enqueue_custom_fonts() {
        // Enqueue FontAwesome/CDNs
        $cdns = get_option('ablycuic_fa_cdn');
        if ( ! empty($cdns) ) {
            $cdn_list = explode("\n", str_replace("\r", "", $cdns));
            foreach ($cdn_list as $index => $cdn_url) {
                $url = trim($cdn_url);
                if ( ! empty($url) ) {
                    wp_enqueue_style('ablycuic-cdn-' . $index, esc_url_raw($url), array(), ABLYCUIC_VERSION);
                }
            }
        }

        // Enqueue every compiled stylesheet imported from a ZIP.
        $custom_data = get_option('ablycuic_custom_data', array());
        $css_files = isset($custom_data['css_files']) && is_array($custom_data['css_files'])
            ? $custom_data['css_files']
            : array();
        if ( ! empty($custom_data['css_file']) && ! in_array($custom_data['css_file'], $css_files, true) ) {
            $css_files[] = $custom_data['css_file'];
        }
        foreach ( $css_files as $index => $css_file ) {
            $css_file = sanitize_file_name($css_file);
            $css_path = $this->get_upload_dir() . '/' . $css_file;
            if ( file_exists($css_path) ) {
                wp_enqueue_style('ablycuic-custom-uploaded-' . $index, $this->get_upload_url() . '/' . rawurlencode($css_file), array(), filemtime($css_path));
            }
        }

    }

    public function render_admin_page() {
        $active_tab = sanitize_key( (string) filter_input( INPUT_GET, 'tab', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) );
        $active_tab = $active_tab ? $active_tab : 'general';
        wp_register_style('ablycuic-admin', false, array(), ABLYCUIC_VERSION);
        wp_enqueue_style('ablycuic-admin');
        ?>
<?php ob_start(); ?>
.ablycuic-tabs {
    display: flex;
    gap: 0;
    margin: 20px 20px 0 0;
    border-bottom: 1px solid #cbd5e1;
}

.ablycuic-tab {
    display: inline-block;
    padding: 13px 20px;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
}

.ablycuic-tab:hover,
.ablycuic-tab:focus {
    color: #15803d;
}

.ablycuic-tab.is-active {
    color: #15803d;
    border-bottom-color: #16a34a;
}

.ab-settings-card {
    background: #fff;
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    flex: 1 1 45%;
    box-sizing: border-box;
}
            .ab-imported-collections { margin-top: 24px; padding-top: 18px; border-top: 1px solid #e2e8f0; }
            .ab-imported-collections > strong { display: block; margin-bottom: 10px; color: #334155; font-size: 13px; }
            .ab-imported-collection { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid #f1f5f9; }
            .ab-imported-collection span, .ab-imported-collection small { display: block; }
            .ab-imported-collection span { color: #334155; font-size: 12px; }
            .ab-imported-collection small { margin-top: 2px; color: #94a3b8; font-size: 11px; }
            .ab-delete-collection { color: #b91c1c !important; border-color: #fecaca !important; background: #fff !important; }
            .ab-delete-collection:hover { color: #fff !important; border-color: #dc2626 !important; background: #dc2626 !important; }

.ab-settings-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
}

.ab-input-field {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    background-color: #fff;
    color: #334155;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.ab-input-field:focus {
    border-color: #390789;
    outline: none;
    box-shadow: 0 0 0 3px rgba(190, 153, 96, 0.15);
}

.ab-btn-primary {
    background: #1e293b;
    color: #fff;
    border: 0;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    text-decoration: none;
}

.ab-btn-primary:hover {
    background: #0f172a;
}

.icon-grid-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.icon-item-admin {
    background: #f8fafc;
    padding: 20px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
}

.icon-item-admin:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
    border-color: #390789;
    background: #fff;
}

.icon-item-admin i.main-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    color: #1e293b;
}

/* Copy button style */
.btn-copy-box {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fff;
    border: 1px solid #cbd5e1;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #475467;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    gap: 4px;
}

.btn-copy-box:hover {
    background: #1e293b;
    color: #fff;
    border-color: #1e293b;
}

.btn-copy-box .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    margin-top: 2px;
}

.icon-item-admin .btn-copy-box {
    top: 8px;
    right: 8px;
    opacity: 0;
    padding: 5px;
}

.icon-item-admin:hover .btn-copy-box {
    opacity: 1;
}

#alpaca-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 99999;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

#alpaca-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}

/* Modern Promotions & Our Plugins Styling */
.ab-promotions-wrapper {
    margin-top: 24px;
    box-sizing: border-box;
}

.ab-promotions-hero {
    background: #0f172a;
    border-radius: 12px;
    padding: 36px 40px;
    margin-bottom: 28px;
    color: #fff;
    box-sizing: border-box;
}

.ab-promotions-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22, 163, 74, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.ab-promotions-hero h2 {
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.25;
}

.ab-promotions-hero p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px 0;
    max-width: 780px;
}

.ab-promotions-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 20px;
    border-top: 1px solid #1e293b;
}

.ab-promotions-hero-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
}

.ab-promotions-hero-feature .dashicons {
    color: #22c55e;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.ab-promotions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    margin-bottom: 28px;
}

.ab-plugin-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ab-plugin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06);
    border-color: #cbd5e1;
}

.ab-plugin-card-header {
    padding: 28px 32px;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
}

.ab-plugin-card-badge {
    position: absolute;
    top: 24px;
    right: 28px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ab-plugin-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.ab-plugin-card-icon.is-booking {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.ab-plugin-card-icon.is-availability {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.ab-plugin-card-icon .dashicons {
    font-size: 26px;
    width: 26px;
    height: 26px;
    line-height: 1;
}

.ab-plugin-card-header h3 {
    margin: 0 0 4px 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.ab-plugin-card-subtitle {
    display: block;
    color: #16a34a;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.ab-plugin-card-subtitle.is-sky {
    color: #0284c7;
}

.ab-plugin-card-desc {
    margin: 0;
    color: #475569;
    font-size: 13.5px;
    line-height: 1.55;
}

.ab-plugin-card-body {
    padding: 24px 32px;
    flex-grow: 1;
    background: #fafafa;
    border-bottom: 1px solid #f1f5f9;
}

.ab-plugin-card-body h4 {
    margin: 0 0 16px 0;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ab-plugin-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ab-plugin-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ab-plugin-feature-icon {
    color: #16a34a;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

.ab-plugin-feature-text {
    font-size: 13px;
    line-height: 1.45;
    color: #334155;
}

.ab-plugin-feature-text strong {
    color: #0f172a;
    font-weight: 700;
}

.ab-plugin-card-footer {
    padding: 20px 32px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ab-plugin-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #16a34a;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 8px;
    border: 1px solid #15803d;
    transition: all 0.2s ease;
    text-align: center;
}

.ab-plugin-cta-btn:hover,
.ab-plugin-cta-btn:focus {
    background: #15803d;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.ab-plugin-cta-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.ab-plugin-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    text-align: center;
}

.ab-custom-banner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ab-custom-banner-info h3 {
    margin: 0 0 6px 0;
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
}

.ab-custom-banner-info p {
    margin: 0;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    max-width: 650px;
}

.ab-custom-banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0f172a;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    padding: 11px 20px;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ab-custom-banner-btn:hover {
    background: #1e293b;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .ab-promotions-hero {
        padding: 28px 24px;
    }

    .ab-promotions-hero h2 {
        font-size: 22px;
    }

    .ab-promotions-hero-features {
        flex-direction: column;
        gap: 12px;
    }

    .ab-promotions-grid {
        grid-template-columns: 1fr;
    }

    .ab-plugin-card-header,
    .ab-plugin-card-body,
    .ab-plugin-card-footer {
        padding: 20px 24px;
    }

    .ab-custom-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    .ab-custom-banner-btn {
        width: 100%;
    }

}
<?php wp_add_inline_style('ablycuic-admin', ob_get_clean()); ?>

<div class="wrap" style="margin-top: 20px; padding-right: 20px; box-sizing: border-box;">
    <nav class="ablycuic-tabs" aria-label="Plugin sections">
        <a class="ablycuic-tab <?php echo 'general' === $active_tab ? 'is-active' : ''; ?>"
            href="<?php echo esc_url( admin_url( 'admin.php?page=ablycuic-settings&tab=general' ) ); ?>"
            style="display: inline-flex; align-items: center; gap: 6px;">
            <span class="dashicons dashicons-admin-generic" style="font-size: 16px; width: 16px; height: 16px;"></span>
            <span>General Settings</span>
        </a>
        <a class="ablycuic-tab <?php echo 'promotions' === $active_tab ? 'is-active' : ''; ?>"
            href="<?php echo esc_url( admin_url( 'admin.php?page=ablycuic-settings&tab=promotions' ) ); ?>"
            style="display: inline-flex; align-items: center; gap: 6px;">
            <span class="dashicons dashicons-star-filled"
                style="color: #f59e0b; font-size: 16px; width: 16px; height: 16px;"></span>
            <span>Premium Plugins for Travel Agencies</span>
            <span
                style="background: #ecfdf5; color: #15803d; border: 1px solid #86efac; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 12px; text-transform: uppercase; margin-left: 2px;">PRO</span>
        </a>
    </nav>

    <?php if ( 'promotions' === $active_tab ) : ?>
    <div class="ab-promotions-wrapper">
        <!-- Hero Header -->
        <div class="ab-promotions-hero">
            <div class="ab-promotions-hero-badge">
                <span class="dashicons dashicons-plugins-checked"
                    style="font-size:14px;width:14px;height:14px;line-height:1;"></span> Ecosistema Ably Perú
            </div>
            <h2>Plugins Premiums para Agencias de Turismo</h2>
            <p>Diseñados y optimizados exclusivamente para empresas del sector viajes. Aumenta tus conversiones,
                automatiza tus reservas y brinda información en tiempo real con nuestras soluciones especializadas para
                WordPress.</p>

            <div class="ab-promotions-hero-features">
                <div class="ab-promotions-hero-feature">
                    <span class="dashicons dashicons-yes-alt"></span>
                    <span>100% Compatibles con WordPress & Gutenberg / Elementor</span>
                </div>
                <div class="ab-promotions-hero-feature">
                    <span class="dashicons dashicons-shield"></span>
                    <span>Código seguro de alto rendimiento y cero sobrecarga</span>
                </div>
                <div class="ab-promotions-hero-feature">
                    <span class="dashicons dashicons-operator"></span>
                    <span>Soporte técnico directo y personalizado en español</span>
                </div>
            </div>
        </div>

        <!-- Products Grid -->
        <div class="ab-promotions-grid">
            <!-- Card 1: Ably Booking -->
            <div class="ab-plugin-card">
                <div class="ab-plugin-card-header">
                    <span class="ab-plugin-card-badge">Más Popular</span>
                    <div class="ab-plugin-card-icon is-booking">
                        <span class="dashicons dashicons-calendar-alt"></span>
                    </div>
                    <h3>Booking System</h3>
                    <span class="ab-plugin-card-subtitle">Tours & Treks Booking System</span>
                    <p class="ab-plugin-card-desc">Sistema integral de reservas que gestiona itinerarios, pasarelas de
                        pago, adicionales de equipo (rentals) y comprobantes de compra dinámicos en una sola interfaz.
                    </p>
                </div>
                <div class="ab-plugin-card-body">
                    <h4>Características Clave</h4>
                    <ul class="ab-plugin-feature-list">
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Gestión de Reservas y Treks:</strong> Control
                                total de pasajeros, salidas y disponibilidad.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Pagos con Tarjetas & PayPal:</strong>
                                Integración directa con Izipay y PayPal en soles y dólares.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Rentals & Upgrades:</strong> Selección dinámica
                                de bolsas de dormir, bastones y servicios extras.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Generador de Invoices PDF:</strong> Envío
                                automático de comprobantes e itinerarios al cliente.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Seguridad Anti-Spam:</strong> Filtro inteligente
                                con Cloudflare Turnstile nativo.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Validación de Pagos en VIVO:</strong>
                                Confirmación automática antes de procesar el registro de reserva.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Copia de seguridad:</strong>
                                Posee descargar copias de seguridad de las reservas.</div>
                        </li>
                    </ul>
                </div>
                <div class="ab-plugin-card-footer">
                    <a class="ab-plugin-cta-btn"
                        href="https://wa.me/51935381848?text=Hola%2C%20quisiera%20informaci%C3%B3n%20y%20una%20cotizaci%C3%B3n%20de%20Ably%20Booking%20-%20Tours%20Booking%20System."
                        target="_blank" rel="noopener noreferrer">
                        <span class="dashicons dashicons-format-chat" aria-hidden="true"></span>
                        Solicitar Demo por WhatsApp
                    </a>
                    <div class="ab-plugin-guarantee">
                        <span class="dashicons dashicons-awards" style="font-size:15px;width:15px;height:15px;"></span>
                        <span>Instalación y soporte incluido por Ably Perú</span>
                    </div>
                </div>
            </div>

            <!-- Card 2: Inca Trail Availability -->
            <div class="ab-plugin-card">
                <div class="ab-plugin-card-header">
                    <span class="ab-plugin-card-badge">Especializado</span>
                    <div class="ab-plugin-card-icon is-availability">
                        <span class="dashicons dashicons-chart-area"></span>
                    </div>
                    <h3>Inca Trail Availability</h3>
                    <span class="ab-plugin-card-subtitle is-sky">Disponibilidad en Tiempo Real</span>
                    <p class="ab-plugin-card-desc">Plugin premium para mostrar la disponibilidad oficial de espacios en
                        el Camino Inca (4 Días y 2 Días) mediante un calendario moderno, veloz y multilenguaje.</p>
                </div>
                <div class="ab-plugin-card-body">
                    <h4>Características Clave</h4>
                    <ul class="ab-plugin-feature-list">
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Disponibilidad en Tiempo Real:</strong>
                                Sincronización continua de cupos para Camino Inca 4D y 2D.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Frontend Multilenguaje:</strong> Totalmente
                                compatible con Polylang y WPML para sitios multi-idioma.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Control de Calendario:</strong> Selección de mes
                                inicial por defecto y navegación fluida entre meses.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Alerta de Cierre en Febrero:</strong>
                                Notificaciones informativas automatizadas por mantenimiento anual.</div>
                        </li>
                        <li class="ab-plugin-feature-item">
                            <span class="ab-plugin-feature-icon">✓</span>
                            <div class="ab-plugin-feature-text"><strong>Shortcodes y Gutenberg:</strong> Integración
                                limpia en cualquier página o maquetador visual.</div>
                        </li>
                    </ul>
                </div>
                <div class="ab-plugin-card-footer">
                    <a class="ab-plugin-cta-btn"
                        href="https://wa.me/51935381848?text=Hola%2C%20quisiera%20informaci%C3%B3n%20y%20una%20cotizaci%C3%B3n%20de%20Inca%20Trail%20Availability."
                        target="_blank" rel="noopener noreferrer">
                        <span class="dashicons dashicons-format-chat" aria-hidden="true"></span>
                        Solicitar Demo por WhatsApp
                    </a>
                    <div class="ab-plugin-guarantee">
                        <span class="dashicons dashicons-awards" style="font-size:15px;width:15px;height:15px;"></span>
                        <span>Licencia por dominio con actualizaciones continuas</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Custom Solutions Footer Banner -->
        <div class="ab-custom-banner">
            <div class="ab-custom-banner-info">
                <h3>¿Necesitas un plugin o desarrollo personalizado para tu agencia?</h3>
                <p>En Ably Perú desarrollamos módulos a medida, integraciones con sistemas ERP, pasarelas de pago
                    locales, motores de reserva y conexión con APIs turísticas.</p>
            </div>
            <a class="ab-custom-banner-btn"
                href="https://wa.me/51935381848?text=Hola%2C%20quisiera%20cotizar%20un%20desarrollo%20personalizado%20para%20mi%20agencia%20de%20viajes."
                target="_blank" rel="noopener noreferrer">
                <span class="dashicons dashicons-format-chat" aria-hidden="true"></span>
                Hablar con un Especialista
            </a>
        </div>
    </div>
    <?php else : ?>
    <h1 class="screen-reader-text">Custom Icons Manager</h1>
    <div
        style="background: #0f172a; border-radius: 8px; padding: 28px 32px; margin-bottom: 30px; display: flex; align-items: center; gap: 20px; color: #fff;">
        <div
            style="background: #4c1d95; width: 56px; height: 56px; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
            <span class="dashicons dashicons-art"
                style="font-size: 32px; width: 32px; height: 32px; color: #fff; line-height: 1;"></span>
        </div>
        <div style="flex-grow: 1;">
            <div style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
                <div style="font-weight: 800; font-size: 22px; margin: 0; color: #fff; line-height: 1.2;">Custom Icons
                    Manager</div>
                <span
                    style="background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 50px; border: 1px solid #f59e0b;">Active
                    v2.0.4</span>
            </div>
            <p style="color: #e2e8f0; margin: 6px 0 0 0; font-size: 13px; line-height: 1.4;">Colección de iconos
                personalizados e integración nativa con ACF. Sube tus fuentes ZIP de IcoMoon y mapea tus campos
                dinámicamente.</p>
        </div>
    </div>

    <!-- Renders Settings Form (Zip Upload + CDN options) -->
    <?php $this->render_settings_page(); ?>

    <!-- Visual Icon Library -->
    <div style="background: #fff; padding: 35px; border-radius: 8px; border: 1px solid #e2e8f0; margin-top: 24px;">
        <h2
            style="margin-top: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; color: #0f172a; font-weight: 700;">
            <span class="dashicons dashicons-share-alt2" style="color: #390789;"></span> Biblioteca de Iconos
            Disponibles
        </h2>
        <p style="font-size: 13px; color: #64748b; margin-bottom: 20px; line-height: 1.5;">
            Haz clic en el icono para copiar el código HTML: <code>&lt;i class="..."&gt;&lt;/i&gt;</code>.
            <br><span style="color: #94a3b8;"><em>Nota: Si agregaste CDNs externos, sus iconos funcionarán en toda la
                    web pero no aparecerán gráficamente en esta grilla automática a menos que los incluyas en un ZIP de
                    IcoMoon.</em></span>
        </p>

        <div class="icon-grid-admin">
            <?php 
                    $icons = function_exists('ablycuic_get_icons') ? ablycuic_get_icons() : [];
                    if ( empty( $icons ) ) :
                    ?>
            <p style="color: #64748b; font-style: italic;">No hay iconos registrados.</p>
            <?php else : ?>
            <?php foreach ( $icons as $class => $data ) : 
                            $label_text = is_array($data) ? $data['label'] : $data;
                        ?>
            <div class="icon-item-admin">
                <button class="btn-copy-box js-copy-icon" data-class="<?php echo esc_attr($class); ?>"
                    title="Copiar HTML">
                    <span class="dashicons dashicons-admin-page"></span>
                </button>
                <i class="main-icon <?php echo esc_attr( $class ); ?>"></i>
                <span
                    style="font-weight: 700; font-size: 11px; display: block; color: #334155; margin-bottom: 5px;"><?php echo esc_html( $label_text ); ?></span>
                <code
                    style="font-size: 10px; color: #64748b; background: #f1f5f9; padding: 2px 6px; border-radius: 4px;"><?php echo esc_html( $class ); ?></code>
            </div>
            <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>

    <div id="alpaca-toast">¡Copiado con éxito!</div>

    <?php wp_add_inline_script('ablycuic-admin', <<<'JS'
    jQuery(document).ready(function($) {
        function showToast(message, type) {
            var $toast = $('#alpaca-toast');
            $toast.text(message).addClass('show');

            if (type === 'success') $toast.css('background', '#059669');
            else if (type === 'error') $toast.css('background', '#ef4444');
            else if (type === 'info') $toast.css('background', '#1e293b');

            setTimeout(function() {
                $toast.removeClass('show');
            }, 3000);
        }

        // Copy Icon HTML
        $('.js-copy-icon').on('click', function() {
            var iconClass = $(this).data('class');
            var text = '<i class="' + iconClass + '"></i>';
            copyToClipboard(text);
            showToast('¡Icono copiado con éxito!', 'success');
        });

        function copyToClipboard(text) {
            var temp = $("<textarea>");
            $("body").append(temp);
            temp.val(text).select();
            document.execCommand("copy");
            temp.remove();
        }
    });
JS
    ); ?>

    <footer
        style="margin-top: 40px; border-top: 1px solid #e2e8f0; padding-top: 20px; text-align: center; color: #94a3b8; font-size: 12px; font-weight: 500;">
        developer: <a href="https://ably.pe" target="_blank"
            style="color: #390789; text-decoration: none; font-weight: 600;">Ably Peru</a>
    </footer>
</div>
<?php
    }
}

ABLYCUIC_Manager::get_instance();