{% extends "base.html" %}

{% block head %}
    <title>AI Collection Demo - See What You're Missing - Orchid Continuum</title>
    <meta name="description" content="Interactive demo showing how AI transforms orchid care with real-time insights and predictive analysis">
    <style>
        .demo-hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 3rem 0;
            text-align: center;
        }
        .simulation-container {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 2rem;
            margin: 2rem 0;
            position: relative;
            overflow: hidden;
        }
        .simulation-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #4caf50, #2196f3, #ff9800, #e91e63);
            background-size: 400% 100%;
            animation: gradient-flow 3s ease-in-out infinite;
        }
        @keyframes gradient-flow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .insight-card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin: 1rem 0;
            border-left: 4px solid #4caf50;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transform: translateY(20px);
            opacity: 0;
            transition: all 0.6s ease;
        }
        .insight-card.animate-in {
            transform: translateY(0);
            opacity: 1;
        }
        .insight-type {
            display: inline-block;
            background: linear-gradient(45deg, #4caf50, #8bc34a);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .wow-indicator {
            display: inline-block;
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            float: right;
        }
        .comparison-section {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            margin: 2rem 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        .human-approach {
            background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%);
            border-left: 4px solid #f44336;
        }
        .ai-approach {
            background: linear-gradient(135deg, #e8f5e8 0%, #f3e5f5 100%);
            border-left: 4px solid #4caf50;
        }
        .value-metric {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .processing-step {
            padding: 0.75rem 1rem;
            margin: 0.5rem 0;
            background: white;
            border-radius: 8px;
            border-left: 3px solid #2196f3;
            opacity: 0;
            transform: translateX(-20px);
            transition: all 0.4s ease;
        }
        .processing-step.active {
            opacity: 1;
            transform: translateX(0);
            background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
        }
        .processing-step.completed {
            background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
            border-left-color: #4caf50;
        }
        .demo-button {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            color: white;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            border-radius: 25px;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            cursor: pointer;
        }
        .demo-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
            color: white;
        }
        .experience-badge {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            margin-bottom: 1rem;
        }
        .analysis-meta {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
            font-size: 0.9rem;
            color: #666;
        }
        .typewriter {
            overflow: hidden;
            border-right: 2px solid #4caf50;
            white-space: nowrap;
            margin: 0 auto;
            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: #4caf50; }
        }
        .scenario-selector {
            margin: 2rem 0;
            text-align: center;
        }
        .scenario-btn {
            margin: 0.5rem;
            padding: 0.75rem 1.5rem;
            border: 2px solid #667eea;
            background: transparent;
            color: #667eea;
            border-radius: 25px;
            transition: all 0.3s;
            cursor: pointer;
        }
        .scenario-btn:hover, .scenario-btn.active {
            background: #667eea;
            color: white;
        }
        .loading-dots {
            display: inline-block;
        }
        .loading-dots::after {
            content: '';
            animation: dots 1.5s infinite;
        }
        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60%, 100% { content: '...'; }
        }
    </style>
{% endblock %}

{% block content %}
<!-- Demo Hero -->
<div class="demo-hero">
    <div class="container">
        <h1 class="display-4 mb-3">🤖 AI Collection Analysis Demo</h1>
        <div class="experience-badge">
            <i data-feather="user" class="me-2"></i>
            {{ demo_data.experience_level.title() }} Level Experience
        </div>
        <p class="lead">{{ demo_data.message }}</p>
    </div>
</div>

<!-- Scenario Selection -->
<div class="container scenario-selector">
    <h3 class="mb-3">Choose Your Collection Scenario:</h3>
    <div>
        <button class="scenario-btn active" data-scenario="beginner_collection">
            🌱 Beginner (2-5 plants)
        </button>
        <button class="scenario-btn" data-scenario="intermediate_collection">
            🌿 Intermediate (8+ plants)
        </button>
        <button class="scenario-btn" data-scenario="advanced_collection">
            🌺 Advanced (25+ plants)
        </button>
    </div>
</div>

<!-- Live AI Analysis Simulation -->
<div class="container">
    <div class="simulation-container">
        <h2 class="text-center mb-4">
            <i data-feather="activity" class="me-2"></i>
            Live AI Analysis in Progress
        </h2>
        
        <div class="row">
            <div class="col-md-6">
                <h4>Processing Steps:</h4>
                <div id="processingSteps">
                    <!-- Steps will be populated dynamically -->
                </div>
            </div>
            <div class="col-md-6">
                <h4>Analysis Results:</h4>
                <div id="analysisResults">
                    <div class="text-muted">
                        <i data-feather="clock" class="me-2"></i>
                        Waiting for analysis to begin...
                    </div>
                </div>
            </div>
        </div>
        
        <div class="text-center mt-4">
            <button class="demo-button" onclick="startAnalysisDemo()">
                <i data-feather="play" class="me-2"></i>
                Start AI Analysis
            </button>
        </div>
    </div>
</div>

<!-- Discovered Insights -->
<div class="container my-5">
    <h2 class="text-center mb-4">🔍 Insights AI Discovered</h2>
    <div id="insightContainer">
        {% for insight in demo_data.insights %}
        <div class="insight-card">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div class="insight-type">{{ insight.type.replace('_', ' ').title() }}</div>
                <div class="wow-indicator">🤯 Wow Factor {{ insight.wow_factor }}/10</div>
            </div>
            <h4>{{ insight.title }}</h4>
            <p class="lead">{{ insight.description }}</p>
            
            <div class="row mt-3">
                <div class="col-md-6">
                    <h6 class="text-danger">Without AI:</h6>
                    <p class="text-muted">{{ insight.human_vs_ai.human }}</p>
                </div>
                <div class="col-md-6">
                    <h6 class="text-success">With AI:</h6>
                    <p class="text-muted">{{ insight.human_vs_ai.ai }}</p>
                </div>
            </div>
            
            <div class="mt-3 p-3 bg-light rounded">
                <strong>💡 Value:</strong> {{ insight.value }}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Comparison Section -->
<div class="container my-5">
    <h2 class="text-center mb-5">📊 Before vs After Comparison</h2>
    
    <div class="row">
        {% for prop_key, prop_value in value_props.items() %}
        <div class="col-md-6 mb-4">
            <div class="comparison-section">
                <h4 class="mb-3">{{ prop_key.replace('_', ' ').title() }}</h4>
                
                <div class="mb-3">
                    <h6 class="text-danger">Before:</h6>
                    <p>{{ prop_value.before }}</p>
                </div>
                
                <div class="mb-3">
                    <h6 class="text-success">After:</h6>
                    <p>{{ prop_value.after }}</p>
                </div>
                
                <div class="text-center">
                    <div class="value-metric text-success">{{ prop_value.impact }}</div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Capability Comparison -->
<div class="bg-light py-5">
    <div class="container">
        <h2 class="text-center mb-5">🔄 Manual vs AI Comparison</h2>
        
        <div class="row">
            <div class="col-md-6">
                <div class="comparison-section human-approach">
                    <h3 class="text-danger mb-3">
                        <i data-feather="user" class="me-2"></i>
                        {{ comparisons.manual_tracking.description }}
                    </h3>
                    
                    <h5>Limitations:</h5>
                    <ul>
                        {% for limitation in comparisons.manual_tracking.limitations %}
                        <li class="mb-2">{{ limitation }}</li>
                        {% endfor %}
                    </ul>
                    
                    <div class="text-center mt-4">
                        <div class="value-metric text-danger">{{ comparisons.manual_tracking.time_cost }}</div>
                        <p class="text-muted">{{ comparisons.manual_tracking.insight_level }}</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="comparison-section ai-approach">
                    <h3 class="text-success mb-3">
                        <i data-feather="cpu" class="me-2"></i>
                        {{ comparisons.ai_tracking.description }}
                    </h3>
                    
                    <h5>Capabilities:</h5>
                    <ul>
                        {% for capability in comparisons.ai_tracking.capabilities %}
                        <li class="mb-2">{{ capability }}</li>
                        {% endfor %}
                    </ul>
                    
                    <div class="text-center mt-4">
                        <div class="value-metric text-success">{{ comparisons.ai_tracking.time_cost }}</div>
                        <p class="text-muted">{{ comparisons.ai_tracking.insight_level }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Call to Action -->
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 text-center">
            <div class="card border-0 shadow-lg">
                <div class="card-body p-5">
                    <h2 class="mb-4">🚀 Ready to Transform Your Collection?</h2>
                    <p class="lead mb-4">
                        Stop missing patterns and start discovering insights that will 
                        revolutionize how you care for your orchids.
                    </p>
                    
                    <div class="row text-center mb-4">
                        <div class="col-md-4">
                            <div class="h1 text-primary">🎯</div>
                            <h5>Instant Insights</h5>
                            <p class="text-muted">See problems before they happen</p>
                        </div>
                        <div class="col-md-4">
                            <div class="h1 text-success">📈</div>
                            <h5>Better Results</h5>
                            <p class="text-muted">60% more blooms, healthier plants</p>
                        </div>
                        <div class="col-md-4">
                            <div class="h1 text-warning">⏰</div>
                            <h5>Save Time</h5>
                            <p class="text-muted">10+ hours saved per month</p>
                        </div>
                    </div>
                    
                    <a href="/collection" class="btn demo-button btn-lg me-3">
                        <i data-feather="layers" class="me-2"></i>
                        Start My AI Collection
                    </a>
                    
                    <a href="/collection/onboarding" class="btn btn-outline-primary btn-lg">
                        <i data-feather="arrow-left" class="me-2"></i>
                        Back to Overview
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    feather.replace();
    
    let currentScenario = 'beginner_collection';
    let analysisRunning = false;
    
    // Scenario selection
    document.querySelectorAll('.scenario-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (analysisRunning) return;
            
            document.querySelectorAll('.scenario-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            currentScenario = this.dataset.scenario;
            resetAnalysis();
        });
    });
    
    // Start AI analysis demo
    function startAnalysisDemo() {
        if (analysisRunning) return;
        
        analysisRunning = true;
        const button = document.querySelector('.demo-button');
        button.innerHTML = '<i data-feather="loader" class="me-2"></i>Analyzing<span class="loading-dots"></span>';
        button.disabled = true;
        feather.replace();
        
        // Clear previous results
        document.getElementById('analysisResults').innerHTML = 
            '<div class="text-muted"><i data-feather="activity" class="me-2"></i>Analysis starting...</div>';
        
        // Simulate analysis
        simulateAnalysis();
    }
    
    function simulateAnalysis() {
        fetch('/collection/onboarding/api/simulate_analysis', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                scenario: currentScenario
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                animateProcessingSteps(data.processing_steps);
                setTimeout(() => {
                    displayAnalysisResults(data);
                }, data.processing_steps.length * 800 + 1000);
            }
        })
        .catch(error => {
            console.error('Analysis error:', error);
            resetAnalysis();
        });
    }
    
    function animateProcessingSteps(steps) {
        const container = document.getElementById('processingSteps');
        container.innerHTML = '';
        
        steps.forEach((step, index) => {
            const stepElement = document.createElement('div');
            stepElement.className = 'processing-step';
            stepElement.innerHTML = `<i data-feather="circle" class="me-2"></i>${step}`;
            container.appendChild(stepElement);
            
            setTimeout(() => {
                stepElement.classList.add('active');
                stepElement.querySelector('[data-feather="circle"]').setAttribute('data-feather', 'clock');
                feather.replace();
                
                setTimeout(() => {
                    stepElement.classList.add('completed');
                    stepElement.querySelector('[data-feather="clock"]').setAttribute('data-feather', 'check');
                    feather.replace();
                }, 600);
            }, index * 800);
        });
    }
    
    function displayAnalysisResults(data) {
        const resultsContainer = document.getElementById('analysisResults');
        
        let resultsHTML = `
            <div class="analysis-meta">
                <div class="row text-center">
                    <div class="col-6">
                        <strong>${data.insights_discovered}</strong><br>
                        <small>Insights Found</small>
                    </div>
                    <div class="col-6">
                        <strong>${data.time_simulated}</strong><br>
                        <small>Analysis Time</small>
                    </div>
                </div>
            </div>
        `;
        
        data.scenario.insights.forEach((insight, index) => {
            resultsHTML += `
                <div class="insight-card" style="animation-delay: ${index * 0.2}s;">
                    <h6 class="text-success">💡 ${insight}</h6>
                </div>
            `;
        });
        
        resultsContainer.innerHTML = resultsHTML;
        
        // Animate insights in
        setTimeout(() => {
            document.querySelectorAll('#analysisResults .insight-card').forEach(card => {
                card.classList.add('animate-in');
            });
        }, 500);
        
        // Reset button
        setTimeout(() => {
            const button = document.querySelector('.demo-button');
            button.innerHTML = '<i data-feather="refresh-cw" class="me-2"></i>Run Another Analysis';
            button.disabled = false;
            analysisRunning = false;
            feather.replace();
        }, 2000);
    }
    
    function resetAnalysis() {
        document.getElementById('processingSteps').innerHTML = '';
        document.getElementById('analysisResults').innerHTML = 
            '<div class="text-muted"><i data-feather="clock" class="me-2"></i>Waiting for analysis to begin...</div>';
        
        const button = document.querySelector('.demo-button');
        button.innerHTML = '<i data-feather="play" class="me-2"></i>Start AI Analysis';
        button.disabled = false;
        analysisRunning = false;
        feather.replace();
    }
    
    // Animate insight cards on load
    setTimeout(() => {
        document.querySelectorAll('#insightContainer .insight-card').forEach((card, index) => {
            setTimeout(() => {
                card.classList.add('animate-in');
            }, index * 200);
        });
    }, 1000);
</script>
{% endblock %}