<?php
if (!defined('ABSPATH')) {
    exit;
}

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$defaults = array(
    'site_representation' => 'organization',
    'website_name' => '',
    'organization_name' => '',
    'social_facebook' => '',
    'social_twitter' => '',
    'social_instagram' => '',
    'social_extra' => array(),
    'newsletter_email' => '',
    'allow_tracking' => 'no',
    'seo_meta_title' => '',
    'seo_meta_description' => '',
    'configuration_done' => false,
);

// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$stored_website_url = get_option('ptgold_website_url', false);
$stored_country_name = get_option('ptgold_country_name', false);
$options = array(
    'site_representation' => get_option('ptgold_site_representation', $defaults['site_representation']),
    'website_url' => false !== $stored_website_url ? $stored_website_url : home_url('/'),
    'country_name' => false !== $stored_country_name ? $stored_country_name : (function_exists('ptgold_preciousuite_get_store_country_name') ? ptgold_preciousuite_get_store_country_name() : ''),
    'website_name' => get_option('ptgold_website_name', $defaults['website_name']),
    'organization_name' => get_option('ptgold_organization_name', $defaults['organization_name']),
    'social_facebook' => get_option('ptgold_social_facebook', $defaults['social_facebook']),
    'social_twitter' => get_option('ptgold_social_twitter', $defaults['social_twitter']),
    'social_instagram' => get_option('ptgold_social_instagram', $defaults['social_instagram']),
    'social_extra' => json_decode(get_option('ptgold_social_extra', '[]'), true) ?: array(),
    'newsletter_email' => get_option('ptgold_newsletter_email', $defaults['newsletter_email']),
    'allow_tracking' => get_option('ptgold_allow_tracking', $defaults['allow_tracking']),
    'seo_meta_title' => get_option('ptgold_seo_meta_title', $defaults['seo_meta_title']),
    'seo_meta_description' => get_option('ptgold_seo_meta_description', $defaults['seo_meta_description']),
    'configuration_done' => (bool) get_option('ptgold_configuration_done', false),
);

// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$step_order = array('seo_data', 'site_representation', 'social_profiles', 'personal_preferences', 'finish');
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$saved_step = '';

