{% extends "dashboard/layout.html" %}

{% block title %}Mycelium Dashboard - Credits Pools{% endblock %}

{% block dashboard_content %}
<div class="my-4">
    <h1>Credits Pools</h1>
    <p class="lead">Exchange currencies and tokens through Mycelium liquidity pools</p>


    <!-- Liquidity Pools Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="dashboard-section">
                <h3>Available Liquidity Pools</h3>
                <p>Exchange between different currencies and tokens through our liquidity pools</p>
                
                <div class="row">
                    <div class="col-md-4 mb-4">
                        <div class="card h-100" data-pool-id="credits-fiat">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">Credits - Fiat Pool</h5>
                            </div>
                            <div class="card-body">
                                <p class="card-text">Purchase Credits with fiat currencies (USD, EUR, etc.) at the fixed rate of 1 USD per Credit.</p>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Exchange rate:</span>
                                    <span class="fw-bold exchange-rate">1 USD = 0.85 EUR</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Pool liquidity:</span>
                                    <span class="fw-bold liquidity">125,000 USD</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Min transaction:</span>
                                    <span class="fw-bold">$10</span>
                                </div>
                                <div class="d-grid gap-2">
                                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#buyCreditsModal">Buy Credits</button>
                                    <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#sellCreditsModal">Sell Credits</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4 mb-4">
                        <div class="card h-100" data-pool-id="credits-tft">
                            <div class="card-header bg-success text-white">
                                <h5 class="mb-0">Credits - TFT Pool</h5>
                            </div>
                            <div class="card-body">
                                <p class="card-text">Exchange between USD Credits and Mycelium Tokens (TFT).</p>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Current rate:</span>
                                    <span class="fw-bold exchange-rate">1 USD ≈ 5 TFT</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Pool liquidity:</span>
                                    <span class="fw-bold liquidity">25,000 USD / 125,000 TFT</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Min transaction:</span>
                                    <span class="fw-bold">$10 / 50 TFT</span>
                                </div>
                                <div class="d-grid gap-2">
                                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#buyCreditsWithTFTModal">Buy Credits</button>
                                    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#sellCreditsForTFTModal">Sell Credits</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4 mb-4">
                        <div class="card h-100" data-pool-id="credits-peaq">
                            <div class="card-header bg-info text-white">
                                <h5 class="mb-0">Credits - PEAQ Pool</h5>
                            </div>
                            <div class="card-body">
                                <p class="card-text">Exchange between USD Credits and PEAQ tokens for the Peaq Network.</p>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Current rate:</span>
                                    <span class="fw-bold exchange-rate">1 USD ≈ 20 PEAQ</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Pool liquidity:</span>
                                    <span class="fw-bold liquidity">10,000 USD / 200,000 PEAQ</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <span class="text-muted">Min transaction:</span>
                                    <span class="fw-bold">$10 / 200 PEAQ</span>
                                </div>
                                <div class="d-grid gap-2">
                                    <button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#buyCreditsWithPEAQModal">Buy Credits</button>
                                    <button class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#sellCreditsForPEAQModal">Sell Credits</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Staking Section -->
    <div class="row mt-4" id="staking">
        <div class="col-12">
            <div class="dashboard-section">
                <h3>Credits Staking</h3>
                <p>Stake your Credits to earn discounts and increase your reputation in the Mycelium ecosystem</p>
                
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Your Staking Status</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <h6 class="text-muted">Currently Staked</h6>
                                        <h3 class="mb-0">$25</h3>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <h6 class="text-muted">Lock Period</h6>
                                        <h3 class="mb-0">3 months</h3>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <h6 class="text-muted">Discount Level</h6>
                                        <h3 class="mb-0">5%</h3>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <h6 class="text-muted">Reputation Bonus</h6>
                                        <h3 class="mb-0">+25 points</h3>
                                    </div>
                                    <div class="col-12 mt-2">
                                        <div class="d-grid">
                                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#stakeCreditsModal">
                                                <i class="bi bi-plus-circle me-2"></i> Stake Credits
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Staking Benefits</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Staked Amount</th>
                                                <th>Discount</th>
                                                <th>Reputation</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>$10-50</td>
                                                <td>5%</td>
                                                <td>+25 points</td>
                                            </tr>
                                            <tr>
                                                <td>$51-100</td>
                                                <td>10%</td>
                                                <td>+50 points</td>
                                            </tr>
                                            <tr>
                                                <td>$101-500</td>
                                                <td>15%</td>
                                                <td>+100 points</td>
                                            </tr>
                                            <tr>
                                                <td>$501+</td>
                                                <td>20%</td>
                                                <td>+200 points</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics Section -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="dashboard-section">
                <h3>Credits Analytics</h3>
                <p>Key metrics and historical data for Credits pools and exchanges</p>
                
                <div class="row">
                    <div class="col-lg-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="mb-0">Credits Exchange History</h5>
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">
                                <canvas id="creditsPriceHistoryChart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="mb-0">Liquidity Pool Distribution</h5>
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">
                                <canvas id="liquidityPoolDistributionChart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="mb-0">Exchange Volume (Last 30 Days)</h5>
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">
                                <canvas id="exchangeVolumeChart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-4">
                        <div class="card h-100">
                            <div class="card-header">
                                <h5 class="mb-0">Staking Distribution</h5>
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">
                                <canvas id="stakingDistributionChart" width="400" height="300"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Buy MC Credits Modal -->
    <div class="modal fade" id="buyCreditsModal" tabindex="-1" aria-labelledby="buyCreditsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="buyCreditsModalLabel">Buy USD Credits</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="creditsAmount" class="form-label">Amount of Credits to purchase</label>
                            <input type="number" class="form-control" id="creditsAmount" min="10" value="100">
                        </div>
                        <div class="mb-3">
                            <label for="paymentCurrency" class="form-label">Payment Currency</label>
                            <select class="form-select" id="paymentCurrency">
                                <option value="USD" selected>USD</option>
                                <option value="EUR">EUR</option>
                                <option value="AED">AED</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="paymentMethod" class="form-label">Payment Method</label>
                            <select class="form-select" id="paymentMethod">
                                <option value="card" selected>Credit/Debit Card</option>
                                <option value="bank">Bank Transfer</option>
                                <option value="crypto">Cryptocurrency</option>
                            </select>
                        </div>
                        <div class="alert alert-info">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-info-circle-fill me-2 fs-4"></i>
                                <div>
                                    <strong>Exchange Rate:</strong> 1 Credit = $1.00
                                    <hr class="my-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Amount:</span>
                                        <span class="text-end">$100</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>Cost:</span>
                                        <span class="text-end">10.00 USD</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" data-action="confirm-buy-credits-fiat">Confirm Purchase</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Sell MC Credits Modal -->
    <div class="modal fade" id="sellCreditsModal" tabindex="-1" aria-labelledby="sellCreditsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="sellCreditsModalLabel">Sell USD Credits</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="sellCreditsAmount" class="form-label">Amount of Credits to sell</label>
                            <input type="number" class="form-control" id="sellCreditsAmount" min="10" max="125" value="100">
                            <div class="form-text">Maximum available: $125</div>
                        </div>
                        <div class="mb-3">
                            <label for="receiveCurrency" class="form-label">Receive Currency</label>
                            <select class="form-select" id="receiveCurrency">
                                <option value="USD" selected>USD</option>
                                <option value="EUR">EUR</option>
                                <option value="AED">AED</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="payoutMethod" class="form-label">Payout Method</label>
                            <select class="form-select" id="payoutMethod">
                                <option value="bank" selected>Bank Transfer</option>
                                <option value="card">Card Refund</option>
                                <option value="crypto">Cryptocurrency</option>
                            </select>
                        </div>
                        <div class="alert alert-info">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-info-circle-fill me-2 fs-4"></i>
                                <div>
                                    <strong>Exchange Rate:</strong> 1 Credit = $1.00
                                    <hr class="my-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Amount:</span>
                                        <span class="text-end">$100</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>You receive:</span>
                                        <span class="text-end">10.00 USD</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" data-action="confirm-sell-credits-fiat">Confirm Sale</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Stake MC Credits Modal -->
    <div class="modal fade" id="stakeCreditsModal" tabindex="-1" aria-labelledby="stakeCreditsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="stakeCreditsModalLabel">Stake USD Credits</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="stakeAmount" class="form-label">Amount to stake</label>
                            <input type="number" class="form-control" id="stakeAmount" min="100" max="1000" value="500">
                            <div class="form-text">Available balance: $100</div>
                        </div>
                        <div class="mb-3">
                            <label for="stakeDuration" class="form-label">Lock period</label>
                            <select class="form-select" id="stakeDuration">
                                <option value="1">1 Month</option>
                                <option value="3" selected>3 Months</option>
                                <option value="6">6 Months</option>
                                <option value="12">12 Months</option>
                            </select>
                        </div>
                        <div class="alert alert-success">
                            <div class="d-flex">
                                <i class="bi bi-check-circle me-2 fs-4"></i>
                                <div>
                                    <strong>Staking Benefits:</strong>
                                    <ul class="mb-0 ps-3">
                                        <li>10% discount on all marketplace purchases</li>
                                        <li>+50 reputation points</li>
                                        <li>Priority access to new resources</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" data-action="confirm-stake-credits">Confirm Staking</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Buy MC Credits with TFT Modal -->
    <div class="modal fade" id="buyMCWithTFTModal" tabindex="-1" aria-labelledby="buyMCWithTFTModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="buyMCWithTFTModalLabel">Buy Mycelium Credits (MC) with TFT</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="tfcAmountTFT" class="form-label">Amount of MC Credits to purchase</label>
                            <input type="number" class="form-control" id="tfpAmountTFT" min="10" value="100">
                        </div>
                        <div class="alert alert-info">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-info-circle-fill me-2 fs-4"></i>
                                <div>
                                    <strong>Exchange Rate:</strong> 1 MC = 0.5 TFT
                                    <hr class="my-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Amount:</span>
                                        <span class="text-end">100 MC</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>Cost:</span>
                                        <span class="text-end">50 TFT</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" data-action="confirm-buy-tfc-tft">Confirm Purchase</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Sell MC Credits for TFT Modal -->
    <div class="modal fade" id="sellMCForTFTModal" tabindex="-1" aria-labelledby="sellMCForTFTModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="sellMCForTFTModalLabel">Sell Mycelium Credits (MC) for TFT</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="sellTfcAmountTFT" class="form-label">Amount of MC Credits to sell</label>
                            <input type="number" class="form-control" id="sellTfpAmountTFT" min="10" max="1250" value="100">
                            <div class="form-text">Maximum available: 1,250 MC</div>
                        </div>
                        <div class="alert alert-info">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-info-circle-fill me-2 fs-4"></i>
                                <div>
                                    <strong>Exchange Rate:</strong> 1 MC = 0.5 TFT
                                    <hr class="my-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Amount:</span>
                                        <span class="text-end">100 MC</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>You receive:</span>
                                        <span class="text-end">50 TFT</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" data-action="confirm-sell-tfc-tft">Confirm Sale</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Buy MC Credits with PEAQ Modal -->
    <div class="modal fade" id="buyMCWithPEAQModal" tabindex="-1" aria-labelledby="buyMCWithPEAQModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title" id="buyMCWithPEAQModalLabel">Buy Mycelium Credits (MC) with PEAQ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="tfcAmountPEAQ" class="form-label">Amount of MC Credits to purchase</label>
                            <input type="number" class="form-control" id="tfpAmountPEAQ" min="10" value="100">
                        </div>
                        <div class="alert alert-info">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-info-circle-fill me-2 fs-4"></i>
                                <div>
                                    <strong>Exchange Rate:</strong> 1 MC = 2 PEAQ
                                    <hr class="my-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Amount:</span>
                                        <span class="text-end">100 MC</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>Cost:</span>
                                        <span class="text-end">200 PEAQ</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-info" data-action="confirm-buy-tfc-peaq">Confirm Purchase</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Sell MC Credits for PEAQ Modal -->
    <div class="modal fade" id="sellMCForPEAQModal" tabindex="-1" aria-labelledby="sellMCForPEAQModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title" id="sellMCForPEAQModalLabel">Sell Mycelium Credits (MC) for PEAQ</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="sellTfcAmountPEAQ" class="form-label">Amount of MC Credits to sell</label>
                            <input type="number" class="form-control" id="sellTfpAmountPEAQ" min="10" max="1250" value="100">
                            <div class="form-text">Maximum available: 1,250 MC</div>
                        </div>
                        <div class="alert alert-info">
                            <div class="d-flex align-items-center">
                                <i class="bi bi-info-circle-fill me-2 fs-4"></i>
                                <div>
                                    <strong>Exchange Rate:</strong> 1 MC = 2 PEAQ
                                    <hr class="my-2">
                                    <div class="d-flex justify-content-between">
                                        <span>Amount:</span>
                                        <span class="text-end">100 MC</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>You receive:</span>
                                        <span class="text-end">200 PEAQ</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-info" data-action="confirm-sell-tfc-peaq">Confirm Sale</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Container for Success Messages -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-success text-white">
                <i class="bi bi-check-circle-fill me-2"></i>
                <strong class="me-auto">Success</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="successToastBody">
                Operation completed successfully!
            </div>
        </div>
        
        <div id="errorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-danger text-white">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <strong class="me-auto">Error</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="errorToastBody">
                An error occurred!
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<style>
    /* Ensure charts have consistent sizes */
    .card.h-100 {
        height: 400px !important;
    }
    
    .card-body {
        height: 340px;
    }
</style>
<script type="application/json" id="pools-hydration">
{
  "charts": true
}
</script>
<script src="/static/js/dashboard_pools.js"></script>
{% endblock %}