/**
 * BitcoinMinuteRefresh.js - A minute-based refresh system tied to server uptime
 * 
 * This module creates a Bitcoin-themed terminal that shows server uptime
 * and refreshes data only on minute boundaries for better synchronization.
 */

const BitcoinMinuteRefresh = (function () {
    // Constants
    const STORAGE_KEY = 'bitcoin_last_refresh_time'; // For cross-page sync

    // Private variables
    let terminalElement = null;
    let uptimeElement = null;
    let serverTimeOffset = 0;
    let serverStartTime = null;
    let uptimeInterval = null;
    let lastMinuteValue = -1;
    let isInitialized = false;
    let refreshCallback = null;

    /**
     * Create and inject the retro terminal element into the DOM
     */
    function createTerminalElement() {
        // Container element
        terminalElement = document.createElement('div');
        terminalElement.id = 'bitcoin-terminal';
        terminalElement.className = 'bitcoin-terminal';

        // Terminal content
        terminalElement.innerHTML = `
      <div class="terminal-header">
        <div class="terminal-title">SYSTEM MONITOR v.3</div>
        <div class="terminal-controls">
          <div class="terminal-dot minimize" title="Minimize" onclick="BitcoinMinuteRefresh.toggleTerminal()"></div>
          <div class="terminal-dot close" title="Close" onclick="BitcoinMinuteRefresh.hideTerminal()"></div>
        </div>
      </div>
      <div class="terminal-content">
        <div class="status-row">
          <div class="status-indicator">
            <div class="status-dot connected"></div>
            <span>LIVE</span>
          </div>
          <span id="terminal-clock" class="terminal-clock">00:00:00</span>
        </div>
        
        <div class="minute-progress-container">
          <div class="minute-labels">
            <span>0s</span>
            <span>15s</span>
            <span>30s</span>
            <span>45s</span>
            <span>60s</span>
          </div>
          <div class="minute-progress-bar">
            <div id="minute-progress-inner" class="minute-progress-inner">
              <div class="minute-progress-fill"></div>
              <div class="scan-line"></div>
            </div>
          </div>
          <div id="refresh-status" class="refresh-status">
            Next refresh at the top of the minute
          </div>
        </div>
        
        <div id="uptime-timer" class="uptime-timer">
          <div class="uptime-title">UPTIME</div>
          <div class="uptime-display">
            <div class="uptime-value">
              <span id="uptime-hours" class="uptime-number">00</span>
              <span class="uptime-label">H</span>
            </div>
            <div class="uptime-separator">:</div>
            <div class="uptime-value">
              <span id="uptime-minutes" class="uptime-number">00</span>
              <span class="uptime-label">M</span>
            </div>
            <div class="uptime-separator">:</div>
            <div class="uptime-value">
              <span id="uptime-seconds" class="uptime-number">00</span>
              <span class="uptime-label">S</span>
            </div>
          </div>
        </div>
      </div>
      <div class="terminal-minimized">
        <!-- <div class="minimized-clock">
          <span id="minimized-clock-value">00:00:00</span>
        </div>
        <div class="minimized-separator">|</div> -->
        <div class="minimized-uptime">
          <span class="mini-uptime-label">UPTIME</span>
          <span id="minimized-uptime-value">00:00:00</span>
        </div>
        <div class="minimized-status-dot connected"></div>
      </div>
    `;

        // Append to body
        document.body.appendChild(terminalElement);

        // Cache element references
        uptimeElement = document.getElementById('uptime-timer');

        // Check if terminal was previously collapsed
        if (localStorage.getItem('bitcoin_terminal_collapsed') === 'true') {
            terminalElement.classList.add('collapsed');
        }

        // Add custom styles if not already present
        if (!document.getElementById('bitcoin-terminal-styles')) {
            addStyles();
        }
    }

    /**
     * Add CSS styles for the terminal
     */
    function addStyles() {
        const styleElement = document.createElement('style');
        styleElement.id = 'bitcoin-terminal-styles';
        styleElement.textContent = `
      /* Terminal Container */
      .bitcoin-terminal {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 340px;
        background-color: #000000;
        border: 1px solid #f7931a; // Changed from 2px to 1px
        color: #f7931a;
        font-family: 'VT323', monospace;
        z-index: 9999;
        overflow: hidden;
        padding: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 0 5px rgba(247, 147, 26, 0.3); // Added to match card shadow
      }
      
      /* Terminal Header */
      .terminal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f7931a;
        padding-bottom: 5px;
        margin-bottom: 8px;
      }
      
      .terminal-title {
        color: #f7931a;
        font-weight: bold;
        font-size: 1.1rem;
        text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
        animation: terminal-flicker 4s infinite;
      }
      
      /* Control Dots */
      .terminal-controls {
        display: flex;
        gap: 5px;
        margin-left: 5px;
      }
      
      .terminal-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #555;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      
      .terminal-dot.minimize:hover {
        background-color: #ffcc00;
      }
      
      .terminal-dot.close:hover {
        background-color: #ff3b30;
      }
      
      /* Terminal Content */
      .terminal-content {
        position: relative;
      }
      
      /* Status Row */
      .status-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      
      /* Status Indicator */
      .status-indicator {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
      }
      
      .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
      
      .status-dot.connected {
        background-color: #32CD32;
        box-shadow: 0 0 5px #32CD32;
        animation: pulse 2s infinite;
      }
      
      .terminal-clock {
        font-size: 1rem;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
      }
      
      /* Minute Progress Bar */
      .minute-progress-container {
        margin-bottom: 12px;
      }
      
      .minute-labels {
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        margin-bottom: 2px;
      }
      
      .minute-progress-bar {
        width: 100%;
        height: 15px;
        background-color: #111;
        border: 1px solid #f7931a;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
      }
      
      .minute-progress-inner {
        height: 100%;
        width: 0%;
        position: relative;
        overflow: hidden;
      }
      
      .minute-progress-fill {
        height: 100%;
        width: 100%;
        background: linear-gradient(90deg, #f7931a, #ffa500);
        transition: width 0.5s ease-out;
      }
      
      /* Scan line effect */
      .scan-line {
        position: absolute;
        height: 2px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        animation: scan 2s linear infinite;
        box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.5);
        z-index: 2;
        will-change: transform;
      }
      
      /* Refresh status */
      .refresh-status {
        font-size: 0.8rem;
        margin-top: 5px;
        text-align: center;
        text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
      }
      
      /* Uptime Display - Modern Digital Clock Style (Horizontal) */
      .uptime-timer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px;
        background-color: #111;
        border: 1px solid rgba(247, 147, 26, 0.5);
        margin-top: 5px;
      }
      
      .uptime-display {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        margin-top: 5px;
      }
      
      .uptime-value {
        display: flex;
        align-items: baseline;
      }
      
      .uptime-number {
        font-size: 1.4rem;
        font-weight: bold;
        background-color: #000;
        padding: 2px 5px;
        border-radius: 3px;
        min-width: 32px;
        display: inline-block;
        text-align: center;
        letter-spacing: 2px;
        text-shadow: 0 0 8px rgba(247, 147, 26, 0.8);
        color: #f7931a;
      }
      
      .uptime-label {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-left: 2px;
      }
      
      .uptime-separator {
        font-size: 1.4rem;
        font-weight: bold;
        padding: 0 2px;
        text-shadow: 0 0 8px rgba(247, 147, 26, 0.8);
      }
      
      .uptime-title {
        font-size: 0.7rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
        text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
        margin-bottom: 3px;
      }
      
      /* Special effects */
      .minute-progress-inner.near-refresh .minute-progress-fill {
        box-shadow: 0 0 15px #f7931a, 0 0 25px #f7931a;
        animation: pulse-brightness 1s infinite;
      }
      
      .minute-progress-inner.refresh-now .minute-progress-fill {
        animation: refresh-flash 1s forwards;
      }
      
      /* Show button */
      #bitcoin-terminal-show {
        position: fixed;
        bottom: 10px;
        right: 10px;
        background-color: #f7931a;
        color: #000;
        border: none;
        padding: 8px 12px;
        font-family: 'VT323', monospace;
        cursor: pointer;
        z-index: 9999;
        display: none;
        box-shadow: 0 0 10px rgba(247, 147, 26, 0.5);
      }
      
      /* CRT scanline effect */
      .terminal-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.15),
          rgba(0, 0, 0, 0.15) 1px,
          transparent 1px,
          transparent 2px
        );
        pointer-events: none;
        z-index: 1;
      }
      
      /* Minimized view styling */
      .terminal-minimized {
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 4px 10px;
        background-color: #000;
        position: relative;
      }
      
      .terminal-minimized::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0.15),
          rgba(0, 0, 0, 0.15) 1px,
          transparent 1px,
          transparent 2px
        );
        pointer-events: none;
        z-index: 1;
      }
      
      .minimized-clock {
        font-size: 1.1rem;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
        position: relative;
        z-index: 2;
      }
      
      .minimized-separator {
        margin: 0 10px;
        color: rgba(247, 147, 26, 0.5);
        font-size: 1.1rem;
        position: relative;
        z-index: 2;
      }
      
      .minimized-uptime {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 2;
      }
      
      .mini-uptime-label {
        font-size: 0.6rem;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.7;
        margin-left: 45px;
        color: #f7931a;
      }
      
      #minimized-uptime-value {
        font-size: 0.9rem;
        font-weight: bold;
        text-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
        margin-left: 45px;
        color: #f7931a;
      }
      
      .minimized-status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-left: 10px;
        position: relative;
        z-index: 2;
      }
      
      /* Collapsed state */
      .bitcoin-terminal.collapsed {
        width: auto;
        max-width: 500px;
        height: auto;
        padding: 5px;
      }
      
      .bitcoin-terminal.collapsed .terminal-content {
        display: none;
      }
      
      .bitcoin-terminal.collapsed .terminal-minimized {
        display: flex;
      }
      
      .bitcoin-terminal.collapsed .terminal-header {
        border-bottom: none;
        margin-bottom: 2px;
        padding-bottom: 2px;
      }
      
      /* Animations */
      @keyframes scan {
        0% { top: -2px; }
        100% { top: 17px; }
      }
      
      @keyframes pulse {
        0%, 100% { opacity: 0.8; }
        50% { opacity: 1; }
      }
      
      @keyframes terminal-flicker {
        0% { opacity: 0.97; }
        5% { opacity: 0.95; }
        10% { opacity: 0.97; }
        15% { opacity: 0.94; }
        20% { opacity: 0.98; }
        50% { opacity: 0.95; }
        80% { opacity: 0.96; }
        90% { opacity: 0.94; }
        100% { opacity: 0.98; }
      }
      
      @keyframes pulse-brightness {
        0%, 100% { filter: brightness(1); }
        50% { filter: brightness(1.3); }
      }
      
      @keyframes refresh-flash {
        0% { filter: brightness(1); background-color: #f7931a; }
        10% { filter: brightness(1.8); background-color: #fff; }
        20% { filter: brightness(1); background-color: #f7931a; }
        30% { filter: brightness(1.8); background-color: #fff; }
        40% { filter: brightness(1); background-color: #f7931a; }
        100% { filter: brightness(1); background-color: #f7931a; }
      }
      
      /* Media Queries */
        @media (max-width: 768px) {
        .bitcoin-terminal {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 90%;
        max-width: 320px;
        bottom: 10px;
      }

      .bitcoin-terminal.collapsed {
        width: auto;
        max-width: 300px;
        left: 50%; // Changed from "left: auto"
        right: auto; // Changed from "right: 10px"
        transform: translateX(-50%); // Changed from "transform: none"
      }
    }
    `;

        document.head.appendChild(styleElement);
    }

    /**
     * Update the minute progress bar based on current seconds
     */
    function updateMinuteProgress() {
        try {
            // Get current server time
            const now = new Date(Date.now() + (serverTimeOffset || 0));
            const seconds = now.getSeconds();
            const milliseconds = now.getMilliseconds();

            // Calculate precise progress within the minute (0-1)
            const progress = (seconds + (milliseconds / 1000)) / 60;

            // Update the progress bar
            const progressBar = document.getElementById('minute-progress-inner');
            if (progressBar) {
                // Set the width based on the current progress through the minute
                progressBar.style.width = (progress * 100) + "%";

                // Add effects when close to the end of the minute
                if (seconds >= 50) {
                    progressBar.classList.add('near-refresh');
                    document.getElementById('refresh-status').textContent = `Refresh in ${60 - seconds} seconds...`;
                } else {
                    progressBar.classList.remove('near-refresh');
                    document.getElementById('refresh-status').textContent = 'Next refresh at the top of the minute';
                }

                // Flash when reaching 00 seconds (new minute)
                if (seconds === 0 && milliseconds < 500) {
                    progressBar.classList.add('refresh-now');
                    document.getElementById('refresh-status').textContent = 'Refreshing data...';

                    // Remove the class after animation completes
                    setTimeout(() => {
                        progressBar.classList.remove('refresh-now');
                    }, 1000);
                } else {
                    progressBar.classList.remove('refresh-now');
                }
            }

            // Check if we've crossed into a new minute
            const currentMinute = now.getMinutes();
            if (lastMinuteValue !== -1 && currentMinute !== lastMinuteValue && seconds === 0) {
                // Trigger refresh on minute change (only when seconds are 0)
                if (typeof refreshCallback === 'function') {
                    console.log('New minute started - triggering refresh...');
                    refreshCallback();
                }
            }

            // Update last minute value
            lastMinuteValue = currentMinute;

        } catch (e) {
            console.error("BitcoinMinuteRefresh: Error updating progress bar:", e);
        }
    }

    /**
     * Update the terminal clock
     */
    function updateClock() {
        try {
            const now = new Date(Date.now() + (serverTimeOffset || 0));
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const timeString = `${hours}:${minutes}:${seconds}`;

            // Update both clocks (normal and minimized views)
            const clockElement = document.getElementById('terminal-clock');
            if (clockElement) {
                clockElement.textContent = timeString;
            }

            const minimizedClockElement = document.getElementById('minimized-clock-value');
            if (minimizedClockElement) {
                minimizedClockElement.textContent = timeString;
            }
        } catch (e) {
            console.error("BitcoinMinuteRefresh: Error updating clock:", e);
        }
    }

    /**
     * Update the uptime display
     */
    function updateUptime() {
        if (serverStartTime) {
            try {
                const currentServerTime = Date.now() + serverTimeOffset;
                const diff = currentServerTime - serverStartTime;

                // Calculate hours, minutes, seconds
                const hours = Math.floor(diff / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                // Update the main uptime display with digital clock style
                document.getElementById('uptime-hours').textContent = String(hours).padStart(2, '0');
                document.getElementById('uptime-minutes').textContent = String(minutes).padStart(2, '0');
                document.getElementById('uptime-seconds').textContent = String(seconds).padStart(2, '0');

                // Update the minimized uptime display
                const minimizedUptimeElement = document.getElementById('minimized-uptime-value');
                if (minimizedUptimeElement) {
                    minimizedUptimeElement.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
                }
            } catch (e) {
                console.error("BitcoinMinuteRefresh: Error updating uptime:", e);
            }
        }
    }

    /**
     * Notify other tabs that data has been refreshed
     */
    function notifyRefresh() {
        const now = Date.now();
        localStorage.setItem(STORAGE_KEY, now.toString());
        localStorage.setItem('bitcoin_refresh_event', 'refresh-' + now);
        console.log("BitcoinMinuteRefresh: Notified other tabs of refresh at " + new Date(now).toISOString());
    }

    /**
     * Initialize the minute refresh system
     */
    function initialize(refreshFunc) {
        // Store the refresh callback
        refreshCallback = refreshFunc;

        // Create the terminal element if it doesn't exist
        if (!document.getElementById('bitcoin-terminal')) {
            createTerminalElement();
        } else {
            // Get references to existing elements
            terminalElement = document.getElementById('bitcoin-terminal');
            uptimeElement = document.getElementById('uptime-timer');
        }

        // Try to get stored server time information
        try {
            serverTimeOffset = parseFloat(localStorage.getItem('serverTimeOffset') || '0');
            serverStartTime = parseFloat(localStorage.getItem('serverStartTime') || '0');
        } catch (e) {
            console.error("BitcoinMinuteRefresh: Error reading server time from localStorage:", e);
        }

        // Clear any existing intervals
        if (uptimeInterval) {
            clearInterval(uptimeInterval);
        }

        // Set up intervals for updating at 50ms precision for smooth animation
        uptimeInterval = setInterval(function () {
            updateClock();
            updateUptime();
            updateMinuteProgress();
        }, 50);

        // Listen for storage events to sync across tabs
        window.removeEventListener('storage', handleStorageChange);
        window.addEventListener('storage', handleStorageChange);

        // Handle visibility changes
        document.removeEventListener('visibilitychange', handleVisibilityChange);
        document.addEventListener('visibilitychange', handleVisibilityChange);

        // Initialize last minute value
        const now = new Date(Date.now() + serverTimeOffset);
        lastMinuteValue = now.getMinutes();

        // Log current server time details for debugging
        console.log(`BitcoinMinuteRefresh: Server time is ${now.toISOString()}, minute=${lastMinuteValue}, seconds=${now.getSeconds()}`);

        // Mark as initialized
        isInitialized = true;

        console.log("BitcoinMinuteRefresh: Initialized");
    }

    /**
     * Handle storage changes for cross-tab synchronization
     */
    function handleStorageChange(event) {
        if (event.key === 'bitcoin_refresh_event') {
            console.log("BitcoinMinuteRefresh: Detected refresh from another tab");

            // If another tab refreshed, consider refreshing this one too
            // But don't refresh if it was just refreshed recently (5 seconds)
            const lastRefreshTime = parseInt(localStorage.getItem(STORAGE_KEY) || '0');
            if (typeof refreshCallback === 'function' && Date.now() - lastRefreshTime > 5000) {
                refreshCallback();
            }
        } else if (event.key === 'serverTimeOffset' || event.key === 'serverStartTime') {
            try {
                serverTimeOffset = parseFloat(localStorage.getItem('serverTimeOffset') || '0');
                serverStartTime = parseFloat(localStorage.getItem('serverStartTime') || '0');
            } catch (e) {
                console.error("BitcoinMinuteRefresh: Error reading updated server time:", e);
            }
        }
    }

    /**
     * Handle visibility changes
     */
    function handleVisibilityChange() {
        if (!document.hidden) {
            console.log("BitcoinMinuteRefresh: Page became visible, updating");

            // Update immediately when page becomes visible
            updateClock();
            updateUptime();
            updateMinuteProgress();

            // Check if we need to do a refresh based on time elapsed
            if (typeof refreshCallback === 'function') {
                const lastRefreshTime = parseInt(localStorage.getItem(STORAGE_KEY) || '0');
                if (Date.now() - lastRefreshTime > 60000) { // More than a minute since last refresh
                    refreshCallback();
                }
            }
        }
    }

    /**
     * Update server time information
     */
    function updateServerTime(timeOffset, startTime) {
        serverTimeOffset = timeOffset;
        serverStartTime = startTime;

        // Store in localStorage for cross-page sharing
        localStorage.setItem('serverTimeOffset', serverTimeOffset.toString());
        localStorage.setItem('serverStartTime', serverStartTime.toString());

        // Update the uptime immediately
        updateUptime();
        updateMinuteProgress();

        console.log("BitcoinMinuteRefresh: Server time updated - offset:", serverTimeOffset, "ms");
    }

    /**
     * Toggle terminal collapsed state
     */
    function toggleTerminal() {
        if (!terminalElement) return;

        terminalElement.classList.toggle('collapsed');
        localStorage.setItem('bitcoin_terminal_collapsed', terminalElement.classList.contains('collapsed'));
    }

    /**
     * Hide the terminal and show the restore button
     */
    function hideTerminal() {
        if (!terminalElement) return;

        terminalElement.style.display = 'none';

        // Create show button if it doesn't exist
        if (!document.getElementById('bitcoin-terminal-show')) {
            const showButton = document.createElement('button');
            showButton.id = 'bitcoin-terminal-show';
            showButton.textContent = 'Show Monitor';
            showButton.onclick = showTerminal;
            document.body.appendChild(showButton);
        }

        document.getElementById('bitcoin-terminal-show').style.display = 'block';
    }

    /**
     * Show the terminal and hide the restore button
     */
    function showTerminal() {
        if (!terminalElement) return;

        terminalElement.style.display = 'block';
        document.getElementById('bitcoin-terminal-show').style.display = 'none';
    }

    // Public API
    return {
        initialize: initialize,
        notifyRefresh: notifyRefresh,
        updateServerTime: updateServerTime,
        toggleTerminal: toggleTerminal,
        hideTerminal: hideTerminal,
        showTerminal: showTerminal
    };
})();

// Auto-initialize when document is ready if a refresh function is available in the global scope
document.addEventListener('DOMContentLoaded', function () {
    // Check if manualRefresh function exists in global scope
    if (typeof window.manualRefresh === 'function') {
        BitcoinMinuteRefresh.initialize(window.manualRefresh);
    } else {
        console.log("BitcoinMinuteRefresh: No refresh function found, will need to be initialized manually");
    }
});