{% extends "base.html" %}

{% block title %}Dashboard - Workflow Automation{% endblock %}

{% block content %}
<!-- Overview Section -->
<section class="section active" id="overview">
    <div class="page-header">
        <div>
            <h1 class="page-title">Dashboard Overview</h1>
            <p class="page-subtitle">Monitor your workflow automation in real-time</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-primary" onclick="runWorkflow()">
                <i class="fas fa-play"></i> Run Workflow
            </button>
            <button class="btn btn-outline" onclick="refreshDashboard()">
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="stats-grid">
        <div class="stat-card hover-lift">
            <div class="stat-icon">📊</div>
            <div class="stat-value" id="totalArticles">0</div>
            <div class="stat-label">Total Articles</div>
            <div class="stat-change positive">
                <i class="fas fa-arrow-up"></i> 12% this week
            </div>
        </div>
        <div class="stat-card hover-lift">
            <div class="stat-icon">✅</div>
            <div class="stat-value" id="publishedArticles">0</div>
            <div class="stat-label">Published</div>
            <div class="stat-change positive">
                <i class="fas fa-arrow-up"></i> 8% this week
            </div>
        </div>
        <div class="stat-card hover-lift">
            <div class="stat-icon">⏳</div>
            <div class="stat-value" id="pendingArticles">0</div>
            <div class="stat-label">Pending</div>
        </div>
        <div class="stat-card hover-lift">
            <div class="stat-icon">🎯</div>
            <div class="stat-value" id="avgQuality">0</div>
            <div class="stat-label">Avg Quality</div>
        </div>
        <div class="stat-card hover-lift">
            <div class="stat-icon">💰</div>
            <div class="stat-value" id="totalCost">$0</div>
            <div class="stat-label">Total Cost</div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-bolt"></i> Quick Actions
            </h3>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <button class="btn btn-primary" onclick="processURL()">
                <i class="fas fa-link"></i> Process URL
            </button>
            <button class="btn btn-success" onclick="runQueue()">
                <i class="fas fa-calendar-check"></i> Process Queue
            </button>
            <button class="btn btn-warning" onclick="runKeywordResearch()">
                <i class="fas fa-search"></i> Keyword Research
            </button>
            <button class="btn btn-info" onclick="runHealthCheck()">
                <i class="fas fa-heartbeat"></i> Health Check
            </button>
        </div>
    </div>

    <!-- Activity Chart -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-chart-area"></i> Activity Overview
            </h3>
            <span class="card-action" onclick="showSection('analytics')">View Details →</span>
        </div>
        <canvas id="activityChart" height="80"></canvas>
    </div>

    <!-- Recent Activity -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-history"></i> Recent Activity
            </h3>
            <span class="card-action" onclick="showSection('articles')">View All →</span>
        </div>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Platform</th>
                        <th>Status</th>
                        <th>Quality</th>
                        <th>Time</th>
                    </tr>
                </thead>
                <tbody id="recentActivityTable">
                    <tr>
                        <td colspan="5" class="text-center text-muted">Loading...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- All Features Section -->
