import { api, BASE_URL } from './api.js';
import { auth } from './auth.js';

console.log('--- main.js Version 2.1 Loaded ---');
// Application State
const state = {
    activePage: 'dashboard',
    users: [],
    campaigns: [],
    chart: null,
    activeMetrics: null,
    activeCampaignId: null
};

// --- Initialization ---
async function init() {
    initDates();
    setupNavigation();
    setupEventListeners();
    setupAuthEvents();
    setupAutomationEvents();
    
    if (auth.isAuthenticated()) {
        showApp();
    } else {
        showLogin();
    }
}

// Modules run after DOM is ready by default
init();

function initDates() {
    // Standard initialization with Flatpickr
    const commonConfig = {
        dateFormat: "Y-m-d",
        theme: "dark",
        locale: "ar" // Flatpickr will look for 'ar' in the included locale script
    };

    flatpickr("#date-start", {
        ...commonConfig,
        defaultDate: "2025-11-01"
    });

    flatpickr("#date-end", {
        ...commonConfig,
        defaultDate: "2026-03-25"
    });
}

async function loadInitialData() {
    try {
        // 1. Fetch Users
        const users = await api.getAllUsers().catch(err => {
            console.error('Failed to fetch users:', err);
            return [];
        });
        
        state.users = users;
        renderUserSelector();
        
        // 2. Load Accounts and Refresh if we have a user
        if (state.users.length > 0) {
            await loadAccounts();
            await refreshDashboard();
        } else {
            console.warn('No users found in system');
            showErrorState({ message: 'لا يوجد مستخدمين متاحين حالياً.' });
        }
    } catch (error) {
        console.error('Failed to load initial data:', error);
    }
}

async function loadAccounts() {
    const select = document.getElementById('ad-account-select');
    if (!select) return;

    try {
        const accounts = await api.getConnectedAccounts().catch(() => []);
        select.innerHTML = '<option value="">الحساب الافتراضي (.env)</option>' + 
            accounts.map(acc => `<option value="${acc.externalAdAccountId}">${acc.name} (${acc.externalAdAccountId})</option>`).join('');
    } catch (err) {
        console.error('Failed to load accounts:', err);
    }
}

// --- UI Rendering ---
function renderUserSelector() {
    const userInfo = document.getElementById('user-info-display');
    if (!userInfo) return;
    
    const user = auth.getUser();
    if (user) {
        userInfo.innerHTML = `
            <div class="user-badge glass-card" style="padding: 10px; border-radius: 12px; margin-top: auto;">
                <div style="font-size: 0.8rem; color: var(--text-secondary);">مرحباً،</div>
                <div style="font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis;">${user.email}</div>
                <div style="font-size: 0.75rem; color: var(--accent-primary); margin-top: 4px;">المستوى: ${user.subscriptionTier.toUpperCase()}</div>
                <button id="logout-btn" class="btn btn-demo-sidebar" style="margin-top: 10px; width: 100%; font-size: 0.75rem; background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: rgba(239, 68, 68, 0.3);">
                    <i data-lucide="log-out"></i> تسجيل الخروج
                </button>
            </div>
        `;
        document.getElementById('logout-btn')?.addEventListener('click', () => auth.logout());
        lucide.createIcons();
    }
}

function showLogin() {
    document.getElementById('login-overlay').classList.remove('hidden');
    document.getElementById('main-app').classList.add('hidden');
}

function showApp() {
    document.getElementById('login-overlay').classList.add('hidden');
    document.getElementById('main-app').classList.remove('hidden');
    loadInitialData();
}

function setupAuthEvents() {
    const loginForm = document.getElementById('login-form');
    const loginError = document.getElementById('login-error');

    loginForm?.addEventListener('submit', async (e) => {
        e.preventDefault();
        const email = document.getElementById('login-email').value;
        const submitBtn = loginForm.querySelector('button');
        
        try {
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'جاري التحقق...';
            loginError.classList.add('hidden');

            const user = await api.login(email);
            auth.login(user);
            showApp();
        } catch (err) {
            loginError.textContent = err.message || 'فشل تسجيل الدخول';
            loginError.classList.remove('hidden');
        } finally {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'دخول للمنصة';
        }
    });

    document.getElementById('btn-google-login')?.addEventListener('click', () => {
        alert('تسجيل الدخول عبر Google سيتوفر قريباً بعد إعداد مفاتيح API الخاصة بك.');
        // In real app: window.location.href = `${BASE_URL}/auth/google/app-login`;
    });
}


