<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Spirit</title>
        <link rel="icon" type="image/png" href="logo-hq.png" sizes="32x32">
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <style>
            body {
                background: linear-gradient(to bottom, #000000, #140000);
                margin: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                min-height: 100vh;
                color: white;
                font-family: 'PT Sans', Arial, sans-serif;
                position: relative;
                overflow-x: hidden;
            }

            /* Single bottom mist effect */
            .bottom-mist {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 40vh;
                background: linear-gradient(
                    to top,
                    rgba(139, 0, 0, 0.15) 0%,
                    transparent 100%
                );
                z-index: -1;
                animation: simpleMist 4s ease-in-out infinite alternate;
            }

            @keyframes simpleMist {
                from {
                    opacity: 0.6;
                }
                to {
                    opacity: 0.4;
                }
            }

            .fog {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                background: radial-gradient(
                    circle at 50% 50%,
                    rgba(139, 0, 0, 0.1),
                    transparent 70%
                );
                z-index: -1;
            }

            .section {
                backdrop-filter: blur(5px);
                transition: all 0.3s ease-in-out;
            }

            .section {
                backdrop-filter: blur(5px);
                transition: all 0.3s ease-in-out;
            }
            
            .intro-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                background-color: black;
                transition: opacity 1s;
            }

            .logo {
                max-width: 200px;
                height: auto;
                opacity: 0;
                animation: fadeInImage 2s ease-in forwards;
            }

            .full-logo {
                max-width: 300px;
                height: auto;
                margin: 20px 0;
            }

            .main-content {
                opacity: 0;
                animation: fadeIn 1s ease-in forwards 2s;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 20px;
            }
            
            @keyframes fadeInImage {
                0% {
                    opacity: 0;
                    transform: translateY(-50px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            @keyframes fadeIn {
                0% {
                    opacity: 0;
                    transform: translateY(50px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .button-container {
                display: flex;
                gap: 20px;
                margin: 20px 0;
                flex-wrap: wrap;
                justify-content: center;
            }

            .nav-button {
                padding: 12px 24px;
                background: #333;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                transition: background 0.3s;
                font-size: 16px;
            }

            .nav-button:hover {
                background: #444;
            }

            .external-link {
                background: #CD0028;
            }

            .external-link:hover {
                background: #99001E;
            }

            .section {
                display: none;
                width: 80%;
                max-width: 800px;
                margin: 20px auto;
                padding: 20px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
            }

            .section.active {
                display: block;
            }

            .chart-container {
                width: 100%;
                height: 400px;
                margin: 20px 0;
            }

            #myChart {
                background: rgba(255, 255, 255, 0.05);
                padding: 20px;
                border-radius: 10px;
            }

            .depth-table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
                background: rgba(255, 255, 255, 0.05);
            }

            .depth-table th {
                background-color: #333;
                padding: 10px;
                text-align: left;
                border: 1px solid #444;
            }

            .depth-table td {
                padding: 8px;
                border: 1px solid #444;
            }

            .depth-table tr:nth-child(even) {
                background-color: rgba(255, 255, 255, 0.05);
            }

            .depth-cell {
                font-weight: bold;
                background-color: #222;
            }

            .highlight-row {
                background-color: rgba(76, 175, 80, 0.2) !important;
            }

            #loadingMessage {
                color: #CD0028;
                margin: 20px 0;
            }

            .refresh-button {
                padding: 10px 20px;
                background: #CD0028;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                transition: background 0.3s;
                margin-bottom: 20px;
            }

            .refresh-button:hover {
                background: #99001E;
            }

            .table-container {
                width: 100%;
                overflow-x: auto;
            }

            .login-container {
                background: rgba(0, 0, 0, 0.8);
                padding: 20px;
                border-radius: 10px;
                text-align: center;
                max-width: 400px;
                width: 90%;
                margin: 20px auto;
            }

            .login-input {
                width: 94%;
                padding: 11px;
                margin: 10px 0;
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid #444;
                border-radius: 5px;
                color: white;
            }

            .login-button {
                padding: 10px 20px;
                background: #CD0028;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                transition: background 0.3s;
                margin: 10px 5px;
            }

            .login-button:hover {
                background: #99001E;
            }

            #auth-message {
                color: #FF6863;
                margin: 10px 0;
            }

            #user-actions {
                margin-top: 20px;
            }

            #user-actions button {
                margin: 0 5px;
            }

            h2 {
                color: #FF6863;
                margin-bottom: 20px;
            }

            p {
                line-height: 1.6;
            }
        </style>
        <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
        <script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-app-compat.js"></script>
        <script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-auth-compat.js"></script>
    </head>
    <body>
        <div class="bottom-mist"></div>
        <div class="fog"></div>

        <div class="intro-container">
            <img src="logo-hq.png" alt="Spirit Logo" class="logo">
        </div>

        <div class="main-content">
            <img src="full-hq.png" alt="Spirit Full Logo" class="full-logo">
            
            <div class="button-container">
                <button class="nav-button" onclick="showSection('home')">Home</button>
                <button class="nav-button" onclick="showSection('chart')">Chart</button>
                <button class="nav-button" onclick="showSection('depths')">Depths</button>
                <button class="nav-button" onclick="showSection('login')">User</button>
                <button class="nav-button external-link" onclick="window.open('https://spirit-3.gitbook.io/spirit-lua', '_blank')">Docs</button>
            </div>

            <div id="login" class="section">
                <h2>User</h2>
                <div class="login-container">
                    <input type="email" id="email" placeholder="Email" class="login-input">
                    <input type="password" id="password" placeholder="Password" class="login-input">
                    <div id="auth-message"></div>
                    <button class="login-button" onclick="loginUser()">Login</button>
                    <div id="user-actions" style="display: none;">
                        <button class="login-button" onclick="downloadFile()">Download</button>
                        <button class="login-button" onclick="logoutUser()">Logout</button>
                    </div>
                </div>
            </div>

            <div id="home" class="section active">
                <h2>Welcome to Spirit</h2>
                <p>This is the home section. Navigate using the buttons above.</p>
            </div>

            <div id="chart" class="section">
                <h2>Data Chart</h2>
                <canvas id="myChart"></canvas>
            </div>
        </div>

        <div id="depths" class="section">
            <h2>Depths Table</h2>
            <button class="refresh-button" onclick="fetchData()">Refresh Data</button>
            <div id="loadingMessage">Loading data...</div>
            <div class="table-container">
                <table class="depth-table">
                    <thead>
                        <tr>
                            <th>Depths</th>
                            <th>Biome</th>
                            <th>Boss</th>
                            <th>Creature</th>
                            <th>Creature</th>
                            <th>Creature</th>
                            <th>Creature</th>
                            <th>Objective Action</th>
                            <th>Objective Name</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                    </tbody>
                </table>
            </div>
        </div>
        <script type="module">
            // Import Firebase
            import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js';
            import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, signOut, onAuthStateChanged } 
            from 'https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js';

            // Firebase configuration
            const firebaseConfig = {
              apiKey: "AIzaSyDKSlq0uPhg-1_qLk9zeg-arF1pZoj4ySs",
              authDomain: "spirit-d0c06.firebaseapp.com",
              databaseURL: "https://spirit-d0c06-default-rtdb.europe-west1.firebasedatabase.app",
              projectId: "spirit-d0c06",
              storageBucket: "spirit-d0c06.firebasestorage.app",
              messagingSenderId: "991192878536",
            };

            // Initialize Firebase
            const app = initializeApp(firebaseConfig);
            const auth = getAuth(app);

            // Make auth functions global
            window.loginUser = async function() {
                const email = document.getElementById('email').value;
                const password = document.getElementById('password').value;
                const authMessage = document.getElementById('auth-message');

                try {
                    await signInWithEmailAndPassword(auth, email, password);
                    authMessage.textContent = 'Login successful!';
                    showSection('login');
                } catch (error) {
                    authMessage.textContent = error.message;
                }
            };

            window.logoutUser = async function() {
                try {
                    await signOut(auth);
                    document.getElementById('auth-message').textContent = 'Logged out successfully';
                    showSection('login');
                } catch (error) {
                    document.getElementById('auth-message').textContent = error.message;
                }
            };

            async function validateToken(token) {
                try {
                    const response = await fetch(
                        'https://identitytoolkit.googleapis.com/v1/accounts:lookup?key=AIzaSyDKSlq0uPhg-1_qLk9zeg-arF1pZoj4ySs', 
                        {
                            method: 'POST',
                            body: JSON.stringify({ idToken: token }),
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }
                    );

                    const data = await response.json();
                    console.log('Validation response:', data);
                    
                    return data.users && data.users.length > 0;
                } catch (error) {
                    console.error('Validation error:', error);
                    return false;
                }
            }

            window.downloadFile = async function() {
                const user = auth.currentUser;
                const authMessage = document.getElementById('auth-message');
                
                if (!user) {
                    showSection('login');
                    return;
                }

                try {
                    const token = await user.getIdToken();
                    const isValid = await validateToken(token);
                    if (isValid) {
                        window.open('https://example.com', '_blank');
                    } else {
                        authMessage.textContent = 'Token validation failed';
                    }
                } catch (error) {
                    authMessage.textContent = 'Download error: ' + error.message;
                }
            };

            // Auth state observer
            onAuthStateChanged(auth, (user) => {
                const userActions = document.getElementById('user-actions');
                const authMessage = document.getElementById('auth-message');
                const loginButton = document.querySelector('button[onclick="loginUser()"]');
                const loginInputs = document.querySelectorAll('.login-input');
                
                if (user) {
                    // User is signed in
                    userActions.style.display = 'block';
                    loginButton.style.display = 'none';
                    loginInputs.forEach(input => input.style.display = 'none');
                    authMessage.textContent = `Logged in as: ${user.email}`;
                } else {
                    // User is signed out
                    userActions.style.display = 'none';
                    loginButton.style.display = 'inline-block';
                    loginInputs.forEach(input => input.style.display = 'block');
                    authMessage.textContent = '';
                }
            });
        </script>
        <script>
            // Hide intro container after animations
            setTimeout(() => {
                document.querySelector('.intro-container').style.opacity = '0';
                setTimeout(() => {
                    document.querySelector('.intro-container').style.display = 'none';
                }, 1000);
            }, 2000);

            // Chart initialization
            const ctx = document.getElementById('myChart').getContext('2d');
            let myChart;

            // Sample data - Replace this with your JSON fetch
            const sampleData = {
                chartData: {
                    labels: ["January", "February", "March", "April", "May"],
                    values: [65, 59, 80, 81, 56]
                }
            };

            // Initialize chart with sample data
            myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: sampleData.chartData.labels,
                    datasets: [{
                        label: 'Monthly Data',
                        data: sampleData.chartData.values,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: 'white'
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: 'white'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            labels: {
                                color: 'white'
                            }
                        }
                    }
                }
            });

            // Navigation function
            function showSection(sectionId) {
                document.querySelectorAll('.section').forEach(section => {
                    section.classList.remove('active');
                });
                document.getElementById(sectionId).classList.add('active');
            }

            function generateEmptyRows() {
                const tableBody = document.getElementById('tableBody');
                tableBody.innerHTML = '';
                
                for (let depth = 110; depth <= 230; depth++) {
                    const row = document.createElement('tr');
                    if ((depth - 1) % 3 === 0) row.classList.add('highlight-row');
                    
                    // Add depth cell
                    const depthCell = document.createElement('td');
                    depthCell.textContent = depth;
                    depthCell.className = 'depth-cell';
                    row.appendChild(depthCell);
                    
                    // Add empty cells for other columns
                    for (let i = 0; i < 8; i++) {
                        const cell = document.createElement('td');
                        row.appendChild(cell);
                    }
                    
                    tableBody.appendChild(row);
                }
            }

            async function fetchData() {
                const loadingMessage = document.getElementById('loadingMessage');
                loadingMessage.style.display = 'block';
                
                try {
                    // Using local data instead of fetching
                    const data = {
                        "110": {
                            "biome": "Crystal Caves",
                            "boss": "Crystal Guardian",
                            "objact": "Kill 20 creatures",
                            "objname": "Crystal Hunter",
                            "creatures": [
                                "Crystal Spider",
                                "Cave Bat",
                                "Crystal Golem",
                                "Crystal Wyrm"
                            ]
                        },
                        "112": {
                            "biome": "Frozen Depths",
                            "boss": "Frost Giant",
                            "objact": "Collect 5 items",
                            "objname": "Ice Shards",
                            "creatures": [
                                "Ice Elemental",
                                "Frost Wolf",
                                "Snow Leopard",
                                "Ice Golem"
                            ]
                        },
                        "115": {
                            "biome": "Magma Chamber",
                            "boss": "Magma Lord",
                            "objact": "Survive 10 minutes",
                            "objname": "Heat Resistance",
                            "creatures": [
                                "Fire Elemental",
                                "Lava Slug",
                                "Flame Sprite",
                                "Magma Beast"
                            ]
                        }
                    };
                    
                    // First generate empty table
                    generateEmptyRows();
                    
                    // Then populate with received data
                    Object.entries(data).forEach(([depth, info]) => {
                        if (depth >= 110 && depth <= 192) {
                            const row = document.querySelector(`#tableBody tr:nth-child(${depth - 109})`);
                            if (row) {
                                row.cells[1].textContent = info.biome || '';
                                row.cells[2].textContent = info.boss || '';
                                
                                // Fill creature cells
                                if (info.creatures) {
                                    info.creatures.forEach((creature, index) => {
                                        if (index < 4) {
                                            row.cells[3 + index].textContent = creature;
                                        }
                                    });
                                }
                                
                                row.cells[7].textContent = info.objact || '';
                                row.cells[8].textContent = info.objname || '';
                            }
                        }
                    });
                    
                    loadingMessage.style.display = 'none';
                } catch (error) {
                    console.error('Error loading data:', error);
                    loadingMessage.textContent = 'Error loading data. Please try again.';
                }
            }

            generateEmptyRows();
            fetchData();
        </script>
    </body>
</html>