<section class="section" id="features">
    <div class="page-header">
        <div>
            <h1 class="page-title">All Features</h1>
            <p class="page-subtitle">26 powerful automation features at your fingertips</p>
        </div>
        <div class="header-search">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="Search features..." id="featureSearch" onkeyup="filterFeatures()">
        </div>
    </div>

    <div class="features-grid" id="featuresGrid">
        <!-- Content Syndication -->
        <div class="feature-card hover-lift stagger-item" data-feature="syndication">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-share-alt"></i>
                </div>
                <h3 class="feature-title">Content Syndication</h3>
                <p class="feature-description">Automatically distribute content across multiple platforms and channels</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Content Refresher -->
        <div class="feature-card hover-lift stagger-item" data-feature="refresher">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <i class="fas fa-sync-alt"></i>
                </div>
                <h3 class="feature-title">Content Refresher</h3>
                <p class="feature-description">Update and refresh old content to keep it relevant and SEO-friendly</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Content Personalizer -->
        <div class="feature-card hover-lift stagger-item" data-feature="personalizer">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                    <i class="fas fa-user-cog"></i>
                </div>
                <h3 class="feature-title">Content Personalizer</h3>
                <p class="feature-description">Tailor content for different audiences and segments automatically</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Content Clustering -->
        <div class="feature-card hover-lift stagger-item" data-feature="clustering">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);">
                    <i class="fas fa-project-diagram"></i>
                </div>
                <h3 class="feature-title">Content Clustering</h3>
                <p class="feature-description">Organize content into topic clusters for better SEO structure</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Competitor Monitor -->
        <div class="feature-card hover-lift stagger-item" data-feature="competitor">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <i class="fas fa-binoculars"></i>
                </div>
                <h3 class="feature-title">Competitor Monitor</h3>
                <p class="feature-description">Track competitor content and identify opportunities</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Multimodal Generator -->
        <div class="feature-card hover-lift stagger-item" data-feature="multimodal">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <i class="fas fa-magic"></i>
                </div>
                <h3 class="feature-title">Multimodal Generator</h3>
                <p class="feature-description">Generate text, images, and videos from single prompts</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Advanced SEO -->
        <div class="feature-card hover-lift stagger-item" data-feature="seo">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-search-plus"></i>
                </div>
                <h3 class="feature-title">Advanced SEO</h3>
                <p class="feature-description">Optimize content with advanced SEO techniques and analysis</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Performance Predictor -->
        <div class="feature-card hover-lift stagger-item" data-feature="predictor">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3 class="feature-title">Performance Predictor</h3>
                <p class="feature-description">Predict content performance before publishing</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Backlink Builder -->
        <div class="feature-card hover-lift stagger-item" data-feature="backlink">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                    <i class="fas fa-link"></i>
                </div>
                <h3 class="feature-title">Backlink Builder</h3>
                <p class="feature-description">Automate backlink outreach and relationship building</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Multilang SEO -->
        <div class="feature-card hover-lift stagger-item" data-feature="multilang">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);">
                    <i class="fas fa-globe"></i>
                </div>
                <h3 class="feature-title">Multilang SEO</h3>
                <p class="feature-description">Optimize content for multiple languages and regions</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Image Optimizer -->
        <div class="feature-card hover-lift stagger-item" data-feature="image">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <i class="fas fa-image"></i>
                </div>
                <h3 class="feature-title">Image Optimizer</h3>
                <p class="feature-description">Automatically optimize and enhance images for web</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Content Ideation -->
        <div class="feature-card hover-lift stagger-item" data-feature="ideation">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <h3 class="feature-title">Content Ideation</h3>
                <p class="feature-description">Generate content ideas based on trends and data</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Automated Reporting -->
        <div class="feature-card hover-lift stagger-item" data-feature="reporting">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-file-alt"></i>
                </div>
                <h3 class="feature-title">Automated Reporting</h3>
                <p class="feature-description">Generate comprehensive reports automatically</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- ROI Calculator -->
        <div class="feature-card hover-lift stagger-item" data-feature="roi">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <i class="fas fa-calculator"></i>
                </div>
                <h3 class="feature-title">ROI Calculator</h3>
                <p class="feature-description">Calculate return on investment for content campaigns</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Fact Checker -->
        <div class="feature-card hover-lift stagger-item" data-feature="factcheck">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                    <i class="fas fa-check-double"></i>
                </div>
                <h3 class="feature-title">Fact Checker</h3>
                <p class="feature-description">Verify facts and claims in content automatically</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Brand Voice Checker -->
        <div class="feature-card hover-lift stagger-item" data-feature="brandvoice">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);">
                    <i class="fas fa-microphone"></i>
                </div>
                <h3 class="feature-title">Brand Voice Checker</h3>
                <p class="feature-description">Ensure content matches your brand voice and tone</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Compliance Checker -->
        <div class="feature-card hover-lift stagger-item" data-feature="compliance">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3 class="feature-title">Compliance Checker</h3>
                <p class="feature-description">Check content for legal and regulatory compliance</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Email Marketing -->
        <div class="feature-card hover-lift stagger-item" data-feature="email">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <i class="fas fa-envelope"></i>
                </div>
                <h3 class="feature-title">Email Marketing</h3>
                <p class="feature-description">Automate email campaigns and newsletters</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Affiliate Manager -->
        <div class="feature-card hover-lift stagger-item" data-feature="affiliate">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-handshake"></i>
                </div>
                <h3 class="feature-title">Affiliate Manager</h3>
                <p class="feature-description">Manage affiliate links and track commissions</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Social Automation -->
        <div class="feature-card hover-lift stagger-item" data-feature="social">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <i class="fas fa-share-nodes"></i>
                </div>
                <h3 class="feature-title">Social Automation</h3>
                <p class="feature-description">Automate social media posting and engagement</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Voice SEO -->
        <div class="feature-card hover-lift stagger-item" data-feature="voice">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                    <i class="fas fa-volume-up"></i>
                </div>
                <h3 class="feature-title">Voice SEO</h3>
                <p class="feature-description">Optimize content for voice search queries</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Video Generator -->
        <div class="feature-card hover-lift stagger-item" data-feature="video">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);">
                    <i class="fas fa-video"></i>
                </div>
                <h3 class="feature-title">Video Generator</h3>
                <p class="feature-description">Create videos from text content automatically</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Podcast Creator -->
        <div class="feature-card hover-lift stagger-item" data-feature="podcast">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <i class="fas fa-podcast"></i>
                </div>
                <h3 class="feature-title">Podcast Creator</h3>
                <p class="feature-description">Convert articles into podcast episodes</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- A/B Testing -->
        <div class="feature-card hover-lift stagger-item" data-feature="abtest">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                    <i class="fas fa-flask"></i>
                </div>
                <h3 class="feature-title">A/B Testing</h3>
                <p class="feature-description">Test different content variations automatically</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Schema Generator -->
        <div class="feature-card hover-lift stagger-item" data-feature="schema">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <i class="fas fa-code"></i>
                </div>
                <h3 class="feature-title">Schema Generator</h3>
                <p class="feature-description">Generate structured data markup automatically</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>

        <!-- Content Calendar -->
        <div class="feature-card hover-lift stagger-item" data-feature="calendar">
            <div class="feature-card-content">
                <div class="feature-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <i class="fas fa-calendar"></i>
                </div>
                <h3 class="feature-title">Content Calendar</h3>
                <p class="feature-description">Plan and schedule content across platforms</p>
                <div class="feature-status">
                    <span class="status-dot"></span>
                    <span>Active</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Analytics Section -->