async function refreshDashboard(demo = false) {
    const dashboard = document.getElementById('dashboard-page');
    if (dashboard.classList.contains('hidden')) return;

    const refreshBtn = document.getElementById('refresh-data');
    if (refreshBtn) refreshBtn.innerHTML = '<i data-lucide="refresh-cw" class="spin"></i> جاري التحميل...';

    const params = {
        dateStart: document.getElementById('date-start').value,
        dateEnd: document.getElementById('date-end').value,
        adAccountId: document.getElementById('ad-account-select').value || undefined
    };

    try {
        let data;
        if (demo) {
            data = await api.getSampleData(params);
        } else {
            data = await api.getInsights(params);
        }

        if (data && Array.isArray(data)) {
            state.campaigns = data;
            renderDynamicDashboard(); // New function for premium UI
            hideErrorState();
        }
    } catch (err) {
        console.error('Dashboard refresh failed:', err);
        showErrorState(err);
    } finally {
        if (refreshBtn) {
            refreshBtn.innerHTML = '<i data-lucide="refresh-cw"></i> تحديث البيانات';
            lucide.createIcons();
        }
    }
}

function renderDynamicDashboard() {
    const activeFilter = document.querySelector('.platform-btn.active')?.dataset.platform || 'all';
    let filteredData = [...state.campaigns];
    
    if (activeFilter !== 'all') {
        if (activeFilter === 'instagram') {
            filteredData = filteredData.filter(c => c.platform === 'instagram');
        } else if (activeFilter === 'meta') {
            filteredData = filteredData.filter(c => c.source === 'meta' && c.platform !== 'instagram');
        } else {
            filteredData = filteredData.filter(c => c.source === activeFilter);
        }
    }

    // Sort: ACTIVE/ENABLED first | ترتيب: النشط أولاً
    filteredData.sort((a, b) => {
        const aActive = a.status === 'ACTIVE' || a.status === 'ENABLED';
        const bActive = b.status === 'ACTIVE' || b.status === 'ENABLED';
        if (aActive && !bActive) return -1;
        if (!aActive && bActive) return 1;
        return 0;
    });

    populatePremiumKPIs(filteredData);
    populatePremiumTable(filteredData);
    renderChart(filteredData);
}

function populatePremiumKPIs(data) {
    const container = document.getElementById('kpi-cards');
    if (!container) return;

    const stats = {
        impressions: data.reduce((sum, c) => sum + (c.impressions || 0), 0),
        clicks: data.reduce((sum, c) => sum + (c.clicks || 0), 0),
        spend: data.reduce((sum, c) => sum + (c.spend || 0), 0),
        ctr: data.length > 0 ? (data.reduce((sum, c) => sum + (c.ctr || 0), 0) / data.length) : 0
    };

    const cards = [
        { label: 'إجمالي الظهور', value: stats.impressions.toLocaleString(), icon: 'eye', color: 'accent' },
        { label: 'النقرات المستهدفة', value: stats.clicks.toLocaleString(), icon: 'mouse-pointer-2', color: 'success' },
        { label: 'الإنفاق الذكي', value: `$${stats.spend.toLocaleString()}`, icon: 'dollar-sign', color: 'warning' },
        { label: 'متوسط الأداء (CTR)', value: `${stats.ctr.toFixed(2)}%`, icon: 'zap', color: 'danger' }
    ];

    container.innerHTML = cards.map(c => `
        <div class="stat-card glass-card">
            <div class="stat-icon-wrapper" style="color: var(--${c.color})">
                <i data-lucide="${c.icon}"></i>
            </div>
            <span class="stat-label">${c.label}</span>
            <div class="stat-value">${c.value}</div>
        </div>
    `).join('');
    lucide.createIcons();
}

