<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Master Control — CCSite Fleet</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <style>
        :root{--bg:#080812;--card:#12121f;--accent:#6c63ff;--accent2:#00d4aa;--text:#e0e0e0;--muted:#777;--danger:#ef4444;--success:#22c55e;--warning:#f59e0b;--radius:10px}
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
        header{background:var(--card);border-bottom:1px solid rgba(108,99,255,0.2);padding:0.8rem 2rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:100}
        header h1{font-size:1.1rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
        .tabs{display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,0.06);background:var(--card);padding:0 2rem}
        .tab{padding:0.7rem 1.3rem;cursor:pointer;font-size:0.8rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;transition:all 0.15s;text-transform:uppercase;letter-spacing:0.5px}
        .tab:hover{color:var(--text)}
        .tab.active{color:var(--accent);border-bottom-color:var(--accent)}
        .container{max-width:1500px;margin:0 auto;padding:1.5rem}
        .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0.75rem;margin-bottom:1.5rem}
        .stat-card{background:var(--card);padding:1rem;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.03);text-align:center}
        .stat-card .sv{font-size:1.4rem;font-weight:800;color:var(--accent2)}
        .stat-card .sl{font-size:0.6rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:0.15rem}
        .panel{display:none}.panel.active{display:block}
        table{width:100%;border-collapse:collapse;font-size:0.78rem}
        th,td{padding:0.45rem 0.6rem;text-align:left;border-bottom:1px solid rgba(255,255,255,0.04)}
        th{color:var(--muted);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.5px;position:sticky;top:0;background:var(--bg)}
        tr:hover{background:rgba(108,99,255,0.03)}
        .badge{padding:0.15rem 0.45rem;border-radius:10px;font-size:0.6rem;font-weight:700}
        .badge-ok{background:rgba(34,197,94,0.15);color:var(--success)}
        .badge-pending{background:rgba(245,158,11,0.15);color:var(--warning)}
        .badge-danger{background:rgba(239,68,68,0.15);color:var(--danger)}
        input,select{padding:0.45rem 0.7rem;border-radius:6px;border:1px solid rgba(255,255,255,0.08);background:var(--card);color:var(--text);font-size:0.78rem;outline:none}
        input:focus,select:focus{border-color:var(--accent)}
        .search-bar{display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap}
        .btn{padding:0.4rem 0.9rem;border-radius:6px;border:none;cursor:pointer;font-weight:600;font-size:0.75rem;background:var(--accent);color:#fff}
        .btn:hover{filter:brightness(1.15)}
        .table-wrap{max-height:60vh;overflow-y:auto;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.04)}
    </style>
</head>
<body>
    <header>
        <h1>🖥️ Master Control Panel</h1>
        <div style="font-size:0.7rem;color:var(--muted);"><a href="/" style="color:var(--accent);text-decoration:none;">← Dashboard</a> | <span id="clock">--</span></div>
    </header>
    <div class="tabs">
        <div class="tab active" onclick="switchTab('overview')">📊 Overview</div>
        <div class="tab" onclick="switchTab('orders')">📦 Orders</div>
        <div class="tab" onclick="switchTab('users')">👥 Users</div>
        <div class="tab" onclick="switchTab('products')">🏷️ Products</div>
        <div class="tab" onclick="switchTab('transactions')">💳 Transactions</div>
    </div>
    <div class="container">
        <div id="panel-overview" class="panel active">
            <div class="stat-row" id="overview-stats"></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
                <div style="background:var(--card);padding:1rem;border-radius:var(--radius);">
                    <h3 style="font-size:0.75rem;color:var(--muted);margin-bottom:0.8rem;">📦 Recent Orders</h3>
                    <div id="recent-orders"></div>
                </div>
                <div style="background:var(--card);padding:1rem;border-radius:var(--radius);">
                    <h3 style="font-size:0.75rem;color:var(--muted);margin-bottom:0.8rem;">👥 Recent Signups</h3>
                    <div id="recent-users"></div>
                </div>
            </div>
        </div>
        <div id="panel-orders" class="panel">
            <div class="search-bar">
                <input type="text" id="order-search" placeholder="Search orders..." oninput="renderOrders()">
                <select id="order-site" onchange="renderOrders()"><option value="">All Sites</option></select>
                <select id="order-status" onchange="renderOrders()"><option value="">All Status</option><option value="pending">Pending</option><option value="completed">Completed</option></select>
            </div>
            <div class="table-wrap"><table id="orders-table"><thead><tr><th>Site</th><th>Order</th><th>Product</th><th>Email</th><th>Amount</th><th>Status</th><th>Date</th></tr></thead><tbody></tbody></table></div>
        </div>
        <div id="panel-users" class="panel">
            <div class="search-bar">
                <input type="text" id="user-search" placeholder="Search users..." oninput="renderUsers()">
                <select id="user-site" onchange="renderUsers()"><option value="">All Sites</option></select>
            </div>
            <div class="table-wrap"><table id="users-table"><thead><tr><th>Site</th><th>User</th><th>Email</th><th>Balance</th><th>Orders</th><th>Joined</th></tr></thead><tbody></tbody></table></div>
        </div>
        <div id="panel-products" class="panel">
            <div class="search-bar">
                <input type="text" id="product-search" placeholder="Search products..." oninput="renderProducts()">
                <select id="product-site" onchange="renderProducts()"><option value="">All Sites</option></select>
            </div>
            <div class="table-wrap"><table id="products-table"><thead><tr><th>Site</th><th>Product</th><th>Category</th><th>Price</th><th>Stock</th></tr></thead><tbody></tbody></table></div>
        </div>
        <div id="panel-transactions" class="panel">
            <div class="search-bar">
                <input type="text" id="txn-search" placeholder="Search transactions..." oninput="renderTransactions()">
                <select id="txn-site" onchange="renderTransactions()"><option value="">All Sites</option></select>
            </div>
            <div class="table-wrap"><table id="txns-table"><thead><tr><th>Site</th><th>User</th><th>Type</th><th>Method</th><th>Amount</th><th>Date</th></tr></thead><tbody></tbody></table></div>
        </div>
    </div>

