<?php
// admin/page-create.php
$pageTitle = 'Criar Nova Página';
$pageHeader = 'Criar Nova Página';
$useRichEditor = true;
$currentPage = 'create-page';

// Define BASE_PATH se não estiver definido
if (!defined('BASE_PATH')) {
    define('BASE_PATH', dirname(dirname(__FILE__)));
}

// Função de log de emergência caso logInfo não esteja disponível
function emergencyLog($message) {
    file_put_contents(BASE_PATH . '/emergency.log', date('Y-m-d H:i:s') . " - $message\n", FILE_APPEND);
}

/**
 * Remove acentos e caracteres especiais para slugs
 */
function removeAccents($string) {
    if (!preg_match('/[\x80-\xff]/', $string)) {
        return $string;
    }

    $chars = array(
        // Decomposições para Latin-1 Supplement
        chr(195).chr(128) => 'A', chr(195).chr(129) => 'A',
        chr(195).chr(130) => 'A', chr(195).chr(131) => 'A',
        chr(195).chr(132) => 'A', chr(195).chr(133) => 'A',
        chr(195).chr(135) => 'C', chr(195).chr(136) => 'E',
        chr(195).chr(137) => 'E', chr(195).chr(138) => 'E',
        chr(195).chr(139) => 'E', chr(195).chr(140) => 'I',
        chr(195).chr(141) => 'I', chr(195).chr(142) => 'I',
        chr(195).chr(143) => 'I', chr(195).chr(145) => 'N',
        chr(195).chr(146) => 'O', chr(195).chr(147) => 'O',
        chr(195).chr(148) => 'O', chr(195).chr(149) => 'O',
        chr(195).chr(150) => 'O', chr(195).chr(153) => 'U',
        chr(195).chr(154) => 'U', chr(195).chr(155) => 'U',
        chr(195).chr(156) => 'U', chr(195).chr(157) => 'Y',
        chr(195).chr(159) => 's', chr(195).chr(160) => 'a',
        chr(195).chr(161) => 'a', chr(195).chr(162) => 'a',
        chr(195).chr(163) => 'a', chr(195).chr(164) => 'a',
        chr(195).chr(165) => 'a', chr(195).chr(167) => 'c',
        chr(195).chr(168) => 'e', chr(195).chr(169) => 'e',
        chr(195).chr(170) => 'e', chr(195).chr(171) => 'e',
        chr(195).chr(172) => 'i', chr(195).chr(173) => 'i',
        chr(195).chr(174) => 'i', chr(195).chr(175) => 'i',
        chr(195).chr(177) => 'n', chr(195).chr(178) => 'o',
        chr(195).chr(179) => 'o', chr(195).chr(180) => 'o',
        chr(195).chr(181) => 'o', chr(195).chr(182) => 'o',
        chr(195).chr(182) => 'o', chr(195).chr(185) => 'u',
        chr(195).chr(186) => 'u', chr(195).chr(187) => 'u',
        chr(195).chr(188) => 'u', chr(195).chr(189) => 'y',
        chr(195).chr(191) => 'y'
    );

    $string = strtr($string, $chars);
    return $string;
}

/**
 * Gera um slug sem acentos e único
 */
function generateUniqueSlugWithoutAccents($text, $table) {
    global $db;
    
    // Primeiro remove os acentos
    $text = removeAccents($text);
    
    // Gera o slug com o texto sem acentos
    $slug = generateSlug($text);
    $originalSlug = $slug;
    $counter = 1;
    
    while (true) {
        $db->query("SELECT id FROM {$table} WHERE slug = :slug");
        $db->bind(':slug', $slug);
        if (!$db->single()) {
            break;
        }
        $slug = $originalSlug . '-' . $counter;
        $counter++;
    }
    
    return $slug;
}

/**
 * Insere elementos HTML em posições específicas do conteúdo
 */
function insertContentElements($content, $elements) {
    if (empty($elements)) {
        return $content;
    }
    
    // Remove elementos existentes para evitar duplicação
    $content = preg_replace('/<div class="whatsapp-cta-container">.*?<\/div>/s', '', $content);
    $content = preg_replace('/<div class="adsense-container">.*?<\/div>/s', '', $content);
    $content = preg_replace('/<div class="joinads-container">.*?<\/div>/s', '', $content);
    
    // Dividir o conteúdo em parágrafos
    $pattern = '/<p>(.*?)<\/p>/s';
    preg_match_all($pattern, $content, $matches);
    $paragraphs = $matches[0];
    
    if (count($paragraphs) == 0) {
        // Se não houver parágrafos, adiciona todos os elementos no final
        foreach ($elements as $element) {
            $content .= $element['html'];
        }
        return $content;
    }
    
    // Preparar array para inserção
    $totalParagraphs = count($paragraphs);
    $insertPoints = [];
    
    // Determinar posições de inserção para cada elemento
    foreach ($elements as $element) {
        $position = $element['position'];
        $insertIndex = 0;
        
        switch ($position) {
            case 'after-first':
                $insertIndex = 0;
                break;
            case 'after-second':
                $insertIndex = min(1, $totalParagraphs - 1);
                break;
            case 'after-third':
                $insertIndex = min(2, $totalParagraphs - 1);
                break;
            case 'middle':
                $insertIndex = floor($totalParagraphs / 2);
                break;
            case 'before-last':
                $insertIndex = $totalParagraphs - 2;
                $insertIndex = max(0, $insertIndex);
                break;
            case 'end':
                $insertIndex = $totalParagraphs - 1;
                break;
            default:
                // Posição personalizada (número)
                if (is_numeric($position)) {
                    $insertIndex = min(intval($position) - 1, $totalParagraphs - 1);
                    $insertIndex = max(0, $insertIndex);
                } else {
                    $insertIndex = $totalParagraphs - 1; // Default to end
                }
        }
        
        // Adiciona ao ponto de inserção
        if (!isset($insertPoints[$insertIndex])) {
            $insertPoints[$insertIndex] = [];
        }
        $insertPoints[$insertIndex][] = $element['html'];
    }
    
    // Inserir os elementos nas posições especificadas
    $newContent = '';
    for ($i = 0; $i < $totalParagraphs; $i++) {
        $newContent .= $paragraphs[$i];
        
        // Insere elementos neste ponto, se houver
        if (isset($insertPoints[$i])) {
            foreach ($insertPoints[$i] as $html) {
                $newContent .= $html;
            }
        }
    }
    
    return $newContent;
}

// Importações de arquivos necessários com verificação
$requiredFiles = ['config.php', 'db.php', 'functions.php', 'auth.php', 'claude-api.php', 'page-flow.php', 'whatsapp-helper.php'];
foreach ($requiredFiles as $file) {
    $path = BASE_PATH . '/includes/' . $file;
    if (!file_exists($path)) {
        emergencyLog("Arquivo não encontrado: $path");
        die("Erro crítico: Arquivo $file não encontrado.");
    }
    try {
        require_once $path;
    } catch (Throwable $e) {
        emergencyLog("Erro ao incluir $file: " . $e->getMessage());
        die("Erro crítico ao incluir $file: " . $e->getMessage());
    }
}

