<?php
// If this file is called directly, abort.
if (!defined('WPINC')) {
    die;
}
?>

<div class="aysa-dashboard-wrapper">
    <div class="aysa-dashboard-container">
        <!-- Header Section -->
        <div class="aysa-dashboard-header">
            <div class="aysa-dashboard-title">
                <h1>Omnichannel SEO</h1>
                <p>Optimize your SEO strategy across all digital channels</p>
            </div>
            <div class="aysa-dashboard-user">
                <?php 
                // Use the credits component
                if (class_exists('Aysa_Credits_Component')) {
                    Aysa_Credits_Component::display();
                } else {
                    echo '<div class="aysa-credits-component"><span class="aysa-credits-value">Credits: <span class="aysa-credits-amount"><span class="aysa-loading-spinner"></span></span></span></div>';
                }
                ?>
            </div>
        </div>

        <!-- Mesaj AI unificat sub header - COMMENTED OUT -->
        <!--
        <div class="aysa-global-intro-text">
            <img src="<?php echo defined('AYSA_PLUGIN_URL') ? AYSA_PLUGIN_URL : plugin_dir_url(dirname(__FILE__, 2)); ?>assets/images/aysa-eyes.png" alt="Aysa Eyes" class="aysa-eyes-img" />
            <div class="aysa-chat-message aysa-ai-message">
                <p id="aysa-dynamic-text-omnichannel-intro" class="aysa-intro-dynamic-text"></p>
            </div>
        </div>
        -->
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                const textElement = document.getElementById('aysa-dynamic-text-omnichannel-intro');
                const textToType = "Optimizează SEO-ul pe toate canalele digitale: website, social media, email marketing, și mult mai mult.";
                let currentIndex = 0;
                const typingSpeed = 30;
                function typeWriter() {
                    if (textElement && currentIndex < textToType.length) {
                        textElement.innerHTML += textToType.charAt(currentIndex);
                        currentIndex++;
                        setTimeout(typeWriter, typingSpeed);
                    } else if (textElement) {
                        textElement.classList.add('typing-done');
                    }
                }
                if (textElement) {
                    textElement.innerHTML = '';
                    typeWriter();
                }
            });
        </script>

        <!-- Channel Overview -->
        <div class="aysa-panel">
            <h2 class="aysa-section-title">Channel Overview</h2>
            <div class="aysa-info-box">
                <h3>Multi-Channel SEO Strategy</h3>
                <p>Monitor and optimize your SEO performance across all digital touchpoints</p>
            </div>
            
            <div class="aysa-metrics-grid">
                <div class="aysa-metric-card">
                    <div class="aysa-metric-header">
                        <span class="aysa-metric-icon aysa-blue"><span class="dashicons dashicons-admin-site"></span></span>
                    </div>
                    <div class="aysa-metric-name">Website SEO Score</div>
                    <div class="aysa-metric-value" id="website-seo-score">Loading...</div>
                </div>
                
                <div class="aysa-metric-card">
                    <div class="aysa-metric-header">
                        <span class="aysa-metric-icon aysa-green"><span class="dashicons dashicons-share"></span></span>
                    </div>
                    <div class="aysa-metric-name">Social Media Reach</div>
                    <div class="aysa-metric-value" id="social-reach">Loading...</div>
                </div>
                
                <div class="aysa-metric-card">
                    <div class="aysa-metric-header">
                        <span class="aysa-metric-icon aysa-purple"><span class="dashicons dashicons-email"></span></span>
                    </div>
                    <div class="aysa-metric-name">Email Campaign CTR</div>
                    <div class="aysa-metric-value" id="email-ctr">Loading...</div>
                </div>
                
                <div class="aysa-metric-card">
                    <div class="aysa-metric-header">
                        <span class="aysa-metric-icon aysa-orange"><span class="dashicons dashicons-chart-line"></span></span>
                    </div>
                    <div class="aysa-metric-name">Overall Performance</div>
                    <div class="aysa-metric-value" id="overall-performance">Loading...</div>
                </div>
            </div>
        </div>

        <!-- Channel Integration -->
        <div class="aysa-panel">
            <h2 class="aysa-section-title">Channel Integration</h2>
            <div class="aysa-info-box">
                <h3>Connect Your Digital Channels</h3>
                <p>Integrate and synchronize your SEO efforts across all platforms</p>
            </div>
            
            <div class="aysa-integration-grid">
                <div class="aysa-integration-card">
                    <div class="aysa-integration-header">
                        <span class="dashicons dashicons-admin-site"></span>
                        <h3>Website</h3>
                        <span class="aysa-status-badge connected">Connected</span>
                    </div>
                    <div class="aysa-integration-content">
                        <p>Your main website is connected and being monitored for SEO performance.</p>
                        <div class="aysa-integration-stats">
                            <div class="aysa-stat">
                                <span class="aysa-stat-label">Pages Indexed:</span>
                                <span class="aysa-stat-value" id="pages-indexed">Loading...</span>
                            </div>
                            <div class="aysa-stat">
                                <span class="aysa-stat-label">Avg. Load Time:</span>
                                <span class="aysa-stat-value" id="avg-load-time">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="aysa-integration-card">
                    <div class="aysa-integration-header">
                        <span class="dashicons dashicons-facebook"></span>
                        <h3>Social Media</h3>
                        <span class="aysa-status-badge pending">Setup Required</span>
                    </div>
                    <div class="aysa-integration-content">
                        <p>Connect your social media accounts to optimize cross-platform SEO.</p>
                        <button class="aysa-btn aysa-btn-primary" onclick="connectSocialMedia()">Connect Accounts</button>
                    </div>
                </div>
                
                <div class="aysa-integration-card">
                    <div class="aysa-integration-header">
                        <span class="dashicons dashicons-email"></span>
                        <h3>Email Marketing</h3>
                        <span class="aysa-status-badge pending">Setup Required</span>
                    </div>
                    <div class="aysa-integration-content">
                        <p>Integrate email marketing platforms for better content distribution.</p>
                        <button class="aysa-btn aysa-btn-primary" onclick="connectEmailMarketing()">Connect Platform</button>
                    </div>
                </div>
                
                <div class="aysa-integration-card">
                    <div class="aysa-integration-header">
                        <span class="dashicons dashicons-video-alt3"></span>
                        <h3>Video Platforms</h3>
                        <span class="aysa-status-badge pending">Setup Required</span>
                    </div>
                    <div class="aysa-integration-content">
                        <p>Optimize video content for search engines across YouTube and other platforms.</p>
                        <button class="aysa-btn aysa-btn-primary" onclick="connectVideoplatforms()">Connect Platforms</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content Synchronization -->
        <div class="aysa-panel">
            <h2 class="aysa-section-title">Content Synchronization</h2>
            <div class="aysa-info-box">
                <h3>Cross-Channel Content Strategy</h3>
                <p>Ensure consistent messaging and SEO optimization across all channels</p>
            </div>
            
            <div class="aysa-table-responsive">
                <table class="aysa-optimization-table" id="content-sync-table">
                    <thead>
                        <tr>
                            <th>Content Piece</th>
                            <th>Website</th>
                            <th>Social Media</th>
                            <th>Email</th>
                            <th>Video</th>
                            <th>Sync Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="aysa-loading-row">
                            <td colspan="7" class="aysa-loading-cell">
                                <div class="aysa-loading-spinner"></div>
                                <span>Loading content synchronization data...</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
