<?php
/**
 * Setup Wizard - Complete 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'];
$infyp_wizard_data   = $data['wizard_data'];

// Count configured providers
$infyp_providers_count = ( $infyp_has_openai ? 1 : 0 ) + ( $infyp_has_google ? 1 : 0 ) + ( $infyp_has_anthropic ? 1 : 0 );
?>
<div class="infyp-wizard-step-content infyp-step-complete">
    <div class="infyp-complete-icon">
        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="40" cy="40" r="40" fill="url(#complete-gradient)"/>
            <path d="M24 40L34 50L56 28" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
            <defs>
                <linearGradient id="complete-gradient" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#10b981"/>
                    <stop offset="1" stop-color="#059669"/>
                </linearGradient>
            </defs>
        </svg>
    </div>

    <h1 class="infyp-complete-title"><?php esc_html_e( "You're All Set!", 'infy-ai-image-seo-optimizer' ); ?></h1>

    <p class="infyp-complete-subtitle">
        <?php esc_html_e( 'AI Image SEO is now configured and ready to optimize your images.', 'infy-ai-image-seo-optimizer' ); ?>
    </p>

    <!-- Setup Summary -->
    <div class="infyp-complete-summary">
        <h3><?php esc_html_e( 'Setup Summary', 'infy-ai-image-seo-optimizer' ); ?></h3>
        <div class="infyp-summary-items">
            <?php if ( $infyp_providers_count > 0 ) : ?>
            <div class="infyp-summary-item success">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M16.5 5.5L7.5 14.5L3.5 10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>
                    <?php
                    printf(
                        /* translators: %d: number of AI providers */
                        esc_html( _n( '%d AI provider configured', '%d AI providers configured', $infyp_providers_count, 'infy-ai-image-seo-optimizer' ) ),
                        absint( $infyp_providers_count )
                    );
                    ?>
                </span>
            </div>
            <?php endif; ?>

            <?php if ( ! empty( $infyp_wizard_data['website_type'] ) ) : ?>
            <div class="infyp-summary-item success">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M16.5 5.5L7.5 14.5L3.5 10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span><?php esc_html_e( 'Website type configured', 'infy-ai-image-seo-optimizer' ); ?></span>
            </div>
            <?php endif; ?>

            <div class="infyp-summary-item success">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M16.5 5.5L7.5 14.5L3.5 10.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span><?php esc_html_e( 'Ready to optimize images', 'infy-ai-image-seo-optimizer' ); ?></span>
            </div>
        </div>
    </div>

    <!-- Quick Start Actions -->
    <div class="infyp-complete-actions">
        <a href="<?php echo esc_url( admin_url( 'admin.php?page=infy-ai-image-seo-optimizer' ) ); ?>" class="infyp-wizard-btn infyp-wizard-btn-primary infyp-wizard-btn-large">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M3 10L10 3L17 10M10 3V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="rotate(90 10 10)"/>
            </svg>
            <?php esc_html_e( 'Start Optimizing Images', 'infy-ai-image-seo-optimizer' ); ?>
        </a>

        <a href="<?php echo esc_url( admin_url( 'admin.php?page=ai-image-seo-optimizer-settings' ) ); ?>" class="infyp-wizard-btn infyp-wizard-btn-secondary">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z" stroke="currentColor" stroke-width="1.5"/>
                <path d="M16.1667 10C16.1667 10.3417 16.1333 10.675 16.0833 11L17.8083 12.3333C17.9667 12.4583 18.0083 12.6833 17.9 12.8583L16.2667 15.6417C16.1583 15.8167 15.9417 15.8833 15.75 15.8167L13.7 15.0083C13.1833 15.4 12.6167 15.725 12 15.9667L11.6833 18.1333C11.65 18.3333 11.475 18.5 11.25 18.5H7.98333C7.75833 18.5 7.58333 18.3333 7.55 18.1333L7.23333 15.9667C6.61667 15.725 6.05 15.4 5.53333 15.0083L3.48333 15.8167C3.29167 15.8833 3.075 15.8167 2.96667 15.6417L1.33333 12.8583C1.225 12.6833 1.26667 12.4583 1.425 12.3333L3.15 11C3.1 10.675 3.06667 10.3417 3.06667 10C3.06667 9.65833 3.1 9.325 3.15 9L1.425 7.66667C1.26667 7.54167 1.225 7.31667 1.33333 7.14167L2.96667 4.35833C3.075 4.18333 3.29167 4.11667 3.48333 4.18333L5.53333 4.99167C6.05 4.6 6.61667 4.275 7.23333 4.03333L7.55 1.86667C7.58333 1.66667 7.75833 1.5 7.98333 1.5H11.25C11.475 1.5 11.65 1.66667 11.6833 1.86667L12 4.03333C12.6167 4.275 13.1833 4.6 13.7 4.99167L15.75 4.18333C15.9417 4.11667 16.1583 4.18333 16.2667 4.35833L17.9 7.14167C18.0083 7.31667 17.9667 7.54167 17.8083 7.66667L16.0833 9C16.1333 9.325 16.1667 9.65833 16.1667 10Z" stroke="currentColor" stroke-width="1.5"/>
            </svg>
            <?php esc_html_e( 'Configure Advanced Settings', 'infy-ai-image-seo-optimizer' ); ?>
        </a>
    </div>

</div>
