<?php
/**
 * AI Insights Views Trait
 *
 * Provides rendering methods for AI Insights page.
 *
 * @package Opti_Behavior
 * @version 1.0.3
 */

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

/**
 * AI Insights Views Trait
 *
 * Provides methods for rendering AI-powered analytics insights page.
 *
 * @since 1.0.0
 */
trait Opti_Behavior_AI_Insights_Views_Trait {

	/**
	 * Render AI Insights page.
	 *
	 * @since 1.0.0
	 */
	public function render_ai_insights() {
		?>
		<div class="wrap opti-behavior-ai-insights-page">
			<?php $this->render_pro_trial_banner(); ?>
			<?php $this->render_ai_insights_header(); ?>
			<?php if ( function_exists( 'opti_behavior_pro_sodium_banner' ) ) { opti_behavior_pro_sodium_banner(); } ?>
			<?php $this->render_ai_insights_content(); ?>
		</div>
		<?php
	}

	/**
	 * Render AI Insights header.
	 *
	 * @since 1.0.0
	 */
	private function render_ai_insights_header() {
		?>
		<div class="ai-insights-header">
			<div class="ai-header-content">
				<div class="ai-title-section">
					<div class="ai-icon-wrapper">
						<span class="ai-icon"><i data-lucide="bot"></i></span>
						<span class="ai-pulse"></span>
					</div>
					<div>
						<h1 class="ai-title"><?php esc_html_e( 'AI-Powered Analytics Insights', 'opti-behavior' ); ?></h1>
						<p class="ai-subtitle"><?php esc_html_e( 'The Future of Website Optimization is Here', 'opti-behavior' ); ?></p>
					</div>
				</div>
				<div class="ai-badge">
					<span class="badge-text">✨ <?php esc_html_e( 'Coming Soon', 'opti-behavior' ); ?></span>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Render AI Insights content.
	 *
	 * @since 1.0.0
	 */
	private function render_ai_insights_content() {
		?>
		<div class="ai-insights-content">
            <!-- Hero Section -->
            <div class="ai-hero-section">
                <div class="ai-hero-icon">
                    <svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="60" cy="60" r="50" fill="url(#gradient1)" opacity="0.2"/>
                        <circle cx="60" cy="60" r="40" fill="url(#gradient2)" opacity="0.3"/>
                        <path d="M60 30 L70 50 L90 50 L75 65 L80 85 L60 72 L40 85 L45 65 L30 50 L50 50 Z" fill="url(#gradient3)"/>
                        <defs>
                            <linearGradient id="gradient1" x1="10" y1="10" x2="110" y2="110">
                                <stop offset="0%" stop-color="#10b981"/>
                                <stop offset="100%" stop-color="#3b82f6"/>
                            </linearGradient>
                            <linearGradient id="gradient2" x1="20" y1="20" x2="100" y2="100">
                                <stop offset="0%" stop-color="#8b5cf6"/>
                                <stop offset="100%" stop-color="#ec4899"/>
                            </linearGradient>
                            <linearGradient id="gradient3" x1="30" y1="30" x2="90" y2="90">
                                <stop offset="0%" stop-color="#fbbf24"/>
                                <stop offset="100%" stop-color="#f59e0b"/>
                            </linearGradient>
                        </defs>
                    </svg>
                </div>
                <h2 class="ai-hero-title"><?php esc_html_e( 'Next-Level Analytics with Artificial Intelligence', 'opti-behavior' ); ?></h2>
                <p class="ai-hero-description">
                    <?php esc_html_e( 'This is a revolutionary new project that will take your Analytics to the next level by using AI to analyze everything happening on your website. We help you understand what works well to optimize it and achieve more performance in your business.', 'opti-behavior' ); ?>
                </p>
            </div>

            <!-- Features Grid -->
            <div class="ai-features-grid">
                <div class="ai-feature-card">
                    <div class="feature-icon"><i data-lucide="target"></i></div>
                    <h3 class="feature-title"><?php esc_html_e( 'Smart Analysis', 'opti-behavior' ); ?></h3>
                    <p class="feature-description"><?php esc_html_e( 'AI identifies patterns and trends in user behavior that humans might miss, providing actionable insights automatically.', 'opti-behavior' ); ?></p>
                </div>

                <div class="ai-feature-card">
                    <div class="feature-icon">🔍</div>
                    <h3 class="feature-title"><?php esc_html_e( 'Issue Detection', 'opti-behavior' ); ?></h3>
                    <p class="feature-description"><?php esc_html_e( 'Automatically detect problems affecting user experience, conversion rates, and engagement before they impact your business.', 'opti-behavior' ); ?></p>
                </div>

                <div class="ai-feature-card">
                    <div class="feature-icon">⚡</div>
                    <h3 class="feature-title"><?php esc_html_e( 'Auto-Fix & Suggestions', 'opti-behavior' ); ?></h3>
                    <p class="feature-description"><?php esc_html_e( 'Get intelligent recommendations and automatic fixes to improve traffic, sales, engagement time, and overall performance.', 'opti-behavior' ); ?></p>
                </div>

                <div class="ai-feature-card">
                    <div class="feature-icon"><i data-lucide="trending-up"></i></div>
                    <h3 class="feature-title"><?php esc_html_e( 'Performance Optimization', 'opti-behavior' ); ?></h3>
                    <p class="feature-description"><?php esc_html_e( 'Optimize your website for maximum conversions, longer session times, and increased revenue with AI-driven strategies.', 'opti-behavior' ); ?></p>
                </div>

                <div class="ai-feature-card">
                    <div class="feature-icon">🎨</div>
                    <h3 class="feature-title"><?php esc_html_e( 'UX Enhancement', 'opti-behavior' ); ?></h3>
                    <p class="feature-description"><?php esc_html_e( 'Improve user experience based on real behavioral data and AI predictions of what will work best for your audience.', 'opti-behavior' ); ?></p>
                </div>

                <div class="ai-feature-card">
                    <div class="feature-icon">💡</div>
                    <h3 class="feature-title"><?php esc_html_e( 'Predictive Insights', 'opti-behavior' ); ?></h3>
                    <p class="feature-description"><?php esc_html_e( 'Forecast trends and user behavior to stay ahead of the curve and make data-driven decisions with confidence.', 'opti-behavior' ); ?></p>
                </div>
            </div>

            <!-- What We Analyze Section -->
            <div class="ai-analyze-section">
                <h2 class="section-title"><?php esc_html_e( 'What Our AI Will Analyze', 'opti-behavior' ); ?></h2>
                <div class="analyze-grid">
                    <div class="analyze-item">
                        <span class="analyze-icon"><i data-lucide="bar-chart-3"></i></span>
                        <span class="analyze-text"><?php esc_html_e( 'Traffic Patterns', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon">🛒</span>
                        <span class="analyze-text"><?php esc_html_e( 'Sales Funnels', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon"><i data-lucide="clock"></i></span>
                        <span class="analyze-text"><?php esc_html_e( 'Engagement Time', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon">🖱️</span>
                        <span class="analyze-text"><?php esc_html_e( 'Click Behavior', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon"><i data-lucide="smartphone"></i></span>
                        <span class="analyze-text"><?php esc_html_e( 'Device Performance', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon"><i data-lucide="globe"></i></span>
                        <span class="analyze-text"><?php esc_html_e( 'Geographic Trends', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon"><i data-lucide="refresh-cw"></i></span>
                        <span class="analyze-text"><?php esc_html_e( 'User Journeys', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon">💰</span>
                        <span class="analyze-text"><?php esc_html_e( 'Revenue Impact', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon"><i data-lucide="target"></i></span>
                        <span class="analyze-text"><?php esc_html_e( 'Conversion Goals', 'opti-behavior' ); ?></span>
                    </div>
                    <div class="analyze-item">
                        <span class="analyze-icon"><i data-lucide="users"></i></span>
                        <span class="analyze-text"><?php esc_html_e( 'Audience Segments', 'opti-behavior' ); ?></span>
                    </div>
                </div>
            </div>

            <!-- Support Contact Section -->
            <div class="ai-feedback-section">
                <div class="feedback-card">
                    <div class="feedback-icon">&#128172;</div>
                    <h2 class="feedback-title"><?php esc_html_e( 'Need Help or Have Questions?', 'opti-behavior' ); ?></h2>
                    <p class="feedback-description">
                        <?php esc_html_e( 'We are here to help! Send us a message and our support team will get back to you as soon as possible.', 'opti-behavior' ); ?>
                    </p>
                    <?php
                    $current_user = wp_get_current_user();
                    $user_email = $current_user->user_email ? $current_user->user_email : '';
                    ?>

                    <form id="opti-behavior-support-form" class="support-form">
                        <div class="form-group">
                            <label for="support-name"><?php esc_html_e( 'Your Name', 'opti-behavior' ); ?></label>
                            <input type="text" id="support-name" name="support_name" required class="form-control" />
                        </div>

                        <div class="form-group">
                            <label for="support-email"><?php esc_html_e( 'Your Email', 'opti-behavior' ); ?></label>
                            <input type="email" id="support-email" name="support_email" value="<?php echo esc_attr( $user_email ); ?>" required class="form-control" />
                            <small class="form-hint"><?php esc_html_e( 'We will use this to respond to your message', 'opti-behavior' ); ?></small>
                        </div>

                        <div class="form-group">
                            <label for="support-subject"><?php esc_html_e( 'Subject', 'opti-behavior' ); ?></label>
                            <input type="text" id="support-subject" name="support_subject" required class="form-control" />
                        </div>

                        <div class="form-group">
                            <label for="support-message"><?php esc_html_e( 'Message', 'opti-behavior' ); ?></label>
                            <textarea id="support-message" name="support_message" rows="5" required class="form-control"></textarea>
                        </div>

                        <div class="form-actions">
                            <button type="submit" class="feedback-btn primary">
                                <span>&#128231;</span>
                                <?php esc_html_e( 'Send Message', 'opti-behavior' ); ?>
                            </button>
                        </div>

                        <div id="opti-support-response" class="support-response support-response-hidden"></div>
                    </form>

                    <p class="feedback-note">
                        <?php
                        printf(
                            /* translators: %s: support email address */
                            esc_html__( 'You can also reach us directly at %s', 'opti-behavior' ),
                            '<a href="mailto:contact@optiuser.com">contact@optiuser.com</a>'
                        );
                        ?>
                    </p>
                </div>
            </div>

            <!-- Timeline Section -->
            <div class="ai-timeline-section">
                <h2 class="section-title"><?php esc_html_e( 'Development Roadmap', 'opti-behavior' ); ?></h2>
                <div class="timeline">
                    <div class="timeline-item active">
                        <div class="timeline-marker">✅</div>
                        <div class="timeline-content">
                            <h3><?php esc_html_e( 'Phase 1: Foundation', 'opti-behavior' ); ?></h3>
                            <p><?php esc_html_e( 'Advanced analytics data collection and processing infrastructure', 'opti-behavior' ); ?></p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker"><i data-lucide="refresh-cw"></i></div>
                        <div class="timeline-content">
                            <h3><?php esc_html_e( 'Phase 2: AI Integration', 'opti-behavior' ); ?></h3>
                            <p><?php esc_html_e( 'Machine learning models for pattern recognition and insights', 'opti-behavior' ); ?></p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker">⏳</div>
                        <div class="timeline-content">
                            <h3><?php esc_html_e( 'Phase 3: Auto-Optimization', 'opti-behavior' ); ?></h3>
                            <p><?php esc_html_e( 'Automated fixes and intelligent recommendations engine', 'opti-behavior' ); ?></p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-marker">🚀</div>
                        <div class="timeline-content">
                            <h3><?php esc_html_e( 'Phase 4: Launch', 'opti-behavior' ); ?></h3>
                            <p><?php esc_html_e( 'Full AI-powered analytics suite with predictive capabilities', 'opti-behavior' ); ?></p>
                        </div>
                    </div>
                </div>
            </div>
		</div>
		<?php
	}

}

