<?php
require_once 'config.php';
require_once 'classes/Security.php';

$pageTitle = 'Markets - CryptoExchange Pro | Live Cryptocurrency Prices & Trading Data';
$pageDescription = 'View live cryptocurrency prices, market data, trading volumes, and price charts. Track Bitcoin, Ethereum, and other digital assets in real-time.';

// Get market data
$db = new Database();
$db->query("SELECT * FROM cryptocurrencies WHERE is_active = 1 ORDER BY symbol");
$cryptocurrencies = $db->resultSet();

include 'includes/header.php';
?>

<main style="min-height: 100vh; background-color: var(--bg-secondary); padding: 40px 0;">
    <div class="container">
        <!-- Header -->
        <div class="mb-4">
            <h1 style="font-size: 2.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;">
                <i class="fas fa-chart-line" style="color: var(--primary-color); margin-right: 16px;"></i>Markets
            </h1>
            <p style="color: var(--text-secondary); font-size: 16px;">Live cryptocurrency prices and market data</p>
        </div>

        <!-- Market Stats -->
        <div class="row mb-4">
            <div class="col-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div style="color: var(--primary-color); font-size: 2rem; margin-bottom: 8px;">
                            <i class="fas fa-coins"></i>
                        </div>
                        <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 4px;"><?php echo count($cryptocurrencies); ?></h3>
                        <p style="color: var(--text-secondary); margin: 0;">Active Markets</p>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div style="color: var(--secondary-color); font-size: 2rem; margin-bottom: 8px;">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 4px;">$2.1T</h3>
                        <p style="color: var(--text-secondary); margin: 0;">Market Cap</p>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div style="color: var(--warning-color); font-size: 2rem; margin-bottom: 8px;">
                            <i class="fas fa-exchange-alt"></i>
                        </div>
                        <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 4px;">$89B</h3>
                        <p style="color: var(--text-secondary); margin: 0;">24h Volume</p>
                    </div>
                </div>
            </div>
            <div class="col-3">
                <div class="card">
                    <div class="card-body text-center">
                        <div style="color: var(--danger-color); font-size: 2rem; margin-bottom: 8px;">
                            <i class="fas fa-percentage"></i>
                        </div>
                        <h3 style="font-size: 2rem; font-weight: 700; margin-bottom: 4px;">54.2%</h3>
                        <p style="color: var(--text-secondary); margin: 0;">BTC Dominance</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Market Table -->
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                        <i class="fas fa-list" style="color: var(--primary-color); margin-right: 8px;"></i>
                        Cryptocurrency Markets
                    </h2>
                    <div class="d-flex align-items-center gap-2">
                        <button class="btn btn-outline-primary btn-sm" onclick="refreshPrices()">
                            <i class="fas fa-sync-alt"></i> Refresh
                        </button>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <span style="width: 8px; height: 8px; background-color: var(--secondary-color); border-radius: 50%; display: inline-block;"></span>
                            <span style="font-size: 12px; color: var(--text-secondary);">Live</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body" style="padding: 0;">
                <div style="overflow-x: auto;">
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th style="min-width: 200px;">Name</th>
                                <th style="text-align: right;">Price</th>
                                <th style="text-align: right;">24h Change</th>
                                <th style="text-align: right;">24h Volume</th>
                                <th style="text-align: right;">Market Cap</th>
                                <th style="text-align: center; width: 120px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($cryptocurrencies as $index => $crypto): ?>
                            <tr>
                                <td style="font-weight: 600; color: var(--text-secondary);"><?php echo $index + 1; ?></td>
                                <td>
                                    <div class="trading-pair">
                                        <div class="crypto-icon" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));">
                                            <?php echo substr($crypto['symbol'], 0, 1); ?>
                                        </div>
                                        <div>
                                            <div style="font-weight: 600; color: var(--text-primary);"><?php echo $crypto['symbol']; ?></div>
                                            <div style="font-size: 12px; color: var(--text-secondary);"><?php echo $crypto['name']; ?></div>
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align: right;">
                                    <div style="font-weight: 600; color: var(--text-primary);" id="price-<?php echo $crypto['symbol']; ?>">
                                        $<?php echo number_format($crypto['current_price'], $crypto['current_price'] < 1 ? 6 : 2); ?>
                                    </div>
                                </td>
                                <td style="text-align: right;">
                                    <?php 
                                    $change = (rand(-1000, 1000) / 100); // Simulate price change
                                    $changeClass = $change >= 0 ? 'price-change-positive' : 'price-change-negative';
                                    $changeIcon = $change >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
                                    ?>
                                    <div class="<?php echo $changeClass; ?>" style="font-weight: 600;">
                                        <i class="fas <?php echo $changeIcon; ?>" style="font-size: 10px; margin-right: 4px;"></i>
                                        <?php echo ($change >= 0 ? '+' : '') . number_format($change, 2); ?>%
                                    </div>
                                </td>
                                <td style="text-align: right;">
                                    <div style="font-weight: 500; color: var(--text-primary);">
                                        $<?php echo number_format(rand(1000000, 100000000)); ?>
                                    </div>
                                </td>
                                <td style="text-align: right;">
                                    <div style="font-weight: 500; color: var(--text-primary);">
                                        $<?php echo number_format(rand(1000000000, 100000000000)); ?>
                                    </div>
                                </td>
                                <td style="text-align: center;">
                                    <div class="d-flex justify-content-center gap-1">
                                        <a href="trading.php?crypto=<?php echo $crypto['id']; ?>" class="btn btn-primary btn-sm">
                                            <i class="fas fa-exchange-alt"></i>
                                        </a>
                                        <button class="btn btn-outline-primary btn-sm" onclick="viewChart('<?php echo $crypto['symbol']; ?>')">
                                            <i class="fas fa-chart-line"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Market Analysis -->
        <div class="row mt-4">
            <div class="col-8">
                <div class="card">
                    <div class="card-header">
                        <h3 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                            <i class="fas fa-chart-area" style="color: var(--primary-color); margin-right: 8px;"></i>
                            Market Overview
                        </h3>
                    </div>
                    <div class="card-body">
                        <div style="height: 300px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border-radius: var(--border-radius);">
                            <div style="text-align: center;">
                                <i class="fas fa-chart-line" style="font-size: 3rem; color: var(--text-secondary); margin-bottom: 16px;"></i>
                                <h4 style="color: var(--text-secondary); margin-bottom: 8px;">Market Chart</h4>
                                <p style="color: var(--text-secondary); margin: 0;">Interactive price charts coming soon</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-header">
                        <h3 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                            <i class="fas fa-fire" style="color: var(--danger-color); margin-right: 8px;"></i>
                            Trending
                        </h3>
                    </div>
                    <div class="card-body">
                        <div style="display: flex; flex-direction: column; gap: 16px;">
                            <?php 
                            $trending = array_slice($cryptocurrencies, 0, 5);
                            foreach ($trending as $crypto): 
                            ?>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="trading-pair">
                                    <div class="crypto-icon" style="background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); width: 24px; height: 24px; font-size: 10px;">
                                        <?php echo substr($crypto['symbol'], 0, 1); ?>
                                    </div>
                                    <div>
                                        <div style="font-weight: 600; color: var(--text-primary); font-size: 14px;"><?php echo $crypto['symbol']; ?></div>
                                    </div>
                                </div>
                                <div style="text-align: right;">
                                    <div style="font-weight: 600; color: var(--text-primary); font-size: 14px;">
                                        $<?php echo number_format($crypto['current_price'], 2); ?>
                                    </div>
                                    <div class="price-change-positive" style="font-size: 12px;">
                                        +<?php echo number_format(rand(1, 15), 2); ?>%
                                    </div>
                                </div>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h3 style="margin: 0; font-size: 1.25rem; font-weight: 600;">
                            <i class="fas fa-newspaper" style="color: var(--warning-color); margin-right: 8px;"></i>
                            Market News
                        </h3>
                    </div>
                    <div class="card-body">
                        <div style="display: flex; flex-direction: column; gap: 16px;">
                            <div style="padding-bottom: 16px; border-bottom: 1px solid var(--border-color);">
                                <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary);">Bitcoin Reaches New Monthly High</h4>
                                <p style="font-size: 12px; color: var(--text-secondary); margin: 0;">Institutional adoption continues to drive BTC price momentum...</p>
                            </div>
                            <div style="padding-bottom: 16px; border-bottom: 1px solid var(--border-color);">
                                <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary);">Ethereum 2.0 Staking Rewards</h4>
                                <p style="font-size: 12px; color: var(--text-secondary); margin: 0;">New staking mechanisms show promising returns for validators...</p>
                            </div>
                            <div>
                                <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text-primary);">Regulatory Updates</h4>
                                <p style="font-size: 12px; color: var(--text-secondary); margin: 0;">Latest developments in cryptocurrency regulation worldwide...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
