{% extends "layouts/dashboard.html" %}

{% block title %}{{ file_path.split('/')[-1] }} - Viewer - Retoor's Cloud Solutions{% endblock %}

{% block dashboard_head %}
    <style>
        .viewer-container {
            height: calc(100vh - 200px);
            display: flex;
            flex-direction: column;
        }
        .viewer-toolbar {
            background: #f5f5f5;
            padding: 10px;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .viewer-toolbar .file-info {
            font-weight: bold;
        }
        .viewer-toolbar .actions {
            display: flex;
            gap: 10px;
        }
        .media-display {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f0f0f0;
            border: 1px solid #ddd;
        }
        .media-display img, .media-display video, .media-display audio {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
    </style>
{% endblock %}

{% block page_title %}Viewing: {{ file_path }}{% endblock %}

{% block dashboard_actions %}
    <a href="/files?path={{ file_path.rsplit('/', 1)[0] }}" class="btn-outline">Back to Files</a>
{% endblock %}

{% block dashboard_content %}
<div class="viewer-container">
    <div class="viewer-toolbar">
        <div class="file-info">
            {{ file_path }}
        </div>
        <div class="actions">
            <!-- Add any actions if needed -->
        </div>
    </div>
    <div class="media-display" id="media-display">
        <p>Loading...</p>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', async () => {
    const displayDiv = document.getElementById('media-display');
    const filePath = '{{ file_path }}';

    // Determine type based on file extension
    const fileName = filePath.split('/').pop();
    const ext = fileName.split('.').pop().toLowerCase();
    const isImage = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(ext);
    const isVideo = ['mp4', 'webm', 'ogg', 'avi', 'mov'].includes(ext);
    const isAudio = ['mp3', 'wav', 'ogg', 'aac'].includes(ext);

    let mimeType = 'application/octet-stream';
    if (isImage) {
        const mimeMap = { jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png', gif: 'image/gif', bmp: 'image/bmp', webp: 'image/webp', svg: 'image/svg+xml' };
        mimeType = mimeMap[ext] || 'image/jpeg';
    } else if (isVideo) {
        const mimeMap = { mp4: 'video/mp4', webm: 'video/webm', ogg: 'video/ogg', avi: 'video/avi', mov: 'video/quicktime' };
        mimeType = mimeMap[ext] || 'video/mp4';
    } else if (isAudio) {
        const mimeMap = { mp3: 'audio/mpeg', wav: 'audio/wav', ogg: 'audio/ogg', aac: 'audio/aac' };
        mimeType = mimeMap[ext] || 'audio/mpeg';
    }

    if (!isImage && !isVideo && !isAudio) {
        displayDiv.innerHTML = '<p>Unsupported file type for viewing.</p>';
        return;
    }

    try {
        const response = await fetch(`/api/file/content?path=${encodeURIComponent(filePath)}&binary=true`);
        const data = await response.json();
        if (data.status === 'success') {
            // Assume content is base64 encoded for binary files
            const binaryString = atob(data.content);
            const bytes = new Uint8Array(binaryString.length);
            for (let i = 0; i < binaryString.length; i++) {
                bytes[i] = binaryString.charCodeAt(i);
            }
            const blob = new Blob([bytes], { type: mimeType });
            const url = URL.createObjectURL(blob);

            if (isImage) {
                const img = document.createElement('img');
                img.src = url;
                img.onload = () => URL.revokeObjectURL(url);
                displayDiv.innerHTML = '';
                displayDiv.appendChild(img);
            } else if (isVideo) {
                const video = document.createElement('video');
                video.src = url;
                video.controls = true;
                video.onload = () => URL.revokeObjectURL(url);
                displayDiv.innerHTML = '';
                displayDiv.appendChild(video);
            } else if (isAudio) {
                const audio = document.createElement('audio');
                audio.src = url;
                audio.controls = true;
                audio.onload = () => URL.revokeObjectURL(url);
                displayDiv.innerHTML = '';
                displayDiv.appendChild(audio);
            }
        } else {
            displayDiv.innerHTML = '<p>Error loading file: ' + data.message + '</p>';
        }
    } catch (error) {
        displayDiv.innerHTML = '<p>Error loading file: ' + error.message + '</p>';
    }
});
</script>
{% endblock %}