<?php
require_once '../includes/auth.php';
require_once '../includes/language_manager.php';

$auth = new Auth();
$auth->requireLogin();

// Get analytics data
require_once '../config/database.php';
$database = new Database();
$db = $database->getConnection();

// Get brands for dropdown
$brands_query = "SELECT id, name FROM brands ORDER BY name";
$brands_stmt = $db->prepare($brands_query);
$brands_stmt->execute();
$brands = $brands_stmt->fetchAll(PDO::FETCH_ASSOC);

// Get tracking data
$tracking_data = [];
$query = "SELECT st.*, b.name as brand_name FROM seo_tracking st 
          LEFT JOIN brands b ON st.brand_id = b.id 
          ORDER BY st.tracking_date DESC LIMIT 50";
$stmt = $db->prepare($query);
$stmt->execute();
$tracking_data = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Get summary stats
$stats = [];
$stats['total_keywords'] = $db->query("SELECT COUNT(DISTINCT keyword) FROM seo_tracking")->fetchColumn() ?: 0;
$stats['total_brands'] = $db->query("SELECT COUNT(*) FROM brands")->fetchColumn() ?: 0;
$stats['avg_ranking'] = $db->query("SELECT AVG(current_ranking) FROM seo_tracking WHERE current_ranking > 0")->fetchColumn() ?: 0;
$stats['total_reports'] = $db->query("SELECT COUNT(*) FROM seo_reports")->fetchColumn() ?: 0;
?>
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成效分析 - SEO AI 自動化系統</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../assets/css/admin.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<?php include '../includes/language_switcher.php'; ?>
    <div class="admin-layout">
        <!-- Sidebar -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-robot"></i>
                    <span>SEO AI</span>
                </div>
            </div>
            
            <nav class="sidebar-nav">
                <ul>
                    <li>
                        <a href="dashboard.php">
                            <i class="fas fa-tachometer-alt"></i>
                            <span>儀表板</span>
                        </a>
                    </li>
                    <li>
                        <a href="brands.php">
                            <i class="fas fa-building"></i>
                            <span>品牌管理</span>
                        </a>
                    </li>
                    <li>
                        <a href="reports.php">
                            <i class="fas fa-chart-bar"></i>
                            <span>SEO報告</span>
                        </a>
                    </li>
                    <li>
                        <a href="seo_analysis.php">
                            <i class="fas fa-search"></i>
                            <span>SEO分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="content.php">
                            <i class="fas fa-edit"></i>
                            <span>內容管理</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="analytics.php">
                            <i class="fas fa-analytics"></i>
                            <span>成效分析</span>
                        </a>
                    </li>
                    <li>
                        <a href="settings.php">
                            <i class="fas fa-cog"></i>
                            <span>系統設定</span>
                        </a>
                    </li>
                    <li>
                        <a href="help.php">
                            <i class="fas fa-question-circle"></i>
                            <span>使用說明</span>
                        </a>
                    </li>
                    <li>
                        <a href="profile.php">
                            <i class="fas fa-user"></i>
                            <span>個人資料</span>
                        </a>
                    </li>
                </ul>
            </nav>
            
            <div class="sidebar-footer">
                <a href="logout.php" class="logout-btn">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>登出</span>
                </a>
            </div>
        </aside>
        
        <!-- Main Content -->
        <main class="main-content">
            <header class="header">
                <div class="header-left">
                    <h1>成效分析</h1>
                    <p>SEO關鍵字追蹤與數據分析</p>
                </div>
                <div class="header-right">
                    <button class="btn btn-primary" onclick="showAddTrackingModal()">
                        <i class="fas fa-plus"></i>
                        新增追蹤
                    </button>
                    <button class="btn btn-secondary" onclick="exportData()">
                        <i class="fas fa-download"></i>
                        匯出數據
                    </button>
                </div>
            </header>
            
            <!-- Stats Cards -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-key"></i>
                    </div>
                    <div class="stat-content">
                        <h3><?php echo $stats['total_keywords']; ?></h3>
                        <p>追蹤關鍵字</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-building"></i>
                    </div>
                    <div class="stat-content">
                        <h3><?php echo $stats['total_brands']; ?></h3>
                        <p>品牌數量</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div class="stat-content">
                        <h3><?php echo round($stats['avg_ranking'], 1); ?></h3>
                        <p>平均排名</p>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="stat-content">
                        <h3><?php echo $stats['total_reports']; ?></h3>
                        <p>分析報告</p>
                    </div>
                </div>
            </div>
            
            <!-- Charts Section -->
            <div class="charts-section">
                <div class="chart-container">
                    <h3>排名趨勢</h3>
                    <canvas id="rankingChart"></canvas>
                </div>
                
                <div class="chart-container">
                    <h3>關鍵字表現</h3>
                    <canvas id="keywordChart"></canvas>
                </div>
            </div>
            
            <!-- Tracking Table -->
            <div class="table-section">
                <div class="table-header">
                    <h3>追蹤列表</h3>
                    <div class="table-filters">
                        <select id="brandFilter" class="form-control">
                            <option value="">所有品牌</option>
                            <?php foreach ($brands as $brand): ?>
                                <option value="<?php echo $brand['id']; ?>"><?php echo htmlspecialchars($brand['name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                        <button class="btn btn-secondary" onclick="refreshTrackingData()">
                            <i class="fas fa-refresh"></i>
                            重新整理
                        </button>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>品牌</th>
                                <th>關鍵字</th>
                                <th>目標排名</th>
                                <th>目前排名</th>
                                <th>搜尋量</th>
                                <th>競爭度</th>
                                <th>追蹤日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="trackingTableBody">
                            <?php foreach ($tracking_data as $tracking): ?>
                                <tr data-tracking-id="<?php echo $tracking['id']; ?>">
                                    <td><?php echo htmlspecialchars($tracking['brand_name']); ?></td>
                                    <td><?php echo htmlspecialchars($tracking['keyword']); ?></td>
                                    <td><?php echo $tracking['target_ranking']; ?></td>
                                    <td>
                                        <span class="ranking-badge ranking-<?php echo $tracking['current_ranking'] <= 3 ? 'excellent' : ($tracking['current_ranking'] <= 10 ? 'good' : 'poor'); ?>">
                                            <?php echo $tracking['current_ranking'] ?: '未排名'; ?>
                                        </span>
                                    </td>
                                    <td><?php echo number_format($tracking['search_volume']); ?></td>
                                    <td>
                                        <span class="competition-badge competition-<?php echo $tracking['competition']; ?>">
                                            <?php echo ucfirst($tracking['competition']); ?>
                                        </span>
                                    </td>
                                    <td><?php echo $tracking['tracking_date']; ?></td>
                                    <td>
                                        <button class="btn btn-sm btn-primary" onclick="editTracking(<?php echo $tracking['id']; ?>)">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-danger" onclick="deleteTracking(<?php echo $tracking['id']; ?>)">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
    
    <!-- Add Tracking Modal -->
    <div id="addTrackingModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-plus"></i> 新增追蹤</h2>
                <span class="close" onclick="closeAddTrackingModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form id="addTrackingForm">
                    <div class="form-group">
                        <label for="trackingBrand">品牌 *</label>
                        <select id="trackingBrand" name="brand_id" class="form-control" required>
                            <option value="">請選擇品牌</option>
                            <?php foreach ($brands as $brand): ?>
                                <option value="<?php echo $brand['id']; ?>"><?php echo htmlspecialchars($brand['name']); ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="trackingKeyword">關鍵字 *</label>
                        <input type="text" id="trackingKeyword" name="keyword" class="form-control" required 
                               placeholder="請輸入要追蹤的關鍵字">
                    </div>
                    
                    <div class="form-group">
                        <label for="trackingUrl">目標網址</label>
                        <input type="url" id="trackingUrl" name="target_url" class="form-control" 
                               placeholder="請輸入目標網址">
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="targetRanking">目標排名</label>
                            <input type="number" id="targetRanking" name="target_ranking" class="form-control" 
                                   min="1" max="100" value="1">
                        </div>
                        
                        <div class="form-group">
                            <label for="currentRanking">目前排名</label>
                            <input type="number" id="currentRanking" name="current_ranking" class="form-control" 
                                   min="0" max="100" value="0" placeholder="0表示未排名">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="searchVolume">搜尋量</label>
                            <input type="number" id="searchVolume" name="search_volume" class="form-control" 
                                   min="0" value="0">
                        </div>
                        
                        <div class="form-group">
                            <label for="competition">競爭度</label>
                            <select id="competition" name="competition" class="form-control">
                                <option value="low">低</option>
                                <option value="medium">中</option>
                                <option value="high">高</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="trackingNotes">備註</label>
                        <textarea id="trackingNotes" name="notes" class="form-control" rows="3" 
                                  placeholder="請輸入備註資訊"></textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i>
                            新增追蹤
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="closeAddTrackingModal()">
                            取消
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- Edit Tracking Modal -->
    <div id="editTrackingModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2><i class="fas fa-edit"></i> 編輯追蹤</h2>
                <span class="close" onclick="closeEditTrackingModal()">&times;</span>
            </div>
            <div class="modal-body">
                <form id="editTrackingForm">
                    <input type="hidden" id="editTrackingId" name="tracking_id">
                    
                    <div class="form-group">
                        <label for="editCurrentRanking">目前排名</label>
                        <input type="number" id="editCurrentRanking" name="current_ranking" class="form-control" 
                               min="0" max="100" placeholder="0表示未排名">
                    </div>
                    
                    <div class="form-group">
                        <label for="editSearchVolume">搜尋量</label>
                        <input type="number" id="editSearchVolume" name="search_volume" class="form-control" 
                               min="0">
                    </div>
                    
                    <div class="form-group">
                        <label for="editCompetition">競爭度</label>
                        <select id="editCompetition" name="competition" class="form-control">
                            <option value="low">低</option>
                            <option value="medium">中</option>
                            <option value="high">高</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="editNotes">備註</label>
                        <textarea id="editNotes" name="notes" class="form-control" rows="3"></textarea>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save"></i>
                            更新追蹤
                        </button>
                        <button type="button" class="btn btn-secondary" onclick="closeEditTrackingModal()">
                            取消
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <style>
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
        }
        
        .stat-content h3 {
            font-size: 2rem;
            font-weight: 700;
            color: #333;
            margin: 0;
        }
        
        .stat-content p {
            color: #666;
            margin: 5px 0 0 0;
            font-size: 0.9rem;
        }
        
        .charts-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .chart-container {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        }
        
        .chart-container h3 {
            color: #333;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        
        .table-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
        }
        
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .table-header h3 {
            color: #333;
            margin: 0;
        }
        
        .table-filters {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .table-responsive {
            overflow-x: auto;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .data-table th,
        .data-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .data-table th {
            background: #f8f9fa;
            font-weight: 600;
            color: #333;
        }
        
        .data-table tr:hover {
            background: #f8f9fa;
        }
        
        .ranking-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .ranking-excellent {
            background: #d4edda;
            color: #155724;
        }
        
        .ranking-good {
            background: #d1ecf1;
            color: #0c5460;
        }
        
        .ranking-poor {
            background: #f8d7da;
            color: #721c24;
        }
        
        .competition-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .competition-low {
            background: #d4edda;
            color: #155724;
        }
        
        .competition-medium {
            background: #fff3cd;
            color: #856404;
        }
        
        .competition-high {
            background: #f8d7da;
            color: #721c24;
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 0.8rem;
            margin: 0 2px;
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .form-actions {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
            margin-top: 20px;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 15px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .modal-header {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 20px 30px;
            border-radius: 15px 15px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h2 {
            margin: 0;
            font-size: 1.5rem;
        }
        
        .modal-header .close {
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }
        
        .modal-header .close:hover {
            opacity: 0.7;
        }
        
        .modal-body {
            padding: 30px;
        }
        
        @media (max-width: 768px) {
            .charts-section {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .table-header {
                flex-direction: column;
                gap: 15px;
                align-items: stretch;
            }
        }
    </style>
    
    <script>
        let rankingChart, keywordChart;
        
        document.addEventListener('DOMContentLoaded', function() {
            initializeCharts();
            loadAnalyticsData();
        });
        
        function initializeCharts() {
            // Ranking Trend Chart
            const rankingCtx = document.getElementById('rankingChart').getContext('2d');
            rankingChart = new Chart(rankingCtx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: '平均排名',
                        data: [],
                        borderColor: '#667eea',
                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            reverse: true
                        }
                    }
                }
            });
            
            // Keyword Performance Chart
            const keywordCtx = document.getElementById('keywordChart').getContext('2d');
            keywordChart = new Chart(keywordCtx, {
                type: 'bar',
                data: {
                    labels: [],
                    datasets: [{
                        label: '目前排名',
                        data: [],
                        backgroundColor: '#764ba2'
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            reverse: true
                        }
                    }
                }
            });
        }
        
        async function loadAnalyticsData() {
            try {
                // Load ranking trend data
                const rankingResponse = await fetch('/api/analytics.php?action=get_chart_data&chart_type=ranking_trend');
                const rankingData = await rankingResponse.json();
                
                if (rankingData.success) {
                    const labels = rankingData.data.map(item => item.tracking_date);
                    const data = rankingData.data.map(item => parseFloat(item.avg_ranking));
                    
                    rankingChart.data.labels = labels;
                    rankingChart.data.datasets[0].data = data;
                    rankingChart.update();
                }
                
                // Load keyword performance data
                const keywordResponse = await fetch('/api/analytics.php?action=get_chart_data&chart_type=keyword_performance');
                const keywordData = await keywordResponse.json();
                
                if (keywordData.success) {
                    const labels = keywordData.data.map(item => item.keyword);
                    const data = keywordData.data.map(item => parseInt(item.current_ranking));
                    
                    keywordChart.data.labels = labels;
                    keywordChart.data.datasets[0].data = data;
                    keywordChart.update();
                }
            } catch (error) {
                console.error('Error loading analytics data:', error);
            }
        }
        
        function showAddTrackingModal() {
            document.getElementById('addTrackingModal').style.display = 'block';
        }
        
        function closeAddTrackingModal() {
            document.getElementById('addTrackingModal').style.display = 'none';
            document.getElementById('addTrackingForm').reset();
        }
        
        function closeEditTrackingModal() {
            document.getElementById('editTrackingModal').style.display = 'none';
            document.getElementById('editTrackingForm').reset();
        }
        
        document.getElementById('addTrackingForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            try {
                const response = await fetch('/api/analytics.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify({
                        action: 'add_tracking',
                        ...data
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showNotification('追蹤項目新增成功！', 'success');
                    closeAddTrackingModal();
                    refreshTrackingData();
                    loadAnalyticsData();
                } else {
                    showNotification('新增失敗: ' + result.message, 'error');
                }
            } catch (error) {
                console.error('Error:', error);
                showNotification('網路錯誤，請稍後再試', 'error');
            }
        });
        
        document.getElementById('editTrackingForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            try {
                const response = await fetch('/api/analytics.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify({
                        action: 'update_tracking',
                        ...data
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showNotification('追蹤項目更新成功！', 'success');
                    closeEditTrackingModal();
                    refreshTrackingData();
                    loadAnalyticsData();
                } else {
                    showNotification('更新失敗: ' + result.message, 'error');
                }
            } catch (error) {
                console.error('Error:', error);
                showNotification('網路錯誤，請稍後再試', 'error');
            }
        });
        
        async function editTracking(trackingId) {
            try {
                const response = await fetch(`/api/analytics.php?action=get_tracking&tracking_id=${trackingId}`);
                const result = await response.json();
                
                if (result.success && result.data.length > 0) {
                    const tracking = result.data[0];
                    
                    document.getElementById('editTrackingId').value = tracking.id;
                    document.getElementById('editCurrentRanking').value = tracking.current_ranking;
                    document.getElementById('editSearchVolume').value = tracking.search_volume;
                    document.getElementById('editCompetition').value = tracking.competition;
                    document.getElementById('editNotes').value = tracking.notes || '';
                    
                    document.getElementById('editTrackingModal').style.display = 'block';
                } else {
                    showNotification('無法載入追蹤資料', 'error');
                }
            } catch (error) {
                console.error('Error:', error);
                showNotification('網路錯誤，請稍後再試', 'error');
            }
        }
        
        async function deleteTracking(trackingId) {
            if (!confirm('確定要刪除這個追蹤項目嗎？')) {
                return;
            }
            
            try {
                const response = await fetch('/api/analytics.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify({
                        action: 'delete_tracking',
                        tracking_id: trackingId
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showNotification('追蹤項目刪除成功！', 'success');
                    refreshTrackingData();
                    loadAnalyticsData();
                } else {
                    showNotification('刪除失敗: ' + result.message, 'error');
                }
            } catch (error) {
                console.error('Error:', error);
                showNotification('網路錯誤，請稍後再試', 'error');
            }
        }
        
        async function refreshTrackingData() {
            const brandFilter = document.getElementById('brandFilter').value;
            
            try {
                const response = await fetch('/api/analytics.php?action=get_tracking&brand_id=' + brandFilter);
                const result = await response.json();
                
                if (result.success) {
                    updateTrackingTable(result.data);
                }
            } catch (error) {
                console.error('Error:', error);
                showNotification('載入追蹤資料失敗', 'error');
            }
        }
        
        function updateTrackingTable(data) {
            const tbody = document.getElementById('trackingTableBody');
            tbody.innerHTML = '';
            
            data.forEach(tracking => {
                const row = document.createElement('tr');
                row.setAttribute('data-tracking-id', tracking.id);
                
                const rankingClass = tracking.current_ranking <= 3 ? 'excellent' : 
                                   (tracking.current_ranking <= 10 ? 'good' : 'poor');
                
                row.innerHTML = `
                    <td>${tracking.brand_name}</td>
                    <td>${tracking.keyword}</td>
                    <td>${tracking.target_ranking}</td>
                    <td>
                        <span class="ranking-badge ranking-${rankingClass}">
                            ${tracking.current_ranking || '未排名'}
                        </span>
                    </td>
                    <td>${parseInt(tracking.search_volume).toLocaleString()}</td>
                    <td>
                        <span class="competition-badge competition-${tracking.competition}">
                            ${tracking.competition.charAt(0).toUpperCase() + tracking.competition.slice(1)}
                        </span>
                    </td>
                    <td>${tracking.tracking_date}</td>
                    <td>
                        <button class="btn btn-sm btn-primary" onclick="editTracking(${tracking.id})">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deleteTracking(${tracking.id})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                `;
                
                tbody.appendChild(row);
            });
        }
        
        function exportData() {
            window.open('/api/analytics.php?action=export_data&format=csv', '_blank');
        }
        
        function showNotification(message, type = 'success') {
            const notification = document.createElement('div');
            notification.className = `notification notification-${type}`;
            notification.innerHTML = `
                <div class="notification-content">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
                    <span>${message}</span>
                </div>
            `;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.classList.add('show');
            }, 100);
            
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    if (document.body.contains(notification)) {
                        document.body.removeChild(notification);
                    }
                }, 300);
            }, 3000);
        }
        
        // Close modals when clicking outside
        window.onclick = function(event) {
            const addModal = document.getElementById('addTrackingModal');
            const editModal = document.getElementById('editTrackingModal');
            
            if (event.target === addModal) {
                closeAddTrackingModal();
            }
            if (event.target === editModal) {
                closeEditTrackingModal();
            }
        }
    </script>
    
    <style>
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            padding: 15px 20px;
            z-index: 2000;
            transform: translateX(400px);
            transition: transform 0.3s ease;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .notification-success {
            border-left: 4px solid #28a745;
        }
        
        .notification-error {
            border-left: 4px solid #dc3545;
        }
        
        .notification-content {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .notification-content i {
            font-size: 1.2rem;
        }
        
        .notification-success .notification-content i {
            color: #28a745;
        }
        
        .notification-error .notification-content i {
            color: #dc3545;
        }
    </style>
</body>
</html>
