<?php
// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Get current tab
$leadmachine_current_tab = isset($_GET['tab']) ? sanitize_text_field(wp_unslash($_GET['tab'])) : 'connection'; // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Tab display only

// Get saved settings
$leadmachine_gf_forms = get_option('leadmachine_gf_forms', '{}');
$leadmachine_gf_mappings = json_decode($leadmachine_gf_forms, true) ?: array();
?>

<div class="wrap leadmachine-settings">
    <h1><span class="dashicons dashicons-admin-users"></span> LeadMachine Connector</h1>

    <!-- Tabs -->
    <nav class="nav-tab-wrapper">
        <a href="?page=leadmachine-connector&tab=connection"
           class="nav-tab <?php echo $leadmachine_current_tab === 'connection' ? 'nav-tab-active' : ''; ?>">
            <span class="dashicons dashicons-admin-links"></span> Connection
        </a>
        <a href="?page=leadmachine-connector&tab=form-styling"
           class="nav-tab <?php echo $leadmachine_current_tab === 'form-styling' ? 'nav-tab-active' : ''; ?>">
            <span class="dashicons dashicons-art"></span> Contact Form
        </a>
        <a href="?page=leadmachine-connector&tab=newsletter"
           class="nav-tab <?php echo $leadmachine_current_tab === 'newsletter' ? 'nav-tab-active' : ''; ?>">
            <span class="dashicons dashicons-email"></span> Newsletter Form
        </a>
        <a href="?page=leadmachine-connector&tab=gravity-forms"
           class="nav-tab <?php echo $leadmachine_current_tab === 'gravity-forms' ? 'nav-tab-active' : ''; ?>">
            <span class="dashicons dashicons-forms"></span> Gravity Forms
        </a>
        <a href="?page=leadmachine-connector&tab=post-sync"
           class="nav-tab <?php echo $leadmachine_current_tab === 'post-sync' ? 'nav-tab-active' : ''; ?>">
            <span class="dashicons dashicons-admin-post"></span> Post Sync
        </a>
    </nav>

    <div class="leadmachine-settings-container">
        <div class="leadmachine-main-content">
            <?php // phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Read-only check for WP settings API redirect ?>
            <?php if (isset($_GET['settings-updated'])): ?>
                <div class="notice notice-success is-dismissible">
                    <p><strong>Settings saved successfully!</strong></p>
                </div>
            <?php endif; ?>

            <form method="post" action="options.php">
                <?php
                settings_fields('leadmachine_settings');
                do_settings_sections('leadmachine_settings');

                // Include hidden fields for ALL settings to preserve them across tabs
                // Connection tab settings
                if ($leadmachine_current_tab !== 'connection') {
                    echo '<input type="hidden" name="leadmachine_company_id" value="' . esc_attr(get_option('leadmachine_company_id')) . '">';
                    echo '<input type="hidden" name="leadmachine_api_key" value="' . esc_attr(get_option('leadmachine_api_key')) . '">';
                    echo '<input type="hidden" name="leadmachine_api_url" value="' . esc_attr(get_option('leadmachine_api_url', 'https://app.leadmachine.fyi')) . '">';
                }

                // Form styling tab settings
                if ($leadmachine_current_tab !== 'form-styling') {
                    echo '<input type="hidden" name="leadmachine_form_title" value="' . esc_attr(get_option('leadmachine_form_title', 'Get in Touch')) . '">';
                    echo '<input type="hidden" name="leadmachine_form_description" value="' . esc_attr(get_option('leadmachine_form_description', 'Fill out the form below and we\'ll get back to you soon.')) . '">';
                    echo '<input type="hidden" name="leadmachine_button_text" value="' . esc_attr(get_option('leadmachine_button_text', 'Submit')) . '">';
                    echo '<input type="hidden" name="leadmachine_button_color" value="' . esc_attr(get_option('leadmachine_button_color', '#0073aa')) . '">';
                    echo '<input type="hidden" name="leadmachine_background_color" value="' . esc_attr(get_option('leadmachine_background_color', 'transparent')) . '">';
                    echo '<input type="hidden" name="leadmachine_title_color" value="' . esc_attr(get_option('leadmachine_title_color', '#333333')) . '">';
                    echo '<input type="hidden" name="leadmachine_description_color" value="' . esc_attr(get_option('leadmachine_description_color', '#666666')) . '">';
                    echo '<input type="hidden" name="leadmachine_label_color" value="' . esc_attr(get_option('leadmachine_label_color', '#333333')) . '">';
                    echo '<input type="hidden" name="leadmachine_input_background" value="' . esc_attr(get_option('leadmachine_input_background', '#ffffff')) . '">';
                    echo '<input type="hidden" name="leadmachine_input_border_color" value="' . esc_attr(get_option('leadmachine_input_border_color', '#dddddd')) . '">';
                    echo '<input type="hidden" name="leadmachine_input_text_color" value="' . esc_attr(get_option('leadmachine_input_text_color', '#333333')) . '">';
                    echo '<input type="hidden" name="leadmachine_success_message" value="' . esc_attr(get_option('leadmachine_success_message', 'Thank you! Your message has been received.')) . '">';
                }

                // Gravity Forms tab settings
                if ($leadmachine_current_tab !== 'gravity-forms') {
                    echo '<input type="hidden" name="leadmachine_gf_enabled" value="' . esc_attr(get_option('leadmachine_gf_enabled')) . '">';
                    echo '<input type="hidden" name="leadmachine_gf_default_tags" value="' . esc_attr(get_option('leadmachine_gf_default_tags', '')) . '">';
                    echo '<input type="hidden" name="leadmachine_gf_forms" value="' . esc_attr(get_option('leadmachine_gf_forms', '{}')) . '">';
                }

                // Post Sync tab settings
                if ($leadmachine_current_tab !== 'post-sync') {
                    echo '<input type="hidden" name="leadmachine_post_sync_enabled" value="' . esc_attr(get_option('leadmachine_post_sync_enabled')) . '">';
                    $leadmachine_sync_cats = get_option('leadmachine_post_sync_categories', array());
                    if (is_array($leadmachine_sync_cats)) {
                        foreach ($leadmachine_sync_cats as $leadmachine_cat_id) {
                            echo '<input type="hidden" name="leadmachine_post_sync_categories[]" value="' . esc_attr($leadmachine_cat_id) . '">';
                        }
                    }
                }

                // Newsletter tab settings
                if ($leadmachine_current_tab !== 'newsletter') {
                    echo '<input type="hidden" name="leadmachine_newsletter_title" value="' . esc_attr(get_option('leadmachine_newsletter_title', 'Subscribe to Our Newsletter')) . '">';
                    echo '<input type="hidden" name="leadmachine_newsletter_description" value="' . esc_attr(get_option('leadmachine_newsletter_description', 'Get the latest updates delivered to your inbox.')) . '">';
                    echo '<input type="hidden" name="leadmachine_newsletter_button_text" value="' . esc_attr(get_option('leadmachine_newsletter_button_text', 'Subscribe')) . '">';
                    echo '<input type="hidden" name="leadmachine_newsletter_success_message" value="' . esc_attr(get_option('leadmachine_newsletter_success_message', 'Thank you for subscribing! You\'ll hear from us soon.')) . '">';
                    echo '<input type="hidden" name="leadmachine_newsletter_optin_text" value="' . esc_attr(get_option('leadmachine_newsletter_optin_text', 'I agree to receive email updates and accept the <a href=\"https://app.leadmachine.fyi/pages/privacy.php\" target=\"_blank\" rel=\"noopener noreferrer\">Privacy Policy</a>')) . '">';
                    echo '<input type="hidden" name="leadmachine_newsletter_name_label" value="' . esc_attr(get_option('leadmachine_newsletter_name_label', 'Full Name')) . '">';
                    echo '<input type="hidden" name="leadmachine_newsletter_email_label" value="' . esc_attr(get_option('leadmachine_newsletter_email_label', 'Email Address')) . '">';
                }
                ?>

                <?php if ($leadmachine_current_tab === 'connection'): ?>
                <!-- Connection Tab -->
                <div class="leadmachine-card">
                    <h2>API Configuration</h2>
                    <p class="description">Connect your WordPress site to your LeadMachine account.</p>

                    <table class="form-table">
                        <tr>
                            <th scope="row">
                                <label for="leadmachine_company_id">Company ID <span class="required">*</span></label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_company_id"
                                    name="leadmachine_company_id"
                                    value="<?php echo esc_attr(get_option('leadmachine_company_id')); ?>"
                                    class="regular-text"
                                    required
                                />
                                <p class="description">
                                    Find this in LeadMachine: Company Settings page (blue callout box)
                                </p>
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_api_key">API Key <span class="required">*</span></label>
                            </th>
                            <td>
                                <div class="leadmachine-api-key-wrapper">
                                    <input
                                        type="password"
                                        id="leadmachine_api_key"
                                        name="leadmachine_api_key"
                                        value="<?php echo esc_attr(get_option('leadmachine_api_key')); ?>"
                                        class="regular-text"
                                        required
                                    />
                                    <button type="button" class="button" id="leadmachine-toggle-api-key">
                                        <span class="dashicons dashicons-visibility"></span>
                                    </button>
                                </div>
                                <p class="description">
                                    Generate this in LeadMachine: Company Settings &rarr; WordPress Integration
                                </p>
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_api_url">API URL</label>
                            </th>
                            <td>
                                <input
                                    type="url"
                                    id="leadmachine_api_url"
                                    name="leadmachine_api_url"
                                    value="<?php echo esc_attr(get_option('leadmachine_api_url', 'https://app.leadmachine.fyi')); ?>"
                                    class="regular-text"
                                />
                                <p class="description">
                                    Default: https://app.leadmachine.fyi (Only change if instructed)
                                </p>
                            </td>
                        </tr>
                    </table>
                </div>

                <?php elseif ($leadmachine_current_tab === 'form-styling'): ?>
                <!-- Form Styling Tab -->
                <div class="leadmachine-card">
                    <h2>Form Customization</h2>
                    <p class="description">Customize the appearance and text of your lead capture form.</p>

                    <table class="form-table">
                        <tr>
                            <th scope="row">
                                <label for="leadmachine_form_title">Form Title</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_form_title"
                                    name="leadmachine_form_title"
                                    value="<?php echo esc_attr(get_option('leadmachine_form_title', 'Get in Touch')); ?>"
                                    class="regular-text"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_form_description">Form Description</label>
                            </th>
                            <td>
                                <textarea
                                    id="leadmachine_form_description"
                                    name="leadmachine_form_description"
                                    rows="3"
                                    class="large-text"
                                ><?php echo esc_textarea(get_option('leadmachine_form_description', 'Fill out the form below and we\'ll get back to you soon.')); ?></textarea>
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_button_text">Button Text</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_button_text"
                                    name="leadmachine_button_text"
                                    value="<?php echo esc_attr(get_option('leadmachine_button_text', 'Submit')); ?>"
                                    class="regular-text"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_button_color">Button Color</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_button_color"
                                    name="leadmachine_button_color"
                                    value="<?php echo esc_attr(get_option('leadmachine_button_color', '#0073aa')); ?>"
                                    class="leadmachine-color-picker"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_background_color">Form Background</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_background_color"
                                    name="leadmachine_background_color"
                                    value="<?php echo esc_attr(get_option('leadmachine_background_color', 'transparent')); ?>"
                                    class="leadmachine-color-picker"
                                />
                                <p class="description">Enter "transparent" for transparent background.</p>
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_title_color">Title Color</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_title_color"
                                    name="leadmachine_title_color"
                                    value="<?php echo esc_attr(get_option('leadmachine_title_color', '#333333')); ?>"
                                    class="leadmachine-color-picker"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_description_color">Description Color</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_description_color"
                                    name="leadmachine_description_color"
                                    value="<?php echo esc_attr(get_option('leadmachine_description_color', '#666666')); ?>"
                                    class="leadmachine-color-picker"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_label_color">Label Color</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_label_color"
                                    name="leadmachine_label_color"
                                    value="<?php echo esc_attr(get_option('leadmachine_label_color', '#333333')); ?>"
                                    class="leadmachine-color-picker"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_input_background">Input Background</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_input_background"
                                    name="leadmachine_input_background"
                                    value="<?php echo esc_attr(get_option('leadmachine_input_background', '#ffffff')); ?>"
                                    class="leadmachine-color-picker"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_input_border_color">Input Border Color</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_input_border_color"
                                    name="leadmachine_input_border_color"
                                    value="<?php echo esc_attr(get_option('leadmachine_input_border_color', '#dddddd')); ?>"
                                    class="leadmachine-color-picker"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_input_text_color">Input Text Color</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_input_text_color"
                                    name="leadmachine_input_text_color"
                                    value="<?php echo esc_attr(get_option('leadmachine_input_text_color', '#333333')); ?>"
                                    class="leadmachine-color-picker"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_success_message">Success Message</label>
                            </th>
                            <td>
                                <textarea
                                    id="leadmachine_success_message"
                                    name="leadmachine_success_message"
                                    rows="2"
                                    class="large-text"
                                ><?php echo esc_textarea(get_option('leadmachine_success_message', 'Thank you! Your message has been received.')); ?></textarea>
                            </td>
                        </tr>
                    </table>
                </div>

                <?php elseif ($leadmachine_current_tab === 'newsletter'): ?>
                <!-- Newsletter Form Tab -->
                <div class="leadmachine-card">
                    <h2>Newsletter Form Settings</h2>
                    <p class="description">Configure the lightweight newsletter signup form. Uses shortcode: <code>[leadmachine_newsletter]</code></p>

                    <div class="notice notice-info inline" style="margin: 15px 0;">
                        <p><strong>Styling:</strong> Colors and styling are shared with the Contact Form. <a href="?page=leadmachine-connector&tab=form-styling">Edit styling in Contact Form settings &rarr;</a></p>
                    </div>

                    <table class="form-table">
                        <tr>
                            <th scope="row">
                                <label for="leadmachine_newsletter_title">Form Title</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_newsletter_title"
                                    name="leadmachine_newsletter_title"
                                    value="<?php echo esc_attr(get_option('leadmachine_newsletter_title', 'Subscribe to Our Newsletter')); ?>"
                                    class="regular-text"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_newsletter_description">Form Description</label>
                            </th>
                            <td>
                                <textarea
                                    id="leadmachine_newsletter_description"
                                    name="leadmachine_newsletter_description"
                                    rows="2"
                                    class="large-text"
                                ><?php echo esc_textarea(get_option('leadmachine_newsletter_description', 'Get the latest updates delivered to your inbox.')); ?></textarea>
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_newsletter_name_label">Name Field Label</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_newsletter_name_label"
                                    name="leadmachine_newsletter_name_label"
                                    value="<?php echo esc_attr(get_option('leadmachine_newsletter_name_label', 'Full Name')); ?>"
                                    class="regular-text"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_newsletter_email_label">Email Field Label</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_newsletter_email_label"
                                    name="leadmachine_newsletter_email_label"
                                    value="<?php echo esc_attr(get_option('leadmachine_newsletter_email_label', 'Email Address')); ?>"
                                    class="regular-text"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_newsletter_optin_text">Opt-in Checkbox Text</label>
                            </th>
                            <td>
                                <textarea
                                    id="leadmachine_newsletter_optin_text"
                                    name="leadmachine_newsletter_optin_text"
                                    rows="2"
                                    class="large-text"
                                ><?php echo esc_textarea(get_option('leadmachine_newsletter_optin_text', 'I agree to receive email updates and accept the <a href="https://app.leadmachine.fyi/pages/privacy.php" target="_blank" rel="noopener noreferrer">Privacy Policy</a>')); ?></textarea>
                                <p class="description">HTML allowed for links. Include your Privacy Policy link.</p>
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_newsletter_button_text">Button Text</label>
                            </th>
                            <td>
                                <input
                                    type="text"
                                    id="leadmachine_newsletter_button_text"
                                    name="leadmachine_newsletter_button_text"
                                    value="<?php echo esc_attr(get_option('leadmachine_newsletter_button_text', 'Subscribe')); ?>"
                                    class="regular-text"
                                />
                            </td>
                        </tr>

                        <tr>
                            <th scope="row">
                                <label for="leadmachine_newsletter_success_message">Success Message</label>
                            </th>
                            <td>
                                <textarea
                                    id="leadmachine_newsletter_success_message"
                                    name="leadmachine_newsletter_success_message"
                                    rows="2"
                                    class="large-text"
                                ><?php echo esc_textarea(get_option('leadmachine_newsletter_success_message', 'Thank you for subscribing! You\'ll hear from us soon.')); ?></textarea>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="leadmachine-card">
                    <h3>Newsletter Form vs Contact Form</h3>
                    <table class="widefat">
                        <thead>
                            <tr>
                                <th>Feature</th>
                                <th>Contact Form<br><code>[leadmachine_form]</code></th>
                                <th>Newsletter Form<br><code>[leadmachine_newsletter]</code></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Fields</td>
                                <td>First Name, Last Name, Email, Phone, Company, Message</td>
                                <td>Full Name, Email only</td>
                            </tr>
                            <tr>
                                <td>Best For</td>
                                <td>Contact pages, quote requests, inquiries</td>
                                <td>Newsletter signups, gated content, email capture</td>
                            </tr>
                            <tr>
                                <td>Default Tag</td>
                                <td>None (set via shortcode)</td>
                                <td>"newsletter"</td>
                            </tr>
                            <tr>
                                <td>Analytics</td>
                                <td colspan="2">Both include UTM, ad click IDs, browser data, and conversion events</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <?php elseif ($leadmachine_current_tab === 'gravity-forms'): ?>
                <!-- Gravity Forms Tab -->
                <div class="leadmachine-card">
                    <h2>Gravity Forms Integration</h2>
                    <p class="description">Automatically send Gravity Forms submissions to LeadMachine.</p>

                    <?php if (!class_exists('GFForms')): ?>
                        <div class="notice notice-warning inline">
                            <p><strong>Gravity Forms is not installed or activated.</strong></p>
                            <p>Install and activate Gravity Forms to use this integration.</p>
                        </div>
                    <?php else: ?>
                        <table class="form-table">
                            <tr>
                                <th scope="row">
                                    <label for="leadmachine_gf_enabled">Enable Integration</label>
                                </th>
                                <td>
                                    <label>
                                        <input
                                            type="checkbox"
                                            id="leadmachine_gf_enabled"
                                            name="leadmachine_gf_enabled"
                                            value="1"
                                            <?php checked(get_option('leadmachine_gf_enabled'), '1'); ?>
                                        />
                                        Send Gravity Forms submissions to LeadMachine
                                    </label>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row">
                                    <label for="leadmachine_gf_default_tags">Default Tags</label>
                                </th>
                                <td>
                                    <input
                                        type="text"
                                        id="leadmachine_gf_default_tags"
                                        name="leadmachine_gf_default_tags"
                                        value="<?php echo esc_attr(get_option('leadmachine_gf_default_tags', '')); ?>"
                                        class="regular-text"
                                        placeholder="e.g., Website Lead, Gravity Forms"
                                    />
                                    <p class="description">
                                        Comma-separated tags applied to all Gravity Forms submissions.
                                    </p>
                                </td>
                            </tr>
                        </table>

                        <h3 class="gf-mapping-header">Form Field Mappings</h3>
                        <p class="description">Configure which Gravity Forms fields map to LeadMachine lead fields.</p>

                        <div id="gf-form-mappings">
                            <?php
                            $leadmachine_gf_forms_list = class_exists('GFAPI') ? GFAPI::get_forms() : array();

                            if (empty($leadmachine_gf_forms_list)): ?>
                                <p class="description">No Gravity Forms found. Create a form first.</p>
                            <?php else: ?>
                                <input type="hidden" name="leadmachine_gf_forms" id="leadmachine_gf_forms" value="<?php echo esc_attr($leadmachine_gf_forms); ?>">

                                <?php foreach ($leadmachine_gf_forms_list as $leadmachine_gf_form):
                                    $leadmachine_form_id = $leadmachine_gf_form['id'];
                                    $leadmachine_form_mapping = $leadmachine_gf_mappings[$leadmachine_form_id] ?? array();
                                    $leadmachine_is_enabled = !empty($leadmachine_form_mapping['enabled']);
                                ?>
                                <div class="gf-form-mapping" data-form-id="<?php echo esc_attr($leadmachine_form_id); ?>">
                                    <h4>
                                        <label>
                                            <input type="checkbox" class="gf-form-enabled"
                                                   <?php checked($leadmachine_is_enabled); ?>>
                                            <?php echo esc_html($leadmachine_gf_form['title']); ?>
                                        </label>
                                    </h4>

                                    <div class="gf-mapping-fields<?php echo $leadmachine_is_enabled ? '' : ' hidden'; ?>">
                                        <table class="form-table">
                                            <tr>
                                                <th>First Name</th>
                                                <td>
                                                    <select class="gf-field-select" data-mapping="first_name">
                                                        <option value="">-- Select Field --</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Last Name</th>
                                                <td>
                                                    <select class="gf-field-select" data-mapping="last_name">
                                                        <option value="">-- Select Field --</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Email <span class="required">*</span></th>
                                                <td>
                                                    <select class="gf-field-select" data-mapping="email">
                                                        <option value="">-- Select Field --</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Phone</th>
                                                <td>
                                                    <select class="gf-field-select" data-mapping="phone">
                                                        <option value="">-- Select Field --</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Company</th>
                                                <td>
                                                    <select class="gf-field-select" data-mapping="company">
                                                        <option value="">-- Select Field --</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Message</th>
                                                <td>
                                                    <select class="gf-field-select" data-mapping="message">
                                                        <option value="">-- Select Field --</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th>Tags for this form</th>
                                                <td>
                                                    <input type="text" class="gf-form-tags regular-text"
                                                           value="<?php echo esc_attr($leadmachine_form_mapping['tags'] ?? ''); ?>"
                                                           placeholder="e.g., Contact Form">
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                </div>

                <?php elseif ($leadmachine_current_tab === 'post-sync'): ?>
                <!-- Post Sync Tab -->
                <?php
                $leadmachine_post_sync = LeadMachine_Post_Sync::get_instance();
                $leadmachine_sync_status = $leadmachine_post_sync->get_sync_status();
                $leadmachine_all_categories = get_categories(array('hide_empty' => false, 'orderby' => 'name'));
                $leadmachine_selected_cats = get_option('leadmachine_post_sync_categories', array());
                if (!is_array($leadmachine_selected_cats)) {
                    $leadmachine_selected_cats = array();
                }
                ?>
                <div class="leadmachine-card">
                    <h2>Blog Post Sync</h2>
                    <p class="description">Automatically sync your WordPress blog posts to LeadMachine for use in email nurture campaigns.</p>

                    <?php if (!get_option('leadmachine_company_id') || !get_option('leadmachine_api_key')): ?>
                        <div class="notice notice-warning inline">
                            <p><strong>Configure your connection first.</strong></p>
                            <p>Go to the <a href="?page=leadmachine-connector&tab=connection">Connection tab</a> to set up your Company ID and API Key.</p>
                        </div>
                    <?php else: ?>
                        <table class="form-table">
                            <tr>
                                <th scope="row">
                                    <label for="leadmachine_post_sync_enabled">Enable Post Sync</label>
                                </th>
                                <td>
                                    <label>
                                        <input
                                            type="checkbox"
                                            id="leadmachine_post_sync_enabled"
                                            name="leadmachine_post_sync_enabled"
                                            value="1"
                                            <?php checked(get_option('leadmachine_post_sync_enabled'), '1'); ?>
                                        />
                                        Auto-sync posts when published or updated
                                    </label>
                                    <p class="description">When enabled, new posts will automatically sync to LeadMachine.</p>
                                </td>
                            </tr>

                            <tr>
                                <th scope="row">
                                    <label>Categories to Sync</label>
                                </th>
                                <td>
                                    <?php if (empty($leadmachine_all_categories)): ?>
                                        <p class="description">No categories found. Create categories first.</p>
                                    <?php else: ?>
                                        <fieldset>
                                            <legend class="screen-reader-text">Select categories to sync</legend>
                                            <?php foreach ($leadmachine_all_categories as $leadmachine_cat): ?>
                                                <label style="display: block; margin-bottom: 5px;">
                                                    <input
                                                        type="checkbox"
                                                        name="leadmachine_post_sync_categories[]"
                                                        value="<?php echo esc_attr($leadmachine_cat->term_id); ?>"
                                                        <?php checked(in_array($leadmachine_cat->term_id, $leadmachine_selected_cats)); ?>
                                                    />
                                                    <?php echo esc_html($leadmachine_cat->name); ?>
                                                    <span class="description">(<?php echo esc_html($leadmachine_cat->count); ?> posts)</span>
                                                </label>
                                            <?php endforeach; ?>
                                        </fieldset>
                                        <p class="description">Leave all unchecked to sync posts from all categories.</p>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        </table>

                        <h3 class="title">Sync Status</h3>
                        <table class="form-table">
                            <tr>
                                <th scope="row">Posts Available</th>
                                <td>
                                    <strong><?php echo esc_html($leadmachine_sync_status['post_count']); ?></strong> posts in selected categories
                                </td>
                            </tr>
                            <tr>
                                <th scope="row">Last Category Sync</th>
                                <td>
                                    <?php echo $leadmachine_sync_status['categories_last_sync'] ? esc_html($leadmachine_sync_status['categories_last_sync']) : '<em>Never</em>'; ?>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row">Last Posts Sync</th>
                                <td>
                                    <?php echo $leadmachine_sync_status['posts_last_sync'] ? esc_html($leadmachine_sync_status['posts_last_sync']) : '<em>Never</em>'; ?>
                                </td>
                            </tr>
                        </table>

                        <h3 class="title">Manual Sync</h3>
                        <p class="description">Use these buttons to manually sync your content to LeadMachine.</p>

                        <p>
                            <button type="button" class="button" id="leadmachine-sync-categories">
                                <span class="dashicons dashicons-category" style="vertical-align: middle;"></span>
                                Sync Categories
                            </button>
                            <span id="leadmachine-sync-categories-status" style="margin-left: 10px;"></span>
                        </p>

                        <p>
                            <button type="button" class="button button-primary" id="leadmachine-sync-all-posts">
                                <span class="dashicons dashicons-admin-post" style="vertical-align: middle;"></span>
                                Sync All Posts Now
                            </button>
                            <span id="leadmachine-sync-posts-status" style="margin-left: 10px;"></span>
                        </p>
                        <p class="description">This will sync all published posts in the selected categories to LeadMachine.</p>
                    <?php endif; ?>
                </div>
                <?php endif; ?>

                <?php submit_button('Save Settings'); ?>
            </form>
        </div>

        <div class="leadmachine-sidebar">
            <?php if ($leadmachine_current_tab === 'connection'): ?>
            <div class="leadmachine-card">
                <h3>Quick Start Guide</h3>
                <ol>
                    <li><strong>Get Your Company ID</strong>
                        <p class="description leadmachine-step-desc">Log in to <a href="https://app.leadmachine.fyi" target="_blank">LeadMachine</a> &rarr; Go to <strong>Company Settings</strong> &rarr; Copy your Company ID</p>
                    </li>
                    <li><strong>Get Your API Key</strong>
                        <p class="description leadmachine-step-desc">In Company Settings &rarr; <strong>WordPress Integration</strong> &rarr; Click <strong>Generate</strong> and copy the key</p>
                    </li>
                    <li><strong>Add Form to Your Site</strong>
                        <p class="description leadmachine-step-desc">Use the shortcode on any page or post:</p>
                        <div class="leadmachine-shortcode">
                            <code>[leadmachine_form]</code>
                            <button type="button" class="button button-small leadmachine-copy-btn" data-copy="[leadmachine_form]">Copy</button>
                        </div>
                    </li>
                </ol>
            </div>
            <?php endif; ?>

            <?php if ($leadmachine_current_tab === 'form-styling'): ?>
            <div class="leadmachine-card">
                <h3>Using Tags</h3>
                <p class="description">Tag leads from different forms:</p>
                <div class="leadmachine-shortcode">
                    <code>[leadmachine_form tags="newsletter"]</code>
                </div>
                <p class="description leadmachine-tags-note"><strong>Multiple tags:</strong></p>
                <div class="leadmachine-shortcode">
                    <code>[leadmachine_form tags="Contact,High Priority"]</code>
                </div>
            </div>
            <?php endif; ?>

            <?php if ($leadmachine_current_tab === 'newsletter'): ?>
            <div class="leadmachine-card">
                <h3>Newsletter Shortcode</h3>
                <p class="description">Use this lightweight signup form:</p>
                <div class="leadmachine-shortcode">
                    <code>[leadmachine_newsletter]</code>
                    <button type="button" class="button button-small leadmachine-copy-btn" data-copy="[leadmachine_newsletter]">Copy</button>
                </div>
                <p class="description leadmachine-tags-note"><strong>With custom tags:</strong></p>
                <div class="leadmachine-shortcode">
                    <code>[leadmachine_newsletter tags="blog,updates"]</code>
                </div>
            </div>
            <div class="leadmachine-card">
                <h3>Analytics Tracking</h3>
                <p class="description">Both form types automatically capture:</p>
                <ul>
                    <li><strong>UTM Parameters</strong> - source, medium, campaign</li>
                    <li><strong>Ad Click IDs</strong> - Google, Facebook, LinkedIn, TikTok</li>
                    <li><strong>Browser Data</strong> - device, screen size, timezone</li>
                    <li><strong>Conversion Events</strong> - GA4, Facebook Pixel, LinkedIn, etc.</li>
                </ul>
            </div>
            <?php endif; ?>

            <?php if ($leadmachine_current_tab === 'gravity-forms'): ?>
            <div class="leadmachine-card">
                <h3>Gravity Forms Tips</h3>
                <ul>
                    <li>Enable integration and check each form you want connected</li>
                    <li>Map the <strong>Email</strong> field (required)</li>
                    <li>Name fields are optional but recommended</li>
                    <li>Tags help organize leads in LeadMachine</li>
                </ul>
            </div>
            <?php endif; ?>

            <?php if ($leadmachine_current_tab === 'post-sync'): ?>
            <div class="leadmachine-card">
                <h3>How It Works</h3>
                <ol>
                    <li><strong>Sync Categories</strong> - First sync your blog categories to LeadMachine</li>
                    <li><strong>Sync Posts</strong> - Then sync your published posts</li>
                    <li><strong>Create Campaign</strong> - In LeadMachine, create a nurture campaign with "WordPress Posts" as the content source</li>
                    <li><strong>Auto-Send</strong> - Ledo AI summarizes each post and sends emails on your schedule</li>
                </ol>
            </div>
            <div class="leadmachine-card">
                <h3>Tips</h3>
                <ul>
                    <li>Posts are sent <strong>oldest first</strong> to keep content fresh</li>
                    <li>Each subscriber gets posts in sequence</li>
                    <li>New posts are automatically included</li>
                    <li>Featured images are included in emails</li>
                </ul>
            </div>
            <?php endif; ?>

            <div class="leadmachine-card">
                <h3>Plugin Info</h3>
                <p><strong>Version:</strong> <?php echo esc_html(LEADMACHINE_VERSION); ?></p>
                <p><strong>Status:</strong>
                    <?php if (get_option('leadmachine_company_id') && get_option('leadmachine_api_key')): ?>
                        <span class="leadmachine-status-active">Configured</span>
                    <?php else: ?>
                        <span class="leadmachine-status-inactive">Not Configured</span>
                    <?php endif; ?>
                </p>
                <a href="https://app.leadmachine.fyi" target="_blank" class="button leadmachine-dashboard-btn">
                    Open LeadMachine Dashboard
                </a>
            </div>
        </div>
    </div>
</div>
