<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="PacCrypt - Secure text and file encryption with password generation" />
    <title>PacCrypt</title>
    
    <!-- Favicon -->
    <link rel="icon" href="{{ url_for('static', filename='img/PacCrypt.png') }}" type="image/png" />
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <!-- Scripts -->
    <script type="module" src="{{ url_for('static', filename='js/main.js') }}" defer></script>
</head>
<body class="dark">
    <!-- Header -->
    <header class="card logo-header">
        <div class="logo-container">
          <img src="{{ url_for('static', filename='img/PacCrypt.png') }}" alt="PacCrypt Logo" />
          <div class="logo-text">
            <h1>PACCRYPT</h1>
            <p>Securely Share Text and Files</p>
          </div>
        </div>
      </header>  

    <!-- Main Content -->
    <main>
        <!-- Password Generator Section -->
        <section id="password-generator-section" class="card form-group">
            <h2>Password Generator</h2>
            <div class="form-group">
                <input type="text" id="generated-password" readonly />
                <div class="button-group">
                    <button type="button" id="generate-btn">Generate</button>
                    <button type="button" id="copy-btn">Copy Password</button>
                </div>
                <div id="password-copy-feedback" class="copy-feedback">Password copied to clipboard!</div>
            </div>
        </section>

        <!-- Pacman Game Section -->
        <section id="pacman-section" class="card" style="display: none;">
            <div class="pacman-wrapper">
                <canvas id="pacmanCanvas" width="800" height="600"></canvas>
            </div>
            <audio id="chomp-sound" src="{{ url_for('static', filename='audio/chomp.mp3') }}"></audio>
            <div class="button-group" style="margin-top: 6px;">
                <button type="button" onclick="resetGame()">Restart Game</button>
                <button type="button" onclick="exitGame()">Exit Game</button>
            </div>
        </section>

        <!-- Encryption/Decryption Section -->
        <section id="encoding-section" class="card form-group">
            <h2>Encrypt & Decrypt</h2>
            <form id="crypto-form" class="form-group">
                <!-- Encryption Type Selection -->
                <div class="form-group">
                    <label for="encryption-type">Encryption Type:</label>
                    <select id="encryption-type">
                        <option value="basic">Basic Cipher</option>
                        <option value="advanced" selected>Advanced AES</option>
                    </select>
                </div>

                <!-- Operation Toggle -->
                <div class="toggle-container">
                    <span class="toggle-label">Encrypt</span>
                    <label class="material-switch">
                      <input type="checkbox" id="operation-toggle">
                      <span class="material-slider"></span>
                    </label>
                    <span class="toggle-label">Decrypt</span>
                  </div>
                                 

                <!-- Text Input Section -->
                <div id="text-section" class="form-group">
                    <textarea id="input-text" placeholder="Enter your message..."></textarea>
                </div>

                <!-- Password Input -->
                <div id="password-input" class="form-group">
                    <input type="password" id="password" placeholder="Encryption/Decryption Password" />
                </div>

                <!-- File Input Section -->
                <div id="file-section" class="form-group" style="display: none;">
                    <input type="file" id="file-input" />
                    <button type="button" id="remove-file-btn">Remove File</button>
                </div>

                <!-- Action Buttons -->
                <div class="button-group">
                    <button type="submit">Execute</button>
                    <button type="button" id="copy-output-btn">Copy Output</button>
                </div>

                <!-- Output Section -->
                <textarea id="output-text" readonly placeholder="Encrypted/Decrypted Output"></textarea>
                <div class="button-group">
                    <button type="button" id="clear-all-btn" class="danger-button">Clear All</button>
                </div>
                <div id="output-copy-feedback" class="copy-feedback">Text copied to clipboard!</div>
            </form>
        </section>

        <!-- File Sharing Section -->
        <section id="sharing-section" class="card form-group">
            <h2 style="margin-bottom: unset;">PacShare</h2>
            <p style="margin-top: unset;">Securely share encrypted files.</p>

            <!-- Flash Messages -->
            {% with messages = get_flashed_messages() %}
            {% if messages %}
            <ul style="color: lime; list-style: none; padding-left: 0;">
                {% for message in messages %}
                <li>
                    {{ message | safe }}
                    {% if "pickup" in message %}
                    <div class="share-link-container">
                        <a id="share-link" href="{{ message.split(' at ')[1] }}" target="_blank">{{ message.split(" at ")[1] }}</a>
                        <button type="button" onclick="copyShareLink()">Copy Link</button>
                        <div id="shared-link-feedback" class="copy-feedback">Link copied to clipboard!</div>
                    </div>
                    {% endif %}
                </li>
                {% endfor %}
            </ul>
            <script>window.onload = () => window.scrollTo(0, document.body.scrollHeight);</script>
            {% endif %}
            {% endwith %}


            <!-- File Upload Form -->
            <!-- Share Link Container (initially hidden) -->
            <div class="share-link-container" id="share-link-container" style="display: none;">
                <a id="share-link" href="#" target="_blank"></a>
                <button type="button" id="copy-share-btn">Copy Link</button>
                <div id="shared-link-feedback" class="copy-feedback">Link copied to clipboard!</div>
            </div>
            <form method="POST" enctype="multipart/form-data" class="form-group" id="upload-form">
                <input type="file" name="file" id="upload-file" required />
                <input type="password" name="enc_password" placeholder="Encryption/Decryption Password" required />
                <input type="password" name="pickup_password" placeholder="Pickup Password" required />
                <div class="button-group">
                    <button type="submit">Upload and Generate Link</button>
                </div>
            </form>
            <p style="color: #9c0000;">BOTH PASSWORDS ARE REQUIRED FOR PICKUP</p>
            <script>
                document.getElementById('upload-form').addEventListener('submit', async (e) => {
                    e.preventDefault();
                    const formData = new FormData(e.target);
                    
                    try {
                        const response = await fetch('/', {
                            method: 'POST',
                            body: formData
                        });
                        const data = await response.json();
                        
                        if (data.error) {
                            alert(data.error);
                            return;
                        }
                        
                        if (data.success && data.pickup_url) {
                            const shareLink = document.getElementById('share-link');
                            const shareLinkContainer = document.getElementById('share-link-container');
                            
                            shareLink.href = data.pickup_url;
                            shareLink.textContent = data.pickup_url;
                            shareLinkContainer.style.display = 'flex';
                            
                            // Clear form fields
                            document.getElementById('upload-file').value = '';
                            document.getElementsByName('enc_password')[0].value = '';
                            document.getElementsByName('pickup_password')[0].value = '';
                            
                            // Scroll to the share link
                            shareLinkContainer.scrollIntoView({ behavior: 'smooth' });
                        }
                    } catch (error) {
                        alert('Error uploading file: ' + error.message);
                    }
                });
            </script>

            <!-- File Limits Information -->
            <p class="text-muted mt-3" style="font-size: 0.85em;">
                Files expire after {{ settings.max_file_age_days }} days.<br />
                Max file size: {{ settings.max_file_size_bytes // (1024 * 1024 * 1024) }} GB.
            </p>
        </section>
    </main>

    <!-- Footer -->
    <footer>
        <p>&copy; 2025 UnNaturalll-Dev. All rights reserved.</p>
        <a href="https://github.com/TySP-Dev" target="_blank" id="github-link">
            <img src="\static\img\Github_logo.png" alt="GitHub Logo" width="100" />
        </a>
    </footer>
</body>
</html>
