<?php
/**
 * SearchFIT Admin Page
 *
 * Main admin page - single page layout.
 *
 * @package SearchFIT
 * @since   1.0.0
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Get the webhook API key (auto-generated).
$searchfit_webhook_api_key = get_option( 'searchfit_webhook_api_key', '' );

// Generate one if it doesn't exist.
if ( empty( $searchfit_webhook_api_key ) ) {
    $searchfit_webhook_api_key = SearchFIT_Webhook::generate_api_key();
    add_option( 'searchfit_webhook_api_key', $searchfit_webhook_api_key );
}

// Get webhook URL.
$searchfit_webhook_url = SearchFIT_Webhook::get_webhook_url();
$searchfit_media_url   = SearchFIT_Webhook::get_media_url();

// Handle settings update.
if ( isset( $_POST['searchfit_save_settings'] ) && check_admin_referer( 'searchfit_settings', 'searchfit_settings_nonce' ) ) {
    $searchfit_default_author = isset( $_POST['searchfit_default_author'] ) ? absint( $_POST['searchfit_default_author'] ) : 0;
    update_option( 'searchfit_default_author', $searchfit_default_author );
    echo '<div class="notice notice-success is-dismissible"><p>' . esc_html__( 'Settings saved successfully.', 'searchfit' ) . '</p></div>';
}

$searchfit_default_author = get_option( 'searchfit_default_author', 0 );

// Get all users who can publish posts.
$searchfit_users = get_users(
    array(
        'orderby' => 'display_name',
        'order'   => 'ASC',
    )
);
?>

<div class="wrap searchfit-welcome-page">
    <h1 class="searchfit-page-title">
        <?php
        $searchfit_logo_url = plugins_url( 'assets/images/logo.svg', SEARCHFIT_PLUGIN_FILE );
        if ( file_exists( SEARCHFIT_PLUGIN_DIR . 'assets/images/logo.svg' ) ) {
            echo '<img src="' . esc_url( $searchfit_logo_url ) . '" alt="' . esc_attr__( 'SearchFIT Logo', 'searchfit' ) . '" class="searchfit-title-logo" />';
        }
        ?>
        <span><?php esc_html_e( 'SearchFIT', 'searchfit' ); ?></span>
    </h1>

    <!-- Two Cards Grid -->
    <div class="searchfit-cards-grid searchfit-cards-grid-2">
        <!-- API Credentials Card -->
        <div class="searchfit-card-item searchfit-card-api">
            <div class="searchfit-card-shrink">
                <div class="searchfit-icon-wrapper searchfit-icon-emerald">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="searchfit-icon">
                        <path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"></path>
                        <path d="m21 2-9.6 9.6"></path>
                        <circle cx="7.5" cy="15.5" r="5.5"></circle>
                    </svg>
                </div>
            </div>
            <div class="searchfit-card-body">
                <div class="searchfit-card-text">
                    <h3 class="searchfit-card-title"><?php esc_html_e( 'API Credentials', 'searchfit' ); ?></h3>
                    <p class="searchfit-card-description"><?php esc_html_e( 'Use these credentials to send articles to your WordPress site.', 'searchfit' ); ?></p>
                </div>

                <!-- API Key Field -->
                <div class="searchfit-credential-field">
                    <label class="searchfit-credential-label" for="searchfit_webhook_api_key"><?php esc_html_e( 'API Key', 'searchfit' ); ?></label>
                    <div class="searchfit-credential-input-wrapper">
                        <input
                            type="text"
                            id="searchfit_webhook_api_key"
                            value="<?php echo esc_attr( $searchfit_webhook_api_key ); ?>"
                            class="searchfit-credential-input"
                            readonly
                        />
                        <button type="button" class="searchfit-credential-copy searchfit-copy-btn" data-copy-target="searchfit_webhook_api_key" title="<?php esc_attr_e( 'Copy API Key', 'searchfit' ); ?>">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                            </svg>
                            <span class="searchfit-copy-feedback"><?php esc_html_e( 'Copied!', 'searchfit' ); ?></span>
                        </button>
                    </div>
                </div>

                <!-- Webhook URL Field -->
                <div class="searchfit-credential-field">
                    <label class="searchfit-credential-label" for="searchfit_webhook_url"><?php esc_html_e( 'Webhook URL', 'searchfit' ); ?></label>
                    <div class="searchfit-credential-input-wrapper">
                        <input
                            type="text"
                            id="searchfit_webhook_url"
                            value="<?php echo esc_url( $searchfit_webhook_url ); ?>"
                            class="searchfit-credential-input"
                            readonly
                        />
                        <button type="button" class="searchfit-credential-copy searchfit-copy-btn" data-copy-target="searchfit_webhook_url" title="<?php esc_attr_e( 'Copy Webhook URL', 'searchfit' ); ?>">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                            </svg>
                            <span class="searchfit-copy-feedback"><?php esc_html_e( 'Copied!', 'searchfit' ); ?></span>
                        </button>
                    </div>
                </div>

                <!-- Media URL Field -->
                <div class="searchfit-credential-field">
                    <label class="searchfit-credential-label" for="searchfit_media_url"><?php esc_html_e( 'Media Upload URL', 'searchfit' ); ?></label>
                    <div class="searchfit-credential-input-wrapper">
                        <input
                            type="text"
                            id="searchfit_media_url"
                            value="<?php echo esc_url( $searchfit_media_url ); ?>"
                            class="searchfit-credential-input"
                            readonly
                        />
                        <button type="button" class="searchfit-credential-copy searchfit-copy-btn" data-copy-target="searchfit_media_url" title="<?php esc_attr_e( 'Copy Media URL', 'searchfit' ); ?>">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                            </svg>
                            <span class="searchfit-copy-feedback"><?php esc_html_e( 'Copied!', 'searchfit' ); ?></span>
                        </button>
                    </div>
                </div>

                <!-- Regenerate Button -->
                <button type="button" id="searchfit-regenerate-api-key" class="searchfit-btn searchfit-btn-text-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"/>
                    </svg>
                    <?php esc_html_e( 'Regenerate API Key', 'searchfit' ); ?>
                </button>

                <!-- Default Author Section -->
                <div style="margin-top: 24px; padding-top: 24px; border-top: 1px solid #e5e7eb;">
                    <div style="margin-bottom: 16px;">
                        <h4 style="font-size: 13px; font-weight: 600; color: #1d2327; margin: 0 0 4px 0; text-transform: uppercase; letter-spacing: 0.05em;">
                            <?php esc_html_e( 'Default Author', 'searchfit' ); ?>
                        </h4>
                        <p style="font-size: 13px; color: #646970; margin: 0;">
                            <?php esc_html_e( 'Select which user to publish content as when no author_id is specified', 'searchfit' ); ?>
                        </p>
                    </div>

                    <form method="post" action="">
                        <?php wp_nonce_field( 'searchfit_settings', 'searchfit_settings_nonce' ); ?>
                        
                        <div style="margin-bottom: 16px;">
                            <select 
                                name="searchfit_default_author" 
                                id="searchfit_default_author" 
                                style="width: 100%; padding: 10px 12px; border: 1px solid #dcdcde; border-radius: 6px; font-size: 14px; background: #fff; color: #1d2327;"
                            >
                                <option value="0" <?php selected( $searchfit_default_author, 0 ); ?>>
                                    <?php esc_html_e( 'Auto-detect (First Administrator)', 'searchfit' ); ?>
                                </option>
                                <?php foreach ( $searchfit_users as $searchfit_user ) : ?>
                                    <option value="<?php echo esc_attr( $searchfit_user->ID ); ?>" <?php selected( $searchfit_default_author, $searchfit_user->ID ); ?>>
                                        <?php 
                                        echo esc_html( $searchfit_user->display_name );
                                        echo ' (' . esc_html( $searchfit_user->user_login ) . ')';
                                        if ( ! empty( $searchfit_user->roles ) ) {
                                            echo ' - ' . esc_html( ucfirst( $searchfit_user->roles[0] ) );
                                        }
                                        ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                            
                            <p style="margin: 8px 0 0 0; font-size: 12px; color: #646970; line-height: 1.5;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                    <circle cx="12" cy="12" r="10"></circle>
                                    <path d="M12 16v-4"></path>
                                    <path d="M12 8h.01"></path>
                                </svg>
                                <?php esc_html_e( 'This user will be set as the author when creating posts via API. You can override this by passing author_id in your API request.', 'searchfit' ); ?>
                            </p>
                        </div>

                        <button type="submit" name="searchfit_save_settings" class="searchfit-btn searchfit-btn-primary" style="width: 100%;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                                <polyline points="17 21 17 13 7 13 7 21"></polyline>
                                <polyline points="7 3 7 8 15 8"></polyline>
                            </svg>
                            <?php esc_html_e( 'Save Settings', 'searchfit' ); ?>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- How it Works Card -->
        <div class="searchfit-card-item searchfit-card-docs">
            <div class="searchfit-card-shrink">
                <div class="searchfit-icon-wrapper searchfit-icon-blue">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="searchfit-icon">
                        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                    </svg>
                </div>
            </div>
            <div class="searchfit-card-body">
                <div class="searchfit-card-text">
                    <h3 class="searchfit-card-title"><?php esc_html_e( 'How it Works', 'searchfit' ); ?></h3>
                    <p class="searchfit-card-description"><?php esc_html_e( 'Send articles to your WordPress site programmatically via our REST API.', 'searchfit' ); ?></p>
                </div>

                <ol class="searchfit-steps-list">
                    <li>
                        <span class="searchfit-step-number">1</span>
                        <span class="searchfit-step-text"><?php esc_html_e( 'Copy your API Key and Webhook URL from the credentials card', 'searchfit' ); ?></span>
                    </li>
                    <li>
                        <span class="searchfit-step-number">2</span>
                        <span class="searchfit-step-text"><?php esc_html_e( 'Send a POST request with your article data (title, content, categories)', 'searchfit' ); ?></span>
                    </li>
                    <li>
                        <span class="searchfit-step-number">3</span>
                        <span class="searchfit-step-text"><?php esc_html_e( 'Your article is automatically created as a WordPress post', 'searchfit' ); ?></span>
                    </li>
                </ol>

                <div class="searchfit-card-footer">
                    <button type="button" id="searchfit-api-docs-trigger" class="searchfit-btn searchfit-btn-primary">
                        <?php esc_html_e( 'View API Documentation', 'searchfit' ); ?>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M5 12h14"></path>
                            <path d="m12 5 7 7-7 7"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- API Documentation Sheet -->
<div id="searchfit-api-docs-sheet" class="searchfit-sheet">
    <div class="searchfit-sheet-backdrop"></div>
    <div class="searchfit-sheet-panel">
        <div class="searchfit-sheet-header">
            <div class="searchfit-sheet-title-group">
                <h2 class="searchfit-sheet-title"><?php esc_html_e( 'API Documentation', 'searchfit' ); ?></h2>
                <p class="searchfit-sheet-subtitle"><?php esc_html_e( 'Learn how to use the SearchFIT webhook API', 'searchfit' ); ?></p>
            </div>
            <button type="button" class="searchfit-sheet-close" aria-label="<?php esc_attr_e( 'Close', 'searchfit' ); ?>">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18"></path>
                    <path d="m6 6 12 12"></path>
                </svg>
            </button>
        </div>

        <div class="searchfit-sheet-content">
            <div class="searchfit-api-docs">
                <!-- Quick Start -->
                <div class="searchfit-api-doc-section">
                    <h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
                        </svg>
                        <?php esc_html_e( 'Quick Start', 'searchfit' ); ?>
                    </h3>
                    <p class="searchfit-doc-intro"><?php esc_html_e( 'Send a POST request to create articles programmatically. Perfect for automated content workflows.', 'searchfit' ); ?></p>

                    <div class="searchfit-code-block searchfit-code-block-dark">
<pre>curl -X POST "<?php echo esc_url( $searchfit_webhook_url ); ?>" \
  -H "Content-Type: application/json" \
  -H "X-SearchFIT-API-Key: YOUR_API_KEY" \
  -d '{
    "title": "My New Article",
    "content": "&lt;p&gt;Content here...&lt;/p&gt;",
    "status": "draft"
  }'</pre>
                    </div>
                </div>

                <!-- Endpoints -->
                <div class="searchfit-api-doc-section">
                    <h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M15 7h2a5 5 0 0 1 0 10h-2m-6 0H7A5 5 0 0 1 7 7h2"></path>
                            <line x1="8" x2="16" y1="12" y2="12"></line>
                        </svg>
                        <?php esc_html_e( 'Endpoints', 'searchfit' ); ?>
                    </h3>

                    <div class="searchfit-endpoint-cards">
                        <div class="searchfit-endpoint-card">
                            <div class="searchfit-endpoint-method get">GET</div>
                            <div class="searchfit-endpoint-info">
                                <code class="searchfit-endpoint-path">/wp-json/searchfit/v1/articles</code>
                                <span class="searchfit-endpoint-desc"><?php esc_html_e( 'List all articles', 'searchfit' ); ?></span>
                            </div>
                        </div>
                        <div class="searchfit-endpoint-card">
                            <div class="searchfit-endpoint-method get">GET</div>
                            <div class="searchfit-endpoint-info">
                                <code class="searchfit-endpoint-path">/wp-json/searchfit/v1/articles/{id}</code>
                                <span class="searchfit-endpoint-desc"><?php esc_html_e( 'Get single article', 'searchfit' ); ?></span>
                            </div>
                        </div>
                        <div class="searchfit-endpoint-card">
                            <div class="searchfit-endpoint-method post">POST</div>
                            <div class="searchfit-endpoint-info">
                                <code class="searchfit-endpoint-path">/wp-json/searchfit/v1/articles</code>
                                <span class="searchfit-endpoint-desc"><?php esc_html_e( 'Create a new article', 'searchfit' ); ?></span>
                            </div>
                        </div>
                        <div class="searchfit-endpoint-card">
                            <div class="searchfit-endpoint-method put">PUT</div>
                            <div class="searchfit-endpoint-info">
                                <code class="searchfit-endpoint-path">/wp-json/searchfit/v1/articles/{id}</code>
                                <span class="searchfit-endpoint-desc"><?php esc_html_e( 'Update an article', 'searchfit' ); ?></span>
                            </div>
                        </div>
                        <div class="searchfit-endpoint-card">
                            <div class="searchfit-endpoint-method post">POST</div>
                            <div class="searchfit-endpoint-info">
                                <code class="searchfit-endpoint-path">/wp-json/searchfit/v1/media</code>
                                <span class="searchfit-endpoint-desc"><?php esc_html_e( 'Upload media file', 'searchfit' ); ?></span>
                            </div>
                        </div>
                        <div class="searchfit-endpoint-card">
                            <div class="searchfit-endpoint-method get">GET</div>
                            <div class="searchfit-endpoint-info">
                                <code class="searchfit-endpoint-path">/wp-json/searchfit/v1/health</code>
                                <span class="searchfit-endpoint-desc"><?php esc_html_e( 'Check API status', 'searchfit' ); ?></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Authentication -->
                <div class="searchfit-api-doc-section">
                    <h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
                            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                        </svg>
                        <?php esc_html_e( 'Authentication', 'searchfit' ); ?>
                    </h3>
                    <p><?php esc_html_e( 'Include your API key in the request header:', 'searchfit' ); ?></p>

                    <div class="searchfit-code-block">
<pre>X-SearchFIT-API-Key: <?php echo esc_html( $searchfit_webhook_api_key ); ?></pre>
                    </div>

                    <p class="searchfit-doc-note">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <path d="M12 16v-4"></path>
                            <path d="M12 8h.01"></path>
                        </svg>
                        <?php esc_html_e( 'You can also use Bearer token:', 'searchfit' ); ?>
                        <code>Authorization: Bearer YOUR_API_KEY</code>
                    </p>
                </div>

                <!-- Request Parameters -->
                <div class="searchfit-api-doc-section">
                    <h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" x2="8" y1="13" y2="13"></line>
                            <line x1="16" x2="8" y1="17" y2="17"></line>
                            <line x1="10" x2="8" y1="9" y2="9"></line>
                        </svg>
                        <?php esc_html_e( 'Request Parameters', 'searchfit' ); ?>
                    </h3>

                    <div class="searchfit-params-list">
                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">title</code>
                                <span class="searchfit-param-type">string</span>
                                <span class="searchfit-param-required"><?php esc_html_e( 'required', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'The article title', 'searchfit' ); ?></p>
                        </div>

                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">content</code>
                                <span class="searchfit-param-type">string</span>
                                <span class="searchfit-param-required"><?php esc_html_e( 'required', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'The article content (HTML allowed)', 'searchfit' ); ?></p>
                        </div>

                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">status</code>
                                <span class="searchfit-param-type">string</span>
                                <span class="searchfit-param-optional"><?php esc_html_e( 'optional', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'Post status: draft, publish, or pending', 'searchfit' ); ?> <code class="searchfit-param-default">default: draft</code></p>
                        </div>

                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">excerpt</code>
                                <span class="searchfit-param-type">string</span>
                                <span class="searchfit-param-optional"><?php esc_html_e( 'optional', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'Article excerpt/summary', 'searchfit' ); ?></p>
                        </div>

                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">categories</code>
                                <span class="searchfit-param-type">array</span>
                                <span class="searchfit-param-optional"><?php esc_html_e( 'optional', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'Category names or IDs', 'searchfit' ); ?></p>
                        </div>

                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">tags</code>
                                <span class="searchfit-param-type">array</span>
                                <span class="searchfit-param-optional"><?php esc_html_e( 'optional', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'Tag names to assign', 'searchfit' ); ?></p>
                        </div>

                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">featured_image_url</code>
                                <span class="searchfit-param-type">string</span>
                                <span class="searchfit-param-optional"><?php esc_html_e( 'optional', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'URL of featured image', 'searchfit' ); ?></p>
                        </div>

                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">author_id</code>
                                <span class="searchfit-param-type">integer</span>
                                <span class="searchfit-param-optional"><?php esc_html_e( 'optional', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'WordPress user ID to assign as author', 'searchfit' ); ?></p>
                        </div>

                        <div class="searchfit-param-item">
                            <div class="searchfit-param-header">
                                <code class="searchfit-param-name">meta</code>
                                <span class="searchfit-param-type">object</span>
                                <span class="searchfit-param-optional"><?php esc_html_e( 'optional', 'searchfit' ); ?></span>
                            </div>
                            <p class="searchfit-param-desc"><?php esc_html_e( 'Custom meta fields (any key-value pairs)', 'searchfit' ); ?></p>
                        </div>
                    </div>
                </div>

                <!-- Response -->
                <div class="searchfit-api-doc-section">
                    <h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="9 11 12 14 22 4"></polyline>
                            <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                        </svg>
                        <?php esc_html_e( 'Success Response', 'searchfit' ); ?>
                    </h3>

                    <div class="searchfit-response-badge success">201 Created</div>

                    <div class="searchfit-code-block">
<pre>{
  "success": true,
  "message": "Article created successfully.",
  "post_id": 123,
  "post_url": "https://yoursite.com/article-slug/",
  "edit_url": "https://yoursite.com/wp-admin/post.php?post=123&action=edit",
  "status": "draft"
}</pre>
                    </div>
                </div>

                <!-- Full Examples -->
                <div class="searchfit-api-doc-section">
                    <h3>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="16 18 22 12 16 6"></polyline>
                            <polyline points="8 6 2 12 8 18"></polyline>
                        </svg>
                        <?php esc_html_e( 'Full Examples', 'searchfit' ); ?>
                    </h3>

                    <div style="margin-bottom: 24px;">
                        <h4 style="font-size: 13px; font-weight: 600; color: #1d2327; margin: 0 0 8px 0;">
                            <?php esc_html_e( 'List Articles (GET)', 'searchfit' ); ?>
                        </h4>
                        <div class="searchfit-code-block searchfit-code-block-dark">
<pre>curl "<?php echo esc_url( $searchfit_webhook_url ); ?>?per_page=20&status=publish" \
  -H "X-SearchFIT-API-Key: <?php echo esc_html( $searchfit_webhook_api_key ); ?>"</pre>
                        </div>
                    </div>

                    <div style="margin-bottom: 24px;">
                        <h4 style="font-size: 13px; font-weight: 600; color: #1d2327; margin: 0 0 8px 0;">
                            <?php esc_html_e( 'Get Single Article (GET)', 'searchfit' ); ?>
                        </h4>
                        <div class="searchfit-code-block searchfit-code-block-dark">
<pre>curl "<?php echo esc_url( $searchfit_webhook_url ); ?>/123" \
  -H "X-SearchFIT-API-Key: <?php echo esc_html( $searchfit_webhook_api_key ); ?>"</pre>
                        </div>
                    </div>

                    <div style="margin-bottom: 24px;">
                        <h4 style="font-size: 13px; font-weight: 600; color: #1d2327; margin: 0 0 8px 0;">
                            <?php esc_html_e( 'Create Article (POST)', 'searchfit' ); ?>
                        </h4>
                        <div class="searchfit-code-block searchfit-code-block-dark">
<pre>curl -X POST "<?php echo esc_url( $searchfit_webhook_url ); ?>" \
  -H "Content-Type: application/json" \
  -H "X-SearchFIT-API-Key: <?php echo esc_html( $searchfit_webhook_api_key ); ?>" \
  -d '{
    "title": "10 Tips for Better SEO",
    "content": "&lt;p&gt;Your article content...&lt;/p&gt;",
    "status": "draft",
    "excerpt": "Learn the top SEO strategies",
    "categories": ["Marketing", "SEO"],
    "tags": ["seo", "marketing", "tips"],
    "featured_image_url": "https://example.com/seo-tips-image.jpg"
  }'</pre>
                        </div>
                    </div>

                    <div style="margin-bottom: 24px;">
                        <h4 style="font-size: 13px; font-weight: 600; color: #1d2327; margin: 0 0 8px 0;">
                            <?php esc_html_e( 'Update Article (PUT)', 'searchfit' ); ?>
                        </h4>
                        <div class="searchfit-code-block searchfit-code-block-dark">
<pre>curl -X PUT "<?php echo esc_url( $searchfit_webhook_url ); ?>/123" \
  -H "Content-Type: application/json" \
  -H "X-SearchFIT-API-Key: <?php echo esc_html( $searchfit_webhook_api_key ); ?>" \
  -d '{
    "title": "Updated Article Title",
    "status": "publish"
  }'</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