// Verificar autenticação do usuário
try {
    if (!isset($auth) || !is_object($auth) || !method_exists($auth, 'isLoggedIn')) {
        throw new Exception("Objeto \$auth não está definido ou inválido.");
    }

    if (!$auth->isLoggedIn()) {
        logInfo("Usuário não autenticado ao tentar acessar page-create.php");
        redirect('admin/login.php');
        exit;
    }
} catch (Exception $e) {
    logError("Erro na verificação de autenticação: " . $e->getMessage());
    emergencyLog("Erro na verificação de autenticação: " . $e->getMessage());
    setAlert('Erro de autenticação. Por favor, faça login novamente.', ALERT_ERROR);
    redirect('admin/login.php');
    exit;
}

logInfo("=== INÍCIO DA EXECUÇÃO DE " . basename(__FILE__) . " ===");

// Buscar configurações centralizadas do WhatsApp
$whatsappSettings = $whatsappHelper->getSettings();

// Array com os tipos de páginas disponíveis
$pageTypes = [
    'landing' => 'Página de Aterrisagem (PA)',
    'step1' => 'Primeira Etapa',
    'registration' => 'Página de Registro'
];

// Posições disponíveis para inserção
$availablePositions = [
    'after-first' => 'Após o 1º parágrafo',
    'after-second' => 'Após o 2º parágrafo',
    'after-third' => 'Após o 3º parágrafo',
    'middle' => 'No meio do conteúdo',
    'before-last' => 'Antes do último parágrafo',
    'end' => 'No final do conteúdo'
];

// Inicializar variáveis
$title = '';
$content = '';
$type = '';
$excerpt = '';
$meta_description = '';
$published = false;
$keywords = '';
$tone = 'informativo';
$cta_text = '';
$cta_link = '';
$sequence = 0;
$wordCount = 1000;
$landing_page_id = 0;

// Variáveis do WhatsApp (usando configurações centralizadas)
$whatsapp_position = 'after-third';
$use_whatsapp_cta = false;
$selected_whatsapp_url = 'url_1';

// Variáveis do AdSense
$adsense_code = '';
$adsense_position = 'middle';
$use_adsense = false;

// Variáveis do JoinAds
$joinads_position = 'after-third';
$use_joinads = false;

$errors = [];

// Carregar landing pages para o select
try {
    $db->query("SELECT id, title FROM pages WHERE type = 'landing' AND published = 1 ORDER BY title");
    $landingPages = $db->resultSet();
} catch (Exception $e) {
    $landingPages = [];
    logError("Erro ao carregar landing pages: " . $e->getMessage());
}