function populatePremiumTable(data) {
    const tbody = document.querySelector('#campaign-table tbody');
    if (!tbody) return;

    if (data.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" style="text-align:center; padding: 3rem; opacity: 0.5;">لا توجد حملات لهذه المنصة حالياً</td></tr>';
        return;
    }

    tbody.innerHTML = data.map(c => {
        const rec = getAIRecommendation(c);
        const statusClass = (c.status === 'ACTIVE' || c.status === 'ENABLED') ? 'status-active' : 'status-paused';
        const statusText = (c.status === 'ACTIVE' || c.status === 'ENABLED') ? 'نشط' : (c.status === 'PAUSED' ? 'متوقف' : (c.status || 'غير معروف'));

        return `
            <tr>
                <td>
                    <div class="platform-icon" style="color: var(--color-${c.platform === 'instagram' ? 'instagram' : c.source})">
                        <i data-lucide="${c.platform === 'instagram' ? 'instagram' : (c.source === 'meta' ? 'facebook' : (c.source === 'google' ? 'search' : 'music-2'))}"></i>
                    </div>
                </td>
                <td style="font-weight: 600;">${c.campaignName || 'Unnamed'}</td>
                <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                <td>${formatCompact(c.impressions || 0)}</td>
                <td>${formatCompact(c.clicks || 0)}</td>
                <td>$${(c.spend || 0).toLocaleString()}</td>
                <td>
                    <span class="ai-status ${rec.type}">${rec.text}</span>
                </td>
                <td>
                    <button class="btn btn-analyze-row" onclick="analyzeCampaign('${c.campaignId}')">
                        <i data-lucide="brain"></i> تحليل
                    </button>
                </td>
            </tr>
        `;
    }).join('');
    lucide.createIcons();
}

function getAIRecommendation(c) {
    if (c.aiRecommendation) {
        return { text: c.aiRecommendation.substring(0, 50) + '...', type: 'excellent' };
    }
    if (c.ctr > 2.5) return { text: 'أداء مذهل - استمر', type: 'excellent' };
    if (c.spend > 100 && c.clicks < 10) return { text: 'إنفاق عالي - راقب', type: 'danger' };
    if (c.ctr < 1.0) return { text: 'تحسين العرض مطلوب', type: 'warning' };
    return { text: 'أداء مستقر', type: 'excellent' };
}



function formatCompact(num) {
    if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
    if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
    return num;
}

window.analyzeCampaign = (id) => {
    console.log('analyzeCampaign triggered for ID:', id);
    if (!state.campaigns || state.campaigns.length === 0) {
        console.warn('analyzeCampaign aborted: state.campaigns is empty.');
        return;
    }

    const campaign = state.campaigns.find(c => String(c.campaignId) === String(id));
    if (!campaign) {
        console.error('analyzeCampaign: Campaign not found for ID:', id);
        console.table(state.campaigns.map(c => ({ id: c.campaignId, name: c.campaignName })));
        return;
    }
    
    console.log('Found campaign:', campaign.campaignName);

    // Clear previous AI state before switching
    try {
        clearAILab();
    } catch (e) {
        console.error('Error in clearAILab:', e);
    }
    
    state.activeCampaignId = id;
    let imageUrl = campaign.imageUrl || '';
    if (imageUrl && !imageUrl.startsWith('http')) {
        const serverBase = BASE_URL.replace('/api', '');
        imageUrl = serverBase + imageUrl;
    }

    // Switch to AI Lab and pre-fill context
    switchPage('ai-lab');
    document.getElementById('ai-image-url').value = imageUrl;
    
    // Use real ad copy if available, otherwise fallback to stats
    // استخدام نص الإعلان الحقيقي إذا وجد، وإلا نستخدم الإحصائيات
    const content = campaign.adCopy || `تحليل الحملة: ${campaign.campaignName}\nالمنصة: ${campaign.source}\nالظهور: ${formatCompact(campaign.impressions || 0)}\nالإنفاق: $${(campaign.spend || 0).toLocaleString()}`;
    document.getElementById('ai-copy').value = content;

    // Store metrics for the analysis button | تخزين المقاييس لزر التحليل
    state.activeMetrics = {
        impressions: campaign.impressions,
        clicks: campaign.clicks,
        spend: campaign.spend,
        ctr: campaign.ctr,
        cpc: campaign.cpc,
        cpm: campaign.cpm,
        conversions: campaign.conversions,
        costPerResult: campaign.costPerResult,
        objective: campaign.objective,
        reach: campaign.reach,
        frequency: campaign.frequency
    };
    console.log('Campaign context set for AI Lab:', state.activeMetrics);
};

