{% extends 'base.html.twig' %}

{% block title %}Zone de test - Admin{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link rel="stylesheet" href="{{ asset('styles/pages/settings.css') }}">
<link rel="stylesheet" href="{{ asset('styles/pages/test.css') }}">
{% endblock %}

{% block body %}
<div class="test-container" data-controller="shared--settings-tabs">
    <div class="test-header">
        <div>
            <h1 class="test-title">Zone de test</h1>
            <p class="test-subtitle">Outils de développement et tests d'intégration</p>
        </div>
        <span class="test-badge">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
            </svg>
            Admin Only
        </span>
    </div>

    {# Navigation par onglets #}
    <div class="settings-tabs" role="tablist">
        <button
            class="settings-tab active"
            role="tab"
            aria-selected="true"
            aria-controls="tab-pdf"
            data-action="click->shared--settings-tabs#switchTab"
            data-tab-name="pdf"
        >
            <span class="settings-tab__icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                    <polyline points="14,2 14,8 20,8"/>
                    <line x1="16" y1="13" x2="8" y2="13"/>
                    <line x1="16" y1="17" x2="8" y2="17"/>
                    <polyline points="10,9 9,9 8,9"/>
                </svg>
            </span>
            <span class="settings-tab__text">Extraction PDF</span>
        </button>
        <button
            class="settings-tab"
            role="tab"
            aria-selected="false"
            aria-controls="tab-email"
            data-action="click->shared--settings-tabs#switchTab"
            data-tab-name="email"
        >
            <span class="settings-tab__icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                    <polyline points="22,6 12,13 2,6"/>
                </svg>
            </span>
            <span class="settings-tab__text">Emails</span>
        </button>
    </div>

    {# Contenu des onglets #}
    <div class="settings-content">
        {# ==================== ONGLET PDF ==================== #}
        <div
            id="tab-pdf"
            class="settings-panel active"
            role="tabpanel"
            data-shared--settings-tabs-target="panel"
            data-tab="pdf"
        >
            <div class="settings-card">
                <div class="settings-card__header">
                    <div class="test-card-icon test-card-icon--blue">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <polyline points="14,2 14,8 20,8"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="settings-card__title">Extraction de texte PDF</h2>
                        <p class="settings-card__description">Testez l'extraction de texte et d'images depuis des fichiers PDF avec smalot/pdfparser</p>
                    </div>
                </div>

                <div class="settings-card__body">
                    <div class="test-upload-zone" id="pdf-dropzone">
                        <div class="test-upload-zone__icon">
                            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="17,8 12,3 7,8"/>
                                <line x1="12" y1="3" x2="12" y2="15"/>
                            </svg>
                        </div>
                        <h3 class="test-upload-zone__title">Déposez votre fichier PDF ici</h3>
                        <p class="test-upload-zone__text">ou cliquez pour sélectionner un fichier</p>
                        <form id="pdf-upload-form" method="post" action="{{ path('app_test_pdf_extract') }}" enctype="multipart/form-data">
                            <input type="file" id="pdf_file" name="pdf_file" accept="application/pdf,.pdf" class="test-upload-zone__input" required>
                        </form>
                        <div class="test-upload-zone__info">
                            <span class="test-badge test-badge--small">PDF</span>
                            <span>Taille max: 50 Mo</span>
                        </div>
                    </div>

                    <div id="pdf-progress" class="test-progress" style="display: none;">
                        <div class="test-progress__bar">
                            <div class="test-progress__fill"></div>
                        </div>
                        <p class="test-progress__text">Extraction en cours...</p>
                    </div>

                    <div id="pdf-error" class="test-alert test-alert--error" style="display: none;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="15" y1="9" x2="9" y2="15"/>
                            <line x1="9" y1="9" x2="15" y2="15"/>
                        </svg>
                        <span id="pdf-error-message"></span>
                    </div>

                    <div id="pdf-results" style="display: none;">
                        {# Les résultats seront injectés ici par JS #}
                    </div>
                </div>
            </div>
        </div>

        {# ==================== ONGLET EMAIL ==================== #}
        <div
            id="tab-email"
            class="settings-panel"
            role="tabpanel"
            data-shared--settings-tabs-target="panel"
            data-tab="email"
        >
            <div class="settings-card">
                <div class="settings-card__header">
                    <div class="test-card-icon test-card-icon--green">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                            <polyline points="22,6 12,13 2,6"/>
                        </svg>
                    </div>
                    <div>
                        <h2 class="settings-card__title">Test d'envoi d'emails</h2>
                        <p class="settings-card__description">Envoyez des emails de test pour vérifier la configuration Mailtrap</p>
                    </div>
                </div>

                <div class="settings-card__body">
                    <div class="test-email-cards">
                        <div class="test-email-card">
                            <div class="test-email-card__icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                                    <circle cx="8.5" cy="7" r="4"/>
                                    <line x1="20" y1="8" x2="20" y2="14"/>
                                    <line x1="23" y1="11" x2="17" y2="11"/>
                                </svg>
                            </div>
                            <h3 class="test-email-card__title">Email d'inscription Beta</h3>
                            <p class="test-email-card__desc">Envoie un email de confirmation d'inscription à la bêta</p>
                            <form method="post" action="{{ path('app_test_send_email') }}">
                                <button type="submit" class="btn btn--primary btn--full">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <line x1="22" y1="2" x2="11" y2="13"/>
                                        <polygon points="22,2 15,22 11,13 2,9 22,2"/>
                                    </svg>
                                    Envoyer
                                </button>
                            </form>
                        </div>

                        <div class="test-email-card test-email-card--disabled">
                            <div class="test-email-card__icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                                    <polyline points="22,4 12,14.01 9,11.01"/>
                                </svg>
                            </div>
                            <h3 class="test-email-card__title">Email d'acceptation</h3>
                            <p class="test-email-card__desc">Email envoyé quand un beta testeur est accepté</p>
                            <span class="test-badge test-badge--gray">Bientôt</span>
                        </div>

                        <div class="test-email-card test-email-card--disabled">
                            <div class="test-email-card__icon">
                                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                                </svg>
                            </div>
                            <h3 class="test-email-card__title">Reset mot de passe</h3>
                            <p class="test-email-card__desc">Email de réinitialisation de mot de passe</p>
                            <span class="test-badge test-badge--gray">Bientôt</span>
                        </div>
                    </div>

                    <div class="test-info-box">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="12" y1="16" x2="12" y2="12"/>
                            <line x1="12" y1="8" x2="12.01" y2="8"/>
                        </svg>
                        <div>
                            <strong>Configuration Mailtrap</strong>
                            <p>Les emails sont envoyés à l'adresse de l'utilisateur connecté ({{ app.user.email }})</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // ==================== PDF Upload ====================
    const dropzone = document.getElementById('pdf-dropzone');
    const fileInput = document.getElementById('pdf_file');
    const form = document.getElementById('pdf-upload-form');
    const progress = document.getElementById('pdf-progress');
    const errorDiv = document.getElementById('pdf-error');
    const errorMsg = document.getElementById('pdf-error-message');
    const results = document.getElementById('pdf-results');

    // Click to upload
    dropzone.addEventListener('click', () => fileInput.click());

    // Drag & drop
    ['dragenter', 'dragover'].forEach(event => {
        dropzone.addEventListener(event, (e) => {
            e.preventDefault();
            dropzone.classList.add('test-upload-zone--active');
        });
    });

    ['dragleave', 'drop'].forEach(event => {
        dropzone.addEventListener(event, (e) => {
            e.preventDefault();
            dropzone.classList.remove('test-upload-zone--active');
        });
    });

    dropzone.addEventListener('drop', (e) => {
        const files = e.dataTransfer.files;
        if (files.length > 0 && files[0].type === 'application/pdf') {
            fileInput.files = files;
            uploadPdf();
        }
    });

    fileInput.addEventListener('change', uploadPdf);

    async function uploadPdf() {
        if (!fileInput.files.length) return;

        // Reset UI
        errorDiv.style.display = 'none';
        results.style.display = 'none';
        progress.style.display = 'block';

        const formData = new FormData(form);

        try {
            const response = await fetch(form.action, {
                method: 'POST',
                body: formData
            });

            const data = await response.json();
            progress.style.display = 'none';

            if (data.success) {
                displayPdfResults(data.data);
            } else {
                showError(data.error);
            }
        } catch (error) {
            progress.style.display = 'none';
            showError('Une erreur est survenue: ' + error.message);
        }
    }

    function showError(message) {
        errorMsg.textContent = message;
        errorDiv.style.display = 'flex';
    }

    function displayPdfResults(data) {
        results.innerHTML = `
            <div class="test-results-header">
                <div class="test-results-file">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                        <polyline points="14,2 14,8 20,8"/>
                    </svg>
                    <div>
                        <strong>${escapeHtml(data.filename)}</strong>
                        <span>${data.fileSize}</span>
                    </div>
                </div>
            </div>

            <div class="test-results-stats">
                <div class="test-stat-card">
                    <span class="test-stat-value">${data.pageCount}</span>
                    <span class="test-stat-label">Pages</span>
                </div>
                <div class="test-stat-card">
                    <span class="test-stat-value">${data.characterCount.toLocaleString('fr-FR')}</span>
                    <span class="test-stat-label">Caractères</span>
                </div>
                <div class="test-stat-card">
                    <span class="test-stat-value">${data.images ? data.images.length : 0}</span>
                    <span class="test-stat-label">Images</span>
                </div>
            </div>

            <div class="test-results-content">
                <h4>Texte extrait</h4>
                <pre class="test-code-block">${escapeHtml(data.extractedText.substring(0, 5000))}${data.extractedText.length > 5000 ? '\n\n... [tronqué]' : ''}</pre>
            </div>

            ${data.images && data.images.length > 0 ? `
            <div class="test-results-images">
                <h4>Images extraites</h4>
                <div class="test-images-grid">
                    ${data.images.map(img => `
                        <div class="test-image-card">
                            <img src="data:${img.mimeType};base64,${img.base64}" alt="Image ${img.id}">
                            <span>${img.width}x${img.height}</span>
                        </div>
                    `).join('')}
                </div>
            </div>
            ` : ''}
        `;
        results.style.display = 'block';
        results.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
});
</script>
{% endblock %}