<script>
const SITE_IPS = {1:'10.30.20.210',2:'10.30.20.211',3:'10.30.20.212',4:'10.30.20.213',5:'10.30.20.214',6:'10.30.20.217',7:'10.30.20.218',8:'10.30.20.219',9:'10.30.20.220',10:'10.30.20.221'};
let ALL_DATA = {};

async function loadAll() {
    const promises = Object.entries(SITE_IPS).map(async ([id,ip]) => {
        try {
            const r = await fetch(`http://${ip}:5000/api/dashboard-data`);
            const d = await r.json();
            d._site_id = parseInt(id);
            d._ip = ip;
            return d;
        } catch(e) { return null; }
    });
    const results = await Promise.all(promises);
    ALL_DATA = results.filter(r => r);
    
    // Populate site dropdowns
    const siteOpts = ALL_DATA.map(d => `<option value="${d._site_id}">${d.site}</option>`).join('');
    ['order-site','user-site','product-site','txn-site'].forEach(id => {
        document.getElementById(id).innerHTML = '<option value="">All Sites</option>' + siteOpts;
    });
    
    updateOverview();
}

function updateOverview() {
    let totalOrders=0, totalUsers=0, totalRevenue=0, pendingOrders=0;
    ALL_DATA.forEach(d => {
        totalOrders += d.orders.length;
        totalUsers += d.users.length;
        totalRevenue += d.orders.filter(o=>o.status==='completed').reduce((s,o)=>s+o.amount,0);
        pendingOrders += d.orders.filter(o=>o.status==='pending').length;
    });
    
    document.getElementById('overview-stats').innerHTML = `
        <div class="stat-card"><div class="sv">${totalUsers}</div><div class="sl">Total Users</div></div>
        <div class="stat-card"><div class="sv">${totalOrders}</div><div class="sl">Total Orders</div></div>
        <div class="stat-card"><div class="sv">$${totalRevenue.toFixed(0)}</div><div class="sl">Revenue</div></div>
        <div class="stat-card"><div class="sv" style="color:var(--warning);">${pendingOrders}</div><div class="sl">Pending</div></div>
        <div class="stat-card"><div class="sv">${ALL_DATA.length}</div><div class="sl">Sites Online</div></div>
    `;
    
    // Recent orders
    const allOrders = ALL_DATA.flatMap(d => d.orders.map(o => ({...o, site:d.site, sid:d._site_id})));
    allOrders.sort((a,b) => b.date.localeCompare(a.date));
    document.getElementById('recent-orders').innerHTML = allOrders.slice(0,10).map(o => 
        `<div style="padding:0.3rem 0;border-bottom:1px solid rgba(255,255,255,0.03);font-size:0.75rem;">
            <span style="color:var(--accent);">${o.site}</span> · ${o.product?.slice(0,30)} · 
            <span style="color:var(--accent2);">$${o.amount?.toFixed(2)}</span>
            <span class="badge ${o.status==='completed'?'badge-ok':'badge-pending'}">${o.status}</span>
        </div>`
    ).join('') || '<div style="color:var(--muted);">No orders yet</div>';
    
    // Recent users
    const allUsers = ALL_DATA.flatMap(d => d.users.map(u => ({...u, site:d.site})));
    allUsers.sort((a,b) => b.joined.localeCompare(a.joined));
    document.getElementById('recent-users').innerHTML = allUsers.slice(0,10).map(u =>
        `<div style="padding:0.3rem 0;border-bottom:1px solid rgba(255,255,255,0.03);font-size:0.75rem;">
            <span style="color:var(--accent);">${u.site}</span> · ${u.username} · ${u.email}
        </div>`
    ).join('') || '<div style="color:var(--muted);">No users yet</div>';
}