if (
    isset($_POST['ptgold_configuration_nonce']) &&
    wp_verify_nonce(
        sanitize_text_field(
            wp_unslash($_POST['ptgold_configuration_nonce'])
        ),
        'ptgold_save_configuration'
    )
) {

    $step = isset($_POST['ptgold_save_step']) ? sanitize_key(wp_unslash($_POST['ptgold_save_step'])) : '';

    if ('seo_data' === $step) {
        $options['seo_meta_title'] = sanitize_text_field(wp_unslash($_POST['seo_meta_title'] ?? ''));
        $options['seo_meta_description'] = sanitize_textarea_field(wp_unslash($_POST['seo_meta_description'] ?? ''));
        $options['website_url'] = esc_url_raw(wp_unslash($_POST['website_url'] ?? ''));
        $options['country_name'] = sanitize_text_field(wp_unslash($_POST['country_name'] ?? ''));
        update_option('ptgold_seo_meta_title', $options['seo_meta_title']);
        update_option('ptgold_seo_meta_description', $options['seo_meta_description']);
        update_option('ptgold_website_url', $options['website_url']);
        update_option('ptgold_country_name', $options['country_name']);
        $saved_step = 'seo_data';
    }

    if ('site_representation' === $step) {
        $options['site_representation'] = in_array(
            sanitize_text_field(wp_unslash($_POST['site_representation'] ?? '')),
            array('organization', 'person', 'jewelry_store', 'gold_buyer', 'pawn_shop', 'precious_metals_dealer', 'independent_jeweler', 'jewelry_manufacturer'),
            true
        )
            ? sanitize_text_field(wp_unslash($_POST['site_representation']))
            : 'organization';

        $options['website_name'] = sanitize_text_field(wp_unslash($_POST['website_name'] ?? ''));
        $options['organization_name'] = sanitize_text_field(wp_unslash($_POST['organization_name'] ?? ''));
        update_option('ptgold_site_representation', $options['site_representation']);
        update_option('ptgold_website_name', $options['website_name']);
        update_option('ptgold_organization_name', $options['organization_name']);
        $saved_step = 'site_representation';
    }

    if ('social_profiles' === $step) {
        $options['social_facebook'] = esc_url_raw(wp_unslash($_POST['social_facebook'] ?? ''));
        $options['social_twitter'] = esc_url_raw(wp_unslash($_POST['social_twitter'] ?? ''));
        $options['social_instagram'] = esc_url_raw(wp_unslash($_POST['social_instagram'] ?? ''));
        update_option('ptgold_social_facebook', $options['social_facebook']);
        update_option('ptgold_social_twitter', $options['social_twitter']);
        update_option('ptgold_social_instagram', $options['social_instagram']);

        $extra_names = isset($_POST['social_extra_name']) && is_array($_POST['social_extra_name']) ? map_deep(wp_unslash($_POST['social_extra_name']), 'sanitize_text_field') : array();
        $extra_urls = isset($_POST['social_extra_url']) && is_array($_POST['social_extra_url']) ? map_deep(wp_unslash($_POST['social_extra_url']), 'sanitize_text_field') : array();
        $social_extra = array();
        foreach ($extra_names as $i => $name) {
            $clean_name = sanitize_text_field($name);
            $clean_url = esc_url_raw($extra_urls[$i] ?? '');
            if (!empty($clean_name) || !empty($clean_url)) {
                $social_extra[] = array('name' => $clean_name, 'url' => $clean_url);
            }
        }
        $options['social_extra'] = $social_extra;
        update_option('ptgold_social_extra', wp_json_encode($social_extra));
        $saved_step = 'social_profiles';
    }

    if ('personal_preferences' === $step) {
        $options['newsletter_email'] = sanitize_email(wp_unslash($_POST['newsletter_email'] ?? ''));
        $allow_tracking_input = isset($_POST['allow_tracking']) ? sanitize_text_field(wp_unslash($_POST['allow_tracking'])) : 'no';
        $options['allow_tracking'] = ('yes' === $allow_tracking_input) ? 'yes' : 'no';
        update_option('ptgold_newsletter_email', $options['newsletter_email']);
        update_option('ptgold_allow_tracking', $options['allow_tracking']);

        if ('yes' === $options['allow_tracking'] && is_email($options['newsletter_email'])) {
            $payload = array(
                'email' => $options['newsletter_email'],
                'website_url' => get_option('ptgold_website_url', ''),
                'country_name' => get_option('ptgold_country_name', ''),
                'website_name' => get_option('ptgold_website_name', ''),
                'organization_name' => get_option('ptgold_organization_name', ''),
            );

            $social_profiles = array();
            $fixed_profiles = array(
                'facebook' => get_option('ptgold_social_facebook', ''),
                'twitter' => get_option('ptgold_social_twitter', ''),
                'instagram' => get_option('ptgold_social_instagram', ''),
            );
            foreach ($fixed_profiles as $platform => $url) {
                $url = esc_url_raw($url);
                if (!empty($url)) {
                    $social_profiles[$platform] = $url;
                }
            }

            $social_extra = json_decode(get_option('ptgold_social_extra', '[]'), true);
            if (is_array($social_extra)) {
                foreach ($social_extra as $extra) {
                    $name = isset($extra['name']) ? sanitize_text_field($extra['name']) : '';
                    $url = isset($extra['url']) ? esc_url_raw($extra['url']) : '';
                    if (!empty($name) && !empty($url)) {
                        $key = strtolower(trim(preg_replace('/[^a-z0-9_]+/', '_', $name), '_'));
                        if (!empty($key)) {
                            $social_profiles[$key] = $url;
                        }
                    }
                }
            }

            if (!empty($social_profiles)) {
                $payload['social_profiles'] = $social_profiles;
            }

            wp_remote_post('https://preciousuite.com/api/newsletter', array(
                'headers' => array('Content-Type' => 'application/json'),
                'body' => wp_json_encode($payload),
                'timeout' => 15,
            ));
        }

        $saved_step = 'personal_preferences';
    }

    if ('finish' === $step) {
        update_option('ptgold_configuration_done', true);
        $options['configuration_done'] = true;
        $saved_step = 'finish';
    }
}
// phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
$step_done = array(
    'seo_data' => !empty($options['seo_meta_title']) || !empty($options['seo_meta_description']),
    'site_representation' => !empty($options['website_name']) || !empty($options['organization_name']),
    'social_profiles' => !empty($options['social_facebook']) || !empty($options['social_twitter']) || !empty($options['social_instagram']) || !empty($options['social_extra']),
    'personal_preferences' => !empty($options['newsletter_email']) || 'yes' === $options['allow_tracking'],
    'finish' => $options['configuration_done'],
);

