@extends('admin.layouts.app')

@section('title', 'Tour de Boas-vindas')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">Tour de Onboarding</h1>
                    <p class="text-muted">Aprenda a usar o sistema passo a passo</p>
                </div>
                <div>
                    <button class="btn btn-outline-primary" id="btnMostrarTour">
                        <i class="fas fa-play"></i> Iniciar Tour
                    </button>
                    <button class="btn btn-outline-secondary" id="btnReiniciarTour">
                        <i class="fas fa-redo"></i> Reiniciar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Status do Tour -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-route text-primary"></i>
                        Tours Disponíveis
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row" id="toursGrid">
                        <!-- Tours serão carregados via JavaScript -->
                        <div class="col-12 text-center p-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                            <p class="mt-2 text-muted">Carregando tours disponíveis...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Progresso do Tour Atual -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-tasks text-success"></i>
                        Progresso do Tour Atual
                    </h5>
                </div>
                <div class="card-body">
                    <div id="progressoTour">
                        <div class="text-center text-muted">
                            <i class="fas fa-info-circle fa-2x mb-2"></i>
                            <p>Nenhum tour em andamento</p>
                            <small>Selecione um tour acima para começar</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dicas e Ajuda -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-lightbulb text-warning"></i>
                        Dicas Importantes
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>Clique em "Avançar"</strong> para ir para o próximo passo
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>Pule qualquer passo</strong> que já conhecer
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>Use "Voltar"</strong> para revisar um passo
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>Interrompa a qualquer momento</strong> e volte quando quiser
                        </li>
                        <li class="mb-0">
                            <i class="fas fa-check text-success me-2"></i>
                            <strong>Repita o tour</strong> quantas vezes precisar
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-headset text-info"></i>
                        Precisa de Ajuda?
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Se precisar de ajuda durante o tour ou tiver dúvidas sobre o sistema:
                    </p>
                    <div class="d-grid gap-2">
                        <a href="#" class="btn btn-outline-primary">
                            <i class="fas fa-book me-2"></i>
                            Ver Documentação
                        </a>
                        <a href="#" class="btn btn-outline-info">
                            <i class="fas fa-comments me-2"></i>
                            Falar com Suporte
                        </a>
                        <a href="#" class="btn btn-outline-success">
                            <i class="fas fa-play me-2"></i>
                            Assistir Vídeo Tutorial
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Configurações do Tour -->
<div class="modal fade" id="modalConfigTour" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Configurações do Tour</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="autoPlayTour">
                        <label class="form-check-label" for="autoPlayTour">
                            Reproduzir tour automaticamente
                        </label>
                    </div>
                    <small class="text-muted">Inicia o tour automaticamente quando acessar a página</small>
                </div>
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="somTour">
                        <label class="form-check-label" for="somTour">
                            Ativar sons do tour
                        </label>
                    </div>
                    <small class="text-muted">Reproduzir sons ao navegar entre os passos</small>
                </div>
                <div class="mb-3">
                    <label for="velocidadeTour" class="form-label">Velocidade do Tour</label>
                    <select class="form-select" id="velocidadeTour">
                        <option value="slow">Lento</option>
                        <option value="normal" selected>Normal</option>
                        <option value="fast">Rápido</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="tourSystem.salvarConfiguracoes()">
                    Salvar Configurações
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Shepherd.js CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@9.1.0/dist/css/shepherd.css"/>

<!-- Shepherd.js JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/shepherd.js@9.1.0/dist/js/shepherd.min.js"></script>