// Initialize page on DOM load
document.addEventListener('DOMContentLoaded', function() {
    console.log('Omnichannel SEO page loaded');
    updateChannelMetrics();
    loadContentSyncData();
});

/**
 * Update channel metrics with sample data
 */
function updateChannelMetrics() {
    console.log('📊 Updating channel metrics...');
    
    // Simulate metrics (placeholder values)
    const websiteSeoScore = Math.floor(Math.random() * 30) + 70; // 70-100
    const socialReach = Math.floor(Math.random() * 50000) + 10000; // 10k-60k
    const emailCTR = (Math.random() * 3 + 2).toFixed(1) + '%'; // 2-5%
    const overallPerformance = Math.floor(Math.random() * 25) + 75; // 75-100
    
    const pagesIndexed = Math.floor(Math.random() * 500) + 100; // 100-600
    const avgLoadTime = (Math.random() * 2 + 1).toFixed(1) + 's'; // 1-3s
    
    document.getElementById('website-seo-score').textContent = websiteSeoScore + '/100';
    document.getElementById('social-reach').textContent = socialReach.toLocaleString();
    document.getElementById('email-ctr').textContent = emailCTR;
    document.getElementById('overall-performance').textContent = overallPerformance + '/100';
    document.getElementById('pages-indexed').textContent = pagesIndexed;
    document.getElementById('avg-load-time').textContent = avgLoadTime;
}

