{% extends 'base.html' %}
{% load static %}

{% block title %}Painel do Modelo - Allure{% endblock %}

{% block extra_css %}
<style>
.plan-status {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.plan-status.alert-success {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border-left: 4px solid #28a745;
}

.plan-status.alert-warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border-left: 4px solid #ffc107;
}

.plan-info {
    padding: 15px 20px;
}

.plan-action .btn {
    border-radius: 8px;
    font-weight: 600;
    padding: 10px 20px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.plan-action .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,123,255,0.3);
}

.plan-status i {
    font-size: 1.2em;
}

@media (max-width: 768px) {
    .plan-info .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    .plan-action {
        margin-top: 15px;
        width: 100%;
    }
    
    .plan-action .btn {
        width: 100%;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="container">
        <!-- Alertas de Pagamento -->
        {% if alerta_pagamento %}
        <div class="payment-alert alert alert-{{ alerta_pagamento.tipo }} alert-dismissible fade show" role="alert">
            <div class="alert-content">
                <div class="alert-icon">
                    {% if alerta_pagamento.tipo == 'warning' %}
                        <i class="fas fa-exclamation-triangle"></i>
                    {% elif alerta_pagamento.tipo == 'info' %}
                        <i class="fas fa-info-circle"></i>
                    {% elif alerta_pagamento.tipo == 'success' %}
                        <i class="fas fa-check-circle"></i>
                    {% endif %}
                </div>
                <div class="alert-text">
                    <h4 class="alert-title">{{ alerta_pagamento.titulo }}</h4>
                    <p class="alert-message">{{ alerta_pagamento.mensagem }}</p>
                </div>
                <div class="alert-action">
                    {% if alerta_pagamento.url %}
                        <a href="{% url alerta_pagamento.url %}" class="btn btn-primary">
                            <i class="fas fa-arrow-right me-2"></i>{{ alerta_pagamento.acao }}
                        </a>
                    {% else %}
                        <span class="btn btn-secondary disabled">
                            <i class="fas fa-clock me-2"></i>{{ alerta_pagamento.acao }}
                        </span>
                    {% endif %}
                </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endif %}
        
        <!-- Aviso sobre Campos Pendentes -->
        {% if not modelo.tem_perfil_completo %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <div class="alert-content">
                <div class="alert-icon">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="alert-text">
                    <h4 class="alert-title">⚠️ Perfil Incompleto</h4>
                    <p class="alert-message">
                        Seu perfil precisa ser finalizado para aparecer nas listagens públicas. 
                        Campos obrigatórios pendentes:
                    </p>
                    <ul class="mb-0">
                        {% for campo in modelo.get_campos_pendentes %}
                            <li><strong>{{ campo }}</strong></li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="alert-action">
                    <a href="{% url 'accounts:editar_perfil' %}" class="btn btn-warning">
                        <i class="fas fa-edit me-2"></i>Completar Perfil
                    </a>
                </div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        {% endif %}
        
        <!-- Status do Plano Ativo -->
        {% if plano_ativo %}
        <div class="plan-status alert alert-success" role="alert">
            <div class="plan-info">
                <i class="fas fa-crown me-2"></i>
                <strong>Plano Ativo:</strong> {{ plano_ativo.nome }} ({{ plano_ativo.tipo|title }})
                <small class="d-block text-muted">
                    Válido até: {{ plano_ativo.data_fim|date:"d/m/Y" }}
                </small>
            </div>
        </div>
        {% else %}
        <!-- Sem Plano Ativo -->
        <div class="plan-status alert alert-warning" role="alert">
            <div class="plan-info">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Nenhum Plano Ativo</strong>
                        <small class="d-block text-muted">
                            Ative um plano para destacar seu perfil e aumentar suas oportunidades
                        </small>
                    </div>
                    <div class="plan-action">
                        <a href="{% url 'payments:selecionar_plano' %}" class="btn btn-primary">
                            <i class="fas fa-shopping-cart me-2"></i>
                            Escolher Plano
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Seção de Boost -->
        {% if plano_ativo %}
        <div class="boost-section mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-gradient-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-0">
                                <i class="fas fa-rocket me-2"></i>
                                Sistema de Boost
                            </h5>
                            <small>Destaque seu perfil por 1 hora</small>
                        </div>
                        <div class="boost-status">
                            {% if modelo.tem_boost_ativo %}
                                <span class="badge bg-warning text-dark">
                                    <i class="fas fa-fire me-1"></i>
                                    Em Destaque
                                </span>
                            {% else %}
                                <span class="badge bg-secondary">
                                    <i class="fas fa-pause me-1"></i>
                                    Sem Boost
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="boost-info">
                                <h6 class="text-primary mb-2">Seu Plano: {{ plano_ativo.nome }}</h6>
                                <p class="mb-2">
                                    <strong>Boosts por dia:</strong> {{ plano_ativo.get_boosts_diarios }}
                                    <br>
                                    <strong>Duração:</strong> 1 hora por boost
                                </p>
                                {% if modelo.tem_boost_ativo %}
                                    {% with boost_info=modelo.get_boost_info %}
                                    <div class="alert alert-warning mb-0">
                                        <i class="fas fa-clock me-2"></i>
                                        <strong>Boost Ativo!</strong> 
                                        Tempo restante: {{ boost_info.minutos_restantes }} minutos
                                        <br>
                                        <small>Expira às {{ boost_info.data_expiracao|date:"H:i" }}</small>
                                    </div>
                                    {% endwith %}
                                {% else %}
                                    {% with pode_usar=modelo.pode_usar_boost_hoje %}
                                    {% if pode_usar.0 %}
                                        <div class="alert alert-success mb-0">
                                            <i class="fas fa-check-circle me-2"></i>
                                            {{ pode_usar.1 }}
                                        </div>
                                    {% else %}
                                        <div class="alert alert-danger mb-0">
                                            <i class="fas fa-exclamation-triangle me-2"></i>
                                            {{ pode_usar.1 }}
                                        </div>
                                    {% endif %}
                                    {% endwith %}
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-4 text-end">
                            {% if modelo.tem_boost_ativo %}
                                <button class="btn btn-warning btn-lg" disabled>
                                    <i class="fas fa-fire me-2"></i>
                                    Boost Ativo
                                </button>
                            {% else %}
                                {% with pode_usar=modelo.pode_usar_boost_hoje %}
                                {% if pode_usar.0 %}
                                    <button class="btn btn-primary btn-lg" onclick="ativarBoost()">
                                        <i class="fas fa-rocket me-2"></i>
                                        Ativar Boost
                                    </button>
                                {% else %}
                                    <button class="btn btn-secondary btn-lg" disabled>
                                        <i class="fas fa-lock me-2"></i>
                                        Indisponível
                                    </button>
                                {% endif %}
                                {% endwith %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Dashboard Header -->
        <div class="dashboard-header">
            <div class="welcome-section">
                <div class="profile-avatar">
                    {% if user.first_name %}
                        {{ user.first_name|first|upper }}
                    {% else %}
                        {{ user.username|first|upper }}
                    {% endif %}
                </div>
                <div class="welcome-text">
                    <h1>Bem-vindo(a), {{ user.first_name|default:user.username }}!</h1>
                    <p>Gerencie seu perfil e acompanhe suas atividades na plataforma Allure</p>
                </div>
            </div>
            
            <!-- Stats Grid -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-eye"></i>
                    </div>
                    <div class="stat-number">{{ total_views|default:"0" }}</div>
                    <div class="stat-label">Visualizações</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <div class="stat-number">{{ total_favoritos|default:"0" }}</div>
                    <div class="stat-label">Favoritos</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <div class="stat-number">{{ contatos_unicos|default:"0" }}</div>
                    <div class="stat-label">Contatos</div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="stat-number">{{ rating_avg|default:"0" }}</div>
                    <div class="stat-label">Avaliação</div>
                </div>
            </div>
            
            <!-- Status do Perfil -->
            <div class="profile-status">
                <span class="status-badge {{ status_class }}">
                    <i class="fas fa-circle me-2"></i>{{ status_perfil }}
                </span>
                {% if total_fotos > 0 %}
                <span class="status-badge status-info">
                    <i class="fas fa-images me-2"></i>{{ total_fotos }} foto(s)
                </span>
                {% endif %}
                {% if servicos_ativos > 0 %}
                <span class="status-badge status-success">
                    <i class="fas fa-tags me-2"></i>{{ servicos_ativos }} serviço(s)
                </span>
                {% endif %}
            </div>
        </div>
        
        <!-- Actions Grid -->
        <div class="actions-grid">
            <div class="action-card">
                <div class="action-icon">
                    <i class="fas fa-user-edit"></i>
                </div>
                <h3 class="action-title">Editar Perfil</h3>
                <p class="action-description">
                    Atualize suas informações pessoais, fotos e detalhes do seu perfil para atrair mais clientes.
                </p>
                <a href="{% url 'accounts:editar_perfil' %}" class="btn-action">
                    <i class="fas fa-edit me-2"></i>
                    Editar Perfil
                </a>
            </div>
            
            <div class="action-card">
                <div class="action-icon">
                    <i class="fas fa-images"></i>
                </div>
                <h3 class="action-title">Gerenciar Fotos</h3>
                <p class="action-description">
                    Adicione, remova ou reorganize suas fotos para mostrar o melhor de você.
                </p>
                <a href="{% url 'accounts:editar_fotos' %}" class="btn-action">
                    <i class="fas fa-camera me-2"></i>
                    Gerenciar Fotos
                </a>
            </div>
            
            <div class="action-card">
                <div class="action-icon">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <h3 class="action-title">Agenda</h3>
                <p class="action-description">
                    Gerencie seus compromissos e disponibilidade para atendimento aos clientes.
                </p>
                <a href="#" class="btn-action">
                    <i class="fas fa-clock me-2"></i>
                    Ver Agenda
                </a>
            </div>
            
            <div class="action-card">
                <div class="action-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3 class="action-title">Relatórios</h3>
                <p class="action-description">
                    Acompanhe suas estatísticas, visualizações e performance na plataforma.
                </p>
                <a href="#" class="btn-action btn-secondary">
                    <i class="fas fa-analytics me-2"></i>
                    Ver Relatórios
                </a>
            </div>
        </div>
        
        <!-- Recent Activity -->
        <div class="recent-activity">
            <h2 class="section-title">
                <i class="fas fa-history"></i>
                Atividade Recente
            </h2>
            
            {% if atividade_recente %}
                {% for atividade in atividade_recente %}
                <div class="activity-item">
                    <div class="activity-icon">
                        <i class="{{ atividade.icon }}"></i>
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">{{ atividade.titulo }}</div>
                        <div class="activity-time">{{ atividade.tempo }}</div>
                    </div>
                    <span class="status-badge {{ atividade.status }}">{{ atividade.status|title }}</span>
                </div>
                {% endfor %}
            {% else %}
                <div class="no-activity">
                    <i class="fas fa-info-circle"></i>
                    <p>Nenhuma atividade recente para exibir.</p>
                    <small>As atividades aparecerão aqui conforme você interagir com a plataforma.</small>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Animate stats on load
    document.addEventListener('DOMContentLoaded', function() {
        const statNumbers = document.querySelectorAll('.stat-number');
        
        statNumbers.forEach((stat, index) => {
            const finalValue = stat.textContent;
            const isNumber = !isNaN(finalValue);
            
            if (isNumber && parseFloat(finalValue) > 0) {
                stat.classList.add('loading');
                const target = parseFloat(finalValue);
                let current = 0;
                const increment = target / 50;
                
                setTimeout(() => {
                    const timer = setInterval(() => {
                        current += increment;
                        if (current >= target) {
                            current = target;
                            clearInterval(timer);
                            stat.classList.remove('loading');
                        }
                        
                        if (target % 1 === 0) {
                            stat.textContent = Math.floor(current);
                        } else {
                            stat.textContent = current.toFixed(1);
                        }
                    }, 50);
                }, index * 200); // Stagger the animations
            }
        });
        
        // Intersection Observer for scroll animations
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.animationPlayState = 'running';
                }
            });
        }, {
            threshold: 0.1
        });
        
        // Observe all animated elements
        document.querySelectorAll('.stat-card, .action-card, .activity-item').forEach(el => {
            el.style.animationPlayState = 'paused';
            observer.observe(el);
        });
        
        // Auto-refresh stats every 5 minutes (300000ms)
        setInterval(function() {
            refreshStats();
        }, 300000);
    });
    
    // Function to refresh stats
    function refreshStats() {
        fetch(window.location.href)
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                
                // Update stat numbers
                const newStats = doc.querySelectorAll('.stat-number');
                const currentStats = document.querySelectorAll('.stat-number');
                
                newStats.forEach((newStat, index) => {
                    const currentStat = currentStats[index];
                    const newValue = newStat.textContent;
                    const currentValue = currentStat.textContent;
                    
                    if (newValue !== currentValue && !isNaN(parseFloat(newValue))) {
                        // Animate the change
                        animateValueChange(currentStat, parseFloat(currentValue), parseFloat(newValue));
                    }
                });
                
                // Update activity items if needed
                const newActivities = doc.querySelectorAll('.activity-item');
                const currentActivities = document.querySelectorAll('.activity-item');
                
                if (newActivities.length !== currentActivities.length) {
                    // Reload the page if activity count changed
                    location.reload();
                }
            })
            .catch(error => {
                console.log('Erro ao atualizar estatísticas:', error);
            });
    }
    
    // Function to animate value changes
    function animateValueChange(element, from, to) {
        const duration = 1000;
        const start = performance.now();
        
        function update(currentTime) {
            const elapsed = currentTime - start;
            const progress = Math.min(elapsed / duration, 1);
            
            const current = from + (to - from) * progress;
            
            if (to % 1 === 0) {
                element.textContent = Math.floor(current);
            } else {
                element.textContent = current.toFixed(1);
            }
            
            if (progress < 1) {
                requestAnimationFrame(update);
            }
        }
        
        requestAnimationFrame(update);
    }
    
    // Enhanced interaction effects
    document.querySelectorAll('.stat-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            const icon = this.querySelector('.stat-icon');
            if (icon) {
                icon.style.transform = 'scale(1.1) rotate(5deg)';
            }
        });
        
        card.addEventListener('mouseleave', function() {
            const icon = this.querySelector('.stat-icon');
            if (icon) {
                icon.style.transform = 'scale(1) rotate(0deg)';
            }
        });
    });
    
    // Action card interactions
    document.querySelectorAll('.action-card').forEach(card => {
        card.addEventListener('mouseenter', function() {
            const icon = this.querySelector('.action-icon');
            if (icon) {
                icon.style.transform = 'scale(1.1) rotate(5deg)';
            }
        });
        
        card.addEventListener('mouseleave', function() {
            const icon = this.querySelector('.action-icon');
            if (icon) {
                icon.style.transform = 'scale(1) rotate(0deg)';
            }
        });
    });
    
    // Activity item hover effects
    document.querySelectorAll('.activity-item').forEach(item => {
        item.addEventListener('mouseenter', function() {
            const icon = this.querySelector('.activity-icon');
            if (icon) {
                icon.style.transform = 'scale(1.1)';
            }
        });
        
        item.addEventListener('mouseleave', function() {
            const icon = this.querySelector('.activity-icon');
            if (icon) {
                icon.style.transform = 'scale(1)';
            }
        });
    });
    
    // Função para ativar boost
    function ativarBoost() {
        const button = event.target;
        const originalText = button.innerHTML;
        
        // Desabilitar botão e mostrar loading
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Ativando...';
        
        fetch('{% url "core:ativar_boost" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Mostrar sucesso
                showAlert('success', data.message);
                // Recarregar página após 2 segundos
                setTimeout(() => {
                    location.reload();
                }, 2000);
            } else {
                // Mostrar erro
                showAlert('danger', data.message);
                // Restaurar botão
                button.disabled = false;
                button.innerHTML = originalText;
            }
        })
        .catch(error => {
            console.error('Erro:', error);
            showAlert('danger', 'Erro ao ativar boost. Tente novamente.');
            // Restaurar botão
            button.disabled = false;
            button.innerHTML = originalText;
        });
    }
    
    // Função para mostrar alertas
    function showAlert(type, message) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        // Inserir no topo do conteúdo
        const content = document.querySelector('.container-fluid');
        content.insertBefore(alertDiv, content.firstChild);
        
        // Remover após 5 segundos
        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    }
</script>
{% endblock %}