{% load i18n %}

{# Document Viewer Component - View HTML or PDF documents with zoom controls #}
<div x-data="documentViewer({
        hasPdf: {{ pdf_url|yesno:'true,false' }},
        hasContent: {{ content|yesno:'true,false' }},
        pdfUrl: '{{ pdf_url|default:""|escapejs }}',
        title: '{{ title|escapejs }}'
     })"
     x-init="init()"
     class="document-viewer bg-white rounded-xl border border-surface-200 overflow-hidden">

    {% if show_toolbar %}
    <!-- Toolbar -->
    <div class="flex items-center justify-between px-4 py-3 border-b border-surface-200 bg-surface-50">
        <!-- Title -->
        <div class="flex items-center gap-3">
            <div class="p-2 bg-primary-100 rounded-lg">
                <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    {% if pdf_url %}
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                    {% else %}
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    {% endif %}
                </svg>
            </div>
            {% if title %}
            <h3 class="font-medium text-surface-900">{{ title }}</h3>
            {% endif %}
        </div>

        <!-- Controls -->
        <div class="flex items-center gap-2">
            {% if content %}
            <!-- Zoom Controls (for HTML content only) -->
            <div class="flex items-center gap-1 bg-white rounded-lg border border-surface-200 p-1">
                <button type="button"
                        @click="zoomOut()"
                        :disabled="zoom <= 50"
                        class="p-1.5 rounded hover:bg-surface-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                        title="{% trans 'Reducir' %}">
                    <svg class="w-4 h-4 text-surface-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"/>
                    </svg>
                </button>

                <span class="px-2 text-xs font-medium text-surface-600 min-w-[3rem] text-center"
                      x-text="zoom + '%'"></span>

                <button type="button"
                        @click="zoomIn()"
                        :disabled="zoom >= 200"
                        class="p-1.5 rounded hover:bg-surface-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                        title="{% trans 'Aumentar' %}">
                    <svg class="w-4 h-4 text-surface-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"/>
                    </svg>
                </button>

                <button type="button"
                        @click="fitToWidth()"
                        class="p-1.5 rounded hover:bg-surface-100 transition-colors"
                        title="{% trans 'Ajustar al ancho' %}">
                    <svg class="w-4 h-4 text-surface-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
                    </svg>
                </button>
            </div>
            {% endif %}

            <!-- Print Button -->
            <button type="button"
                    @click="print()"
                    class="p-2 rounded-lg hover:bg-surface-100 transition-colors"
                    title="{% trans 'Imprimir' %}">
                <svg class="w-5 h-5 text-surface-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                </svg>
            </button>

            {% if pdf_url %}
            <!-- Download Button (PDF only) -->
            <a href="{{ pdf_url }}"
               download
               class="p-2 rounded-lg hover:bg-surface-100 transition-colors"
               title="{% trans 'Descargar' %}">
                <svg class="w-5 h-5 text-surface-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                </svg>
            </a>
            {% endif %}

            <!-- Fullscreen Button -->
            <button type="button"
                    @click="toggleFullscreen()"
                    class="p-2 rounded-lg hover:bg-surface-100 transition-colors"
                    :title="isFullscreen ? '{% trans "Salir de pantalla completa" %}' : '{% trans "Pantalla completa" %}'">
                <svg x-show="!isFullscreen" class="w-5 h-5 text-surface-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
                </svg>
                <svg x-show="isFullscreen" x-cloak class="w-5 h-5 text-surface-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
    </div>
    {% endif %}

    <!-- Document Content -->
    <div x-ref="viewerContainer"
         class="document-viewer-content overflow-auto bg-surface-100"
         style="height: {{ height }};">

        {% if pdf_url %}
        <!-- PDF Viewer -->
        <iframe x-ref="pdfFrame"
                src="{{ pdf_url }}#toolbar=0&navpanes=0"
                class="w-full h-full border-0"
                title="{{ title|default:'PDF Document' }}">
        </iframe>
        {% elif content %}
        <!-- HTML Content Viewer -->
        <div x-ref="contentWrapper"
             class="p-4 md:p-8 flex justify-center">
            <div x-ref="documentContent"
                 class="document-content bg-white shadow-lg rounded-lg overflow-hidden transition-transform origin-top"
                 :style="'transform: scale(' + (zoom / 100) + '); width: ' + contentWidth + 'px;'">
                <!-- A4-like document styling -->
                <div class="p-8 md:p-12 min-h-[800px]"
                     style="max-width: 210mm; margin: 0 auto;">
                    {{ content|safe }}
                </div>
            </div>
        </div>
        {% else %}
        <!-- Empty State -->
        <div class="flex flex-col items-center justify-center h-full p-8 text-center">
            <div class="p-4 bg-surface-200 rounded-full mb-4">
                <svg class="w-8 h-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <p class="text-surface-600 font-medium">{% trans "No hay documento para mostrar" %}</p>
            <p class="text-surface-400 text-sm mt-1">{% trans "Proporcione contenido HTML o una URL de PDF" %}</p>
        </div>
        {% endif %}
    </div>
</div>