<?php
require_once 'db/config.php';

$profile = null;
$profile_id = $_GET['id'] ?? null;

if ($profile_id) {
    try {
        $pdo = db();
        // Updated to fetch the diagram text as well
        $stmt = $pdo->prepare("SELECT * FROM gtm_profiles WHERE id = ?");
        $stmt->execute([$profile_id]);
        $profile = $stmt->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        error_log($e->getMessage());
    }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My GTM Profile</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&family=Lora:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>TEST</h1>

    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container">
            <a class="navbar-brand" href="index.php">GTM Maximizer</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
                    <li class="nav-item"><a class="nav-link active" aria-current="page" href="profile.php">Profile</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Tools</a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">Design</a></li>
                            <li><a class="dropdown-item" href="#">Diagram</a></li>
                            <li><a class="dropdown-item" href="#">Integrations</a></li>
                        </ul>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Account</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="container my-5 pt-5">
        <h1 class="mb-4">My GTM Profile</h1>
        <?php if ($profile): ?>
        <div class="row mb-4">
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">AI-Generated Role Recommendations</h5>
                        <p class="card-text">Get AI-powered suggestions for marketing and sales roles to execute your GTM strategy.</p>
                        <div id="roles-container" class="mt-3">
                            <?php if (!empty($profile['roles_text'])): ?>
                                <?php echo $profile['roles_text']; ?>
                            <?php endif; ?>
                        </div>
                        <button id="generate-roles-btn" class="btn btn-primary <?php if (!empty($profile['roles_text'])) echo 'd-none'; ?>" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate Roles</button>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">AI-Recommended Tools & Integrations</h5>
                        <p class="card-text">Discover top industry solutions and integrations to efficiently execute your GTM strategy.</p>
                        <div id="tools-container" class="mt-3">
                            <?php if (!empty($profile['tools_text'])): ?>
                                <?php echo $profile['tools_text']; ?>
                            <?php endif; ?>
                        </div>
                        <button id="generate-tools-btn" class="btn btn-primary <?php if (!empty($profile['tools_text'])) echo 'd-none'; ?>" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate Tools</button>                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="card-title mb-0">AI-Generated KPI Dashboard</h5>
                            <div>
                                <button id="edit-kpi-btn" class="btn btn-secondary btn-sm" style="display: none;">Edit KPIs</button>
                                <button id="generate-kpi-btn" class="btn btn-primary <?php if (!empty($profile['kpi_data'])) echo 'd-none'; ?>" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate KPI Dashboard</button>
                            </div>
                        </div>
                        <p class="card-text">Set and refine KPIs, and track them with an auto-generated dashboard.</p>
                        <div id="kpi-container" class="mt-3">
                            <!-- KPI Dashboard will be rendered here by JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="card-title mb-0">Business Name: <?php echo htmlspecialchars($profile['business_name']); ?></h5>
                    <button id="generate-diagram-btn" class="btn btn-primary" data-profile-id="<?php echo htmlspecialchars($profile_id); ?>">Generate GTM Process Flow Diagram</button>
                </div>

                <!-- Diagram and Editor Section -->
                <div id="diagram-container" class="mb-4">
                    <!-- Diagram will be rendered here by JavaScript -->
                </div>
                <div id="diagram-editor-container" class="mb-4" style="display: none;">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Diagram Editor</h5>
                            <div id="save-status" class="mb-2"></div>
                            <textarea id="diagram-editor" class="form-control" rows="10"></textarea>
                            <button id="save-diagram-btn" class="btn btn-success mt-2">Save Diagram</button>
                        </div>
                    </div>
                </div>

                <p class="card-text"><strong>Sells What:</strong> <?php echo htmlspecialchars($profile['sells_what']); ?></p>
                <hr>
                <h6 class="card-subtitle mb-2 text-muted">Market & Sales</h6>
                <p class="card-text"><strong>Ideal Customer Profile (ICP):</strong> <?php echo htmlspecialchars($profile['icp']); ?></p>
                <p class="card-text"><strong>Market Size:</strong> <?php echo htmlspecialchars($profile['market_size']); ?></p>
                <p class="card-text"><strong>Existing Sales Motions:</strong> <?php echo htmlspecialchars($profile['sales_motions']); ?></p>
                <hr>
                <h6 class="card-subtitle mb-2 text-muted">Team & Roles</h6>
                <p class="card-text"><strong>Organization Size:</strong> <?php echo htmlspecialchars($profile['org_size']); ?></p>
                <p class="card-text"><strong>Marketing and Sales Roles:</strong> <?php echo htmlspecialchars($profile['roles']); ?></p>
                <hr>
                <h6 class="card-subtitle mb-2 text-muted">Goals</h6>
                <p class="card-text"><strong>Growth Goals:</strong> <?php echo htmlspecialchars($profile['goals']); ?></p>
                <hr>
            </div>
        </div>
    <?php else: ?>
        <div class="alert alert-warning" role="alert">
            No GTM profile found. Please <a href="list_profiles.php">select one</a> or <a href="start.php">create a new one</a>.
        </div>
        <?php endif; ?>
    </main>

    <footer class="text-center py-4">
        <p>&copy; <?php echo date("Y"); ?> GTM Maximizer. All Rights Reserved.</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({ startOnLoad: false });</script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const profileId = "<?php echo $profile_id; ?>";
            const generateBtn = document.getElementById('generate-diagram-btn');
            const diagramContainer = document.getElementById('diagram-container');
            const editorContainer = document.getElementById('diagram-editor-container');
            const editor = document.getElementById('diagram-editor');
            const saveBtn = document.getElementById('save-diagram-btn');
            const saveStatus = document.getElementById('save-status');

            const generateRolesBtn = document.getElementById('generate-roles-btn');
            const rolesContainer = document.getElementById('roles-container');
            const generateToolsBtn = document.getElementById('generate-tools-btn');
            const toolsContainer = document.getElementById('tools-container');
            const generateKpiBtn = document.getElementById('generate-kpi-btn');
            const kpiContainer = document.getElementById('kpi-container');

            if (generateRolesBtn) {
                generateRolesBtn.addEventListener('click', function () {
                    rolesContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating roles...</p></div>';
                    generateRolesBtn.disabled = true;

                    fetch(`generate_roles.php?id=${profileId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.error) {
                                rolesContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                            } else {
                                rolesContainer.innerHTML = data.recommendations;
                                generateRolesBtn.classList.add('d-none');
                            }
                        })
                        .catch(error => {
                            console.error('Error generating roles:', error);
                            rolesContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating roles.</div>';
                        })
                        .finally(() => {
                            generateRolesBtn.disabled = false;
                        });
                });
            }

            if (generateToolsBtn) {
                generateToolsBtn.addEventListener('click', function () {
                    toolsContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating tools...</p></div>';
                    generateToolsBtn.disabled = true;

                    fetch(`generate_tools.php?id=${profileId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.error) {
                                toolsContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                            } else {
                                toolsContainer.innerHTML = data.recommendations;
                                generateToolsBtn.classList.add('d-none');
                            }
                        })
                        .catch(error => {
                            console.error('Error generating tools:', error);
                            toolsContainerinnerHTML = '<div class="alert alert-danger">An error occurred while generating tools.</div>';
                        })
                        .finally(() => {
                            generateToolsBtn.disabled = false;
                        });
                });
            }

            // Function to render the diagram
            const renderDiagram = (mermaidCode, isSample = false) => {
                if (!mermaidCode) {
                    diagramContainer.innerHTML = '';
                    return;
                }
                try {
                    const title = isSample ? 'Sample GTM Process Flow' : 'GTM Process Flow Diagram';
                    const footer = isSample ? '<p class="text-center text-muted mt-2">This is a sample diagram. Click "Generate" to create one based on your profile.</p>' : '';

                    diagramContainer.innerHTML = `
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">${title}</h5>
                                <div class="mermaid text-center">${mermaidCode}</div>
                                ${footer}
                            </div>
                        </div>`;
                    
                    // Ensure Mermaid is available before running
                    if (window.mermaid) {
                        mermaid.run();
                    }

                    if (!isSample) {
                        editor.value = mermaidCode;
                        editorContainer.style.display = 'block';
                    } else {
                        editorContainer.style.display = 'none';
                    }
                } catch (e) {
                    diagramContainer.innerHTML = '<div class="alert alert-danger">Invalid diagram syntax.</div>';
                    console.error("Mermaid render error:", e);
                }
            };
            
            const renderKpiDashboard = (kpiData, isSample = false) => {
                if (!kpiData) return;

                let kpiHtml = '<form id="kpi-form"><div class="row">';
                kpiData.kpis.forEach((kpi, index) => {
                    kpiHtml += `
                        <div class="col-md-4">
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">${kpi.name}</h6>
                                    <div class="mb-2">
                                        <label class="form-label">Current</label>
                                        <input type="text" class="form-control" name="kpi_${index}_current" value="${kpi.current}" readonly>
                                    </div>
                                    <div>
                                        <label class="form-label">Target</label>
                                        <input type="text" class="form-control" name="kpi_${index}_target" value="${kpi.target}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                });
                kpiHtml += '</div></form>';
                
                kpiHtml += '<div class="row"><div class="col-12"><canvas id="kpi-chart"></canvas></div></div>';
                kpiContainer.innerHTML = kpiHtml;

                const ctx = document.getElementById('kpi-chart').getContext('2d');
                if(window.kpiChart instanceof Chart) {
                    window.kpiChart.destroy();
                }
                window.kpiChart = new Chart(ctx, {
                    type: 'line',
                    data: kpiData.chartData,
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
                
                const editBtn = document.getElementById('edit-kpi-btn');
                if (isSample) {
                    editBtn.style.display = 'none';
                } else {
                    editBtn.style.display = 'inline-block';
                }
            };

            const existingKpiData = <?php echo $profile['kpi_data'] ?? 'null'; ?>;
            if (existingKpiData) {
                renderKpiDashboard(existingKpiData);
            } else {
                const sampleKpiData = {
                    kpis: [
                        { name: "Website Visitors", current: "1,200", target: "5,000" },
                        { name: "Lead Conversion Rate", current: "2.5%", target: "4%" },
                        { name: "Customer Acquisition Cost (CAC)", current: "$150", target: "$120" }
                    ],
                    chartData: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                        datasets: [{
                            label: 'Sample: Monthly Active Users',
                            data: [500, 650, 800, 750, 900, 1100],
                            borderColor: 'rgba(75, 192, 192, 1)',
                            tension: 0.1
                        }]
                    }
                };
                renderKpiDashboard(sampleKpiData, true);
            }

            if (generateKpiBtn) {
                generateKpiBtn.addEventListener('click', function() {
                    kpiContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating KPI Dashboard...</p></div>';
                    this.disabled = true;

                    fetch(`generate_kpis.php?id=${profileId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.error) {
                                kpiContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                            } else {
                                renderKpiDashboard(data.kpi_data);
                                this.classList.add('d-none');
                            }
                        })
                        .catch(error => {
                            console.error('Error generating KPIs:', error);
                            kpiContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating the KPI dashboard.</div>';
                        })
                        .finally(() => {
                           if(generateKpiBtn) generateKpiBtn.disabled = false;
                        });
                });
            }

            const editKpiBtn = document.getElementById('edit-kpi-btn');
            if (editKpiBtn) {
                editKpiBtn.addEventListener('click', function() {
                    const kpiForm = document.getElementById('kpi-form');
                    const inputs = kpiForm.getElementsByTagName('input');
                    const isEditing = this.textContent === 'Save KPIs';

                    if (isEditing) {
                        // Save logic
                        const formData = new FormData(kpiForm);
                        const kpis = [];
                        const kpiData = <?php echo $profile['kpi_data'] ?? 'null'; ?>;

                        kpiData.kpis.forEach((kpi, index) => {
                            kpis.push({
                                name: kpi.name,
                                current: formData.get(`kpi_${index}_current`),
                                target: formData.get(`kpi_${index}_target`)
                            });
                        });
                        
                        const updatedKpiData = { kpis: kpis, chartData: kpiData.chartData };

                        fetch('save_kpis.php', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            body: `id=${profileId}&kpi_data=${JSON.stringify(updatedKpiData)}`
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Re-render with new data
                                renderKpiDashboard(data.updated_kpi_data);
                                // Toggle back to edit mode
                                this.textContent = 'Edit KPIs';
                                for (let input of inputs) {
                                    input.setAttribute('readonly', true);
                                }
                            } else {
                                alert('Error saving KPIs: ' + data.error);
                            }
                        })
                        .catch(error => {
                            console.error('Error saving KPIs:', error);
                            alert('An unexpected error occurred while saving KPIs.');
                        });

                    } else {
                        // Edit logic
                        this.textContent = 'Save KPIs';
                        for (let input of inputs) {
                            input.removeAttribute('readonly');
                        }
                    }
                });
            }


            // Load existing diagram on page load
                        const existingDiagram = <?php echo json_encode($profile['diagram_mermaid_text'] ?? null); ?>;
            if (existingDiagram) {
                renderDiagram(existingDiagram);
            } else {
                const sampleDiagram = `graph TD
    subgraph "GTM Strategy Workflow"
        A[Start] --> B[Input Market & Product Data];
        B --> C{Generate GTM Strategy};
        C --> D[Review Generated Plan];
        D --> E{Is the Plan Approved?};
        E -- Yes --> F[Launch GTM Campaign];
        E -- No --> G[Refine Inputs & Regenerate];
        G --> B;
        F --> H[Monitor KPIs & Optimize];
        H --> F;
    end`;
                renderDiagram(sampleDiagram, true);
            }

            // Generate button click handler
            if (generateBtn) {
                generateBtn.addEventListener('click', function () {
                    diagramContainer.innerHTML = '<div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><p>Generating diagram...</p></div>';
                    generateBtn.disabled = true;
                    editorContainer.style.display = 'none';

                    fetch(`generate_diagram.php?id=${profileId}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.error) {
                                diagramContainer.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
                            } else {
                                renderDiagram(data.diagram);
                            }
                        })
                        .catch(error => {
                            console.error('Error generating diagram:', error);
                            diagramContainer.innerHTML = '<div class="alert alert-danger">An error occurred while generating the diagram.</div>';
                        })
                        .finally(() => {
                            generateBtn.disabled = false;
                        });
                });
            }

            // Live update diagram from editor
            let debounceTimer;
            editor.addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => {
                    renderDiagram(editor.value);
                }, 500); // 500ms debounce
            });

            // Save button click handler
            if (saveBtn) {
                saveBtn.addEventListener('click', function () {
                    const diagramText = editor.value;
                    saveStatus.innerHTML = '<span class="text-info">Saving...</span>';
                    saveBtn.disabled = true;

                    fetch('save_diagram.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            profile_id: profileId,
                            diagram_text: diagramText
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            saveStatus.innerHTML = '<span class="text-success">Saved successfully!</span>';
                        } else {
                            saveStatus.innerHTML = `<span class="text-danger">Error: ${data.error || 'Could not save.'}</span>`;
                        }
                    })
                    .catch(error => {
                        console.error('Error saving diagram:', error);
                        saveStatus.innerHTML = '<span class="text-danger">An unexpected error occurred.</span>';
                    })
                    .finally(() => {
                        saveBtn.disabled = false;
                        setTimeout(() => { saveStatus.innerHTML = ''; }, 3000);
                    });
                });
            }
        });
    </script>
</body>
</html>