/**
 * Load content synchronization data
 */
function loadContentSyncData() {
    console.log('📊 Loading content sync data...');
    
    // Simulate content sync data
    const contentItems = [
        { title: 'SEO Best Practices Guide', website: true, social: false, email: true, video: false },
        { title: 'Keyword Research Tutorial', website: true, social: true, email: false, video: true },
        { title: 'Content Marketing Strategy', website: true, social: true, email: true, video: false },
        { title: 'Local SEO Tips', website: false, social: true, email: true, video: false },
        { title: 'Technical SEO Checklist', website: true, social: false, email: false, video: false }
    ];
    
    const tbody = document.querySelector('#content-sync-table tbody');
    if (!tbody) return;
    
    let tableContent = '';
    
    contentItems.forEach((item, index) => {
        const syncedChannels = [item.website, item.social, item.email, item.video].filter(Boolean).length;
        const totalChannels = 4;
        const syncPercentage = Math.round((syncedChannels / totalChannels) * 100);
        const syncStatus = syncPercentage === 100 ? 'Complete' : syncPercentage > 50 ? 'Partial' : 'Limited';
        const statusClass = syncPercentage === 100 ? 'good' : syncPercentage > 50 ? 'warning' : 'bad';
        
        tableContent += `
            <tr>
                <td><strong>${item.title}</strong></td>
                <td>${item.website ? '✅' : '❌'}</td>
                <td>${item.social ? '✅' : '❌'}</td>
                <td>${item.email ? '✅' : '❌'}</td>
                <td>${item.video ? '✅' : '❌'}</td>
                <td><span class="aysa-status ${statusClass}">${syncStatus} (${syncPercentage}%)</span></td>
                <td>
                    <button class="aysa-btn aysa-btn-primary" onclick="syncContent(${index})">Sync All</button>
                    <button class="aysa-btn aysa-btn-secondary" onclick="editContent(${index})">Edit</button>
                </td>
            </tr>
        `;
    });
    
    tbody.innerHTML = tableContent;
}

/**
 * Connect social media accounts
 */
function connectSocialMedia() {
    alert('Social media integration will be available soon. This will allow you to connect Facebook, Twitter, LinkedIn, and other platforms.');
}

/**
 * Connect email marketing platform
 */
function connectEmailMarketing() {
    alert('Email marketing integration will be available soon. This will support MailChimp, Constant Contact, and other platforms.');
}

/**
 * Connect video platforms
 */
function connectVideoplatforms() {
    alert('Video platform integration will be available soon. This will support YouTube, Vimeo, and other video platforms.');
}

/**
 * Sync content across channels
 */
function syncContent(index) {
    alert(`Syncing content item ${index + 1} across all channels...`);
}

/**
 * Edit content item
 */
function editContent(index) {
    alert(`Editing content item ${index + 1}...`);
}
</script>

<style>
/* Base Styles */
.aysa-dashboard-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: #333;
    background-color: #f8f9fa;
    padding: 20px;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