// Processamento do formulário
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title = isset($_POST['title']) ? trim($_POST['title']) : '';
    $content = isset($_POST['content']) ? trim($_POST['content']) : '';
    $type = isset($_POST['page_type']) ? trim($_POST['page_type']) : '';
    $excerpt = isset($_POST['excerpt']) ? trim($_POST['excerpt']) : '';
    $meta_description = isset($_POST['meta_description']) ? trim($_POST['meta_description']) : '';
    $published = isset($_POST['published']) && $_POST['published'] == '1';
    $useApi = isset($_POST['use_api']) && $_POST['use_api'] == '1';
    $keywords = isset($_POST['keywords']) ? trim($_POST['keywords']) : '';
    $tone = isset($_POST['tone']) ? trim($_POST['tone']) : 'informativo';
    $cta_text = isset($_POST['cta_text']) ? trim($_POST['cta_text']) : '';
    $cta_link = isset($_POST['cta_link']) ? trim($_POST['cta_link']) : '';
    $sequence = isset($_POST['sequence']) ? intval($_POST['sequence']) : 0;
    $wordCount = isset($_POST['word_count']) ? intval($_POST['word_count']) : 1000;
    $landing_page_id = isset($_POST['landing_page_id']) ? intval($_POST['landing_page_id']) : 0;
    
    // Dados do WhatsApp (CORREÇÃO: Não capturar URL e texto, usar configurações centralizadas)
    $whatsapp_position = isset($_POST['whatsapp_position']) ? trim($_POST['whatsapp_position']) : 'after-third';
    $use_whatsapp_cta = isset($_POST['use_whatsapp_cta']) && $_POST['use_whatsapp_cta'] == '1';
    $selected_whatsapp_url = isset($_POST['selected_whatsapp_url']) ? trim($_POST['selected_whatsapp_url']) : 'url_1';
    
    // Dados do AdSense
    $adsense_code = isset($_POST['adsense_code']) ? trim($_POST['adsense_code']) : '';
    $adsense_position = isset($_POST['adsense_position']) ? trim($_POST['adsense_position']) : 'middle';
    $use_adsense = isset($_POST['use_adsense']) && $_POST['use_adsense'] == '1';
    
    // Dados do JoinAds
    $joinads_position = isset($_POST['joinads_position']) ? trim($_POST['joinads_position']) : 'after-third';
    $use_joinads = isset($_POST['use_joinads']) && $_POST['use_joinads'] == '1';
    
    // Validação para landing_page_id
    if (in_array($type, ['step1', 'registration']) && empty($landing_page_id)) {
        $errors[] = 'Para páginas de etapa é obrigatório selecionar uma Landing Page associada.';
    }
    
    // Validação para evitar que uma landing page seja associada a outra
    if ($type === 'landing' && !empty($landing_page_id)) {
        $errors[] = 'Uma Landing Page não pode ser associada a outra Landing Page.';
    }
    
    // Se estiver usando a API
    if ($useApi) {
        if (empty($title)) {
            $errors[] = 'O título é obrigatório para gerar uma página com a API.';
        }
        
        if (empty($type)) {
            $errors[] = 'Selecione um tipo de página para gerar com a API.';
        }
        
        if (empty($errors)) {
            try {
                // Chama a API para gerar o conteúdo da página
                $generatedPage = $claudeAPI->generatePage($title, $type, $keywords, $tone, $wordCount);
                
                // Preenche os campos com o conteúdo gerado
                $content = $generatedPage['content'];
                
                // Preparar elementos a serem inseridos no conteúdo
                $elementsToInsert = [];
                
                // Adicionar elemento WhatsApp, se necessário
                if ($use_whatsapp_cta) {
                    // CORREÇÃO: Usar configurações centralizadas do WhatsApp com URL selecionada
                    $whatsAppHtml = $whatsappHelper->generateWhatsAppHTML($selected_whatsapp_url);
                    
                    $elementsToInsert[] = [
                        'html' => $whatsAppHtml,
                        'position' => $whatsapp_position
                    ];
                }
                
                // Adicionar elemento AdSense, se necessário
                if ($use_adsense && !empty($adsense_code)) {
                    $adsenseHtml = '<div class="adsense-container">
                        ' . $adsense_code . '
                    </div>';
                    
                    $elementsToInsert[] = [
                        'html' => $adsenseHtml,
                        'position' => $adsense_position
                    ];
                }
                
                // Adicionar elemento JoinAds, se necessário
                if ($use_joinads && ($type === 'step1' || $type === 'registration')) {
                    $joinAdsHtml = '<div class="joinads-container">
                        <div joinadscode="Content2"></div>
                    </div>';
                    
                    $elementsToInsert[] = [
                        'html' => $joinAdsHtml,
                        'position' => $joinads_position
                    ];
                }
                
                // Inserir elementos no conteúdo
                if (!empty($elementsToInsert)) {
                    $content = insertContentElements($content, $elementsToInsert);
                }
                
                $excerpt = $generatedPage['excerpt'];
                $meta_description = $generatedPage['meta_description'];
                $cta_text = $generatedPage['cta_text'];
                
                // Gerar link CTA automaticamente baseado no fluxo
                if ($type !== 'landing' && $landing_page_id > 0) {
                    $cta_link = $pageFlow->generateNextStepUrl($type, $landing_page_id);
                }
                
                // Exibe mensagem de sucesso
                $generatedWordCount = isset($generatedPage['word_count']) ? $generatedPage['word_count'] : str_word_count(strip_tags($content));
                setAlert("Página gerada com sucesso! ({$generatedWordCount} palavras) Revise o conteúdo antes de salvar.", ALERT_SUCCESS);
            } catch (Exception $e) {
                $errors[] = 'Erro ao gerar a página: ' . $e->getMessage();
            }
        }
    } 
    // Se estiver salvando a página
    else if (isset($_POST['save'])) {
        // Validação
        if (empty($title)) {
            $errors[] = 'O título é obrigatório.';
        }
        
        if (empty($content)) {
            $errors[] = 'O conteúdo é obrigatório.';
        }
        
        if (empty($type)) {
            $errors[] = 'O tipo de página é obrigatório.';
        }
        
        // Se não houver erros, salva no banco
        if (empty($errors)) {
            try {
                // Iniciar transação
                $db->beginTransaction();
                
                // Gera o slug
                $slug = generateUniqueSlugWithoutAccents($title, 'pages');
                
                // Define o landing_page_id baseado no tipo da página
                if ($type === 'landing') {
                    $landing_page_id = 0; // Landing pages não têm página pai
                }
                
                // Gerar link CTA automaticamente se não foi fornecido
                if (empty($cta_link)) {
                    $cta_link = $pageFlow->generateDefaultCtaLink($type, $landing_page_id, $slug);
                }
                
                // Preparar elementos a serem inseridos no conteúdo
                $elementsToInsert = [];
                
                // Adicionar elemento WhatsApp, se necessário
                if ($use_whatsapp_cta) {
                    // CORREÇÃO: Usar configurações centralizadas do WhatsApp com URL selecionada
                    $whatsAppHtml = $whatsappHelper->generateWhatsAppHTML($selected_whatsapp_url);
                    
                    $elementsToInsert[] = [
                        'html' => $whatsAppHtml,
                        'position' => $whatsapp_position
                    ];
                }
                
                // Adicionar elemento AdSense, se necessário
                if ($use_adsense && !empty($adsense_code)) {
                    $adsenseHtml = '<div class="adsense-container">
                        ' . $adsense_code . '
                    </div>';
                    
                    $elementsToInsert[] = [
                        'html' => $adsenseHtml,
                        'position' => $adsense_position
                    ];
                }
                
                // Adicionar elemento JoinAds, se necessário
                if ($use_joinads && ($type === 'step1' || $type === 'registration')) {
                    $joinAdsHtml = '<div class="joinads-container">
                        <div joinadscode="Content2"></div>
                    </div>';
                    
                    $elementsToInsert[] = [
                        'html' => $joinAdsHtml,
                        'position' => $joinads_position
                    ];
                }
                
                // Inserir elementos no conteúdo
                if (!empty($elementsToInsert)) {
                    $content = insertContentElements($content, $elementsToInsert);
                }
                
                // Processa upload de imagem destacada
                $featured_image = '';
                if (isset($_FILES['featured_image']) && $_FILES['featured_image']['error'] === UPLOAD_ERR_OK) {
                    $featured_image = uploadImage($_FILES['featured_image'], 'pages');
                }
                
                // Insere no banco
                $db->query("INSERT INTO pages (title, slug, content, excerpt, type, sequence,
                                             featured_image, published, created_at, updated_at,
                                             meta_description, cta_text, cta_link, landing_page_id, selected_whatsapp_url) 
                           VALUES (:title, :slug, :content, :excerpt, :type, :sequence,
                                   :featured_image, :published, NOW(), NOW(),
                                   :meta_description, :cta_text, :cta_link, :landing_page_id, :selected_whatsapp_url)");
                
                $db->bind(':title', $title);
                $db->bind(':slug', $slug);
                $db->bind(':content', $content);
                $db->bind(':excerpt', $excerpt);
                $db->bind(':type', $type);
                $db->bind(':sequence', $sequence);
                $db->bind(':featured_image', $featured_image);
                $db->bind(':published', $published ? 1 : 0);
                $db->bind(':meta_description', $meta_description);
                $db->bind(':cta_text', $cta_text);
                $db->bind(':cta_link', $cta_link);
                $db->bind(':landing_page_id', $landing_page_id);
                $db->bind(':selected_whatsapp_url', $selected_whatsapp_url);
                
                $db->execute();
                
                $pageId = $db->lastInsertId();
                
                // Criar configurações padrão de fluxo se for uma landing page
                if ($type === 'landing') {
                    try {
                        $db->query("INSERT INTO flow_settings (landing_page_id, require_sequential_access, allow_skip_steps, session_timeout) 
                                   VALUES (:landing_page_id, 1, 0, 3600)");
                        $db->bind(':landing_page_id', $pageId);
                        $db->execute();
                        
                        // Atualizar CTAs da landing page para incluir seu próprio ID
                        $pageFlow->updateLandingPageCtas($pageId);
                    } catch (Exception $e) {
                        logError("Erro ao criar configurações de fluxo: " . $e->getMessage());
                    }
                }
                
// Confirmar transação
                $db->commit();
                
                // Verificar se ID foi gerado
                if (!$pageId || $pageId <= 0) {
                    throw new Exception("Erro: Página não foi criada corretamente");
                }
                
                // Mensagem de sucesso
                setAlert('Página criada com sucesso!', ALERT_SUCCESS);
                
                // Limpar buffer
                while (ob_get_level()) {
                    ob_end_clean();
                }
                
                // Redirecionamento forçado
                $redirectUrl = 'page-edit.php?id=' . intval($pageId);
                header('Location: ' . $redirectUrl, true, 302);
                header('Cache-Control: no-cache, must-revalidate');
                exit();
                
            } catch (Exception $e) {
                // Reverter transação em caso de erro
                $db->rollback();
                $errors[] = 'Erro ao salvar a página: ' . $e->getMessage();
                logError("Erro ao salvar página: " . $e->getMessage());
            }
        }
    }
}