// Price update functionality
async function refreshPrices() {
    try {
        const response = await fetch('api/prices.php');
        const data = await response.json();
        
        if (data.success) {
            data.prices.forEach(price => {
                const priceElement = document.getElementById(`price-${price.symbol}`);
                if (priceElement) {
                    const oldPrice = parseFloat(priceElement.textContent.replace('$', '').replace(',', ''));
                    const newPrice = parseFloat(price.current_price);
                    
                    // Update price
                    priceElement.textContent = '$' + newPrice.toLocaleString(undefined, {
                        minimumFractionDigits: newPrice < 1 ? 6 : 2,
                        maximumFractionDigits: newPrice < 1 ? 6 : 2
                    });
                    
                    // Add flash animation
                    priceElement.style.backgroundColor = newPrice > oldPrice ? 'rgba(52, 168, 83, 0.2)' : 'rgba(234, 67, 53, 0.2)';
                    setTimeout(() => {
                        priceElement.style.backgroundColor = 'transparent';
                    }, 1000);
                }
            });
        }
    } catch (error) {
        console.error('Price update error:', error);
    }
}

function viewChart(symbol) {
    alert(`Chart for ${symbol} - Coming soon with advanced trading features!`);
}

// Auto-refresh prices every 30 seconds
setInterval(refreshPrices, 30000);

// Initial price update
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(refreshPrices, 1000);
});
</script>

<?php include 'includes/footer.php'; ?>