<?php
/**
 * Setup Wizard - API Keys Step
 *
 * @package AI_Image_SEO
 * @since 1.0.0
 *
 * @var array $data Template data.
 */

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

$infyp_has_openai    = $data['has_openai'];
$infyp_has_google    = $data['has_google'];
$infyp_has_anthropic = $data['has_anthropic'];

// Define the actual models used by the plugin for each provider.
// Uses the INFYP_DEFAULT_MODEL constant for Google; other providers use their registered model IDs.
$infyp_provider_models = [
    'google'    => INFYP_DEFAULT_MODEL,
    'openai'    => 'gpt-4.1-mini',
    'anthropic' => 'claude-4.5-haiku',
];
?>
<div class="infyp-wizard-step-content infyp-step-api-keys">
    <h2 class="infyp-step-title"><?php esc_html_e( 'Configure AI Provider', 'infy-ai-image-seo-optimizer' ); ?></h2>
    <p class="infyp-step-description">
        <?php esc_html_e( 'Connect at least one AI provider to start generating optimized image metadata. You can add more providers later.', 'infy-ai-image-seo-optimizer' ); ?>
    </p>

    <div class="infyp-api-keys-grid">
        <!-- Google Gemini -->
        <div class="infyp-api-card <?php echo esc_attr($infyp_has_google ? 'has-key' : ''); ?>" data-provider="google">
            <div class="infyp-api-card-header">
                <div class="infyp-api-provider-info">
                    <div>
                        <h4><?php esc_html_e( 'Google Gemini', 'infy-ai-image-seo-optimizer' ); ?></h4>
                        <span class="infyp-api-badge recommended"><?php echo esc_html( $infyp_provider_models['google'] ); ?></span>
                    </div>
                </div>
                <div class="infyp-api-status" id="infyp-status-google">
                    <?php if ( $infyp_has_google ) : ?>
                        <span class="infyp-status-badge connected">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <?php esc_html_e( 'Connected', 'infy-ai-image-seo-optimizer' ); ?>
                        </span>
                    <?php endif; ?>
                </div>
            </div>
            <p class="infyp-api-card-desc"><?php esc_html_e( 'Best balance of quality and cost. Excellent for image analysis with generous free tier.', 'infy-ai-image-seo-optimizer' ); ?></p>
            <div class="infyp-api-input-wrapper">
                <input type="password"
                       class="infyp-api-input"
                       id="infyp-api-google"
                       name="google"
                       placeholder="<?php esc_attr_e( 'Enter your Gemini API key', 'infy-ai-image-seo-optimizer' ); ?>"
                       data-provider="google"
                       autocomplete="off" />
                <button type="button" class="infyp-toggle-visibility" aria-label="<?php esc_attr_e( 'Toggle visibility', 'infy-ai-image-seo-optimizer' ); ?>">
                    <svg class="eye-open" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M2.5 10C2.5 10 5 4.16667 10 4.16667C15 4.16667 17.5 10 17.5 10C17.5 10 15 15.8333 10 15.8333C5 15.8333 2.5 10 2.5 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="10" cy="10" r="2.5" stroke="currentColor" stroke-width="1.5"/>
                    </svg>
                    <svg class="eye-closed" width="20" height="20" viewBox="0 0 20 20" fill="none" style="display:none;">
                        <path d="M2.5 2.5L17.5 17.5M8.23 8.23C7.77 8.69 7.5 9.31 7.5 10C7.5 11.38 8.62 12.5 10 12.5C10.69 12.5 11.31 12.23 11.77 11.77M14.95 14.95C13.55 15.95 11.85 16.67 10 16.67C5 16.67 2.5 10 2.5 10C3.37 8.22 4.69 6.69 6.27 5.57M10 3.33C11.1 3.33 12.15 3.56 13.12 3.97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
            <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener" class="infyp-get-key-link">
                <?php esc_html_e( 'Get free API key', 'infy-ai-image-seo-optimizer' ); ?>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M6 3H3V13H13V10M9 3H13V7M13 3L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        </div>

        <!-- Anthropic Claude -->
        <div class="infyp-api-card <?php echo esc_attr($infyp_has_anthropic ? 'has-key' : ''); ?>" data-provider="anthropic">
            <div class="infyp-api-card-header">
                <div class="infyp-api-provider-info">
                    <div>
                        <h4><?php esc_html_e( 'Anthropic Claude', 'infy-ai-image-seo-optimizer' ); ?></h4>
                        <span class="infyp-api-badge"><?php echo esc_html( $infyp_provider_models['anthropic'] ); ?></span>
                    </div>
                </div>
                <div class="infyp-api-status" id="infyp-status-anthropic">
                    <?php if ( $infyp_has_anthropic ) : ?>
                        <span class="infyp-status-badge connected">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <?php esc_html_e( 'Connected', 'infy-ai-image-seo-optimizer' ); ?>
                        </span>
                    <?php endif; ?>
                </div>
            </div>
            <p class="infyp-api-card-desc"><?php esc_html_e( 'Advanced AI with excellent reasoning. Great for detailed, accurate image descriptions.', 'infy-ai-image-seo-optimizer' ); ?></p>
            <div class="infyp-api-input-wrapper">
                <input type="password"
                       class="infyp-api-input"
                       id="infyp-api-anthropic"
                       name="anthropic"
                       placeholder="<?php esc_attr_e( 'Enter your Anthropic API key', 'infy-ai-image-seo-optimizer' ); ?>"
                       data-provider="anthropic"
                       autocomplete="off" />
                <button type="button" class="infyp-toggle-visibility" aria-label="<?php esc_attr_e( 'Toggle visibility', 'infy-ai-image-seo-optimizer' ); ?>">
                    <svg class="eye-open" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M2.5 10C2.5 10 5 4.16667 10 4.16667C15 4.16667 17.5 10 17.5 10C17.5 10 15 15.8333 10 15.8333C5 15.8333 2.5 10 2.5 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="10" cy="10" r="2.5" stroke="currentColor" stroke-width="1.5"/>
                    </svg>
                    <svg class="eye-closed" width="20" height="20" viewBox="0 0 20 20" fill="none" style="display:none;">
                        <path d="M2.5 2.5L17.5 17.5M8.23 8.23C7.77 8.69 7.5 9.31 7.5 10C7.5 11.38 8.62 12.5 10 12.5C10.69 12.5 11.31 12.23 11.77 11.77M14.95 14.95C13.55 15.95 11.85 16.67 10 16.67C5 16.67 2.5 10 2.5 10C3.37 8.22 4.69 6.69 6.27 5.57M10 3.33C11.1 3.33 12.15 3.56 13.12 3.97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
            <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener" class="infyp-get-key-link">
                <?php esc_html_e( 'Get API key', 'infy-ai-image-seo-optimizer' ); ?>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M6 3H3V13H13V10M9 3H13V7M13 3L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        </div>

        <!-- OpenAI -->
        <div class="infyp-api-card <?php echo esc_attr($infyp_has_openai ? 'has-key' : ''); ?>" data-provider="openai">
            <div class="infyp-api-card-header">
                <div class="infyp-api-provider-info">
                    <div>
                        <h4><?php esc_html_e( 'OpenAI', 'infy-ai-image-seo-optimizer' ); ?></h4>
                        <span class="infyp-api-badge"><?php echo esc_html( $infyp_provider_models['openai'] ); ?></span>
                    </div>
                </div>
                <div class="infyp-api-status" id="infyp-status-openai">
                    <?php if ( $infyp_has_openai ) : ?>
                        <span class="infyp-status-badge connected">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                                <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <?php esc_html_e( 'Connected', 'infy-ai-image-seo-optimizer' ); ?>
                        </span>
                    <?php endif; ?>
                </div>
            </div>
            <p class="infyp-api-card-desc"><?php esc_html_e( 'Industry-leading AI models. Best for complex image descriptions and nuanced SEO content.', 'infy-ai-image-seo-optimizer' ); ?></p>
            <div class="infyp-api-input-wrapper">
                <input type="password"
                       class="infyp-api-input"
                       id="infyp-api-openai"
                       name="openai"
                       placeholder="<?php esc_attr_e( 'Enter your OpenAI API key', 'infy-ai-image-seo-optimizer' ); ?>"
                       data-provider="openai"
                       autocomplete="off" />
                <button type="button" class="infyp-toggle-visibility" aria-label="<?php esc_attr_e( 'Toggle visibility', 'infy-ai-image-seo-optimizer' ); ?>">
                    <svg class="eye-open" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M2.5 10C2.5 10 5 4.16667 10 4.16667C15 4.16667 17.5 10 17.5 10C17.5 10 15 15.8333 10 15.8333C5 15.8333 2.5 10 2.5 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <circle cx="10" cy="10" r="2.5" stroke="currentColor" stroke-width="1.5"/>
                    </svg>
                    <svg class="eye-closed" width="20" height="20" viewBox="0 0 20 20" fill="none" style="display:none;">
                        <path d="M2.5 2.5L17.5 17.5M8.23 8.23C7.77 8.69 7.5 9.31 7.5 10C7.5 11.38 8.62 12.5 10 12.5C10.69 12.5 11.31 12.23 11.77 11.77M14.95 14.95C13.55 15.95 11.85 16.67 10 16.67C5 16.67 2.5 10 2.5 10C3.37 8.22 4.69 6.69 6.27 5.57M10 3.33C11.1 3.33 12.15 3.56 13.12 3.97" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
            </div>
            <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" class="infyp-get-key-link">
                <?php esc_html_e( 'Get API key', 'infy-ai-image-seo-optimizer' ); ?>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M6 3H3V13H13V10M9 3H13V7M13 3L7 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        </div>
    </div>

    <?php
    /**
     * Fires after the built-in API key cards in the Setup Wizard.
     *
     * Extensions can render additional API key input fields here.
     *
     * @since 1.0.0
     */
    do_action( 'infyp_after_api_key_fields' );
    ?>

    <div class="infyp-api-notice" id="infyp-api-notice">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z" stroke="currentColor" stroke-width="1.5"/>
            <path d="M10 6V10M10 14H10.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
        <span><?php esc_html_e( 'Enter at least one API key to continue. Your keys are encrypted and stored securely.', 'infy-ai-image-seo-optimizer' ); ?></span>
    </div>
</div>