function renderChart(data) {
    const ctx = document.getElementById('campaign-chart').getContext('2d');
    
    if (state.chart) {
        state.chart.destroy();
    }

    state.chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: data.map(c => c.campaignName),
            datasets: [
                {
                    label: 'الإنفاق (USD)',
                    data: data.map(c => c.spend),
                    backgroundColor: 'rgba(59, 130, 246, 0.5)',
                    borderColor: '#3b82f6',
                    borderWidth: 1
                },
                {
                    label: 'النقرات',
                    data: data.map(c => c.clicks),
                    backgroundColor: 'rgba(16, 185, 129, 0.5)',
                    borderColor: '#10b981',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { labels: { color: '#94a3b8' } }
            },
            scales: {
                y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } },
                x: { grid: { display: false }, ticks: { color: '#94a3b8' } }
            }
        }
    });
}

// --- Navigation ---
function setupNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', (e) => {
            e.preventDefault();
            const page = item.getAttribute('data-page');
            switchPage(page);
        });
    });
}

function switchPage(pageId) {
    console.log('Switching to page:', pageId);
    const targetNav = document.querySelector(`[data-page="${pageId}"]`);
    const targetPage = document.getElementById(`${pageId}-page`);

    if (!targetNav || !targetPage) {
        console.error(`switchPage Error: Element not found for pageId: ${pageId}`, { targetNav, targetPage });
        return;
    }

    // UI update
    document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
    targetNav.classList.add('active');
    
    document.querySelectorAll('.page-content').forEach(p => p.classList.add('hidden'));
    targetPage.classList.remove('hidden');
    
    document.getElementById('page-title').textContent = targetNav.querySelector('span').textContent;
    
    state.activePage = pageId;
    if (pageId === 'dashboard') refreshDashboard();
    if (pageId === 'automation') refreshRules();

    // Re-init icons for the new page
    if (window.lucide) lucide.createIcons();
}

// --- Event Listeners ---
function setupEventListeners() {
    document.getElementById('refresh-data')?.addEventListener('click', () => refreshDashboard(false));
    
    // Demo Mode Buttons
    document.querySelectorAll('.btn-demo').forEach(btn => {
        btn.onclick = () => refreshDashboard(true);
    });

    // Platform Filters
    document.querySelectorAll('.platform-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.platform-btn').forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            renderDynamicDashboard();
        });
    });

    document.getElementById('btn-connect-meta')?.addEventListener('click', async () => {
        const data = {
            name: document.getElementById('acc-name').value,
            adAccountId: document.getElementById('acc-id').value, // Fixed from externalAdAccountId
            accessToken: document.getElementById('acc-token').value,
            platform: 'meta'
        };
        
        try {
            await api.connectMeta(data);
            alert('تم ربط الحساب بنجاح!');
            switchPage('dashboard');
        } catch (err) {
            console.error(err);
            alert(`فشل الربط: ${err.message || 'خطأ غير معروف'}`);
        }
    });
    
    document.getElementById('btn-oauth-meta')?.addEventListener('click', () => {
        const userId = api.getCurrentUserId();
        if (!userId) {
            alert('يرجى اختيار مستخدم أولاً');
            return;
        }
        window.location.href = `${BASE_URL}/auth/meta?userId=${userId}`;
    });

    document.getElementById('btn-oauth-google')?.addEventListener('click', () => {
        const userId = api.getCurrentUserId();
        if (!userId) {
            alert('يرجى اختيار مستخدم أولاً');
            return;
        }
        window.location.href = `${BASE_URL}/auth/google?userId=${userId}`;
    });

    document.getElementById('btn-oauth-tiktok')?.addEventListener('click', () => {
        const userId = api.getCurrentUserId();
        if (!userId) {
            alert('يرجى اختيار مستخدم أولاً');
            return;
        }
        window.location.href = `${BASE_URL}/auth/tiktok?userId=${userId}`;
    });
} // Correct closing brace for setupEventListeners

