{% extends "base-layout.html.twig" %}

{% block title %}Welcome to LocalLendables{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Welcome Header -->
            <div class="text-center mb-5">
                <div class="welcome-icon mb-3">
                    <i class="fas fa-hand-wave fa-3x text-primary"></i>
                </div>
                <h1 class="display-5 fw-bold text-primary">Welcome to LocalLendables!</h1>
                <p class="lead text-muted">Let's get you started on your community lending journey</p>
            </div>

            <!-- Progress Indicator -->
            <div class="progress mb-5" style="height: 8px;">
                <div class="progress-bar bg-primary" role="progressbar" id="welcomeProgress" style="width: 20%"></div>
            </div>

            <!-- Welcome Steps -->
            <div class="card shadow-lg border-0">
                <div class="card-body p-5">
                    <!-- Step 1: Profile Setup -->
                    <div class="welcome-step" id="step1">
                        <div class="d-flex align-items-center mb-4">
                            <div class="step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <span class="fw-bold">1</span>
                            </div>
                            <h3 class="mb-0">Complete Your Profile</h3>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-8">
                                <p class="text-muted mb-4">Add some personal information so the community can get to know you better. This helps build trust within our lending network.</p>
                                
                                <div class="checklist">
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="profilePicture" disabled>
                                        <label class="form-check-label text-muted" for="profilePicture">
                                            Add a profile picture
                                        </label>
                                    </div>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="profileBio" disabled>
                                        <label class="form-check-label text-muted" for="profileBio">
                                            Write a brief bio about yourself
                                        </label>
                                    </div>
                                    <div class="form-check mb-4">
                                        <input class="form-check-input" type="checkbox" id="contactInfo" disabled>
                                        <label class="form-check-label text-muted" for="contactInfo">
                                            Verify your contact information
                                        </label>
                                    </div>
                                </div>
                                
                                <a href="/edit-profile/{{ user.id }}" class="btn btn-primary btn-lg">
                                    <i class="fas fa-user-edit me-2"></i>Complete Profile
                                </a>
                            </div>
                            <div class="col-md-4 text-center">
                                <img src="/ll_images/welcome-profile.png" alt="Profile Setup" class="img-fluid rounded" style="max-height: 200px;">
                            </div>
                        </div>
                    </div>

                    <!-- Step 2: Community Tour -->
                    <div class="welcome-step d-none" id="step2">
                        <div class="d-flex align-items-center mb-4">
                            <div class="step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <span class="fw-bold">2</span>
                            </div>
                            <h3 class="mb-0">Take the Community Tour</h3>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-8">
                                <p class="text-muted mb-4">Learn how LocalLendables works and discover all the features available to help you share and borrow within your community.</p>
                                
                                <div class="mb-4">
                                    <h5 class="text-primary">You'll learn about:</h5>
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>How to add items to lend</li>
                                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Browsing and requesting items</li>
                                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Managing loans and returns</li>
                                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Community points and reputation</li>
                                    </ul>
                                </div>
                                
                                <button class="btn btn-primary btn-lg" onclick="startTour()">
                                    <i class="fas fa-play me-2"></i>Start Tour
                                </button>
                            </div>
                            <div class="col-md-4 text-center">
                                <img src="/ll_images/welcome-tour.png" alt="Community Tour" class="img-fluid rounded" style="max-height: 200px;">
                            </div>
                        </div>
                    </div>

                    <!-- Step 3: Add Your First Item -->
                    <div class="welcome-step d-none" id="step3">
                        <div class="d-flex align-items-center mb-4">
                            <div class="step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <span class="fw-bold">3</span>
                            </div>
                            <h3 class="mb-0">Add Your First Item</h3>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-8">
                                <p class="text-muted mb-4">Share something you'd be happy to lend to neighbors. It could be tools, books, kitchen appliances, or anything useful!</p>
                                
                                <div class="alert alert-info">
                                    <h6><i class="fas fa-lightbulb me-2"></i>Popular items to share:</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <ul class="list-unstyled mb-0">
                                                <li>• Power tools</li>
                                                <li>• Kitchen appliances</li>
                                                <li>• Books and movies</li>
                                            </ul>
                                        </div>
                                        <div class="col-md-6">
                                            <ul class="list-unstyled mb-0">
                                                <li>• Camping gear</li>
                                                <li>• Garden equipment</li>
                                                <li>• Board games</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                
                                <a href="/add-item" class="btn btn-primary btn-lg">
                                    <i class="fas fa-plus me-2"></i>Add First Item
                                </a>
                            </div>
                            <div class="col-md-4 text-center">
                                <img src="/ll_images/welcome-item.png" alt="Add Item" class="img-fluid rounded" style="max-height: 200px;">
                            </div>
                        </div>
                    </div>

                    <!-- Step 4: Community Introduction -->
                    <div class="welcome-step d-none" id="step4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="step-number bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                <span class="fw-bold">4</span>
                            </div>
                            <h3 class="mb-0">Meet Your Community</h3>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-8">
                                <p class="text-muted mb-4">Discover what your neighbors are sharing and start building connections in your local lending community.</p>
                                
                                <div class="mb-4">
                                    <h5 class="text-primary">Community Guidelines:</h5>
                                    <ul class="list-unstyled">
                                        <li class="mb-2"><i class="fas fa-heart text-danger me-2"></i>Be respectful and communicative</li>
                                        <li class="mb-2"><i class="fas fa-clock text-warning me-2"></i>Return items on time</li>
                                        <li class="mb-2"><i class="fas fa-shield-alt text-success me-2"></i>Take good care of borrowed items</li>
                                        <li class="mb-2"><i class="fas fa-comments text-info me-2"></i>Ask questions if you're unsure</li>
                                    </ul>
                                </div>
                                
                                <button class="btn btn-primary btn-lg" onclick="exploreItems()">
                                    <i class="fas fa-search me-2"></i>Explore Community Items
                                </button>
                            </div>
                            <div class="col-md-4 text-center">
                                <img src="/ll_images/welcome-community.png" alt="Community" class="img-fluid rounded" style="max-height: 200px;">
                            </div>
                        </div>
                    </div>

                    <!-- Completion Step -->
                    <div class="welcome-step d-none" id="stepComplete">
                        <div class="text-center">
                            <div class="mb-4">
                                <i class="fas fa-check-circle fa-4x text-success"></i>
                            </div>
                            <h2 class="text-success mb-3">Welcome Complete!</h2>
                            <p class="lead text-muted mb-4">You're all set to start lending and borrowing in your community.</p>
                            
                            <div class="row mb-4">
                                <div class="col-md-4">
                                    <div class="card bg-light border-0">
                                        <div class="card-body text-center">
                                            <i class="fas fa-tachometer-alt fa-2x text-primary mb-2"></i>
                                            <h6>Visit Dashboard</h6>
                                            <small class="text-muted">Manage your items and loans</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-light border-0">
                                        <div class="card-body text-center">
                                            <i class="fas fa-search fa-2x text-primary mb-2"></i>
                                            <h6>Browse Items</h6>
                                            <small class="text-muted">Find things to borrow</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card bg-light border-0">
                                        <div class="card-body text-center">
                                            <i class="fas fa-comments fa-2x text-primary mb-2"></i>
                                            <h6>Messages</h6>
                                            <small class="text-muted">Chat with neighbors</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <a href="/dashboard/{{ user.id }}" class="btn btn-success btn-lg me-3">
                                <i class="fas fa-home me-2"></i>Go to Dashboard
                            </a>
                            <a href="/browse" class="btn btn-outline-primary btn-lg">
                                <i class="fas fa-search me-2"></i>Browse Items
                            </a>
                        </div>
                    </div>

                    <!-- Navigation -->
                    <div class="d-flex justify-content-between mt-5 pt-4 border-top">
                        <button class="btn btn-outline-secondary" id="prevBtn" onclick="changeStep(-1)" disabled>
                            <i class="fas fa-arrow-left me-2"></i>Previous
                        </button>
                        <button class="btn btn-primary" id="nextBtn" onclick="changeStep(1)">
                            Next<i class="fas fa-arrow-right ms-2"></i>
                        </button>
                        <button class="btn btn-success d-none" id="completeBtn" onclick="completeWelcome()">
                            <i class="fas fa-check me-2"></i>Complete Welcome
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let currentStep = 1;
const totalSteps = 4;

// Check progress on load
document.addEventListener('DOMContentLoaded', async function() {
    await checkWelcomeProgress();
});

async function checkWelcomeProgress() {
    try {
        const response = await fetch('/api/welcome/progress/{{ user.id }}');
        const progress = await response.json();
        
        // Update checklist based on progress
        if (progress.steps.profileUpdate) {
            document.getElementById('profilePicture').checked = true;
            document.getElementById('profileBio').checked = true;
        }
        
        // Auto-advance if steps are complete
        if (progress.steps.profileUpdate && currentStep === 1) {
            changeStep(1);
        }
        
        updateProgress();
    } catch (error) {
        console.error('Error checking progress:', error);
    }
}

function changeStep(direction) {
    const newStep = currentStep + direction;
    
    if (newStep < 1 || newStep > totalSteps + 1) return;
    
    // Hide current step
    document.getElementById(`step${currentStep === totalSteps + 1 ? 'Complete' : currentStep}`).classList.add('d-none');
    
    currentStep = newStep;
    
    // Show new step
    if (currentStep > totalSteps) {
        document.getElementById('stepComplete').classList.remove('d-none');
        document.getElementById('nextBtn').classList.add('d-none');
        document.getElementById('completeBtn').classList.remove('d-none');
    } else {
        document.getElementById(`step${currentStep}`).classList.remove('d-none');
        document.getElementById('nextBtn').classList.remove('d-none');
        document.getElementById('completeBtn').classList.add('d-none');
    }
    
    // Update navigation buttons
    document.getElementById('prevBtn').disabled = currentStep === 1;
    
    updateProgress();
}

function updateProgress() {
    const progress = (currentStep / (totalSteps + 1)) * 100;
    document.getElementById('welcomeProgress').style.width = progress + '%';
}

function startTour() {
    // Mark tour as started
    alert('Interactive tour coming soon! For now, explore the Browse page to see available items.');
    changeStep(1); // Move to next step
}

function exploreItems() {
    window.open('/browse', '_blank');
    changeStep(1); // Move to completion
}

async function completeWelcome() {
    try {
        const response = await fetch('/api/welcome/complete/{{ user.id }}', {
            method: 'POST'
        });
        
        const result = await response.json();
        
        if (result.success) {
            window.location.href = '/dashboard/{{ user.id }}';
        } else {
            alert('Error completing welcome sequence');
        }
    } catch (error) {
        console.error('Error completing welcome:', error);
        alert('Error completing welcome sequence');
    }
}
</script>

<style>
.welcome-icon {
    animation: wave 2s infinite;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-20deg); }
}

.step-number {
    font-size: 1.2rem;
    min-width: 40px;
    min-height: 40px;
}

.welcome-step {
    min-height: 400px;
}

.checklist .form-check-input:checked + .form-check-label {
    color: var(--bs-success) !important;
    text-decoration: line-through;
}
</style>
{% endblock %}