@model OnlyOneAccessTemplate.Models.SiteConfiguration
@{
    ViewData["Title"] = ViewBag.Title ?? Model.SiteTitle;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Head {
    <!-- Google AdSense Script -->
    @if (ViewBag.GoogleAdsEnabled == true && !string.IsNullOrEmpty(ViewBag.GoogleAdsPublisher))
    {
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=@ViewBag.GoogleAdsPublisher"
                crossorigin="anonymous"></script>
    }
}

<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="hero-content text-center">
            <h1 class="hero-title">
                @(ViewBag.MainTitle ?? "FERRAMENTAS DE CONVERSÃO")
            </h1>
            <p class="hero-subtitle">
                @(ViewBag.MainDescription ?? "Converta seus arquivos de forma rápida e segura")
            </p>

            <div class="d-flex flex-wrap justify-content-center gap-2 mb-4">
                <span class="feature-badge">
                    <i class="fas fa-code me-2"></i> Standalone
                </span>
                <span class="feature-badge">
                    <i class="fas fa-globe me-2"></i> Multi-idioma
                </span>
                <span class="feature-badge">
                    <i class="fas fa-bolt me-2"></i> API Ready
                </span>
                <span class="feature-badge">
                    <i class="fas fa-shield-alt me-2"></i> Seguro
                </span>
            </div>
        </div>
    </div>
</section>

<!-- Banner Superior Ads -->
<div class="container-fluid mt-3">
    <div class="ad-placeholder banner">
        <i class="fas fa-rectangle-ad"></i>
        <div>
            <strong>Anúncio Banner Superior</strong><br>
            <small>728x90 ou responsivo</small>
        </div>
    </div>
</div>

<!-- Layout Principal -->
<div class="container-fluid main-layout">
    <div class="row">
        <!-- Sidebar Esquerda - Anúncios -->
        <div class="col-xl-2 col-lg-2 d-none d-lg-block">
            <div class="ad-placeholder sidebar">
                <i class="fas fa-rectangle-ad"></i>
                <div>
                    <strong>Anúncio Vertical</strong><br>
                    <small>160x600 ou 300x600</small>
                </div>
            </div>
        </div>

        <!-- Menu de Módulos -->
        <div class="col-xl-3 col-lg-3 col-md-4">
            <div class="modules-sidebar">
                <h5 class="fw-bold mb-3 d-flex align-items-center">
                    <i class="fas fa-puzzle-piece text-primary me-2"></i>
                    Conversores Disponíveis
                </h5>

                <div id="modules-list" class="modules-list">
                    <!-- Loading state -->
                    <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
                    <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
                    <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
                </div>

                <div class="text-center mt-3">
                    <button class="btn btn-outline-primary btn-sm" onclick="refreshModulesList()">
                        <i class="fas fa-sync me-1"></i> Atualizar
                    </button>
                </div>
            </div>
        </div>

        <!-- Área Principal do Conversor -->
        <div class="col-xl-5 col-lg-5 col-md-8">
            <!-- Anúncio Retangular Pré-Conversor -->
            <div class="ad-placeholder rectangle">
                <i class="fas fa-rectangle-ad"></i>
                <div>
                    <strong>Anúncio Retangular</strong><br>
                    <small>300x250</small>
                </div>
            </div>

            <!-- Card do Conversor -->
            <div class="converter-area fade-in">
                <div class="converter-header">
                    <h2 class="h3 mb-3">
                        <i class="fas fa-exchange-alt me-2"></i>
                        <span id="converter-title">Selecione um Conversor</span>
                    </h2>
                    <p class="mb-0" id="converter-description">
                        Escolha uma ferramenta de conversão no menu ao lado
                    </p>
                </div>

                <!-- Steps do Processo -->
                <div class="step-indicators">
                    <div class="step-indicator">
                        <div class="step-number">1</div>
                        <h6 class="step-title">Entrada</h6>
                        <p class="step-description">Selecione ou cole seu conteúdo</p>
                    </div>
                    <div class="step-indicator">
                        <div class="step-number">2</div>
                        <h6 class="step-title">Processar</h6>
                        <p class="step-description">Aguarde o processamento</p>
                    </div>
                    <div class="step-indicator">
                        <div class="step-number">3</div>
                        <h6 class="step-title">Resultado</h6>
                        <p class="step-description">Baixe ou copie o resultado</p>
                    </div>
                </div>

                <!-- Área do Módulo -->
                <div id="converter-container" class="p-4">
                    <div class="text-center py-5">
                        <i class="fas fa-arrow-left fa-2x text-muted mb-3"></i>
                        <h5 class="text-muted">Selecione um conversor</h5>
                        <p class="text-muted">Escolha uma ferramenta no menu ao lado para começar</p>
                    </div>
                </div>
            </div>

            <!-- Anúncio Retangular Pós-Conversor -->
            <div class="ad-placeholder rectangle">
                <i class="fas fa-rectangle-ad"></i>
                <div>
                    <strong>Anúncio Pós-Conversão</strong><br>
                    <small>300x250</small>
                </div>
            </div>
        </div>

        <!-- Sidebar Direita - Anúncios -->
        <div class="col-xl-2 col-lg-2 d-none d-lg-block">
            <div class="ad-placeholder sidebar">
                <i class="fas fa-rectangle-ad"></i>
                <div>
                    <strong>Anúncio Vertical</strong><br>
                    <small>160x600 ou 300x600</small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Anúncio In-Feed -->
<div class="container my-4">
    <div class="ad-placeholder" style="min-height: 120px;">
        <i class="fas fa-rectangle-ad"></i>
        <div>
            <strong>Anúncio In-Feed</strong><br>
            <small>Responsivo ou 728x90</small>
        </div>
    </div>
</div>

<!-- Seção de Benefícios -->
<div class="container">
    <section class="benefits-section">
        <div class="text-center mb-5">
            <h2 class="h3 fw-bold mb-3">Por Que Usar Nossas Ferramentas?</h2>
            <p class="text-muted">Descubra os benefícios de nossas soluções</p>
        </div>

        <div class="feature-grid">
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-rocket"></i>
                </div>
                <h6 class="fw-bold mb-2">Rápido e Fácil</h6>
                <p class="text-muted small mb-0">Conversão instantânea com poucos cliques</p>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h6 class="fw-bold mb-2">Seguro</h6>
                <p class="text-muted small mb-0">Seus dados estão protegidos</p>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h6 class="fw-bold mb-2">Confiável</h6>
                <p class="text-muted small mb-0">Milhares de usuários satisfeitos</p>
            </div>
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <h6 class="fw-bold mb-2">24/7 Disponível</h6>
                <p class="text-muted small mb-0">Acesso a qualquer hora</p>
            </div>
        </div>
    </section>
</div>

<!-- Anúncio Multiplex -->
<div class="container my-4">
    <div class="ad-placeholder" style="min-height: 200px;">
        <i class="fas fa-th"></i>
        <div>
            <strong>Anúncio Multiplex</strong><br>
            <small>Formato flexível</small>
        </div>
    </div>
</div>

@section Scripts {
    <script src="~/js/module-loader.js"></script>
    <script>
        let currentModuleId = null;

        document.addEventListener('DOMContentLoaded', function () {
            loadModulesList();

            // Auto-carregar primeiro módulo se não houver seleção
            setTimeout(() => {
                const firstModule = document.querySelector('.module-item');
                if (firstModule && !currentModuleId) {
                    firstModule.click();
                }
            }, 2000);
        });

        async function loadModulesList() {
            try {
                console.log('🔄 Carregando lista de módulos...');
                const response = await fetch('/api/menu/converters?language=pt');
                const data = await response.json();

                if (data.success && data.menu) {
                    renderModulesList(data.menu);
                } else {
                    showModulesError('Não foi possível carregar os módulos');
                }
            } catch (error) {
                console.error('❌ Erro ao carregar módulos:', error);
                showModulesError('Erro de conexão');
            }
        }

        function renderModulesList(menuData) {
            const container = document.getElementById('modules-list');
            let html = '';

            menuData.forEach(category => {
                html += `<div class="category-header">${category.category}</div>`;

                category.items.forEach(item => {
                    const isNew = item.isNew ? '<span class="badge bg-warning badge-sm ms-1">Novo</span>' : '';

                    html += `
                                <a href="#" class="module-item" data-module-id="${item.moduleId}" onclick="loadModule('${item.moduleId}', '${item.title}', '${item.description}')">
                                    <div class="module-icon">
                                        <i class="${item.icon || 'fas fa-exchange-alt'}"></i>
                                    </div>
                                    <div class="module-title">${item.title}${isNew}</div>
                                    <div class="module-description">${item.description || 'Ferramenta de conversão'}</div>
                                </a>
                            `;
                });
            });

            if (html === '') {
                html = `
                            <div class="text-center py-4 text-muted">
                                <i class="fas fa-puzzle-piece fa-2x mb-3"></i>
                                <p>Nenhum módulo disponível</p>
                            </div>
                        `;
            }

            container.innerHTML = html;
            console.log('✅ Lista de módulos carregada');
        }

        function showModulesError(message) {
            const container = document.getElementById('modules-list');
            container.innerHTML = `
                        <div class="text-center py-4 text-danger">
                            <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
                            <p>${message}</p>
                            <button class="btn btn-outline-primary btn-sm" onclick="loadModulesList()">
                                Tentar Novamente
                            </button>
                        </div>
                    `;
        }

        async function loadModule(moduleId, title, description) {
            if (currentModuleId === moduleId) return;

            // Atualizar UI
            document.querySelectorAll('.module-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector(`[data-module-id="${moduleId}"]`).classList.add('active');

            // Atualizar título
            document.getElementById('converter-title').textContent = title;
            document.getElementById('converter-description').textContent = description;

            // Carregar módulo
            const container = document.getElementById('converter-container');
            container.innerHTML = `
                        <div class="text-center py-4">
                            <div class="spinner-border text-primary mb-3" role="status">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                            <p>Carregando ${title}...</p>
                        </div>
                    `;

            try {
                const success = await window.ModuleLoader.loadModule(moduleId, 'converter-container', `/modules/${moduleId}`);
                if (success) {
                    currentModuleId = moduleId;
                    console.log(`✅ Módulo ${moduleId} carregado com sucesso`);

                    // Analytics
                    if (typeof gtag !== 'undefined') {
                        gtag('event', 'module_loaded', {
                            'module_id': moduleId,
                            'module_title': title
                        });
                    }
                } else {
                    throw new Error('Falha ao carregar módulo');
                }
            } catch (error) {
                console.error('❌ Erro ao carregar módulo:', error);
                container.innerHTML = `
                            <div class="text-center py-4 text-danger">
                                <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
                                <h6>Erro ao carregar ${title}</h6>
                                <p class="text-muted">${error.message}</p>
                                <button class="btn btn-outline-primary" onclick="loadModule('${moduleId}', '${title}', '${description}')">
                                    Tentar Novamente
                                </button>
                            </div>
                        `;
            }
        }

        function refreshModulesList() {
            const container = document.getElementById('modules-list');
            container.innerHTML = `
                        <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
                        <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
                        <div class="loading-shimmer rounded p-3 mb-2" style="height: 80px;"></div>
                    `;
            loadModulesList();
        }

        // Event listener para módulos carregados
        document.addEventListener('moduleLoaded', function (event) {
            console.log('🎯 Evento moduleLoaded:', event.detail);
        });
    </script>
}