// Carregar o header
require_once 'inc/header.php';
?>

<div class="container-fluid px-4">
    <div class="page-header mb-4">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1 class="page-title"><?php echo $pageTitle; ?></h1>
                <p class="text-muted">Crie e configure uma nova página para o fluxo do funil.</p>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="page-list.php" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left me-2"></i>Voltar para Lista
                </a>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <?php if (!empty($errors)): ?>
            <div class="alert alert-danger">
                <h5 class="mb-2"><i class="fas fa-exclamation-circle me-2"></i>Atenção!</h5>
                <ul class="mb-0">
                    <?php foreach ($errors as $error): ?>
                    <li><?php echo htmlspecialchars($error); ?></li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <?php endif; ?>
            
            <ul class="nav nav-tabs mb-4" id="pageTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="manual-tab" data-bs-toggle="tab" data-bs-target="#manual" type="button" role="tab" aria-controls="manual" aria-selected="true">
                        <i class="fas fa-pen-to-square me-2"></i>Criação Manual
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="api-tab" data-bs-toggle="tab" data-bs-target="#api" type="button" role="tab" aria-controls="api" aria-selected="false">
                        <i class="fas fa-robot me-2"></i>Gerar com API Claude
                    </button>
                </li>
            </ul>
            
            <div class="tab-content" id="pageTabContent">
                <!-- Tab Criação Manual -->
                <div class="tab-pane fade show active" id="manual" role="tabpanel" aria-labelledby="manual-tab">
                    <form method="post" action="" enctype="multipart/form-data">
                        <div class="row g-4">
                            <div class="col-lg-9">
                                <div class="mb-3">
                                    <label for="title" class="form-label">Título <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-lg" id="title" name="title" value="<?php echo htmlspecialchars($title); ?>" required>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="editor" class="form-label">Conteúdo <span class="text-danger">*</span></label>
                                    <div class="editor-container">
                                        <textarea class="form-control" id="editor" name="content" rows="12"><?php echo htmlspecialchars($content); ?></textarea>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="excerpt" class="form-label">Resumo</label>
                                            <textarea class="form-control" id="excerpt" name="excerpt" rows="3"><?php echo htmlspecialchars($excerpt); ?></textarea>
                                            <div class="form-text">Um breve resumo da página (opcional).</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="meta_description" class="form-label">Meta Description</label>
                                            <textarea class="form-control" id="meta_description" name="meta_description" rows="3"><?php echo htmlspecialchars($meta_description); ?></textarea>
                                            <div class="form-text meta-count">Descrição para SEO (restam <span id="meta-chars">160</span> caracteres).</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-lg-3">
                                <div class="card h-100 border-0 shadow-sm">
                                    <div class="card-header bg-white">
                                        <h5 class="card-title mb-0">Configurações da Página</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label for="page_type" class="form-label">Tipo de Página <span class="text-danger">*</span></label>
                                            <select class="form-select" id="page_type" name="page_type" required>
                                                <option value="">Selecione...</option>
                                                <?php foreach ($pageTypes as $value => $label): ?>
                                                <option value="<?php echo $value; ?>" <?php echo $type == $value ? 'selected' : ''; ?>>
                                                    <?php echo htmlspecialchars($label); ?>
                                                </option>
                                                <?php endforeach; ?>
                                            </select>
                                        </div>
                                        
                                        <!-- Campo para associar a uma Landing Page (quando for step) -->
                                        <div class="mb-3 landing-association-field" style="display: none;">
                                            <label for="landing_page_id" class="form-label">Pertence à Landing Page <span class="text-danger">*</span></label>
                                            <select class="form-select" id="landing_page_id" name="landing_page_id">
                                                <option value="">Selecione uma Landing Page...</option>
                                                <?php foreach ($landingPages as $lp): ?>
                                                <option value="<?php echo $lp['id']; ?>" <?php echo $landing_page_id == $lp['id'] ? 'selected' : ''; ?>>
                                                    <?php echo htmlspecialchars($lp['title']); ?>
                                                </option>
                                                <?php endforeach; ?>
                                            </select>
                                            <div class="form-text">Selecione a qual Landing Page esta etapa pertence no fluxo.</div>
                                        </div>
                                        
                                        <!-- Preview do fluxo -->
                                        <div id="flow-preview" class="flow-preview" style="display: none;">
                                            <strong>Preview do Fluxo:</strong>
                                            <div id="flow-steps"></div>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="sequence" class="form-label">Sequência no Fluxo</label>
                                            <input type="number" class="form-control" id="sequence" name="sequence" value="<?php echo $sequence; ?>" min="0">
                                            <div class="form-text">Ordem de exibição dentro do tipo.</div>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="cta_text" class="form-label">Texto do Botão (CTA)</label>
                                            <input type="text" class="form-control" id="cta_text" name="cta_text" value="<?php echo htmlspecialchars($cta_text); ?>">
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label for="cta_link" class="form-label">Link do Botão</label>
                                            <input type="text" class="form-control" id="cta_link" name="cta_link" value="<?php echo htmlspecialchars($cta_link); ?>">
                                            <div class="form-text">Preenchido automaticamente baseado no tipo.</div>
                                        </div>
                                        
                                        <div class="mb-4">
                                            <label for="featured_image" class="form-label">Imagem Destacada</label>
                                            <input type="file" class="form-control" id="featured_image" name="featured_image">
                                            <div class="form-text">Tamanho recomendado: 1200 x 630px.</div>
                                        </div>
                                        
                                        <div class="form-check form-switch mb-3">
                                            <input class="form-check-input" type="checkbox" id="published" name="published" value="1" <?php echo $published ? 'checked' : ''; ?>>
                                            <label class="form-check-label" for="published">Publicar imediatamente</label>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <button type="submit" name="save" class="btn btn-primary w-100">
                                            <i class="fas fa-save me-2"></i>Salvar Página
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                
                <!-- Tab Geração por API -->
                <div class="tab-pane fade" id="api" role="tabpanel" aria-labelledby="api-tab">
                    <div class="api-intro mb-4">
                        <h4><i class="fas fa-robot text-primary me-2"></i>Geração Automática de Conteúdo</h4>
                        <p class="text-muted">Utilize a API Claude para gerar automaticamente o conteúdo completo da página baseado no fluxo.</p>
                    </div>
                    
                    <form method="post" action="">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="api_page_type" class="form-label">Tipo de Página <span class="text-danger">*</span></label>
                                    <select class="form-select form-select-lg" id="api_page_type" name="page_type" required>
                                        <option value="">Selecione...</option>
                                        <?php foreach ($pageTypes as $value => $label): ?>
                                        <option value="<?php echo $value; ?>" <?php echo $type == $value ? 'selected' : ''; ?>>
                                            <?php echo htmlspecialchars($label); ?>
                                        </option>
                                        <?php endforeach; ?>
                                    </select>
                                    <div class="form-text">O tipo determina a estrutura e objetivo da página.</div>
                                </div>
                                
                                <!-- Campo para associar a uma Landing Page na aba API -->
                                <div class="mb-3 api-landing-association-field" style="display: none;">
                                    <label for="api_landing_page_id" class="form-label">Pertence à Landing Page <span class="text-danger">*</span></label>
                                    <select class="form-select" id="api_landing_page_id" name="landing_page_id">
                                        <option value="">Selecione uma Landing Page...</option>
                                        <?php foreach ($landingPages as $lp): ?>
                                        <option value="<?php echo $lp['id']; ?>" <?php echo $landing_page_id == $lp['id'] ? 'selected' : ''; ?>>
                                            <?php echo htmlspecialchars($lp['title']); ?>
                                        </option>
                                        <?php endforeach; ?>
                                    </select>
                                    <div class="form-text">Selecione a qual Landing Page esta etapa pertence no fluxo.</div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="api_title" class="form-label">Título <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control form-control-lg" id="api_title" name="title" value="<?php echo htmlspecialchars($title); ?>" required>
                                    <div class="form-text">Seja específico e inclua palavras-chave importantes.</div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="keywords" class="form-label">Palavras-chave</label>
                                    <input type="text" class="form-control" id="keywords" name="keywords" value="<?php echo htmlspecialchars($keywords); ?>" placeholder="Ex: marketing digital, redes sociais">
                                    <div class="form-text">Palavras-chave separadas por vírgula.</div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="word_count" class="form-label">Quantidade de Palavras</label>
                                    <select class="form-select" id="word_count" name="word_count">
                                        <option value="500" <?php echo ($wordCount == 500) ? 'selected' : ''; ?>>500 palavras</option>
                                        <option value="1000" <?php echo ($wordCount == 1000 || $wordCount == 0) ? 'selected' : ''; ?>>1000 palavras</option>
                                        <option value="1500" <?php echo ($wordCount == 1500) ? 'selected' : ''; ?>>1500 palavras</option>
                                        <option value="2000" <?php echo ($wordCount == 2000) ? 'selected' : ''; ?>>2000 palavras</option>
                                        <option value="3000" <?php echo ($wordCount == 3000) ? 'selected' : ''; ?>>3000 palavras</option>
                                    </select>
                                    <div class="form-text">Defina o tamanho aproximado do conteúdo gerado.</div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="tone" class="form-label">Tom do Conteúdo</label>
                                    <select class="form-select" id="tone" name="tone">
                                        <option value="informativo" <?php echo ($tone == 'informativo') ? 'selected' : ''; ?>>Informativo</option>
                                        <option value="formal" <?php echo ($tone == 'formal') ? 'selected' : ''; ?>>Formal</option>
                                        <option value="casual" <?php echo ($tone == 'casual') ? 'selected' : ''; ?>>Casual/Conversacional</option>
                                        <option value="persuasivo" <?php echo ($tone == 'persuasivo') ? 'selected' : ''; ?>>Persuasivo</option>
                                        <option value="educativo" <?php echo ($tone == 'educativo') ? 'selected' : ''; ?>>Educativo</option>
                                    </select>
                                    <div class="form-text">O tom define como o conteúdo será escrito.</div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-check form-switch mb-3 mt-4">
                                    <input class="form-check-input" type="checkbox" id="api_published" name="published" value="1" <?php echo $published ? 'checked' : ''; ?>>
                                    <label class="form-check-label" for="api_published">Publicar após gerar</label>
                                </div>
                                
                                <!-- Seção de elementos adicionais -->
                                <div class="card border-0 shadow-sm mb-4">
                                    <div class="card-header bg-white">
                                        <h5 class="card-title mb-0">Elementos Adicionais</h5>
                                    </div>
                                    <div class="card-body">
                                        <!-- Abas para WhatsApp, AdSense e JoinAds -->
                                        <ul class="nav nav-pills nav-fill mb-3" id="elementsTab" role="tablist">
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link active" id="whatsapp-tab" data-bs-toggle="pill" data-bs-target="#whatsapp-content" type="button" role="tab" aria-controls="whatsapp-content" aria-selected="true">
                                                    <i class="fab fa-whatsapp text-success me-1"></i> WhatsApp
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="adsense-tab" data-bs-toggle="pill" data-bs-target="#adsense-content" type="button" role="tab" aria-controls="adsense-content" aria-selected="false">
                                                    <i class="fas fa-ad text-primary me-1"></i> AdSense
                                                </button>
                                            </li>
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link" id="joinads-tab" data-bs-toggle="pill" data-bs-target="#joinads-content" type="button" role="tab" aria-controls="joinads-content" aria-selected="false">
                                                    <i class="fas fa-ad text-info me-1"></i> JoinAds
                                                </button>
                                            </li>
                                        </ul>
                                        
                                        <div class="tab-content" id="elementsTabContent">
                                            <!-- Conteúdo WhatsApp -->
                                            <div class="tab-pane fade show active" id="whatsapp-content" role="tabpanel" aria-labelledby="whatsapp-tab">
                                                <!-- Informação sobre configurações centralizadas -->
                                                <div class="alert alert-info border-0 mb-3">
                                                    <div class="d-flex align-items-center">
                                                        <i class="fas fa-info-circle me-2"></i>
                                                        <div>
                                                            <strong>Configurações Centralizadas</strong>
                                                            <p class="mb-0 small">O título, URL e texto do botão são configurados globalmente. 
                                                            <a href="whatsapp-settings.php" target="_blank">Clique aqui para editar</a>.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="form-check form-switch mb-3">
                                                    <input class="form-check-input" type="checkbox" id="use_whatsapp_cta" name="use_whatsapp_cta" value="1" <?php echo $use_whatsapp_cta ? 'checked' : ''; ?>>
                                                    <label class="form-check-label" for="use_whatsapp_cta">Inserir botão WhatsApp no conteúdo</label>
                                                </div>
                                                
                                                <div id="whatsapp_options" class="<?php echo !$use_whatsapp_cta ? 'opacity-30' : ''; ?>">
                                                    <!-- Informações das configurações atuais (somente leitura) -->
                                                    <div class="row mb-3">
                                                        <div class="col-md-12">
                                                            <label class="form-label">Título Atual</label>
                                                            <div class="form-control-plaintext bg-light rounded p-2">
                                                                <?php echo htmlspecialchars($whatsappSettings['title']); ?>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="row mb-3">
                                                        <div class="col-md-8">
                                                            <label class="form-label">Texto do Botão Atual</label>
                                                            <div class="form-control-plaintext bg-light rounded p-2">
                                                                <?php echo htmlspecialchars($whatsappSettings['button_text']); ?>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Ações</label>
                                                            <div>
                                                                <a href="whatsapp-settings.php" class="btn btn-outline-primary btn-sm w-100" target="_blank">
                                                                    <i class="fas fa-edit me-1"></i> Editar
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="row mb-3">
                                                        <div class="col-md-12">
                                                            <label for="selected_whatsapp_url" class="form-label">Escolher URL para esta página</label>
                                                            <select class="form-select" id="selected_whatsapp_url" name="selected_whatsapp_url" <?php echo !$use_whatsapp_cta ? 'disabled' : ''; ?>>
                                                                <?php if (!empty($whatsappSettings['url_1'])): ?>
                                                                <option value="url_1" <?php echo $selected_whatsapp_url == 'url_1' ? 'selected' : ''; ?>>
                                                                    Grupo 1 - <?php echo htmlspecialchars(substr($whatsappSettings['url_1'], 0, 50) . (strlen($whatsappSettings['url_1']) > 50 ? '...' : '')); ?>
                                                                </option>
                                                                <?php endif; ?>
                                                                
                                                                <?php if (!empty($whatsappSettings['url_2'])): ?>
                                                                <option value="url_2" <?php echo $selected_whatsapp_url == 'url_2' ? 'selected' : ''; ?>>
                                                                    Grupo 2 - <?php echo htmlspecialchars(substr($whatsappSettings['url_2'], 0, 50) . (strlen($whatsappSettings['url_2']) > 50 ? '...' : '')); ?>
                                                                </option>
                                                                <?php endif; ?>
                                                                
                                                                <?php if (!empty($whatsappSettings['url_3'])): ?>
                                                                <option value="url_3" <?php echo $selected_whatsapp_url == 'url_3' ? 'selected' : ''; ?>>
                                                                    Grupo 3 - <?php echo htmlspecialchars(substr($whatsappSettings['url_3'], 0, 50) . (strlen($whatsappSettings['url_3']) > 50 ? '...' : '')); ?>
                                                                </option>
                                                                <?php endif; ?>
                                                            </select>
                                                            <div class="form-text">Escolha qual URL do WhatsApp será usada nesta página específica.</div>
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="mb-3">
                                                        <label for="whatsapp_position" class="form-label">Posição no Conteúdo</label>
                                                        <select class="form-select" id="whatsapp_position" name="whatsapp_position" <?php echo !$use_whatsapp_cta ? 'disabled' : ''; ?>>
                                                            <?php foreach ($availablePositions as $key => $label): ?>
                                                            <option value="<?php echo $key; ?>" <?php echo $whatsapp_position == $key ? 'selected' : ''; ?>>
                                                                <?php echo htmlspecialchars($label); ?>
                                                            </option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>
                                                    
                                                    <div class="whatsapp-preview p-3 bg-light rounded">
                                                        <p class="small mb-2">Prévia do botão:</p>
                                                        <div class="whatsapp-cta-container">
                                                            <h3 class="whatsapp-title"><?php echo htmlspecialchars($whatsappSettings['title']); ?></h3>
                                                            <a href="#" class="whatsapp-cta-button" target="_blank" onclick="return false;">
                                                                <i class="fab fa-whatsapp"></i> <?php echo htmlspecialchars($whatsappSettings['button_text']); ?>
                                                            </a>
                                                            <!-- Indicação da URL selecionada -->
                                                            <div class="mt-2">
                                                                <small class="whatsapp-url-info" style="color: #007bff;">
                                                                    URL: <span id="preview-selected-url">Grupo 1</span>
                                                                </small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Conteúdo AdSense -->
                                            <div class="tab-pane fade" id="adsense-content" role="tabpanel" aria-labelledby="adsense-tab">
                                                <div class="form-check form-switch mb-3">
                                                    <input class="form-check-input" type="checkbox" id="use_adsense" name="use_adsense" value="1" <?php echo $use_adsense ? 'checked' : ''; ?>>
                                                    <label class="form-check-label" for="use_adsense">Inserir anúncio AdSense no conteúdo</label>
                                                </div>
                                                
                                                <div id="adsense_options" class="<?php echo !$use_adsense ? 'opacity-30' : ''; ?>">
                                                    <div class="mb-3">
                                                        <label for="adsense_code" class="form-label">Código do AdSense</label>
                                                        <textarea class="form-control" id="adsense_code" name="adsense_code" rows="5" <?php echo !$use_adsense ? 'disabled' : ''; ?>><?php echo htmlspecialchars($adsense_code); ?></textarea>
                                                        <div class="form-text">Cole o código completo do anúncio fornecido pelo Google AdSense.</div>
                                                    </div>
                                                    
                                                    <div class="mb-3">
                                                        <label for="adsense_position" class="form-label">Posição no Conteúdo</label>
                                                        <select class="form-select" id="adsense_position" name="adsense_position" <?php echo !$use_adsense ? 'disabled' : ''; ?>>
                                                            <?php foreach ($availablePositions as $key => $label): ?>
                                                            <option value="<?php echo $key; ?>" <?php echo $adsense_position == $key ? 'selected' : ''; ?>>
                                                                <?php echo htmlspecialchars($label); ?>
                                                            </option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>
                                                    
                                                    <div class="adsense-preview p-3 bg-light rounded">
                                                        <p class="small mb-2">O anúncio AdSense será inserido na posição selecionada.</p>
                                                        <div class="adsense-container">
                                                            <div class="adsense-placeholder">
                                                                <i class="fas fa-ad"></i>
                                                                <span>Anúncio AdSense</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- Conteúdo JoinAds -->
                                            <div class="tab-pane fade" id="joinads-content" role="tabpanel" aria-labelledby="joinads-tab">
                                                <div class="form-check form-switch mb-3">
                                                    <input class="form-check-input" type="checkbox" id="use_joinads" name="use_joinads" value="1" <?php echo $use_joinads ? 'checked' : ''; ?>>
                                                    <label class="form-check-label" for="use_joinads">Inserir anúncio JoinAds no conteúdo</label>
                                                </div>
                                                
                                                <div id="joinads_options" class="<?php echo !$use_joinads ? 'opacity-30' : ''; ?>">
                                                    <div class="mb-3">
                                                        <label for="joinads_position" class="form-label">Posição no Conteúdo</label>
                                                        <select class="form-select" id="joinads_position" name="joinads_position" <?php echo !$use_joinads ? 'disabled' : ''; ?>>
                                                            <?php foreach ($availablePositions as $key => $label): ?>
                                                            <option value="<?php echo $key; ?>" <?php echo $joinads_position == $key ? 'selected' : ''; ?>>
                                                                <?php echo htmlspecialchars($label); ?>
                                                            </option>
                                                            <?php endforeach; ?>
                                                        </select>
                                                    </div>
                                                    
                                                    <div class="joinads-preview p-3 bg-light rounded">
                                                        <p class="small mb-2">Este elemento JoinAds será inserido na posição selecionada:</p>
                                                        <div class="joinads-container">
                                                            <div class="joinads-placeholder">
                                                                <i class="fas fa-ad"></i>
                                                                <span>JoinAds Content2</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center mt-4">
                            <input type="hidden" name="use_api" value="1">
                            <button type="submit" class="btn btn-primary btn-lg px-5 py-3">
                                <i class="fas fa-robot me-2"></i>Gerar Página com API Claude
                            </button>
                            <div class="form-text text-center mt-2">
                                Após gerar, você poderá revisar e editar o conteúdo antes de salvar.
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Estilos específicos da página -->
<style>
    :root {
        --primary-color: #4F46E5;
        --secondary-color: #7C3AED;
        --accent-color: #EC4899;
        --dark-color: #1F2937;
        --light-color: #F8FAFC;
        --text-color: #1F2937;
        --border-color: #E5E7EB;
        --gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        --whatsapp-color: #25D366;
    }

    .page-header {
        margin-bottom: 2rem;
    }
    
    .page-title {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: var(--dark-color);
    }
    
    .card {
        border-radius: 0.75rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    .nav-tabs {
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-tabs .nav-link {
        border: none;
        border-radius: 0.5rem 0.5rem 0 0;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        color: var(--dark-color);
        transition: all 0.3s ease;
    }
    
    .nav-tabs .nav-link.active {
        background: var(--gradient);
        color: white;
    }
    
    .nav-tabs .nav-link:hover:not(.active) {
        background: rgba(79, 70, 229, 0.1);
        color: var(--primary-color);
    }
    
    .nav-pills .nav-link {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        font-weight: 500;
        color: var(--dark-color);
        transition: all 0.3s ease;
    }
    
    .nav-pills .nav-link.active {
        background-color: var(--primary-color);
        color: white;
    }
    
    .form-label {
        font-weight: 500;
        color: var(--dark-color);
    }
    
    .form-control, .form-select {
        border-radius: 0.5rem;
        border: 1px solid var(--border-color);
        padding: 0.625rem 1rem;
        background-color: #F9FAFB;
        transition: all 0.3s ease;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
        background-color: #fff;
    }
    
    .form-control-lg, .form-select-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
    
    .btn {
        border-radius: 0.5rem;
        font-weight: 500;
        padding: 0.625rem 1.25rem;
        transition: all 0.3s ease;
    }
    
    .btn-primary {
        background: var(--gradient);
        border: none;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
    }
    
    .btn-outline-primary {
        color: var(--primary-color);
        border-color: var(--primary-color);
    }
    
    .btn-outline-primary:hover {
        background-color: var(--primary-color);
        color: white;
    }
    
    .editor-container {
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        overflow: hidden;
    }
    
    .ck-editor__editable {
        min-height: 300px;
        max-height: 500px;
    }
    
    .form-check-input:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }
    
    .alert {
        border-radius:0.5rem;
        border: none;
    }
    
    .alert-danger {
        background-color: #FEF2F2;
        color: #991B1B;
    }
    
    .flow-preview {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
    }
    
    .flow-step {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        margin: 0.25rem;
        background: #e9ecef;
        border-radius: 20px;
        font-size: 0.875rem;
    }
    
    .flow-step.current {
        background: #007bff;
        color: white;
    }
    
    .flow-arrow {
        margin: 0 0.5rem;
        color: #6c757d;
    }
    
    .whatsapp-cta-container {
        text-align: center;
        margin: 2rem 0;
        padding: 1rem;
        background-color: rgba(37, 211, 102, 0.1);
        border-radius: 0.75rem;
        border: 1px solid rgba(37, 211, 102, 0.2);
    }
    
    .whatsapp-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
        color: #075E54;
    }

    .whatsapp-cta-button {
        display: inline-block;
        background-color: #25D366;
        color: white !important;
        font-weight: 600;
        padding: 1rem 2rem;
        border-radius: 0.5rem;
        text-decoration: none !important;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
        font-size: 1.1rem;
    }

    .whatsapp-cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
        color: white !important;
    }

    .whatsapp-cta-button i {
        margin-right: 0.5rem;
        font-size: 1.2rem;
    }
    
    .adsense-container {
        margin: 2rem 0;
        padding: 1rem;
        background-color: rgba(79, 70, 229, 0.05);
        border-radius: 0.75rem;
        border: 1px solid rgba(79, 70, 229, 0.2);
        text-align: center;
    }
    
    .adsense-placeholder {
        height: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        background-color: rgba(79, 70, 229, 0.1);
        border-radius: 0.5rem;
    }
    
    .adsense-placeholder i {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .joinads-container {
        margin: 2rem 0;
        padding: 1rem;
        background-color: rgba(0, 123, 255, 0.05);
        border-radius: 0.75rem;
        border: 1px solid rgba(0, 123, 255, 0.2);
        text-align: center;
    }
    
    .joinads-placeholder {
        height: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #0d6efd;
        background-color: rgba(0, 123, 255, 0.1);
        border-radius: 0.5rem;
    }
    
    .joinads-placeholder i {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .opacity-30 {
        opacity: 0.3;
        transition: opacity 0.3s ease;
    }
</style>

<!-- Importar CKEditor -->
<script src="https://cdn.ckeditor.com/ckeditor5/38.1.0/classic/ckeditor.js"></script>

<script>
// Inicialização do CKEditor
ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: [
            'heading', '|',
            'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|',
            'outdent', 'indent', '|',
            'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo'
        ]
    })
    .then(editor => {
        console.log('Editor inicializado com sucesso', editor);
        editor.editing.view.change(writer => {
            writer.setAttribute('role', 'textbox', editor.editing.view.document.getRoot());
            writer.setAttribute('aria-label', 'Editor de conteúdo da página', editor.editing.view.document.getRoot());
        });
    })
    .catch(error => {
        console.error('Erro ao inicializar o editor:', error);
    });