if ($saved_step) {
    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
    $saved_idx = array_search($saved_step, $step_order, true);
    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
    $next_idx = $saved_idx + 1;
    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
    $open_step = isset($step_order[$next_idx]) ? $step_order[$next_idx] : $saved_step;
} else {
    $open_step = 'seo_data';
    // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
    foreach ($step_done as $k => $done) {
        if (!$done) {
            $open_step = $k;
            break;
        }
    }
}

wp_enqueue_media();

// Enqueue styles and scripts for first-time configuration
wp_enqueue_style(
    'ptgold-first-time-config',
    PMRCGOLD_URL . '/includes/precioussuite/assets/first-time-configuration.css',
    array(),
    '1.0.0'
);

wp_enqueue_script(
    'ptgold-first-time-config',
    PMRCGOLD_URL . '/includes/precioussuite/assets/first-time-configuration.js',
    array(),
    '1.0.0',
    true
);

// Localize script with translations and config
wp_localize_script(
    'ptgold-first-time-config',
    'ptgoldConfig',
    array(
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'i18n' => array(
            'platformName' => esc_html__('Platform name', 'preciousuite-metal-rate-charts'),
            'remove' => esc_html__('Remove', 'preciousuite-metal-rate-charts'),
            'enterEmail' => esc_html__('Please enter an email address.', 'preciousuite-metal-rate-charts'),
            'validEmail' => esc_html__('Please enter a valid email address.', 'preciousuite-metal-rate-charts'),
            'securityError' => esc_html__('Security error. Please refresh the page.', 'preciousuite-metal-rate-charts'),
            'subscribing' => esc_html__('Subscribing...', 'preciousuite-metal-rate-charts'),
            'thankYou' => esc_html__('Thank you for subscribing!', 'preciousuite-metal-rate-charts'),
            'error' => esc_html__('An error occurred. Please try again later.', 'preciousuite-metal-rate-charts'),
            'networkError' => esc_html__('Network error. Please try again later.', 'preciousuite-metal-rate-charts'),
        )
    )
);

?>