function renderOrders() {
    const q = (document.getElementById('order-search').value||'').toLowerCase();
    const sid = parseInt(document.getElementById('order-site').value)||0;
    const status = document.getElementById('order-status').value;
    
    let orders = ALL_DATA.flatMap(d => d.orders.map(o => ({...o, site:d.site, sid:d._site_id})));
    if(sid) orders = orders.filter(o => o.sid===sid);
    if(status) orders = orders.filter(o => o.status===status);
    if(q) orders = orders.filter(o => (o.product+o.email+o.code).toLowerCase().includes(q));
    orders.sort((a,b) => b.date.localeCompare(a.date));
    
    document.getElementById('orders-table').querySelector('tbody').innerHTML = orders.slice(0,200).map(o =>
        `<tr>
            <td style="color:var(--accent);">${o.site}</td>
            <td>#${o.id} <span style="font-size:0.65rem;color:var(--muted);">${o.code||''}</span></td>
            <td>${o.product?.slice(0,35)}</td>
            <td>${o.email}</td>
            <td style="color:var(--accent2);">$${o.amount?.toFixed(2)}</td>
            <td><span class="badge ${o.status==='completed'?'badge-ok':'badge-pending'}">${o.status}</span></td>
            <td style="font-size:0.7rem;color:var(--muted);">${new Date(o.date).toLocaleDateString()}</td>
        </tr>`
    ).join('');
}

function renderUsers() {
    const q = (document.getElementById('user-search').value||'').toLowerCase();
    const sid = parseInt(document.getElementById('user-site').value)||0;
    let users = ALL_DATA.flatMap(d => d.users.map(u => ({...u, site:d.site, sid:d._site_id})));
    if(sid) users = users.filter(u => u.sid===sid);
    if(q) users = users.filter(u => (u.username+u.email).toLowerCase().includes(q));
    
    document.getElementById('users-table').querySelector('tbody').innerHTML = users.slice(0,200).map(u =>
        `<tr>
            <td style="color:var(--accent);">${u.site}</td>
            <td><strong>${u.username}</strong></td>
            <td>${u.email}</td>
            <td style="color:var(--accent2);">$${u.balance?.toFixed(2)}</td>
            <td>${u.orders}</td>
            <td style="font-size:0.7rem;color:var(--muted);">${new Date(u.joined).toLocaleDateString()}</td>
        </tr>`
    ).join('');
}

function renderProducts() {
    const q = (document.getElementById('product-search').value||'').toLowerCase();
    const sid = parseInt(document.getElementById('product-site').value)||0;
    let prods = ALL_DATA.flatMap(d => d.products.map(p => ({...p, site:d.site, sid:d._site_id})));
    if(sid) prods = prods.filter(p => p.sid===sid);
    if(q) prods = prods.filter(p => p.name.toLowerCase().includes(q));
    
    document.getElementById('products-table').querySelector('tbody').innerHTML = prods.slice(0,200).map(p =>
        `<tr>
            <td style="color:var(--accent);">${p.site}</td>
            <td>${p.name}</td>
            <td>${p.category}</td>
            <td style="color:var(--accent2);">$${p.price?.toFixed(2)}</td>
            <td>${p.stock}</td>
        </tr>`
    ).join('');
}

function renderTransactions() {
    const q = (document.getElementById('txn-search').value||'').toLowerCase();
    const sid = parseInt(document.getElementById('txn-site').value)||0;
    let txns = ALL_DATA.flatMap(d => d.transactions.map(t => ({...t, site:d.site, sid:d._site_id})));
    if(sid) txns = txns.filter(t => t.sid===sid);
    if(q) txns = txns.filter(t => (t.user+t.method).toLowerCase().includes(q));
    
    document.getElementById('txns-table').querySelector('tbody').innerHTML = txns.slice(0,200).map(t =>
        `<tr>
            <td style="color:var(--accent);">${t.site}</td>
            <td>${t.user}</td>
            <td><span class="badge ${t.type==='deposit'?'badge-ok':'badge-danger'}">${t.type}</span></td>
            <td>${t.method||'-'}</td>
            <td style="color:${t.amount>0?'var(--success)':'var(--danger)'};">${t.amount>0?'+':''}$${t.amount?.toFixed(2)}</td>
            <td style="font-size:0.7rem;color:var(--muted);">${new Date(t.date).toLocaleDateString()}</td>
        </tr>`
    ).join('');
}

function switchTab(tab) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
    const tabMap = {'overview':1,'orders':2,'users':3,'products':4,'transactions':5};
    document.querySelector('.tab:nth-child(' + tabMap[tab] + ')').classList.add('active');
    document.getElementById('panel-'+tab).classList.add('active');
    if(tab==='orders') renderOrders();
    if(tab==='users') renderUsers();
    if(tab==='products') renderProducts();
    if(tab==='transactions') renderTransactions();
}

setInterval(() => document.getElementById('clock').textContent = new Date().toLocaleTimeString(), 1000);
loadAll();
setInterval(loadAll, 30000);
</script>
</body>
</html>