// Contador de caracteres para meta description
document.getElementById('meta_description').addEventListener('input', function() {
    const maxChars = 160;
    const remaining = maxChars - this.value.length;
    const formText = this.nextElementSibling;
    
    if (remaining < 0) {
        formText.innerHTML = `<span class="text-danger">Excedeu o limite em ${Math.abs(remaining)} caracteres</span>`;
    } else {
        formText.innerHTML = `Descrição para SEO (restam ${remaining} caracteres).`;
    }
});

// Atualização automática do link do CTA baseado no tipo de página
document.getElementById('page_type').addEventListener('change', function() {
    const nextPages = {
        'landing': '/pages/step1',
        'step1': '/pages/registration',
        'registration': '#'
    };
    
    document.getElementById('cta_link').value = nextPages[this.value] || '';
});

// Função para mostrar/esconder campo de associação com landing page
function toggleLandingPageAssociation() {
    const pageType = document.getElementById('page_type').value;
    const associationField = document.querySelector('.landing-association-field');
    const flowPreview = document.getElementById('flow-preview');
    
    if (pageType === 'step1' || pageType === 'registration') {
        associationField.style.display = 'block';
        document.getElementById('landing_page_id').setAttribute('required', 'required');
        updateFlowPreview();
    } else {
        associationField.style.display = 'none';
        flowPreview.style.display = 'none';
        document.getElementById('landing_page_id').removeAttribute('required');
        if (pageType === 'landing') {
            document.getElementById('landing_page_id').value = '';
        }
    }
    
    updateCTALink();
}

