<?php

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

// Build shortcode from currently saved settings
$saved    = get_option('fast_fuzzy_search_options', []);
$defaults = fast_fuzzy_search_get_default_options();

$shortcode_attrs = [];
if (!empty($saved['placeholder']) && ($saved['placeholder'] ?? '') !== $defaults['placeholder']) {
    $shortcode_attrs[] = 'placeholder="' . esc_attr($saved['placeholder']) . '"';
}
if (!empty($saved['aesthetic']) && ($saved['aesthetic'] ?? '') !== $defaults['aesthetic']) {
    $shortcode_attrs[] = 'aesthetic="' . esc_attr($saved['aesthetic']) . '"';
}
if (!empty($saved['type']) && ($saved['type'] ?? '') !== $defaults['type']) {
    $shortcode_attrs[] = 'type="' . esc_attr($saved['type']) . '"';
}

$shortcode = '[fast_fuzzy_search';
if (!empty($shortcode_attrs)) {
    $shortcode .= ' ' . implode(' ', $shortcode_attrs);
}
$shortcode .= ']';

$shortcode_esc = esc_attr($shortcode);
?>
<div class="ffs-mode-content ffs-mt-3">
    <div class="ffs-notice">
        <span class="ffs-notice__icon" aria-hidden="true">
            <span class="dashicons dashicons-shortcode"></span>
        </span>
        <div>
            <p class="ffs-notice__title"><?php esc_html_e('Place the search bar anywhere', 'fast-fuzzy-search'); ?></p>
            <p class="ffs-notice__body">
                <?php esc_html_e('Paste the shortcode into any page, post, or widget to render the search bar. Combine with the options below to customize the look.', 'fast-fuzzy-search'); ?>
            </p>
        </div>
    </div>

    <div class="ffs-mode-content__shortcode">
        <code><?php echo esc_html($shortcode); ?></code>
        <button
            type="button"
            class="button button-secondary ffs-shrink-0"
            x-data="{ copied: false }"
            x-on:click="navigator.clipboard.writeText('<?php echo $shortcode_esc; ?>').then(() => { copied = true; setTimeout(() => copied = false, 1800); })"
        >
            <span x-show="!copied">
                <span class="dashicons dashicons-clipboard" aria-hidden="true"></span>
                <?php esc_html_e('Copy', 'fast-fuzzy-search'); ?>
            </span>
            <span x-cloak x-show="copied">
                <span class="dashicons dashicons-yes" aria-hidden="true"></span>
                <?php esc_html_e('Copied', 'fast-fuzzy-search'); ?>
            </span>
        </button>
    </div>

    <div>
        <p class="ffs-form-row__label-text ffs-mb-2"><?php esc_html_e('Available options', 'fast-fuzzy-search'); ?></p>
        <ul class="ffs-mode-content__list">
            <li>
                <code>placeholder</code>
                <span><?php esc_html_e('— any placeholder text shown inside the input.', 'fast-fuzzy-search'); ?></span>
            </li>
            <li>
                <code>aesthetic</code>
                <span><?php esc_html_e('— valid values:', 'fast-fuzzy-search'); ?>
                    <code>minimal-light</code>,
                    <code>minimal-dark</code>,
                    <code>material-light</code>,
                    <code>material-dark</code>,
                    <code>glassmorphic</code>,
                    <code>brutal</code>,
                    <code>custom</code>
                </span>
            </li>
            <li>
                <code>type</code>
                <span><?php esc_html_e('— valid values:', 'fast-fuzzy-search'); ?>
                    <code>input-field</code>,
                    <code>input-button</code>,
                    <code>icon-button</code>,
                    <code>button</code>
                </span>
            </li>
        </ul>
    </div>
</div>
