#!/usr/bin/env python3
import cgi, sys
sys.path.insert(0, '/opt/ngon/apps')
from managers.auth_manager import AuthManager, generate_login_page_html

_form = cgi.FieldStorage()
_auth = AuthManager('performance_30')
_auth_required, _should_exit, _headers = _auth.require_auth(_form)

if _should_exit:
    print("Content-Type: application/json")
    if _headers:
        print(_headers)
    print("")
    if _auth_required:
        print('{"success": false, "error": "Authentication required"}')
    else:
        print('{"success": true}')
    sys.exit(0)

if _auth_required:
    print("Content-Type: text/html")
    print("")
    print(generate_login_page_html("Performance 30-Day"))
    sys.exit(0)


import json
import sys
import os

# Import the performance data functions directly
sys.path.append(os.path.dirname(os.path.abspath(__file__)))
from performance_data_cgi import get_performance_data

# Generate HTML content with inline data for the charts
def print_html():
    # Get data directly from function for 30 days
    api_response = get_performance_data(30)
    if not api_response or not api_response.get('success'):
        print("Content-Type: text/html\n")
        print("<html><body><h1>Error loading performance data</h1></body></html>")
        return
    
    data = api_response['data']
    days = data.get('days', 30)

    print("Content-Type: text/html\n")
    print(f"""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="refresh" content="300">
        <title>Performance Monitoring ({days} Days)</title>
        <link rel="stylesheet" href="styles.css">  <!-- Link to your existing styles -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    </head>
    <body>

        <h1>Performance Monitoring ({days} Days)</h1>

        <!-- Bar chart for total current hashrate -->
        <div>
            <canvas id="totalHashrateBar"></canvas>
        </div>

        <!-- Container for total hashrate chart -->
        <div class="chart-container">
            <canvas id="totalHashrateLineChart"></canvas>
        </div>

        <!-- Container for individual containers chart -->
        <div class="chart-container">
            <canvas id="containerLineChart"></canvas>
        </div>

        <!-- List of current container hashrates displayed in a grid, grouped by site -->
        <div class="hashrate-grid-container">
            <div class="hashrate-grid" id="containerHashrateList"></div>
        </div>

        <!-- Regional pool hashrates (post-2026-08-01 two-worker cutover) -->
        <h2 style="text-align: center; color: #e0e0e0;">Current Pool Hashrates</h2>
        <div class="hashrate-grid-container">
            <div class="hashrate-grid" id="poolHashrateList"></div>
        </div>

        <script>
            const totalHashrateCurrent = {data['total_hashrate_current']};
            const maxPH = {data['max_ph']};
            const containersHashrateCurrent = {json.dumps(data['containers_hashrate_current'])};
            const containersHashrate30d = {json.dumps(data['containers_hashrate_30d'])};
            const totalHashrate30d = {json.dumps(data['total_hashrate_30d'])};
            const maxPotentialHashrate = {json.dumps(data['max_potential_hashrate'])};
            const poolRegional = {json.dumps(data['pool_regional'])};
            const days = {days};


            // Function to format ISO time strings to just the date (YYYY-MM-DD)
            function formatDate(isoString) {{
                const date = new Date(isoString);
                return date.toISOString().split('T')[0];  // Returns just the date part (YYYY-MM-DD)
            }}

            // Render the total current hashrate bar chart
            const totalHashrateCtx = document.getElementById('totalHashrateBar').getContext('2d');
            new Chart(totalHashrateCtx, {{
                type: 'bar',
                data: {{
                    labels: [''],
                    datasets: [{{
                        label: '',
                        data: [totalHashrateCurrent],
                        backgroundColor: ['rgba(255, 102, 0, 0.2)'],
                        borderColor: ['rgba(255, 102, 0, 1)'],
                        borderWidth: 1
                    }}]
                }},
                options: {{
                    indexAxis: 'y',
                    scales: {{
                        x: {{
                            min: 0,
                            max: maxPH
                        }}
                    }},
                    plugins: {{
                        legend: {{ display: false }}
                    }},
                    maintainAspectRatio: false
                }}
            }});

            // Render individual container hashrates grouped by site in a grid layout
            // Site cards are ours-only: after the 2026-08-01 two-worker cutover the
            // pool only knows ND vs TX, so pool hashrate lives in its own grid below.
            const containerList = document.getElementById('containerHashrateList');
            Object.keys(containersHashrateCurrent).sort().forEach(site => {{
                const hashrate = containersHashrateCurrent[site] || 0;
                const maxPotential = maxPotentialHashrate[site] || 0; // Get max potential hashrate for the site or default to 0

                const siteContainer = document.createElement('div');
                siteContainer.className = 'site-group';
                siteContainer.innerHTML = `
                    <h3 style="text-align: center;">${{site}} 
                    <br>(${{maxPotential.toFixed(2)}})<br></h3>
                    <span class="hashrate-value">${{hashrate.toFixed(2)}} PH</span>`;
                containerList.appendChild(siteContainer);
            }});

            // One card per Foundry regional sub-account (ND / TX) with our own
            // measured hashrate alongside, plus a roll-up of the retired per-site
            // sub-accounts that stubborn miners are still hashing into.
            const poolList = document.getElementById('poolHashrateList');
            (poolRegional.regions || []).forEach(region => {{
                const oursPh = region.ours_ph || 0;
                let deltaHtml = '';
                if (oursPh > 0 && region.ok) {{
                    const deltaPct = ((region.ph - oursPh) / oursPh) * 100;
                    const color = Math.abs(deltaPct) > 5 ? '#ffaa00' : '#888';
                    deltaHtml = `<span style="color:${{color}};font-size:11px;">${{deltaPct >= 0 ? '+' : ''}}${{deltaPct.toFixed(1)}}% vs ours</span><br>`;
                }}
                const el = document.createElement('div');
                el.className = 'site-group';
                el.innerHTML = `
                    <h3 style="text-align: center;">${{region.region}} Pool
                    <br>(${{region.workers.toLocaleString()}} workers)<br></h3>
                    <span class="hashrate-value">${{region.ok ? region.ph.toFixed(2) + ' PH' : 'unavailable'}}</span><br>
                    <span class="pool-hashrate">Ours: ${{oursPh.toFixed(2)}} PH</span><br>
                    ${{deltaHtml}}`;
                poolList.appendChild(el);
            }});

            // Stragglers that never took the regional pool config — should trend to zero.
            const legacy = poolRegional.legacy || {{ ph: 0, workers: 0, accounts: [] }};
            const legacyBreakdown = (legacy.accounts || []).length
                ? legacy.accounts.map(a => `${{a.label}}: ${{a.ph.toFixed(2)}} PH (${{a.workers}})`).join('<br>')
                : 'All miners on regional workers';
            const legacyEl = document.createElement('div');
            legacyEl.className = 'site-group';
            legacyEl.innerHTML = `
                <h3 style="text-align: center;">Other Subaccounts
                <br>(${{legacy.workers.toLocaleString()}} workers)<br></h3>
                <span class="hashrate-value" style="color:${{(legacy.ph > 0 || legacy.workers > 0) ? '#ffaa00' : '#888'}};">${{legacy.ph.toFixed(2)}} PH</span><br>
                <span class="pool-hashrate">${{legacyBreakdown}}</span>`;
            poolList.appendChild(legacyEl);

            // Render the individual container line chart grouped by site
            const containerLineCtx = document.getElementById('containerLineChart').getContext('2d');
            const containerLabels = Object.values(containersHashrate30d)[0].map(entry => formatDate(entry.time));  // Format date
            const containerDatasets = Object.keys(containersHashrate30d).sort().map((site, idx) => {{
                const data = containersHashrate30d[site].map(entry => entry.value);
                const color = `hsl(${{idx * 30}}, 70%, 50%)`;  // Different color for each line
                return {{
                    label: site,
                    data: data,
                    fill: false,
                    tension: 0.1,
                    borderColor: color,
                    backgroundColor: color
                }};
            }});

            new Chart(containerLineCtx, {{
                type: 'line',
                data: {{
                    labels: containerLabels,  // Use formatted date labels
                    datasets: containerDatasets
                }},
                options: {{
                    plugins: {{
                        legend: {{
                            display: true,
                            labels: {{
                                usePointStyle: true,
                                pointStyle: 'line',
                                color: 'white',  // Set legend text color to white
                                font: {{
                                    size: 14  // Set legend text size to 14
                                }}
                            }}
                        }}
                    }},
                    tooltip: {{
                        callbacks: {{
                            labelColor: function(context) {{
                                return {{
                                    borderColor: context.dataset.borderColor,
                                    backgroundColor: context.dataset.backgroundColor
                                }};
                            }}
                        }},
                        borderWidth: 1
                    }},
                    maintainAspectRatio: false,
                    responsive: true
                }}
            }});

            // Render the total hashrate line chart
            const totalLineCtx = document.getElementById('totalHashrateLineChart').getContext('2d');
            const totalLabels = totalHashrate30d.map(entry => formatDate(entry.time));  // Format date
            const totalData = totalHashrate30d.map(entry => entry.value);
            const color = `rgba(75, 192, 192, 1)`;  // Set chart color

            new Chart(totalLineCtx, {{
                type: 'line',
                data: {{
                    labels: totalLabels,  // Use formatted date labels
                    datasets: [{{
                        label: `Overall Hashrate (${{days}} Days)`,
                        data: totalData,
                        borderColor: color,
                        backgroundColor: color,
                        fill: false,
                        tension: 0.1
                    }}]
                }},
                options: {{
                    plugins: {{
                        legend: {{
                            display: true,
                            labels: {{
                                usePointStyle: true,
                                pointStyle: 'line',
                                color: 'white',  // Set legend text color to white
                                font: {{
                                    size: 14  // Set legend text size to 14
                                }}
                            }}
                        }}
                    }},
                    tooltip: {{
                        callbacks: {{
                            labelColor: function(context) {{
                                return {{
                                    borderColor: context.dataset.borderColor,
                                    backgroundColor: context.dataset.backgroundColor
                                }};
                            }}
                        }},
                        backgroundColor: function(context) {{
                            // Sets the tooltip background to match the line color
                            return context.tooltipItems[0].dataset.borderColor;
                        }},
                        borderColor: function(context) {{
                            // Sets the tooltip border to match the line color
                            return context.tooltipItems[0].dataset.borderColor;
                        }},
                        borderWidth: 1
                    }},
                    maintainAspectRatio: false,
                    responsive: true
                }}
            }});
        </script>

    </body>
    </html>
    """)

if __name__ == "__main__":
    print_html()