<script>
// Sistema de Tour/Onboarding
const tourSystem = {
    tour: null,
    toursConfig: {},
    tourAtual: null,
    configuracoes: {
        autoPlay: false,
        som: true,
        velocidade: 'normal'
    },

    async init() {
        await this.carregarConfiguracoes();
        await this.carregarTours();
        this.bindEvents();
        this.inicializarShepherd();
    },

    bindEvents() {
        // Botão iniciar tour
        document.getElementById('btnMostrarTour').addEventListener('click', () => {
            this.iniciarTour();
        });

        // Botão reiniciar tour
        document.getElementById('btnReiniciarTour').addEventListener('click', () => {
            this.reiniciarTourAtual();
        });

        // Configurações do tour
        document.querySelector('#modalConfigTour').addEventListener('show.bs.modal', () => {
            this.carregarConfiguracoesModal();
        });
    },

    async carregarTours() {
        try {
            const response = await fetch('/admin/tour/config');
            const data = await response.json();
            
            if (data.success) {
                this.toursConfig = data.tours_config;
                this.renderizarTours();
            }
        } catch (error) {
            console.error('Erro ao carregar tours:', error);
        }
    },

    renderizarTours() {
        const grid = document.getElementById('toursGrid');
        
        if (Object.keys(this.toursConfig).length === 0) {
            grid.innerHTML = `
                <div class="col-12 text-center text-muted">
                    <i class="fas fa-info-circle fa-2x mb-2"></i>
                    <p>Nenhum tour disponível para seu perfil</p>
                </div>
            `;
            return;
        }

        const toursHtml = Object.values(this.toursConfig).map(tour => {
            const icone = this.getTourIcone(tour.name);
            const cor = tour.needs_tour ? 'success' : 'secondary';
            const textoBotao = tour.completed ? 'Refazer Tour' : (tour.needs_tour ? 'Iniciar Tour' : 'Continuar');
            
            return `
                <div class="col-md-6 col-lg-4 mb-3">
                    <div class="card h-100 ${tour.needs_tour ? 'border-success' : ''}">
                        <div class="card-body">
                            <div class="text-center mb-3">
                                <i class="${icone} fa-2x text-${cor}"></i>
                            </div>
                            <h6 class="card-title text-center">${tour.display_name}</h6>
                            <p class="card-text text-muted small">${tour.description}</p>
                            
                            <!-- Progresso -->
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <small class="text-muted">Progresso</small>
                                    <small class="text-muted">${tour.progress_percentage}%</small>
                                </div>
                                <div class="progress" style="height: 6px;">
                                    <div class="progress-bar bg-${cor}" role="progressbar" 
                                         style="width: ${tour.progress_percentage}%"></div>
                                </div>
                            </div>
                            
                            <!-- Botões -->
                            <div class="d-grid">
                                <button class="btn btn-outline-${cor} btn-sm" 
                                        onclick="tourSystem.iniciarTourEspecifico('${tour.name}')">
                                    <i class="fas fa-play me-1"></i>
                                    ${textoBotao}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }).join('');

        grid.innerHTML = toursHtml;
    },

    getTourIcone(tourName) {
        const icones = {
            'first_access': 'fas fa-home',
            'admin_dashboard': 'fas fa-tachometer-alt',
            'delivery_dashboard': 'fas fa-motorcycle',
            'vendor_dashboard': 'fas fa-shopping-cart',
            'kitchen_dashboard': 'fas fa-utensils'
        };
        return icones[tourName] || 'fas fa-route';
    },

    async iniciarTourEspecifico(tourName) {
        try {
            // Obter status do tour
            const response = await fetch(`/admin/tour/status?tour_name=${tourName}`);
            const data = await response.json();
            
            if (data.success) {
                this.tourAtual = data.tour;
                this.criarTourComPassos(data.tour);
            }
        } catch (error) {
            console.error('Erro ao iniciar tour:', error);
        }
    },

    iniciarTour() {
        if (this.tourAtual) {
            this.iniciarTourEspecifico(this.tourAtual.name);
        } else if (Object.keys(this.toursConfig).length > 0) {
            // Iniciar primeiro tour disponível
            const primeiroTour = Object.values(this.toursConfig)[0];
            this.iniciarTourEspecifico(primeiroTour.name);
        }
    },

    async criarTourComPassos(tourInfo) {
        try {
            const response = await fetch(`/admin/tour/${tourInfo.name}/passos`);
            const data = await response.json();
            
            if (data.success) {
                this.mostrarProgresso(tourInfo);
                this.iniciarShepherdTour(data.tour_steps, tourInfo);
            }
        } catch (error) {
            console.error('Erro ao carregar passos:', error);
        }
    },

    mostrarProgresso(tourInfo) {
        const container = document.getElementById('progressoTour');
        
        container.innerHTML = `
            <div class="row">
                <div class="col-md-8">
                    <h6 class="mb-2">${tourInfo.display_name}</h6>
                    <div class="progress mb-3">
                        <div class="progress-bar bg-success" role="progressbar" 
                             style="width: ${tourInfo.progress_percentage}%"></div>
                    </div>
                    <p class="text-muted small">${tourInfo.description}</p>
                </div>
                <div class="col-md-4 text-end">
                    <div class="mb-2">
                        <strong>${tourInfo.progress_percentage}%</strong> completo
                    </div>
                    <div class="text-muted small">
                        ${tourInfo.completed_steps?.length || 0} de ${tourInfo.total_steps} passos
                    </div>
                </div>
            </div>
        `;
    },

    inicializarShepherdTour(passos, tourInfo) {
        // Destruir tour anterior se existir
        if (this.tour) {
            this.tour.complete();
        }

        // Criar novo tour
        this.tour = new Shepherd.Tour({
            useModalOverlay: true,
            defaultStepOptions: {
                cancelIcon: {
                    enabled: true
                },
                classes: 'shepherd-theme-arrows',
                scrollTo: {
                    behavior: 'smooth',
                    block: 'center'
                }
            }
        });

        // Adicionar passos
        passos.forEach(passo => {
            const isCompleted = tourInfo.completed_steps?.includes(passo.id);
            
            this.tour.addStep({
                id: `passo-${passo.id}`,
                title: passo.title,
                text: passo.description,
                attachTo: {
                    element: passo.target,
                    on: passo.position
                },
                buttons: [
                    {
                        text: 'Voltar',
                        action: this.tour.back,
                        classes: 'btn btn-outline-secondary btn-sm'
                    },
                    {
                        text: isCompleted ? 'Concluído' : 'Avançar',
                        action: async () => {
                            if (!isCompleted) {
                                await this.marcarPassoCompleto(tourInfo.name, passo.id);
                            }
                            
                            if (passo.id === passos[passos.length - 1].id) {
                                this.tour.complete();
                            } else {
                                this.tour.next();
                            }
                        },
                        classes: `btn btn-${isCompleted ? 'success' : 'primary'} btn-sm`
                    }
                ]
            });
        });

        // Iniciar tour
        this.tour.start();
    },

    async marcarPassoCompleto(tourName, stepId) {
        try {
            const response = await fetch(`/admin/tour/${tourName}/passo`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ step_id: stepId })
            });
            
            const data = await response.json();
            
            if (data.success) {
                // Atualizar progresso
                this.carregarTours();
            }
        } catch (error) {
            console.error('Erro ao marcar passo:', error);
        }
    },

    async reiniciarTourAtual() {
        if (this.tourAtual) {
            try {
                await fetch(`/admin/tour/${this.tourAtual.name}/reiniciar`, { method: 'POST' });
                await this.carregarTours();
                this.mostrarSucesso('Tour reiniciado com sucesso');
            } catch (error) {
                console.error('Erro ao reiniciar tour:', error);
            }
        }
    },

    inicializarShepherd() {
        // Configurar Shepherd globalmente
        Shepherd.on('start', () => {
            this.tocarSom('start');
        });

        Shepherd.on('complete', () => {
            this.tocarSom('complete');
            this.mostrarSucesso('Tour concluído com sucesso!');
            this.carregarTours();
        });

        Shepherd.on('cancel', () => {
            this.tocarSom('cancel');
        });
    },

    tocarSom(tipo) {
        if (this.configuracoes.som && 'Audio' in window) {
            // Implementar sons do tour
            // Exemplo: new Audio('/sounds/tour-' + tipo + '.mp3').play();
        }
    },

    carregarConfiguracoes() {
        // Carregar configurações do localStorage
        const config = localStorage.getItem('tourConfig');
        if (config) {
            this.configuracoes = { ...this.configuracoes, ...JSON.parse(config) };
        }
    },

    carregarConfiguracoesModal() {
        document.getElementById('autoPlayTour').checked = this.configuracoes.autoPlay;
        document.getElementById('somTour').checked = this.configuracoes.som;
        document.getElementById('velocidadeTour').value = this.configuracoes.velocidade;
    },

    salvarConfiguracoes() {
        this.configuracoes.autoPlay = document.getElementById('autoPlayTour').checked;
        this.configuracoes.som = document.getElementById('somTour').checked;
        this.configuracoes.velocidade = document.getElementById('velocidadeTour').value;

        localStorage.setItem('tourConfig', JSON.stringify(this.configuracoes));
        
        // Fechar modal
        const modal = bootstrap.Modal.getInstance(document.getElementById('modalConfigTour'));
        modal.hide();
        
        this.mostrarSucesso('Configurações salvas!');
    },

    mostrarSucesso(mensagem) {
        // Implementar notificação de sucesso
        alert(mensagem);
    }
};

// Inicializar sistema quando a página carregar
document.addEventListener('DOMContentLoaded', function() {
    tourSystem.init();
});
</script>

<style>
.card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
}

.progress {
    border-radius: 10px;
}

.shepherd-theme-arrows .shepherd-content {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.shepherd-theme-arrows .shepherd-button {
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
}
</style>
@endpush