.aysa-dashboard-container {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Header Styles */
.aysa-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.aysa-dashboard-title h1 {
    font-size: 22px;
    margin: 0 0 5px;
    font-weight: 500;
    color: #333;
}

.aysa-dashboard-title p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

.aysa-dashboard-user {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Panel Styles */
.aysa-panel {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.aysa-section-title {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 15px;
    color: #202124;
}

/* Info Box */
.aysa-info-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
}

.aysa-info-box h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 10px;
    color: #202124;
}

.aysa-info-box p {
    margin: 0;
    color: #5f6368;
    font-size: 13px;
}

/* Metrics Grid */
.aysa-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.aysa-metric-card {
    background-color: white;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
}

.aysa-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.aysa-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.aysa-metric-icon .dashicons {
    color: white;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.aysa-metric-name {
    font-size: 13px;
    color: #5f6368;
    margin-bottom: 5px;
}

.aysa-metric-value {
    font-size: 24px;
    font-weight: 500;
    color: #202124;
}

/* Integration Grid */
.aysa-integration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.aysa-integration-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e0e0e0;
}

.aysa-integration-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.aysa-integration-header .dashicons {
    font-size: 24px;
    color: #5f6368;
}

.aysa-integration-header h3 {
    margin: 0;
    font-size: 16px;
    color: #202124;
    flex-grow: 1;
}

.aysa-status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.aysa-status-badge.connected {
    background-color: #e6f4ea;
    color: #34a853;
}

.aysa-status-badge.pending {
    background-color: #fef7e0;
    color: #e37400;
}

.aysa-integration-content p {
    margin: 0 0 15px;
    color: #5f6368;
    font-size: 14px;
}

.aysa-integration-stats {
    margin-top: 15px;
}

.aysa-stat {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 13px;
}

.aysa-stat-label {
    color: #5f6368;
}

.aysa-stat-value {
    color: #202124;
    font-weight: 500;
}

/* Table Styles */
.aysa-table-responsive {
    overflow-x: auto;
}

.aysa-optimization-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.aysa-optimization-table th {
    text-align: left;
    padding: 12px 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    color: #5f6368;
    font-weight: 500;
}

.aysa-optimization-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e0e0e0;
}

/* Loading Styles */
.aysa-loading-row {
    background-color: #f8f9fa;
}

.aysa-loading-cell {
    text-align: center;
    padding: 40px 20px;
    color: #5f6368;
}

.aysa-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #e0e0e0;
    border-radius: 50%;
    border-top-color: #1a73e8;
    animation: aysa-spin 1s ease-in-out infinite;
    margin-right: 10px;
}

@keyframes aysa-spin {
    to { transform: rotate(360deg); }
}

/* Button Styles */
.aysa-btn {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    margin-right: 5px;
}

.aysa-btn-primary {
    background-color: #1a73e8;
    color: white;
}

.aysa-btn-primary:hover {
    background-color: #1557b0;
}

.aysa-btn-secondary {
    background-color: #f8f9fa;
    color: #5f6368;
    border: 1px solid #e0e0e0;
}

.aysa-btn-secondary:hover {
    background-color: #f1f3f4;
}

/* Status Indicators */
.aysa-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.aysa-status.good {
    background-color: #e6f4ea;
    color: #34a853;
}

.aysa-status.warning {
    background-color: #fef7e0;
    color: #e37400;
}

.aysa-status.bad {
    background-color: #fce8e6;
    color: #ea4335;
}

/* Color Classes */
.aysa-blue { background-color: #1a73e8; }
.aysa-green { background-color: #34a853; }
.aysa-purple { background-color: #9334e6; }
.aysa-orange { background-color: #fa7b17; }

/* Responsive Adjustments */
@media screen and (max-width: 1024px) {
    .aysa-metrics-grid,
    .aysa-integration-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .aysa-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .aysa-metrics-grid,
    .aysa-integration-grid {
        grid-template-columns: 1fr;
    }
    
    .aysa-optimization-table {
        min-width: 800px;
    }
}
</style>
