<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <title>File - Sharey</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    
    <!-- Immediate theme application to prevent flash -->
    <script>
        // Apply theme immediately before page renders
        (function() {
            function getCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            }
            
            const savedTheme = getCookie('sharey-theme') || 'light';
            
            if (savedTheme === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        })();
    </script>
</head>
<body>
    <!-- Theme toggle button -->
    <button id="themeToggle" class="theme-toggle" title="Switch to dark mode">🌙</button>
    
    <div class="container">
        <h1>📁 File View</h1>
        
        <div class="file-container">
            <div class="file-header">
                <h3>{{ filename }}</h3>
                <div class="file-actions">
                    <a href="{{ download_url }}" class="download-button" download>💾 Download</a>
                    <a href="/" class="home-button">🏠 Home</a>
                </div>
            </div>
            
            <div class="file-info">
                <p><strong>Size:</strong> {{ file_size }}</p>
                <p><strong>Type:</strong> {{ file_type }}</p>
            </div>
            
            {% if is_viewable %}
            <div class="file-preview">
                {% if file_type.startswith('image/') %}
                    <img src="{{ download_url }}" alt="{{ filename }}" style="max-width: 100%; height: auto;">
                {% elif file_type.startswith('text/') or file_type == 'application/json' %}
                    <pre><code>{{ file_content | e }}</code></pre>
                {% else %}
                    <p>Preview not available for this file type.</p>
                {% endif %}
            </div>
            {% else %}
            <div class="file-preview">
                <p>📄 This file cannot be previewed. Click download to view it.</p>
            </div>
            {% endif %}
        </div>
    </div>

    <script>
        // Theme management
        function initializeTheme() {
            const savedTheme = getCookie('sharey-theme') || 'light';
            const themeToggle = document.getElementById('themeToggle');
            
            if (themeToggle) {
                themeToggle.addEventListener('click', toggleTheme);
                updateThemeButton(savedTheme);
            }
        }

        function toggleTheme() {
            const currentTheme = getCookie('sharey-theme') || 'light';
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            
            applyTheme(newTheme);
            setCookie('sharey-theme', newTheme, 365);
            updateThemeButton(newTheme);
        }

        function applyTheme(themeSetting) {
            if (themeSetting === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            } else {
                document.documentElement.removeAttribute('data-theme');
            }
        }

        function updateThemeButton(themeSetting) {
            const themeToggle = document.getElementById('themeToggle');
            if (themeToggle) {
                if (themeSetting === 'light') {
                    themeToggle.textContent = '🌙';
                    themeToggle.title = 'Switch to dark mode';
                } else {
                    themeToggle.textContent = '☀️';
                    themeToggle.title = 'Switch to light mode';
                }
            }
        }

        function setCookie(name, value, days) {
            const expires = new Date();
            expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;SameSite=Lax`;
        }

        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for (let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        // Initialize theme on page load
        document.addEventListener('DOMContentLoaded', initializeTheme);
    </script>
</body>
</html>