<div class="wrap precioussuite-wrap preciousuite-wrap preciousuite-dashboard first-time-configuration">
    <div class="preciousuite-dashboard-shell first-time-configuration">

        <aside class="preciousuite-dashboard-nav">
            <div class="preciousuite-dashboard-brand">
                <div class="preciousuite-page-brand">
                    <div class="preciousuite-box preciousuite-logo">
                        <a href="<?php echo esc_url("https://www.preciousuite.com"); ?>" target="_blank"
                            rel="noopener noreferrer" class="preciousuite-page-title">
                            <img src="<?php echo esc_url(PMRCGOLD_URL . 'includes/precioussuite/assets/' . 'uploads/Preciousuite_Logo.png'); ?>"
                                alt="<?php esc_attr_e('Preciousuite Logo', 'preciousuite-metal-rate-charts'); ?>">
                        </a>
                    </div>
                </div>
            </div>
            <nav>
                <a href="<?php echo esc_url(admin_url('admin.php?page=preciousuite')); ?>">
                    <img src="<?php echo esc_url(PMRCGOLD_URL . 'includes/precioussuite/assets/' . 'uploads/dashboard-icon.png'); ?>"
                        alt="" width="20" height="20" loading="lazy" style="margin-right:.75rem;" />
                    <?php esc_html_e('General', 'preciousuite-metal-rate-charts'); ?>
                </a>
                <a href="<?php echo esc_url(admin_url('admin.php?page=preciousuite-tasks')); ?>">
                    <img src="<?php echo esc_url(PMRCGOLD_URL . 'includes/precioussuite/assets/' . 'uploads/task-list-icon.png'); ?>"
                        alt="" width="20" height="20" loading="lazy" style="margin-right:.75rem;" />
                    <?php esc_html_e('Task list', 'preciousuite-metal-rate-charts'); ?>
                </a>
                <a href="<?php echo esc_url(admin_url('admin.php?page=preciousuite-alerts')); ?>">
                    <img src="<?php echo esc_url(PMRCGOLD_URL . 'includes/precioussuite/assets/' . 'uploads/alert-center-icon.png'); ?>"
                        alt="" width="20" height="20" loading="lazy" style="margin-right:.75rem;" />
                    <?php esc_html_e('Alert center', 'preciousuite-metal-rate-charts'); ?>
                </a>
                <a class="is-active"
                    href="<?php echo esc_url(admin_url('admin.php?page=preciousuite-configuration')); ?>">
                    <img src="<?php echo esc_url(PMRCGOLD_URL . 'includes/precioussuite/assets/' . 'uploads/first-time-configuration-icon.png'); ?>"
                        alt="" width="20" height="20" loading="lazy" style="margin-right:.75rem;" />
                    <?php esc_html_e('First-time configuration', 'preciousuite-metal-rate-charts'); ?>
                </a>
            </nav>
        </aside>

        <main class="preciousuite-dashboard-main">
            <div class="ptgold-cfg-wrap">

                <div class="preciousuite-sidebar-card ptgold-cfg-hero">
                    <h1 id="plugin-hero-heading">
                        <?php esc_html_e('First-time configuration', 'preciousuite-metal-rate-charts'); ?>
                    </h1>
                    <p style="color: var(--ps-muted); font-size: 15px; margin: 0px 0 0;">
                        <?php esc_html_e('Tell us about your store so we can set up Preciousuite correctly. Follow these 5 steps to get started.', 'preciousuite-metal-rate-charts'); ?>
                    </p>
                </div>

                <div class="ptgold-steps-list">

                    <?php
                    function ptgold_step_open($key, $label, $step_done, $open_step)
                    {
                        $is_done = !empty($step_done[$key]);
                        $is_active = ($open_step === $key);
                        $classes = 'ptgold-step';
                        if ($is_done)
                            $classes .= ' is-done';
                        if ($is_active)
                            $classes .= ' is-active';
                        echo '<div class="' . esc_attr($classes) . '" id="ptgold-step-' . esc_attr($key) . '">';
                        echo '<div class="ptgold-step-track"></div>';
                        echo '<div class="ptgold-step-dot"><svg width="13" height="10" viewBox="0 0 13 10" fill="none"><path d="M1 5l3.5 4L12 1" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>';
                        echo '<div class="ptgold-step-right">';
                        echo '<div class="ptgold-step-header" data-step="' . esc_attr($key) . '">';
                        echo '<h2>' . esc_html($label) . '</h2>';
                        echo '<button type="button" class="ptgold-edit-btn">' . esc_html__('Edit', 'preciousuite-metal-rate-charts') . '</button>';
                        echo '</div>';
                        echo '<div class="ptgold-step-body"><div class="ptgold-step-body-inner">';
                    }
                    function ptgold_step_close()
                    {
                        echo '</div></div></div></div>';
                    }
                    function ptgold_saved_notice($current_step, $saved_step)
                    {
                        if ($saved_step === $current_step) {
                            echo '<div class="ptgold-saved-notice">';
                            echo '<svg width="15" height="15" viewBox="0 0 15 15" fill="none"><circle cx="7.5" cy="7.5" r="7.5" fill="#00a32a"/><path d="M3.5 7.5l3 3 5-5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
                            echo esc_html__('Changes saved.', 'preciousuite-metal-rate-charts');
                            echo '</div>';
                        }
                    }
                    ?>

                    <?php
                    ptgold_step_open('seo_data', __('Store Information', 'preciousuite-metal-rate-charts'), $step_done, $open_step);
                    ptgold_saved_notice('seo_data', $saved_step);
                    ?>
                    <p class="ptgold-step-intro">
                        <?php esc_html_e('Tell us about your jewelry business so we can personalize Preciousuite for your store. This information helps configure your store profile, branding, and key settings.', 'preciousuite-metal-rate-charts'); ?>
                    </p>
                    <form method="post"
                        action="<?php echo esc_url(admin_url('admin.php?page=preciousuite-configuration')); ?>">
                        <?php wp_nonce_field('ptgold_save_configuration', 'ptgold_configuration_nonce'); ?>
                        <input type="hidden" name="ptgold_save_step" value="seo_data" />
                        <div class="ptgold-field">
                            <label
                                for="ptgold_seo_meta_title"><?php esc_html_e('Store Name', 'preciousuite-metal-rate-charts'); ?></label>
                            <input type="text" id="ptgold_seo_meta_title" name="seo_meta_title"
                                value="<?php echo esc_attr($options['seo_meta_title']); ?>"
                                placeholder="<?php esc_attr_e('E.g. My Jewelry Store – Gold & Silver', 'preciousuite-metal-rate-charts'); ?>" />
                        </div>
                        <div class="ptgold-field">
                            <label
                                for="ptgold_seo_meta_desc"><?php esc_html_e('Brief About Store', 'preciousuite-metal-rate-charts'); ?></label>
                            <textarea id="ptgold_seo_meta_desc" name="seo_meta_description"
                                placeholder="E.g. We are a family-owned jewelry store specializing in gold, silver, diamond, and custom jewelry since 2010. Serving customers across India with certified and trusted products."><?php echo esc_textarea($options['seo_meta_description']); ?></textarea>
                        </div>

                        <div class="ptgold-field">
                            <label
                                for="ptgold_website_url"><?php esc_html_e('Store Website URL', 'preciousuite-metal-rate-charts'); ?></label>
                            <input type="text" id="ptgold_website_url" name="website_url"
                                value="<?php echo esc_attr($options['website_url']); ?>"
                                placeholder="<?php echo esc_attr(home_url('/')); ?>" />
                        </div>
                        <div class="ptgold-field">
                            <label
                                for="ptgold_country_name"><?php esc_html_e('Country name', 'preciousuite-metal-rate-charts'); ?></label>
                            <input type="text" id="ptgold_country_name" name="country_name"
                                value="<?php echo esc_attr($options['country_name']); ?>"
                                placeholder="<?php echo esc_attr(function_exists('ptgold_preciousuite_get_store_country_name') ? ptgold_preciousuite_get_store_country_name() : 'E.g. USA'); ?>" />
                        </div>

                        <div class="ptgold-step-save">
                            <button type="submit"
                                class="button button-primary"><?php esc_html_e('Save changes', 'preciousuite-metal-rate-charts'); ?></button>
                        </div>
                    </form>
                    <?php ptgold_step_close(); ?>

                    <?php
                    ptgold_step_open('site_representation', __('STORE IDENTITY', 'preciousuite-metal-rate-charts'), $step_done, $open_step);
                    ptgold_saved_notice('site_representation', $saved_step);
                    ?>
                    <p class="ptgold-step-intro">
                        <?php esc_html_e('Help us understand your business so Preciousuite can configure your store profile and structured business information correctly.', 'preciousuite-metal-rate-charts'); ?>
                    </p>
                    <form method="post"
                        action="<?php echo esc_url(admin_url('admin.php?page=preciousuite-configuration')); ?>">
                        <?php wp_nonce_field('ptgold_save_configuration', 'ptgold_configuration_nonce'); ?>
                        <input type="hidden" name="ptgold_save_step" value="site_representation" />
                        <div class="ptgold-field">
                            <label><?php esc_html_e('What best describes your business?', 'preciousuite-metal-rate-charts'); ?></label>
                            <div class="ptgold-radios">
                                <label><input type="radio" name="site_representation" value="jewelry_store" <?php checked('jewelry_store', $options['site_representation']); ?> />
                                    <?php esc_html_e('Jewelry Store', 'preciousuite-metal-rate-charts'); ?></label>
                                <label><input type="radio" name="site_representation" value="gold_buyer" <?php checked('gold_buyer', $options['site_representation']); ?> />
                                    <?php esc_html_e('Gold Buyer', 'preciousuite-metal-rate-charts'); ?></label>
                                <label><input type="radio" name="site_representation" value="pawn_shop" <?php checked('pawn_shop', $options['site_representation']); ?> />
                                    <?php esc_html_e('Pawn Shop', 'preciousuite-metal-rate-charts'); ?>
                                </label>
                                <label><input type="radio" name="site_representation" value="precious_metals_dealer"
                                        <?php checked('precious_metals_dealer', $options['site_representation']); ?> />
                                    <?php esc_html_e('Precious Metals Dealer', 'preciousuite-metal-rate-charts'); ?>
                                </label>
                                <label><input type="radio" name="site_representation" value="independent_jeweler" <?php checked('independent_jeweler', $options['site_representation']); ?> />
                                    <?php esc_html_e('Independent Jeweler', 'preciousuite-metal-rate-charts'); ?>
                                </label>
                                <label><input type="radio" name="site_representation" value="jewelry_manufacturer" <?php checked('jewelry_manufacturer', $options['site_representation']); ?> />
                                    <?php esc_html_e('Jewelry Manufacturer', 'preciousuite-metal-rate-charts'); ?>
                                </label>
                            </div>
                        </div>

                        <div class="ptgold-field">
                            <label
                                for="ptgold_website_name"><?php esc_html_e('Business Name', 'preciousuite-metal-rate-charts'); ?></label>
                            <input type="text" id="ptgold_website_name" name="website_name"
                                value="<?php echo esc_attr($options['website_name']); ?>"
                                placeholder="<?php esc_attr_e('E.g. My Jewelry Store', 'preciousuite-metal-rate-charts'); ?>" />
                        </div>
                        <div class="ptgold-field">
                            <label
                                for="ptgold_organization_name"><?php esc_html_e('Store Tagline', 'preciousuite-metal-rate-charts'); ?></label>
                            <input type="text" id="ptgold_organization_name" name="organization_name"
                                value="<?php echo esc_attr($options['organization_name']); ?>"
                                placeholder="<?php esc_attr_e('E.g. Trusted Gold & Diamond Jewellery Since 1995', 'preciousuite-metal-rate-charts'); ?>" />
                        </div>
                        <div class="ptgold-step-save">
                            <button type="submit"
                                class="button button-primary"><?php esc_html_e('Save changes', 'preciousuite-metal-rate-charts'); ?></button>
                        </div>
                    </form>
                    <?php ptgold_step_close(); ?>

                    <?php
                    ptgold_step_open('social_profiles', __('Social profiles', 'preciousuite-metal-rate-charts'), $step_done, $open_step);
                    ptgold_saved_notice('social_profiles', $saved_step);
                    ?>
                    <p class="ptgold-step-intro">
                        <?php esc_html_e('Add your social media profiles to help customers discover and connect with your business online.', 'preciousuite-metal-rate-charts'); ?>
                    </p>
                    <form method="post"
                        action="<?php echo esc_url(admin_url('admin.php?page=preciousuite-configuration')); ?>">
                        <?php wp_nonce_field('ptgold_save_configuration', 'ptgold_configuration_nonce'); ?>
                        <input type="hidden" name="ptgold_save_step" value="social_profiles" />

                        <div class="ptgold-social-fixed-grid">
                            <div class="ptgold-field">
                                <label
                                    for="ptgold_social_facebook"><?php esc_html_e('Facebook', 'preciousuite-metal-rate-charts'); ?></label>
                                <input type="url" id="ptgold_social_facebook" name="social_facebook"
                                    value="<?php echo esc_attr($options['social_facebook']); ?>"
                                    placeholder="https://facebook.com/yourpage" />
                            </div>
                            <div class="ptgold-field">
                                <label
                                    for="ptgold_social_twitter"><?php esc_html_e('X (Twitter)', 'preciousuite-metal-rate-charts'); ?></label>
                                <input type="url" id="ptgold_social_twitter" name="social_twitter"
                                    value="<?php echo esc_attr($options['social_twitter']); ?>"
                                    placeholder="https://x.com/yourhandle" />
                            </div>
                            <div class="ptgold-field">
                                <label
                                    for="ptgold_social_instagram"><?php esc_html_e('Instagram', 'preciousuite-metal-rate-charts'); ?></label>
                                <input type="url" id="ptgold_social_instagram" name="social_instagram"
                                    value="<?php echo esc_attr($options['social_instagram']); ?>"
                                    placeholder="https://instagram.com/yourhandle" />
                            </div>
                        </div>

                        <?php if (!empty($options['social_extra'])): ?>
                            <div class="ptgold-social-extra-header">
                                <span><?php esc_html_e('Platform', 'preciousuite-metal-rate-charts'); ?></span>
                                <span><?php esc_html_e('Profile URL', 'preciousuite-metal-rate-charts'); ?></span>
                                <span></span>
                            </div>
                        <?php endif; ?>

                        <div class="ptgold-social-extra-list" id="ptgold-social-extra-list">
                            <?php
                            // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
                            foreach ($options['social_extra'] as $extra): ?>
                                <div class="ptgold-social-extra-row">
                                    <input type="text" name="social_extra_name[]"
                                        value="<?php echo esc_attr($extra['name']); ?>"
                                        placeholder="<?php esc_attr_e('Platform name', 'preciousuite-metal-rate-charts'); ?>" />
                                    <input type="url" name="social_extra_url[]"
                                        value="<?php echo esc_attr($extra['url']); ?>" placeholder="https://" />
                                    <button type="button" class="ptgold-remove-row"
                                        title="<?php esc_attr_e('Remove', 'preciousuite-metal-rate-charts'); ?>">
                                        <svg viewBox="0 0 20 20" fill="currentColor" width="16" height="16">
                                            <path
                                                d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
                                        </svg>
                                    </button>
                                </div>
                            <?php endforeach; ?>
                        </div>

                        <div style="margin-bottom:1rem;">
                            <button type="button" class="ptgold-add-social-btn" id="ptgold-add-social">
                                <svg viewBox="0 0 20 20" fill="currentColor">
                                    <path
                                        d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                                </svg>
                                <?php esc_html_e('Add another profile', 'preciousuite-metal-rate-charts'); ?>
                            </button>
                        </div>

                        <div class="ptgold-step-save">
                            <button type="submit"
                                class="button button-primary"><?php esc_html_e('Save changes', 'preciousuite-metal-rate-charts'); ?></button>
                        </div>
                    </form>
                    <?php ptgold_step_close(); ?>

                    <?php
                    ptgold_step_open('personal_preferences', __('STAY UPDATED', 'preciousuite-metal-rate-charts'), $step_done, $open_step);
                    ptgold_saved_notice('personal_preferences', $saved_step);
                    ?>
                    <p class="ptgold-step-intro">
                        <?php esc_html_e('Receive product updates, feature announcements, and helpful tips to get the most out of Preciousuite.', 'preciousuite-metal-rate-charts'); ?>
                    </p>

                    <form method="post"
                        action="<?php echo esc_url(admin_url('admin.php?page=preciousuite-configuration')); ?>">
                        <?php wp_nonce_field('ptgold_save_configuration', 'ptgold_configuration_nonce'); ?>
                        <?php wp_nonce_field('ptgold_newsletter_subscribe', 'ptgold_newsletter_nonce'); ?>
                        <input type="hidden" name="ptgold_save_step" value="personal_preferences" />
                        <div class="ptgold-field"
                            style="max-width:520px; display:flex; justify-content: start; align-items: end; gap:10px;">
                            <div style="width: 100%;">
                                <label for="ptgold_newsletter_email">
                                    <?php esc_html_e('Email address', 'preciousuite-metal-rate-charts'); ?>
                                </label>
                                <input type="email" id="ptgold_newsletter_email" name="newsletter_email"
                                    value="<?php echo esc_attr($options['newsletter_email']); ?>"
                                    placeholder="<?php esc_attr_e('E.g. example@email.com', 'preciousuite-metal-rate-charts'); ?>"
                                    style="padding: 10px;" />
                            </div>

                            <div>
                                <a href="#ptgold_newsletter_email" class="button"
                                    style="background: #f0f0f0; color: #a52571; border: 1px solid #a52571; text-decoration: none; display: inline-block; padding: 0px 10px; border-radius: 4px; font-size: .88rem; cursor: pointer; transition: background .15s, color .15s;"
                                    onmouseover="this.style.background='#fdf5fb'"
                                    onmouseout="this.style.background='#f0f0f0'">
                                    <?php esc_html_e('Subscribe to Updates', 'preciousuite-metal-rate-charts'); ?>
                                </a>
                            </div>
                        </div>

                        <div id="ptgold-newsletter-message"
                            style="margin-top: 0.75rem; padding: 10px; border-radius: 4px; display: none; font-size: .88rem;"
                            role="status" aria-live="polite"></div>
                        <p class="ptgold-field-desc">
                            <?php esc_html_e('We only send important updates, new features, and occasional tips. You can unsubscribe at any time.', 'preciousuite-metal-rate-charts'); ?>
                        </p>
                        <div class="ptgold-field" style="margin-top:1rem;">
                            <label
                                style="margin-bottom:.5rem;"><?php esc_html_e('Help Improve Preciousuite', 'preciousuite-metal-rate-charts'); ?></label>
                            <p class="ptgold-field-desc" style="margin-bottom:.6rem;">
                                <?php esc_html_e('Would you like to share anonymous usage data to help us improve Preciousuite and build better features?', 'preciousuite-metal-rate-charts'); ?>
                            </p>
                            <div class="ptgold-radios">
                                <label><input type="radio" name="allow_tracking" value="no" <?php checked('no', $options['allow_tracking']); ?> />
                                    <?php esc_html_e('No, thanks — Don\'t share anonymous usage data.', 'preciousuite-metal-rate-charts'); ?></label>
                                <label><input type="radio" name="allow_tracking" value="yes" <?php checked('yes', $options['allow_tracking']); ?> />
                                    <?php esc_html_e('Yes, I\'d like to help — Share anonymous usage data to improve Preciousuite.', 'preciousuite-metal-rate-charts'); ?></label>
                            </div>
                            <p class="ptgold-field-desc">
                                <strong><?php esc_html_e('Privacy First:', 'preciousuite-metal-rate-charts'); ?></strong>
                                <?php esc_html_e('We only collect anonymous usage statistics when enabled. No customer data, order details, or sensitive business information is collected.', 'preciousuite-metal-rate-charts'); ?>
                            </p>
                        </div>
                        <div class="ptgold-step-save">
                            <button type="submit"
                                class="button button-primary"><?php esc_html_e('Save changes', 'preciousuite-metal-rate-charts'); ?></button>
                        </div>
                    </form>
                    <?php ptgold_step_close(); ?>

                    <?php
                    ptgold_step_open('finish', __('SETUP COMPLETE', 'preciousuite-metal-rate-charts'), $step_done, $open_step);
                    ?>
                    <div class="ptgold-finish-content">
                        <?php if ($options['configuration_done']): ?>
                            <p><?php esc_html_e('Setup complete! Your store is now configured for Preciousuite.', 'preciousuite-metal-rate-charts'); ?>
                            </p>
                            <p><?php esc_html_e('You\'re all set! Complete the setup to start using Preciousuite and unlock its features for your jewelry business.', 'preciousuite-metal-rate-charts'); ?>
                            </p>
                            <a class="button button-primary"
                                href="<?php echo esc_url(admin_url('admin.php?page=preciousuite')); ?>"><?php esc_html_e('Complete Setup', 'preciousuite-metal-rate-charts'); ?></a><br />
                            <a class="ptgold-finish-secondary"
                                href="<?php echo esc_url(admin_url('admin.php?page=preciousuite-tasks')); ?>"><?php esc_html_e('Or go to your task list →', 'preciousuite-metal-rate-charts'); ?></a>
                        <?php else: ?>
                            <p><?php esc_html_e('You\'re almost done! Mark your Preciousuite setup as complete when you\'re ready.', 'preciousuite-metal-rate-charts'); ?>
                            </p>
                            <form method="post"
                                action="<?php echo esc_url(admin_url('admin.php?page=preciousuite-configuration')); ?>">
                                <?php wp_nonce_field('ptgold_save_configuration', 'ptgold_configuration_nonce'); ?>
                                <input type="hidden" name="ptgold_save_step" value="finish" />
                                <div class="ptgold-step-save">
                                    <button type="submit"
                                        class="button button-primary"><?php esc_html_e('Finish configuration', 'preciousuite-metal-rate-charts'); ?></button>
                                </div>
                            </form>
                        <?php endif; ?>
                    </div>
                    <?php ptgold_step_close(); ?>

                </div>
            </div>
        </main>
    </div>
</div>
<?php
// phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound