{% extends "layout.html" %}

{% block content %}
<div class="row mb-3">
    <div class="col-md-12">
        <div class="alert alert-info">
            <i class="bi bi-info-circle"></i> You are viewing a shared document. 
            {% if not session.user_id %}
            <a href="{{ url_for('login') }}" class="alert-link">Login</a> to access more features.
            {% endif %}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-file-earmark"></i> {{ document.original_filename }}</h5>
            </div>
            <div class="card-body">
                <div class="document-viewer">
                    {% if document.file_type == 'pdf' %}
                    <div class="ratio ratio-16x9">
                        <iframe src="{{ url_for('download_shared', share_token=share_token) }}" allowfullscreen></iframe>
                    </div>
                    {% elif document.file_type == 'image' %}
                    <img src="{{ url_for('download_shared', share_token=share_token) }}" class="img-fluid" alt="{{ document.original_filename }}">
                    {% elif document.file_type == 'video' %}
                    <div class="ratio ratio-16x9">
                        <video controls>
                            <source src="{{ url_for('download_shared', share_token=share_token) }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                    {% else %}
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> Preview not available for this file type. Please download the file to view its contents.
                    </div>
                    {% endif %}
                </div>
                
                <div class="mt-3">
                    <a href="{{ url_for('download_shared', share_token=share_token) }}" class="btn btn-primary">
                        <i class="bi bi-download"></i> Download
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Document Information</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        File Type
                        <span class="badge bg-primary rounded-pill">{{ document.file_type }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Size
                        <span class="badge bg-secondary rounded-pill">{{ (document.file_size / 1024)|round(1) }} KB</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        Uploaded
                        <span class="badge bg-info rounded-pill">{{ document.created_at.split(' ')[0] }}</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="bi bi-share"></i> Sharing Options</h5>
            </div>
            <div class="card-body">
                <p>This document has been shared with you via a secure link.</p>
                
                <div class="input-group mb-3">
                    <input type="text" class="form-control" value="{{ request.url }}" readonly id="share-link">
                    <button class="btn btn-outline-secondary" type="button" onclick="copyLink('share-link')">
                        <i class="bi bi-clipboard"></i> Copy
                    </button>
                </div>
                
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-primary" onclick="shareViaEmail()">
                        <i class="bi bi-envelope"></i> Share via Email
                    </button>
                    <button class="btn btn-outline-success" onclick="shareViaWhatsApp()">
                        <i class="bi bi-whatsapp"></i> Share via WhatsApp
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function copyLink(elementId) {
        var copyText = document.getElementById(elementId);
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        navigator.clipboard.writeText(copyText.value);
        
        // Show a temporary tooltip
        var tooltip = document.createElement("div");
        tooltip.innerHTML = "Copied!";
        tooltip.style.position = "fixed";
        tooltip.style.backgroundColor = "#4CAF50";
        tooltip.style.color = "white";
        tooltip.style.padding = "5px 10px";
        tooltip.style.borderRadius = "5px";
        tooltip.style.zIndex = "1000";
        tooltip.style.top = (event.clientY - 30) + "px";
        tooltip.style.left = event.clientX + "px";
        document.body.appendChild(tooltip);
        
        setTimeout(function() {
            document.body.removeChild(tooltip);
        }, 2000);
    }
    
    function shareViaEmail() {
        var subject = "Shared Document: {{ document.original_filename }}";
        var body = "I'm sharing a document with you: {{ document.original_filename }}\\n\\nYou can access it here: " + window.location.href;
        window.location.href = "mailto:?subject=" + encodeURIComponent(subject) + "&body=" + encodeURIComponent(body);
    }
    
    function shareViaWhatsApp() {
        var text = "I'm sharing a document with you: {{ document.original_filename }}\\n\\nYou can access it here: " + window.location.href;
        window.open("https://wa.me/?text=" + encodeURIComponent(text), "_blank");
    }
</script>
{% endblock %}