// Função para API tab
function toggleApiLandingPageAssociation() {
    const pageType = document.getElementById('api_page_type').value;
    const associationField = document.querySelector('.api-landing-association-field');
    
    if (pageType === 'step1' || pageType === 'registration') {
        associationField.style.display = 'block';
        document.getElementById('api_landing_page_id').setAttribute('required', 'required');
    } else {
        associationField.style.display = 'none';
        document.getElementById('api_landing_page_id').removeAttribute('required');
    }
}

// Preview do fluxo
function updateFlowPreview() {
    const pageType = document.getElementById('page_type').value;
    const landingPageId = document.getElementById('landing_page_id').value;
    const flowPreview = document.getElementById('flow-preview');
    const flowSteps = document.getElementById('flow-steps');
    
    if (!pageType || (pageType !== 'landing' && !landingPageId)) {
        flowPreview.style.display = 'none';
        return;
    }
    
    const steps = ['landing', 'step1', 'registration'];
    const stepNames = {
        'landing': 'Landing Page',
        'step1': '1ª Etapa',
        'registration': 'Registro'
    };
    
    let html = '';
    steps.forEach((step, index) => {
        const isCurrent = step === pageType;
        const className = isCurrent ? 'flow-step current' : 'flow-step';
        
        html += `<span class="${className}">${stepNames[step]}</span>`;
        
        if (index < steps.length - 1) {
            html += '<i class="fas fa-arrow-right flow-arrow"></i>';
        }
    });
    
    flowSteps.innerHTML = html;
    flowPreview.style.display = 'block';
}