// --- AI Lab Functions and Listeners ---

// 1. دالة التنسيق المخصصة (Zero-Dependency)
function formatGeminiText(text) {
    if (!text) return '';
    let html = text;

    // تنسيق العناوين (Headers)
    html = html.replace(/^### (.*$)/gim, '<h3 style="color: #60a5fa; margin-top: 20px; margin-bottom: 10px; font-weight: bold;">$1</h3>');
    html = html.replace(/^## (.*$)/gim, '<h2 style="color: #3b82f6; margin-top: 25px; margin-bottom: 15px; border-bottom: 1px solid #334155; padding-bottom: 8px; font-weight: bold;">$1</h2>');
    html = html.replace(/^# (.*$)/gim, '<h1 style="color: #fff; margin-bottom: 15px; font-weight: bold;">$1</h1>');
    
    // تنسيق الخط العريض (Bold)
    html = html.replace(/\*\*(.*?)\*\*/gim, '<strong style="color: #f8fafc; font-weight: 900;">$1</strong>');
    
    // تنسيق القوائم والنقاط (Lists)
    html = html.replace(/^\* (.*$)/gim, '<li style="margin-right: 25px; margin-bottom: 8px;">$1</li>');
    html = html.replace(/^- (.*$)/gim, '<li style="margin-right: 25px; margin-bottom: 8px;">$1</li>');
    
    // تنسيق الفواصل (Horizontal Rules)
    html = html.replace(/^---/gim, '<hr style="border: 0; border-top: 1px solid #334155; margin: 20px 0;">');
    
    // سطر جديد (Line Breaks) - هذا ما سيمنع تكتل النص ككتلة واحدة
    html = html.replace(/\n/gim, '<br>');

    return html;
}

// 2. زر التحليل
document.getElementById('btn-analyze-visual')?.addEventListener('click', async () => {
    const url = document.getElementById('ai-image-url')?.value;
    const copy = document.getElementById('ai-copy')?.value;
    const out = document.getElementById('ai-result-box');
    const btn = document.getElementById('btn-analyze-visual');
    const originalBtnText = btn?.innerHTML || 'تحليل التصميم بالذكاء الاصطناعي';

    console.log('--- AI Analysis Clicked ---');
    if (!url) {
        console.warn('Analysis aborted: No image URL provided.');
        if (out) out.innerHTML = '<p style="color:var(--danger); text-align:center; padding:1rem;">الرجاء إدخال رابط الصورة أولاً.</p>';
        return;
    }

    // Disable button and show loader | تعطيل الزر وإظهار مؤشر التحميل
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<i data-lucide="refresh-cw" class="spin"></i> جاري التحميل...';
    }

    if (out) {
        out.innerHTML = `
            <div style="text-align:center; padding: 2rem;">
                <i data-lucide="refresh-cw" class="spin" style="width:40px; height:40px; color:var(--accent);"></i>
                <p style="margin-top:1rem; color:var(--text-muted);">جاري تحليل التصميم واستخراج النتائج...</p>
            </div>
        `;
    }
    if (window.lucide) lucide.createIcons();
    
    console.log('Requesting analysis with:', { url, copy, metrics: state.activeMetrics, campaignId: state.activeCampaignId });
    
    try {
        const res = await api.analyzeVisual(url, copy, state.activeMetrics, state.activeCampaignId);
        console.log('Analysis Response Received:', res);
        let rawText = res.feedback || res || '';
        
        // 1. إصلاح مشكلة الأسطر (في حال كان السيرفر يرسلها كـ النص الحرفي \n)
        rawText = rawText.replace(/\\n/g, '\n');

        // 2. استيراد مكتبة marked برمجياً وبشكل ديناميكي (مضمونة 100% في الـ ES Modules)
        console.log('Importing marked...');
        const module = await import('https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js');
        
        // 3. تحويل النص (العناوين، القوائم، والجداول)
        const formattedHTML = module.marked.parse(rawText);
        
        // 4. عرض النتيجة مع CSS داخلي لتجميل الجداول والنصوص
        if (out) {
            out.innerHTML = `
                <style>
                    .markdown-ai { direction: rtl; text-align: right; line-height: 1.8; color: #cbd5e1; font-size: 15px; padding: 15px; }
                    .markdown-ai h2, .markdown-ai h3 { color: #60a5fa; margin-top: 25px; border-bottom: 1px solid #334155; padding-bottom: 8px; }
                    .markdown-ai p { margin-bottom: 15px; }
                    .markdown-ai strong { color: #fff; background: rgba(255,255,255,0.05); padding: 0 5px; border-radius: 4px; }
                    .markdown-ai table { width: 100%; border-collapse: collapse; margin-top: 15px; margin-bottom: 20px; }
                    .markdown-ai th, .markdown-ai td { border: 1px solid #334155; padding: 10px; text-align: right; }
                    .markdown-ai th { background-color: #1e293b; color: #60a5fa; }
                    .markdown-ai ul, .markdown-ai ol { padding-right: 25px; margin-bottom: 15px; }
                    .markdown-ai li { margin-bottom: 8px; }
                    .markdown-ai pre { 
                        background: #0f172a; 
                        border: 1px solid #334155; 
                        border-radius: 8px; 
                        padding: 15px; 
                        margin: 15px 0; 
                        overflow-x: auto; 
                        direction: ltr; 
                        text-align: left;
                        position: relative;
                    }
                    .markdown-ai code { 
                        font-family: 'Fira Code', 'Courier New', Courier, monospace; 
                        font-size: 14px; 
                        color: #e2e8f0;
                    }
                </style>
                <div class="markdown-ai">
                    ${formattedHTML}
                </div>
            `;
        }
        
    } catch (err) {
        console.error("Analysis Error:", err);
        if (out) {
            out.innerHTML = `
                <div class="error-placeholder" style="color:var(--danger); padding:2rem; text-align:center;">
                    <i data-lucide="alert-octagon" style="width:40px; height:40px;"></i>
                    <p>فشل التحليل. تأكد من الرابط أو حاول لاحقاً.</p>
                </div>
            `;
        }
    } finally {
        // Re-enable button and restore text | إعادة تفعيل الزر واستعادة النص
        if (btn) {
            btn.disabled = false;
            btn.innerHTML = originalBtnText;
            if (window.lucide) lucide.createIcons();
        }
    }
});

function clearAILab() {
    const urlInput = document.getElementById('ai-image-url');
    const copyInput = document.getElementById('ai-copy');
    const resultBox = document.getElementById('ai-result-box');
    
    state.activeCampaignId = null;
    state.activeMetrics = null;
    if (urlInput) urlInput.value = '';
    if (copyInput) copyInput.value = '';
    if (resultBox) {
        resultBox.innerHTML = `
            <div class="placeholder-text">
                <i data-lucide="brain-circuit"></i>
                التقرير سيظهر هنا بعد التحليل
            </div>
        `;
    }
    if (window.lucide) lucide.createIcons();
}

// Attach back button logic
document.getElementById('btn-back-to-dashboard')?.addEventListener('click', () => {
    console.log('Back button clicked! Navigation to dashboard started.');
    switchPage('dashboard');
});

function showErrorState(err) {
    const tableBody = document.querySelector('#campaign-table tbody');
    let message = 'حدث خطأ أثناء جلب البيانات';
    
    if (err.status === 502) {
        message = 'انتهت صلاحية الـ Access Token مع ميتـا. يرجى تجديده أو استخدام "وضع التجربة".';
    }

    tableBody.innerHTML = `
        <tr>
            <td colspan="6">
                <div class="error-placeholder glass-card" style="padding: 2rem; border: 1px dashed var(--danger);">
                    <i data-lucide="alert-circle" style="width: 48px; height: 48px; color: var(--danger); margin-bottom: 1rem;"></i>
                    <p style="color: var(--danger); font-weight: bold; margin-bottom: 1rem; font-size: 1.1rem;">${message}</p>
                    <div style="display: flex; gap: 1rem; justify-content: center;">
                        <button class="btn btn-primary" onclick="switchPage('connect')">
                            <i data-lucide="link"></i> ربط حساب جديد (Reconnect)
                        </button>
                        <button class="btn btn-demo">
                            <i data-lucide="play"></i> تشغيل وضع التجربة (Demo Mode)
                        </button>
                    </div>
                </div>
            </td>
        </tr>
    `;
    lucide.createIcons();
}

function hideErrorState() {
    // Reset handled by populateTable
}

function checkAuthRedirect() {
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.has('auth')) {
        const status = urlParams.get('auth');
        const platform = urlParams.get('platform');
        
        if (status === 'success') {
            alert(`تم ربط حساب ${platform} بنجاح!`);
            // Clean URL
            window.history.replaceState({}, document.title, window.location.pathname);
        } else if (status === 'failed') {
            alert('فشل عملية الربط، يرجى المحاولة مرة أخرى.');
            window.history.replaceState({}, document.title, window.location.pathname);
            switchPage('connect'); // Take them back to try again
        }
    }
}

// --- Automation Rules ---
async function refreshRules() {
    console.log('Refreshing automation rules...');
    const tbody = document.getElementById('rules-list-body');
    if (!tbody) return;

    try {
        const rules = await api.getRules();
        renderRules(rules);
    } catch (err) {
        console.error('Failed to fetch rules:', err);
        tbody.innerHTML = `<tr><td colspan="5" style="text-align: center; color: var(--danger);">فشل تحميل القواعد.</td></tr>`;
    }
}

function renderRules(rules) {
    const tbody = document.getElementById('rules-list-body');
    if (!tbody) return;

    if (!rules || rules.length === 0) {
        tbody.innerHTML = `<tr id="rules-empty-state"><td colspan="5" style="text-align: center; color: var(--text-dim); padding: 2rem;">لا توجد قواعد نشطة حالياً.</td></tr>`;
        return;
    }

    tbody.innerHTML = rules.map(rule => {
        const cond = rule.conditions[0] || { metric: '?', operator: '?', value: '?' };
        return `
            <tr>
                <td><strong>${rule.name}</strong></td>
                <td><span style="direction: ltr; display: inline-block;">${cond.metric.toUpperCase()} ${cond.operator} ${cond.value}</span></td>
                <td>${rule.action === 'notify' ? 'تنبيه' : 'إيقاف'}</td>
                <td><span class="status-badge ${rule.isActive ? '' : 'inactive'}">${rule.isActive ? 'نشط' : 'متوقف'}</span></td>
                <td style="text-align: left;">
                    <button class="btn-delete-rule" onclick="handleDeleteRule('${rule.id}')" title="حذف القاعدة">
                        <i data-lucide="trash-2" style="width: 16px; height: 16px;"></i>
                    </button>
                </td>
            </tr>
        `;
    }).join('');
    lucide.createIcons();
}

async function handleDeleteRule(id) {
    if (!confirm('هل أنت متأكد من رغبتك في حذف هذه القاعدة؟')) return;
    try {
        await api.deleteRule(id);
        await refreshRules();
    } catch (err) {
        alert('فشل في حذف القاعدة: ' + (err.message || 'خطأ غير معروف'));
    }
}
window.handleDeleteRule = handleDeleteRule;

function setupAutomationEvents() {
    const form = document.getElementById('rule-form');
    if (!form) return;

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const submitBtn = form.querySelector('button');
        
        const ruleData = {
            name: document.getElementById('rule-name').value,
            platform: 'meta',
            targetId: 'all',
            action: document.getElementById('rule-action').value,
            conditions: [
                {
                    metric: document.getElementById('rule-metric').value,
                    operator: document.getElementById('rule-operator').value,
                    value: parseFloat(document.getElementById('rule-value').value)
                }
            ],
            isActive: true
        };

        try {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i data-lucide="loader-2" class="spin"></i> جاري الحفظ...';
            lucide.createIcons();

            await api.createRule(ruleData);
            form.reset();
            await refreshRules();
            alert('تم إنشاء وتفعيل القاعدة بنجاح! 🚀');
        } catch (err) {
            console.error('Create rule failed:', err);
            alert('فشل حفظ القاعدة: ' + (err.message || 'تأكد من اختيار مستخدم وارتباط حساب إعلاني'));
        } finally {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'حفظ وتفعيل القاعدة';
            lucide.createIcons();
        }
    });
}