<section class="section" id="analytics">
    <div class="page-header">
        <div>
            <h1 class="page-title">Analytics & Insights</h1>
            <p class="page-subtitle">Track performance and ROI</p>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">💰</div>
            <div class="stat-value" id="analyticsRevenue">$0</div>
            <div class="stat-label">Revenue Generated</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">👁️</div>
            <div class="stat-value" id="analyticsViews">0</div>
            <div class="stat-label">Total Views</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">🔗</div>
            <div class="stat-value" id="analyticsBacklinks">0</div>
            <div class="stat-label">Backlinks</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">📈</div>
            <div class="stat-value" id="analyticsGrowth">0%</div>
            <div class="stat-label">Growth Rate</div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-chart-bar"></i> Performance Trends
            </h3>
        </div>
        <canvas id="performanceChart" height="80"></canvas>
    </div>
</section>

<!-- Articles Section -->
<section class="section" id="articles">
    <div class="page-header">
        <div>
            <h1 class="page-title">All Articles</h1>
            <p class="page-subtitle">Manage your content library</p>
        </div>
    </div>

    <div class="card">
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Platform</th>
                        <th>Status</th>
                        <th>Quality Score</th>
                        <th>Published</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="articlesTable">
                    <tr>
                        <td colspan="6" class="text-center text-muted">Loading articles...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Other sections (approval, queue, keywords, templates, settings) -->
<!-- These will use the existing functionality from the original dashboard -->

{% endblock %}

{% block extra_scripts %}
<script>
// Initialize dashboard
document.addEventListener('DOMContentLoaded', function() {
    loadDashboardData();
    initializeCharts();
    
    // Auto-refresh every 30 seconds
    setInterval(loadDashboardData, 30000);
});

function loadDashboardData() {
    // Load stats
    fetch('/api/stats')
        .then(res => res.json())
        .then(data => {
            document.getElementById('totalArticles').textContent = data.total || 0;
            document.getElementById('publishedArticles').textContent = data.published || 0;
            document.getElementById('pendingArticles').textContent = data.draft || 0;
            document.getElementById('avgQuality').textContent = data.avg_qc || 0;
        });
    
    // Load recent activity
    fetch('/api/logs?limit=10')
        .then(res => res.json())
        .then(data => {
            const tbody = document.getElementById('recentActivityTable');
            if (data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No recent activity</td></tr>';
                return;
            }
            tbody.innerHTML = data.map(item => `
                <tr>
                    <td>${item.title || 'Untitled'}</td>
                    <td>${item.platform || '-'}</td>
                    <td><span class="badge badge-${getStatusColor(item.status)}">${item.status}</span></td>
                    <td>${item.qc_score || '-'}</td>
                    <td>${formatDate(item.timestamp)}</td>
                </tr>
            `).join('');
        });
}

function getStatusColor(status) {
    const colors = {
        'publish': 'success',
        'draft': 'warning',
        'error': 'danger',
        'pending': 'info'
    };
    return colors[status] || 'gray';
}

function formatDate(timestamp) {
    if (!timestamp) return '-';
    const date = new Date(timestamp);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}

function filterFeatures() {
    const search = document.getElementById('featureSearch').value.toLowerCase();
    const cards = document.querySelectorAll('.feature-card');
    
    cards.forEach(card => {
        const title = card.querySelector('.feature-title').textContent.toLowerCase();
        const desc = card.querySelector('.feature-description').textContent.toLowerCase();
        
        if (title.includes(search) || desc.includes(search)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}
</script>
{% endblock %}