// Atualização automática do link do CTA baseado no fluxo
function updateCTALink() {
    const pageType = document.getElementById('page_type').value;
    const landingPageId = document.getElementById('landing_page_id').value;
    const ctaLinkInput = document.getElementById('cta_link');
    
    if (!ctaLinkInput) return;
    
    // Mapa de próximas etapas
    const nextSteps = {
        'landing': 'step1',
        'step1': 'registration',
        'registration': null
    };
    
    const nextStep = nextSteps[pageType];
    
    if (pageType === 'landing') {
        ctaLinkInput.value = '/pages/step1?landing=auto'; // Será substituído pelo ID real
    } else if (nextStep && landingPageId) {
        ctaLinkInput.value = `/pages/${nextStep}?landing=${landingPageId}`;
    } else if (pageType === 'registration') {
        ctaLinkInput.value = '#';
    } else {
        ctaLinkInput.value = '';
    }
}

// Event listeners para os tipos de página
document.getElementById('page_type').addEventListener('change', function() {
    toggleLandingPageAssociation();
});

document.getElementById('landing_page_id').addEventListener('change', function() {
    updateCTALink();
    updateFlowPreview();
});

document.getElementById('api_page_type').addEventListener('change', function() {
    toggleApiLandingPageAssociation();
    
    // Sugestão de título baseado no tipo
    const titleSuggestions = {
        'landing': 'Descubra Como ',
        'step1': 'Passo 1: ',
        'registration': 'Inscreva-se Agora: '
    };
    
    const titleInput = document.getElementById('api_title');
    if (titleInput.value === '') {
        titleInput.value = titleSuggestions[this.value] || '';
    }
});

