<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shared Files</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Courier New", monospace;
            background: white;
            color: black;
            line-height: 1.2;
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 20px 10px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid black;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 24px;
            font-weight: bold;
        }

        /* Folder tree (structured paths instead of one long path per row) */
        .file-browser {
            width: 100%;
            border: 1px solid black;
            background: white;
        }

        .file-header-row {
            display: grid;
            grid-template-columns: 1fr 120px;
            align-items: center;
            background: black;
            color: white;
            padding: 10px 12px;
            font-weight: bold;
            border-bottom: 2px solid black;
        }

        .file-header-row .actions-col-h {
            text-align: right;
        }

        .file-tree-body {
            min-height: 40px;
        }

        .tree-folder {
            border-bottom: 1px solid #eee;
        }

        .tree-folder:last-child {
            border-bottom: none;
        }

        .folder-summary {
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            padding: 8px 12px;
            font-weight: 600;
            color: #111;
            user-select: none;
        }

        .folder-summary::-webkit-details-marker {
            display: none;
        }

        .folder-summary::before {
            content: '▶';
            display: inline-block;
            width: 1em;
            margin-right: 6px;
            font-size: 10px;
            transition: transform 0.15s ease;
        }

        details[open]>.folder-summary::before {
            transform: rotate(90deg);
        }

        .tree-children {
            padding-left: 0;
            border-left: 2px solid #e8e8e8;
            margin-left: 14px;
        }

        .file-row {
            display: grid;
            grid-template-columns: 1fr 120px;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-bottom: 1px solid #ddd;
            background: #fff;
        }

        .file-row:hover {
            background: #f0f7ff !important;
        }

        .file-row .name-part {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .file-row .actions-part {
            text-align: right;
            flex-shrink: 0;
        }

        .name-col {
            width: 80%;
        }

        .actions-col {
            width: 20%;
            text-align: right;
        }

        .actions-cell {
            text-align: right;
        }

        .file-link {
            color: black;
            text-decoration: none;
            display: block;
        }

        .file-link:hover {
            text-decoration: underline;
        }

        .file-icon {
            margin-right: 8px;
        }

        .action-link {
            color: #0066cc;
            text-decoration: none;
            margin-left: 8px;
            font-size: 14px;
        }

        .action-link:hover {
            text-decoration: underline;
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .file-header-row {
                grid-template-columns: 1fr 80px;
                font-size: 13px;
            }

            .file-row {
                grid-template-columns: 1fr 80px;
                font-size: 13px;
            }

            .folder-summary {
                font-size: 13px;
                padding: 10px 8px;
            }
        }

        [data-theme="dark"] body { background-color: #1a1a2e; color: #e0e0e0; }
        [data-theme="dark"] .header { border-color: #444; }
        [data-theme="dark"] .file-browser { background: #1e1e2e; border-color: #444; }
        [data-theme="dark"] .file-header-row { background: #2a2a3e; color: #e0e0e0; border-color: #444; }
        [data-theme="dark"] .file-row { border-color: #333; color: #e0e0e0; background: #1e1e2e; }
        [data-theme="dark"] .file-row:hover { background: #2a2a3e !important; }
        [data-theme="dark"] .folder-summary { color: #e0e0e0; }
        [data-theme="dark"] .tree-children { border-left-color: #444; }
        [data-theme="dark"] .tree-folder { border-color: #333; }
        [data-theme="dark"] .action-link { color: #58a6ff; background: #1a2744; border-color: #2563eb; }
        [data-theme="dark"] a { color: #58a6ff; }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>📁 Shared Files</h1>
        </div>

        <div class="file-browser" id="fileBrowser">
            <div class="file-header-row">
                <span class="name-col-h">📄 Name</span>
                <span class="actions-col-h">⬇️ Download</span>
            </div>
            <div id="fileTreeBody" class="file-tree-body">
                <div class="file-row" style="border: none;">
                    <span class="name-part" style="color:#666;">Loading…</span>
                    <span class="actions-part"></span>
                </div>
            </div>
        </div>

    </div>

    <script nonce="{{ csp_nonce }}">
        // Global token management for shared files
        let currentAuthToken = null;
        const shareId = '{{ share_id }}';

        // Function to get stored auth token
        function getAuthToken() {
            if (!currentAuthToken) {
                currentAuthToken = sessionStorage.getItem(`share_token_${shareId}`);
            }
            return currentAuthToken;
        }

        // Function to set auth token
        function setAuthToken(token) {
            currentAuthToken = token;
            sessionStorage.setItem(`share_token_${shareId}`, token);
            // Also set a cookie for server-side access
            document.cookie = `share_token_${shareId}=${token}; path=/; max-age=3600; SameSite=Lax`;
        }

        // Enhanced fetch function that automatically includes auth token
        async function fetchWithAuth(url, options = {}) {
            const token = getAuthToken();
            if (token) {
                options.headers = {
                    ...options.headers,
                    'Authorization': `Bearer ${token}`
                };
            }
            return fetch(url, options);
        }

        // Function to get file icon based on extension
        function getFileIcon(filename) {
            const ext = filename.split('.').pop().toLowerCase();
            const iconMap = {
                'txt': '📄', 'md': '📝', 'py': '🐍', 'js': '📜', 'html': '🌐', 'css': '🎨',
                'json': '📋', 'xml': '📄', 'csv': '📊', 'pdf': '📕', 'doc': '📘', 'docx': '📘',
                'xls': '📗', 'xlsx': '📗', 'ppt': '📙', 'pptx': '📙', 'zip': '📦', 'rar': '📦',
                'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️', 'svg': '🖼️',
                'mp4': '🎬', 'avi': '🎬', 'mov': '🎬', 'mp3': '🎵', 'wav': '🎵',
                'exe': '⚙️', 'dll': '⚙️', 'bat': '⚙️', 'sh': '⚙️'
            };
            return iconMap[ext] || '📄';
        }

        // Function to format file size
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 B';
            const k = 1024;
            const sizes = ['B', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
        }

        // Function to open file with authentication
        function openFileWithAuth(filePath) {
            const token = getAuthToken();
            if (!token) {
                // No token available, redirect to verification
                window.location.href = `/shared/${shareId}/verify`;
                return;
            }

            // Open file directly - the server will check the cookie
            const fileUrl = `/shared/${shareId}/file/${encodeURIComponent(filePath)}`;
            window.open(fileUrl, '_blank');
        }

        /** Normalize path segments (handles Windows backslashes in shared paths). */
        function pathParts(p) {
            return String(p).replace(/\\/g, '/').split('/').filter(Boolean);
        }

        /** Build a folder tree from flat path strings. Deeper paths are inserted first to reduce conflicts. */
        function buildPathTree(paths) {
            const root = { name: '', children: new Map(), isFile: false, fullPath: '' };
            const list = [...paths].sort((a, b) => pathParts(b).length - pathParts(a).length);
            for (const raw of list) {
                const parts = pathParts(raw);
                if (parts.length === 0) continue;
                let node = root;
                let skip = false;
                for (let i = 0; i < parts.length; i++) {
                    const part = parts[i];
                    const last = i === parts.length - 1;
                    if (!node.children.has(part)) {
                        node.children.set(part, {
                            name: part,
                            children: new Map(),
                            isFile: last,
                            fullPath: last ? raw : '',
                        });
                    }
                    const child = node.children.get(part);
                    if (last) {
                        if (!child.isFile && child.children.size > 0) {
                            skip = true;
                            break;
                        }
                        child.isFile = true;
                        child.fullPath = raw;
                    } else {
                        if (child.isFile) {
                            skip = true;
                            break;
                        }
                    }
                    node = child;
                }
                if (skip) continue;
            }
            return root;
        }

        function sortTreeEntries(childrenMap) {
            return [...childrenMap.entries()].sort((a, b) => {
                const nodeA = a[1];
                const nodeB = b[1];
                if (nodeA.isFile !== nodeB.isFile) return nodeA.isFile ? 1 : -1;
                return a[0].localeCompare(b[0], undefined, { sensitivity: 'base' });
            });
        }

        function renderTreeNode(node, depth) {
            if (node.isFile) {
                const row = document.createElement('div');
                row.className = 'file-row';
                row.style.paddingLeft = `${12 + depth * 16}px`;

                const nameEl = document.createElement('div');
                nameEl.className = 'name-part';
                const icon = document.createElement('span');
                icon.className = 'file-icon';
                icon.textContent = getFileIcon(node.name) + '\u00A0';
                const nameSpan = document.createElement('span');
                nameSpan.textContent = node.name;
                nameEl.appendChild(icon);
                nameEl.appendChild(nameSpan);

                const action = document.createElement('div');
                action.className = 'actions-part';
                const a = document.createElement('a');
                a.href = `/shared/${shareId}/file/${encodeURIComponent(node.fullPath)}?download=1`;
                a.className = 'action-link';
                a.title = 'Download';
                a.textContent = '⬇️';
                action.appendChild(a);

                row.appendChild(nameEl);
                row.appendChild(action);
                if (node.fullPath) row.title = node.fullPath;
                return row;
            }

            const details = document.createElement('details');
            details.className = 'tree-folder';
            if (depth === 0) details.open = true;

            const summary = document.createElement('summary');
            summary.className = 'folder-summary';
            summary.style.paddingLeft = `${12 + depth * 16}px`;
            summary.textContent = '📁 ' + node.name;

            const wrap = document.createElement('div');
            wrap.className = 'tree-children';
            sortTreeEntries(node.children).forEach(([, child]) => {
                wrap.appendChild(renderTreeNode(child, depth + 1));
            });

            details.appendChild(summary);
            details.appendChild(wrap);
            return details;
        }

        function renderFiles(files) {
            const container = document.getElementById('fileTreeBody');
            container.innerHTML = '';

            if (!files || files.length === 0) {
                const empty = document.createElement('div');
                empty.className = 'file-row';
                empty.style.border = 'none';
                empty.style.justifyContent = 'center';
                empty.style.gridTemplateColumns = '1fr';
                empty.textContent = 'No files available';
                empty.style.textAlign = 'center';
                empty.style.padding = '20px';
                empty.style.color = '#666';
                container.appendChild(empty);
                return;
            }

            const tree = buildPathTree(files);
            sortTreeEntries(tree.children).forEach(([, child]) => {
                container.appendChild(renderTreeNode(child, 0));
            });
            if (container.childElementCount === 0) {
                const empty = document.createElement('div');
                empty.className = 'file-row';
                empty.style.border = 'none';
                empty.style.gridTemplateColumns = '1fr';
                empty.style.justifyContent = 'center';
                empty.style.textAlign = 'center';
                empty.style.padding = '20px';
                empty.style.color = '#666';
                empty.textContent = 'No files available';
                container.appendChild(empty);
            }
        }

        // Check if we have a token on page load
        document.addEventListener('DOMContentLoaded', function () {
            const token = getAuthToken();
            if (!token) {
                // No token available, redirect to verification
                window.location.href = `/shared/${shareId}/verify`;
                return;
            }

            try {
                const files = {% raw files_json %};
                renderFiles(Array.isArray(files) ? files : []);
            } catch (error) {
                console.error('Error processing files data:', error);
                const el = document.getElementById('fileTreeBody');
                if (el) {
                    el.innerHTML = '';
                    const err = document.createElement('div');
                    err.className = 'file-row';
                    err.style.border = 'none';
                    err.style.color = 'red';
                    err.style.padding = '20px';
                    err.style.textAlign = 'center';
                    err.textContent = 'Error loading files data';
                    el.appendChild(err);
                }
            }
        });
    </script>
    <script src="/static/js/theme.js"></script>
</body>

</html>