{% extends "base.html" %}

{% block title %}Report Details - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Report Details</h1>
            <p class="text-gray-600">{{ report['report_title'] }}</p>
        </div>
        <div class="space-x-2">
            {% if report['form_html_content'] %}
            <a href="{{ url_for('report_edit_popup', report_id=report['id']) }}" 
               target="_blank"
               class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-pen-to-square mr-2"></i>Edit Letter
            </a>
            <button type="button"
                    onclick="printLetter()"
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-print mr-2"></i>Print Letter
            </button>
            {% endif %}
            <a href="{{ url_for('report_print', report_id=report['id']) }}" 
               target="_blank"
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-print mr-2"></i>Print Cover
            </a>
            <a href="{{ url_for('report_download', report_id=report['id']) }}" 
               class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-download mr-2"></i>Download
            </a>
            <a href="{{ url_for('reports_list') }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-arrow-left mr-2"></i>Back to List
            </a>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Report Information -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Report Details Card -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-file-medical mr-2"></i>Report Information
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">Report Title</p>
                        <p class="font-semibold text-gray-800 text-lg">{{ report['report_title'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Report Type</p>
                        <p class="font-semibold text-gray-800">{{ report['report_type'] or 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Report Date</p>
                        <p class="font-semibold text-gray-800">{{ report['report_date']|format_date }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Status</p>
                        {% if report['status'] == 'draft' %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-yellow-100 text-yellow-800">
                            <i class="fas fa-edit mr-1"></i>Draft
                        </span>
                        {% elif report['status'] == 'final' %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-green-100 text-green-800">
                            <i class="fas fa-check-circle mr-1"></i>Final
                        </span>
                        {% elif report['status'] == 'sent' %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 text-blue-800">
                            <i class="fas fa-paper-plane mr-1"></i>Sent
                        </span>
                        {% elif report['status'] == 'archived' %}
                        <span class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-gray-100 text-gray-800">
                            <i class="fas fa-archive mr-1"></i>Archived
                        </span>
                        {% endif %}
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Uploaded By</p>
                        <p class="font-semibold text-gray-800">{{ report['uploaded_by'] or 'System' }}</p>
                    </div>
                </div>
                
                {% if report['description'] %}
                <div class="mt-6 border-t pt-6">
                    <p class="text-sm text-gray-600 mb-2">Description</p>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="text-gray-800 whitespace-pre-wrap">{{ report['description'] }}</p>
                    </div>
                </div>
                {% endif %}
                
                {% if report['notes'] %}
                <div class="mt-6 border-t pt-6">
                    <p class="text-sm text-gray-600 mb-2">Notes</p>
                    <div class="bg-yellow-50 rounded-lg p-4">
                        <p class="text-gray-800 whitespace-pre-wrap">{{ report['notes'] }}</p>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
        
        {% if report['form_html_content'] %}
        <!-- Generated Letter Preview -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-file-signature mr-2"></i>Generated Letter Preview
                </h2>
            </div>
            <div class="p-6 bg-gray-50">
                <iframe id="reportPreviewFrame"
                        class="w-full border border-gray-200 rounded-lg bg-white shadow-inner"
                        style="min-height: 900px;"
                        sandbox="allow-same-origin allow-scripts allow-popups-to-escape-sandbox allow-modals"
                        title="Generated letter preview">
                </iframe>
            </div>
            <div class="px-6 pb-6 text-sm text-gray-500">
                This preview renders the saved template exactly as stored. Use the download button for the original file.
            </div>
        </div>
        {% endif %}
        
        <!-- File Information -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-file mr-2"></i>File Information
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">File Name</p>
                        <p class="font-semibold text-gray-800">{{ report['file_name'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">File Type</p>
                        <p class="font-semibold text-gray-800 uppercase">{{ report['file_type'] }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">File Size</p>
                        <p class="font-semibold text-gray-800">{{ (report['file_size'] / 1024 / 1024)|round(2) }} MB</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Uploaded Date</p>
                        <p class="font-semibold text-gray-800">{{ report['uploaded_at'][:10] if report['uploaded_at'] else 'N/A' }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Linked Case -->
        {% if report['file_case_id'] %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-green-500 to-green-600 px-6 py-4">
                <h2 class="text-lg font-bold text-white">
                    <i class="fas fa-folder-open mr-2"></i>Linked Case
                </h2>
            </div>
            <div class="p-6">
                <p class="font-semibold text-gray-800 text-lg mb-2">Case #{{ report['file_case_id'] }}</p>
                {% if report['claimant_first_name'] %}
                <div class="text-sm space-y-2">
                    <p class="text-gray-600">
                        <i class="fas fa-user mr-2"></i>
                        {{ report['claimant_first_name'] }} {{ report['claimant_last_name'] }}
                    </p>
                </div>
                {% endif %}
                {% if report['client_company_name'] %}
                <div class="mt-4 pt-4 border-t">
                    <p class="text-xs text-gray-500 mb-1">Client</p>
                    <p class="font-semibold text-gray-800">{{ report['client_company_name'] }}</p>
                </div>
                {% endif %}
                <div class="mt-4">
                    <a href="{{ url_for('case_view', case_id=report['case_id']) }}" 
                       class="text-blue-600 hover:text-blue-800 font-semibold text-sm">
                        View Case Details <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
        </div>
        {% endif %}
        
        <!-- Doctor Information -->
        {% if report['doctor_name'] %}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-indigo-500 to-indigo-600 px-6 py-4">
                <h2 class="text-lg font-bold text-white">
                    <i class="fas fa-user-md mr-2"></i>Assessing Doctor
                </h2>
            </div>
            <div class="p-6">
                <p class="font-semibold text-gray-800 mb-2">{{ report['doctor_name'] }}</p>
            </div>
        </div>
        {% endif %}
        
        <!-- Actions -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-red-500 to-red-600 px-6 py-4">
                <h2 class="text-lg font-bold text-white">
                    <i class="fas fa-cog mr-2"></i>Actions
                </h2>
            </div>
            <div class="p-6 space-y-3">
                <a href="{{ url_for('report_print', report_id=report['id']) }}" 
                   target="_blank"
                   class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-print mr-2"></i>Print Cover Sheet
                </a>
                <a href="{{ url_for('report_download', report_id=report['id']) }}" 
                   class="block w-full text-center bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-download mr-2"></i>Download File
                </a>
                <form method="POST" 
                      action="{{ url_for('report_delete', report_id=report['id']) }}" 
                      onsubmit="return confirm('Are you sure you want to delete this report and its file? This action cannot be undone.');">
                    <button type="submit" 
                            class="block w-full bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                        <i class="fas fa-trash mr-2"></i>Delete Report
                    </button>
                </form>
            </div>
        </div>
    </div>
{% if report['form_html_content'] %}
<script>
(function() {
    const iframe = document.getElementById('reportPreviewFrame');
    if (!iframe) return;
    const doc = iframe.contentDocument || iframe.contentWindow.document;
    // Use the unescaped preview content (server-side unescaped)
    let rawContent = {{ report.get('form_html_content_preview', report.get('form_html_content', ''))|tojson }};
    
    // Unescape HTML entities in JavaScript (handles any remaining entities)
    function unescapeHtml(text) {
        const textarea = document.createElement('textarea');
        textarea.innerHTML = text;
        return textarea.value;
    }
    // Keep unescaping until no more changes (handles nested escaping)
    let prevContent = '';
    while (rawContent !== prevContent) {
        prevContent = rawContent;
        rawContent = unescapeHtml(rawContent);
    }
    
    const hasHtmlShell = /<\/html>/i.test(rawContent);
    const baseStyles = "body{font-family:'Segoe UI','Inter',sans-serif;padding:40px;background:#fff;color:#111;line-height:1.7;} h1,h2,h3{color:#1f2937;margin-top:1.5rem;} table{width:100%;border-collapse:collapse;margin-top:1rem;} th,td{border:1px solid #e5e7eb;padding:8px;text-align:left;} .signature{margin-top:2rem;}";
    const wrappedHtml = hasHtmlShell
        ? rawContent
        : `<!DOCTYPE html><html><head><meta charset="utf-8"><style>${baseStyles}</style></head><body>${rawContent}</body></html>`;
    doc.open();
    doc.write(wrappedHtml);
    doc.close();
    
    window.printLetter = function() {
        if (!iframe.contentWindow) {
            alert('Letter preview is still loading. Please try again in a moment.');
            return;
        }
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
    };
})();
</script>
{% endif %}
</div>
{% endblock %}