// Toggle para opções de WhatsApp
document.getElementById('use_whatsapp_cta').addEventListener('change', function() {
    const whatsappOptions = document.getElementById('whatsapp_options');
    const whatsappFields = document.querySelectorAll('#whatsapp_position, #selected_whatsapp_url');
    
    if (this.checked) {
        whatsappOptions.classList.remove('opacity-30');
        whatsappFields.forEach(field => field.removeAttribute('disabled'));
    } else {
        whatsappOptions.classList.add('opacity-30');
        whatsappFields.forEach(field => field.setAttribute('disabled', 'disabled'));
    }
});

// Toggle para opções de AdSense
document.getElementById('use_adsense').addEventListener('change', function() {
    const adsenseOptions = document.getElementById('adsense_options');
    const adsenseFields = document.querySelectorAll('#adsense_code, #adsense_position');
    
    if (this.checked) {
        adsenseOptions.classList.remove('opacity-30');
        adsenseFields.forEach(field => field.removeAttribute('disabled'));
    } else {
        adsenseOptions.classList.add('opacity-30');
        adsenseFields.forEach(field => field.setAttribute('disabled', 'disabled'));
    }
});

// Toggle para opções de JoinAds
document.getElementById('use_joinads').addEventListener('change', function() {
    const joinadsOptions = document.getElementById('joinads_options');
    const joinadsFields = document.querySelectorAll('#joinads_position');
    
    if (this.checked) {
        joinadsOptions.classList.remove('opacity-30');
        joinadsFields.forEach(field => field.removeAttribute('disabled'));
    } else {
        joinadsOptions.classList.add('opacity-30');
        joinadsFields.forEach(field => field.setAttribute('disabled', 'disabled'));
    }
});

// Atualizar prévia quando URL selecionada mudar
document.getElementById('selected_whatsapp_url').addEventListener('change', function() {
    updateWhatsAppPreview();
});

// Função para atualizar prévia do WhatsApp
function updateWhatsAppPreview() {
    const selectedUrl = document.getElementById('selected_whatsapp_url').value;
    const previewButton = document.querySelector('.whatsapp-cta-button');
    
    if (previewButton && selectedUrl) {
        // Atualizar cor do badge na prévia baseado na URL selecionada
        const urlBadges = {
            'url_1': 'Grupo 1',
            'url_2': 'Grupo 2', 
            'url_3': 'Grupo 3'
        };
        
        const urlColors = {
            'url_1': '#007bff',
            'url_2': '#6c757d',
            'url_3': '#28a745'
        };
        
        // Atualizar prévia se necessário
        const urlInfo = document.querySelector('#preview-selected-url');
        if (urlInfo) {
            urlInfo.textContent = urlBadges[selectedUrl] || 'Grupo 1';
            urlInfo.style.color = urlColors[selectedUrl] || '#007bff';
        }
    }
}

// Inicialização na carga da página
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar estados dos toggles
    document.getElementById('use_whatsapp_cta').dispatchEvent(new Event('change'));
    document.getElementById('use_adsense').dispatchEvent(new Event('change'));
    document.getElementById('use_joinads').dispatchEvent(new Event('change'));
    
    // Inicializar campos de associação de landing page
    toggleLandingPageAssociation();
    toggleApiLandingPageAssociation();
    updateCTALink();
    
    // Inicializar contador de caracteres
    document.getElementById('meta_description').dispatchEvent(new Event('input'));
    
    // Inicializar prévia da URL do WhatsApp
    updateWhatsAppPreview();
});
</script>

<?php require_once 'inc/footer.php'; ?>