<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Somdex.tools - Somnia Trading Chart</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: #0d1421;
            color: #ffffff;
            line-height: 1.6;
            display: flex;
            min-height: 100vh;
        }

        .main-content {
            flex: 1;
            margin-left: 250px;
            padding: 20px;
        }

        .page-title {
            font-size: 28px;
            font-weight: 700;
            color: #00d4ff;
            margin-bottom: 30px;
        }

        .welcome-message {
            text-align: center;
            padding: 60px 20px 20px 20px;
            color: #a0aec0;
        }

        .welcome-message p {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .welcome-message p:first-child {
            color: #00d4ff;
            font-size: 24px;
            font-weight: 600;
        }

        .tokens-table-container {
            max-width: 1200px;
            margin: 0 auto;
            margin-top: 40px;
            background: #1a1f2e;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #2d3748;
        }

        .tokens-table-container h2 {
            color: #00d4ff;
            margin-bottom: 20px;
            font-size: 22px;
            font-weight: 600;
        }

        .tokens-table {
            width: 100%;
            border-collapse: collapse;
            background: #0d1421;
            border-radius: 8px;
            overflow: hidden;
        }

        .tokens-table th,
        .tokens-table td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #2d3748;
        }

        .tokens-table th {
            background: #1a1f2e;
            color: #00d4ff;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tokens-table td {
            color: #ffffff;
            font-size: 14px;
        }

        .tokens-table tbody tr:hover {
            background: #1a1f2e;
        }

        .token-symbol {
            font-weight: 600;
            color: #f1f1f1;
            cursor: pointer;
        }

        .token-symbol:hover {
            color: #00b3cc;
        }

        .price-positive {
            color: #48bb78;
        }

        .price-negative {
            color: #f56565;
        }

        .token-row-sponsored {
            border: 2px solid #00d4ff;
            box-shadow: 0 4px 12px rgba(0, 212, 255, 0.3);
            position: relative;
        }

        .token-row-sponsored .last-update::before {
            content: "⭐ SPONSORED";
            position: absolute;
            top: -10px;
            right: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .token-row-sponsored .token-symbol {
    
            font-weight: bold;
        }

        .token-row-sponsored:hover {
            background: linear-gradient(135deg, #00b3cc 0%, #0099aa 100%);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(0, 212, 255, 0.4);
        }

        .sidebar {
            width: 250px;
            background: #1a1f2e;
            border-right: 1px solid #2d3748;
            padding: 20px;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
        }

        .sidebar h3 {
            color: #00d4ff;
            margin-bottom: 20px;
            margin-top: 20px;
            font-size: 18px;
        }

        .token-list {
            list-style: none;
        }

        .token-item {
            position: relative;
            padding: 12px 16px;
            margin-bottom: 8px;
            background: #2d3748;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #f3f3f3;
        }

        .token-item:hover {
            background: #4a5568;
        }

        .token-item.active {
            background: #00d4ff;
            color: #ffffff;
        }

        .token-item-sponsored {
            border: 1px solid #00d4ff;
            box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
        }

        .token-name img, .token-name svg{
            width: 24px;
            height: 24px;
            margin-right: 5px;
            border-radius: 12px;
        }
        .token-item-sponsored .token-name {
            color: #ffffff !important;
            font-weight: bold;
        }
        .token-item-sponsored .token-name::before {
            content: "⭐ SPONSORED";
            position: absolute;
            top: -10px;
            right: -1px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
            padding: 2px 8px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .token-name {
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        .home-link {
            padding: 12px;
            margin-bottom: 8px;
            background: #2d3748;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #adadad;
        }
        .home-link.active {
            background: #2d3748;
            color: #fff !important;
        }
        .sidebar-logo strong{
            font-weight: 800;
        }    
        /* Responsive: Sidebar collapses to top bar on mobile */
        @media (max-width: 900px) {
            .main-content {
                flex: 1;
                margin-left: 0;
                padding: 20px;
            }
            body {
                flex-direction: column;
            }
            .sidebar {
                position: static;
                width: 100vw;
                height: auto;
                border-right: none;
                border-bottom: 1px solid #2d3748;
                padding: 10px 8px;
                display: flex;
                flex-direction: row;
                align-items: center;
                overflow-x: auto;
                gap: 10px;
                z-index: 10;
            }
            .sidebar h3 {
                margin: 0 12px 0 0;
                font-size: 15px;
            }
            .token-list {
                display: flex;
                flex-direction: row;
                gap: 8px;
                flex-wrap: wrap;
                margin: 0;        
                place-content: center;
            }
            .token-item {
                padding: 8px 10px;
                font-size: 13px;
                margin-bottom: 0;
            }
                  .tokens-table-container {
                padding: 6px;
            }
            .tokens-table {
                font-size: 12px;
            }
            .tokens-table th, .tokens-table td {
                padding: 8px 6px;
                font-size: 12px;
            }
        }
        @media (max-width: 600px) {
        
        .token-item-sponsored .token-name::before {
            font-size: 8px;
        }
            .sidebar {
                align-items: center;
                flex-direction: column; 
                gap: 0;
                padding: 6px 2px;
            }
            .token-list{
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .main-content {
                padding: 6px;
            }
            .container {
                padding: 0 2px;
            }
                   .tokens-table-container {
                padding: 2px;
            }
            .tokens-table {
                display: block;
                width: 100%;
                overflow-x: auto;
                border-radius: 8px;
            }
            .tokens-table thead, .tokens-table tbody, .tokens-table tr {
                display: block;
                width: 100%;
            }
            .tokens-table th, .tokens-table td {
                min-width: 120px;
                box-sizing: border-box;
                padding: 8px 4px;
                font-size: 11px;
                white-space: nowrap;
            }
            .tokens-table tr {
                display: flex;
                width: 100%;
            }
          
        }
    </style>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="sidebar">        
        <div class="sidebar-logo" style="display: flex; align-items: center; gap: 10px; margin-bottom: 24px;">
            <img src="/assets/img/Somdex.tools.svg" alt="Somdex Logo" style="height: 32px; width: 32px; object-fit: contain;">
            <span style="font-size: 24px; color: #fff;"><strong>Somdex</strong>.tools</span>
        </div>
        <div id="somiPriceBox" style="margin-bottom: 18px; color: #00d4ff; font-weight: bold; font-size: 16px; display: flex; align-items: center; gap: 8px;">
            <img src="/assets/img/somi.webp" alt="SOMI" style="width: 22px; height: 22px; border-radius: 11px;"> SOMI: <span id="sidebarSomiPrice">...</span>
        </div>
        <a href="/" class="home-link active" id="homeLink" style="display: block; text-decoration: none; font-size: 16px; font-weight: 500;">Home Page</a>
        <a href="/telegram-tools" class="home-link" id="tgTools" style="display: block;  text-decoration: none; font-size: 16px; font-weight: 500;">Telegram Tools</a>
        <h3>Tokens</h3>
        <ul class="token-list" id="tokenList">
        </ul>
    </div>

    <div class="main-content">
            <div class="welcome-message">
            <p>Welcome to Somnia Trading Chart (BETA)</p>
            <p>Select a token from the sidebar to view detailed information and trading data.</p>
                       <div style="display: flex; justify-content: center; gap: 12px; margin-top: 18px;">
                <button id="tokenListBtn" class="token-list-btn" style="background:#00d4ff; color:#181f2e; border:none; border-radius:8px; padding:10px 22px; font-size:16px; font-weight:600; cursor:pointer; transition:background 0.2s, color 0.2s;">+ Token List</button>
                <a href="https://t.me/somdextools" target="_blank" rel="noopener" id="telegramBtn" style="display: flex; align-items: center; gap: 6px; background: #2d3748; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s;">
                <i class="fa-brands fa-telegram"></i>
                    Telegram
                </a>
                <a href="https://x.com/somdextools" target="_blank" rel="noopener" id="XBTN" style="display: flex; align-items: center; gap: 6px; background: #2d3748; color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s;">
                <i class="fa-brands fa-x-twitter"></i> (Twitter)
                </a>
            </div>
    <script>
        // Add navigation for Token List button
        document.addEventListener('DOMContentLoaded', function() {
            // SOMI price fetch and update function
            async function updateSidebarSomiPrice() {
                try {
                    const response = await fetch('/api/somiprice', { cache: 'no-cache' });
                    const data = await response.json();
                    const somiprice = data.somiprice || '...';
                    document.getElementById('sidebarSomiPrice').textContent = '$' + parseFloat(somiprice).toFixed(6);
                } catch (e) {
                    document.getElementById('sidebarSomiPrice').textContent = '...';
                }
            }
            updateSidebarSomiPrice();
            setInterval(updateSidebarSomiPrice, 60000);
            var btn = document.getElementById('tokenListBtn');
            if (btn) {
                btn.onclick = function() {
                    window.location.href = '/token-list';
                };
            }
        });
    </script>
        </div>

        <div class="tokens-table-container">
    
            <table class="tokens-table">
                <thead>
                    <tr>
                        <th>Token</th>
                        <th>Current Price</th>
                        <th>Market Cap</th>
                        <th>Total Transactions</th>
                        <th>Total Volume</th>
                        <th>Last Update</th>
                    </tr>
                </thead>
                <tbody id="tokensTableBody">
                    <tr>
                        <td colspan="6">Loading tokens...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        async function loadTokens() {
            try {
                const response = await fetch("/api/tokens");
                const result = await response.json();

                if (result.success) {
                    // Update sidebar
                    updateSidebar(result.data);
                    
                    // Update table
                    await updateTokensTable(result.data);
                }
            } catch (error) {
                console.error("Failed to load tokens:", error);
                document.getElementById("tokensTableBody").innerHTML = `
                    <tr>
                        <td colspan="6" style="color: #f56565;">Failed to load tokens</td>
                    </tr>
                `;
            }
        }

        function updateSidebar(tokens) {
            const tokenList = document.getElementById("tokenList");
            tokenList.innerHTML = "";

            // Add token options to sidebar
            tokens.forEach((token, index) => {
                const li = document.createElement("li");
                li.className = "token-item";
                li.dataset.token = token.symbol;
                li.onclick = () => selectToken(token.symbol);


                const imageUrl = token.imageUrl || '';
                let imgHtml = '';
                if (imageUrl) {
                    imgHtml = `<img src="${imageUrl}" alt="${token.symbol} logo" onerror=\"this.style.display='none'\">`;
                } else {
                    imgHtml = `<svg width='24' height='24'><rect width='24' height='24' rx='12' fill='#00d4ff'/><text x='50%' y='55%' text-anchor='middle' fill='#181f2e' font-size='16' font-family: 'Inter', sans-serif; dy='.3em'>${token.symbol[0] || '?'}</text></svg>`;
                }

                // Add sponsored styling if sponsor > 0
                const sponsorValue = parseInt(token.sponsor || 0);
                if (sponsorValue > 0) {
                    li.classList.add("token-item-sponsored");
                    li.innerHTML = `
                        <div class="token-name">${imgHtml} ${token.symbol}</div>
                    `;
                } else {
                    li.innerHTML = `
                        <div class="token-name">${imgHtml} ${token.symbol}</div>
                    `;
                }

                tokenList.appendChild(li);
            });
        }

        async function updateTokensTable(tokens) {
            const tableBody = document.getElementById("tokensTableBody");
            tableBody.innerHTML = "";

            if (tokens.length === 0) {
                tableBody.innerHTML = `
                    <tr>
                        <td colspan="6">No active tokens found</td>
                    </tr>
                `;
                return;
            }

            // Create rows for each token
            const rows = await Promise.all(tokens.map(async (token) => {
                const row = document.createElement("tr");
                
                // Add sponsored class if sponsor > 0
                const sponsorValue = parseInt(token.sponsor || 0);
                if (sponsorValue > 0) {
                    row.classList.add("token-row-sponsored");
                }
                const price = parseFloat(token.current_price || 0);
                const priceText = price > 0 ? `$${formatPrice(price)}` : "N/A";
                
                // Format market cap
                const marketCap = parseFloat(token.market_cap || 0);
                const marketCapText = marketCap > 0 ? formatNumber(marketCap, "$") : "N/A";
                
                // Get stats for this token
                let totalTransactions = "Loading...";
                let totalVolume = "Loading...";
                
                try {
                    const statsResponse = await fetch(`/api/stats?token=${token.symbol}`);
                    const statsResult = await statsResponse.json();
                    
                    if (statsResult.success && statsResult.data) {
                        totalTransactions = statsResult.data.total_transactions || 0;
                        const buyVolume = statsResult.data.total_buy_volume || 0;
                        const sellVolume = statsResult.data.total_sell_volume || 0;
                        totalVolume = formatNumber(buyVolume + sellVolume, "$");
                    } else {
                        totalTransactions = "N/A";
                        totalVolume = "N/A";
                    }
                } catch (error) {
                    console.error(`Failed to load stats for ${token.symbol}:`, error);
                    totalTransactions = "Error";
                    totalVolume = "Error";
                }
                
                // Format last update
                let lastUpdateText = "Never";
                if (token.last_price_update) {
                    const updateDate = new Date(token.last_price_update);
                    const now = new Date();
                    const diffMs = now - updateDate;
                    const diffMins = Math.floor(diffMs / 60000);
                    
                    if (diffMins < 1) {
                        lastUpdateText = "Just now";
                    } else if (diffMins < 60) {
                        lastUpdateText = `${diffMins}m ago`;
                    } else if (diffMins < 1440) {
                        lastUpdateText = `${Math.floor(diffMins / 60)}h ago`;
                    } else {
                        lastUpdateText = updateDate.toLocaleDateString();
                    }
                }

                row.innerHTML = `
                    <td><span class="token-symbol" onclick="selectToken('${token.symbol}')">${token.symbol}</span></td>
                    <td>${priceText}</td>
                    <td>${marketCapText}</td>
                    <td>${totalTransactions}</td>
                    <td>${totalVolume}</td>
                    <td class="last-update">${lastUpdateText}</td>
                `;

                return row;
            }));

            // Add all rows to table
            rows.forEach(row => tableBody.appendChild(row));
        }

        function selectToken(tokenSymbol) {
            // Redirect to token detail page using new URL structure
            window.location.href = `/${tokenSymbol.toLowerCase()}`;
        }

        function formatNumber(num, prefix = "") {
            if (num >= 1000000000) {
                return `${prefix}${(num / 1000000000).toFixed(2)}B`;
            } else if (num >= 1000000) {
                return `${prefix}${(num / 1000000).toFixed(2)}M`;
            } else if (num >= 1000) {
                return `${prefix}${(num / 1000).toFixed(2)}K`;
            }
            return `${prefix}${num.toFixed(2)}`;
        }

        function formatPrice(price) {
            if (price < 0.0001) {
                return price.toFixed(8);
            } else if (price < 0.01) {
                return price.toFixed(6);
            } else if (price < 1) {
                return price.toFixed(4);
            } else {
                return price.toFixed(2);
            }
        }

        // Load tokens on page load
        loadTokens();

        // Check if we're on home page and set active style
        document.addEventListener('DOMContentLoaded', function() {
            const homeLink = document.getElementById('homeLink');
            if (window.location.pathname === '/' || window.location.pathname === '') {
                homeLink.classList.add('active');
            }
        });
    </script>
</body>
</html>