<?php
/**
 * Setup Wizard Main Page Template (Fullscreen)
 *
 * This template renders a fullscreen wizard experience without WordPress admin UI.
 *
 * @package AI_Image_SEO
 * @since 1.0.0
 *
 * @var array  $data          Template data passed from controller.
 * @var array  $steps         Available wizard steps.
 * @var string $current_step  Current step key.
 * @var int    $current_index Current step index.
 */

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

$infyp_steps         = $data['steps'];
$infyp_current_step  = $data['current_step'];
$infyp_current_index = $data['current_index'];
$infyp_step_keys     = array_keys( $infyp_steps );
$infyp_total_steps   = count( $infyp_steps );
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php esc_html_e( 'AI Image SEO Setup', 'infy-ai-image-seo-optimizer' ); ?> - <?php bloginfo( 'name' ); ?></title>
    <?php wp_head(); ?>
    <script>
        (function() {
            var t = localStorage.getItem('infypress-theme') ||
                (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
            document.documentElement.setAttribute('data-theme', t);
        })();
    </script>
</head>
<body class="infyp-wizard-body infyp-wizard-fullscreen">
    <div class="infyp-wizard-page">
        <!-- Header -->
        <div class="infyp-wizard-header">
            <div class="infyp-wizard-logo">
                <svg class="infyp-wizard-logo-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="40" height="40">
                    <path d="M480-118 120-398l66-50 294 228 294-228 66 50-360 280Zm0-202L120-600l360-280 360 280-360 280Zm0-280Zm0 178 230-178-230-178-230 178 230 178Z" fill="currentColor"/>
                </svg>
                <span class="infyp-wizard-logo-text">InfyPress</span>
            </div>

        </div>

        <!-- Progress Indicator -->
        <?php if ( $infyp_current_step !== 'complete' ) : ?>
        <div class="infyp-wizard-progress">
            <div class="infyp-wizard-steps">
                <?php foreach ( $infyp_steps as $infyp_step_key => $infyp_step ) :
                    $infyp_step_index = array_search( $infyp_step_key, $infyp_step_keys, true );
                    $infyp_step_class = 'infyp-wizard-step';

                    if ( $infyp_step_index < $infyp_current_index ) {
                        $infyp_step_class .= ' completed';
                    } elseif ( $infyp_step_index === $infyp_current_index ) {
                        $infyp_step_class .= ' active';
                    }
                ?>
                <div class="<?php echo esc_attr( $infyp_step_class ); ?>" data-step="<?php echo esc_attr( $infyp_step_key ); ?>">
                    <div class="infyp-step-dot">
                        <?php if ( $infyp_step_index < $infyp_current_index ) : ?>
                            <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 else : ?>
                            <?php echo esc_html( $infyp_step_index + 1 ); ?>
                        <?php endif; ?>
                    </div>
                    <span class="infyp-step-label"><?php echo esc_html( $infyp_step['name'] ); ?></span>
                </div>
                <?php if ( $infyp_step_index < $infyp_total_steps - 1 ) : ?>
                <div class="infyp-step-connector <?php echo esc_attr($infyp_step_index < $infyp_current_index ? 'completed' : ''); ?>"></div>
                <?php endif; ?>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>

        <!-- Step Content -->
        <div class="infyp-wizard-content" id="infyp-wizard-content">
            <?php
            $infyp_step_view = INFYP_PLUGIN_DIR . 'includes/views/setup-wizard/steps/' . $infyp_steps[ $infyp_current_step ]['view'] . '.php';
            if ( file_exists( $infyp_step_view ) ) {
                include $infyp_step_view;
            }
            ?>
        </div>

        <!-- Navigation -->
        <div class="infyp-wizard-navigation" id="infyp-wizard-navigation">
            <div class="infyp-wizard-nav-left">
                <?php if ( $infyp_current_index > 0 && $infyp_current_step !== 'complete' ) : ?>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=ai-image-seo-optimizer-wizard&step=' . $infyp_step_keys[ $infyp_current_index - 1 ] ) ); ?>" class="infyp-wizard-btn infyp-wizard-btn-secondary infyp-wizard-prev">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <?php esc_html_e( 'Back', 'infy-ai-image-seo-optimizer' ); ?>
                </a>
                <?php endif; ?>
                <?php if ( $infyp_current_step !== 'complete' ) : ?>
                <button type="button" class="infyp-wizard-skip" id="infyp-wizard-skip">
                    <?php esc_html_e( 'Skip Setup', 'infy-ai-image-seo-optimizer' ); ?>
                </button>
                <?php endif; ?>
            </div>

            <?php if ( $infyp_current_step === 'complete' ) : ?>
                <!-- Complete step has its own buttons -->
            <?php elseif ( $infyp_current_index < $infyp_total_steps - 2 ) : ?>
            <button type="button" class="infyp-wizard-btn infyp-wizard-btn-primary infyp-wizard-next" id="infyp-wizard-next" data-next-step="<?php echo esc_attr( $infyp_step_keys[ $infyp_current_index + 1 ] ); ?>">
                <?php esc_html_e( 'Continue', 'infy-ai-image-seo-optimizer' ); ?>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <path d="M7.5 15L12.5 10L7.5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
            <?php elseif ( $infyp_current_index === $infyp_total_steps - 2 ) : ?>
            <button type="button" class="infyp-wizard-btn infyp-wizard-btn-primary infyp-wizard-complete-btn" id="infyp-wizard-complete">
                <?php esc_html_e( 'Complete Setup', 'infy-ai-image-seo-optimizer' ); ?>
                <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>
            </button>
            <?php endif; ?>
        </div>
    </div>

    <!-- Footer -->
    <footer class="infyp-wizard-footer">
        <div class="infyp-wizard-footer-brand-center">
            <svg class="infyp-wizard-footer-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width="48" height="48">
                <path d="M480-118 120-398l66-50 294 228 294-228 66 50-360 280Zm0-202L120-600l360-280 360 280-360 280Zm0-280Zm0 178 230-178-230-178-230 178 230 178Z" fill="currentColor"/>
            </svg>
            <span class="infyp-wizard-footer-brand-name">InfyPress</span>
        </div>
        <div class="infyp-wizard-footer-bottom">
            <p>&copy; <?php echo esc_html( gmdate( 'Y' ) ); ?> InfyPress. <?php esc_html_e( 'All rights reserved.', 'infy-ai-image-seo-optimizer' ); ?></p>
        </div>
    </footer>

    <?php wp_footer(); ?>
</body>
</html>
