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

{% block title %}{{ 'ocr.title'|trans({}, 'Ocr') }} — Shamra Academia{% endblock %}

{% block og_title %}{{ 'ocr.title'|trans({}, 'Ocr') }} — Shamra Academia{% endblock %}
{% block og_description %}{{ 'ocr.page_description'|trans({}, 'Ocr') }}{% endblock %}
{% block metaDescription %}{{ 'ocr.page_description'|trans({}, 'Ocr') }}{% endblock %}
{% block metaKeywords %}OCR, تحويل صور, PDF إلى وورد, استخراج نصوص, شمرا أكاديميا, ذكاء اصطناعي{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --ocr-primary: #7c3aed;
            --ocr-primary-light: #8b5cf6;
            --ocr-primary-dark: #6d28d9;
            --ocr-success: #10b981;
            --ocr-error: #ef4444;
            --ocr-warning: #f59e0b;
            --ocr-bg: #f8f5ff;
            --ocr-border: #e9e0ff;
        }

        .ocr-page {
            max-width: 900px;
            margin: 30px auto;
            padding: 0 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        /* Hero */
        .ocr-hero {
            text-align: center;
            margin-bottom: 36px;
        }
        .ocr-hero h1 {
            font-size: 2.4rem;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 12px;
            line-height: 1.3;
        }
        .ocr-hero h1 i {
            font-size: 2rem;
            vertical-align: middle;
        }
        .ocr-hero p {
            color: #555;
            font-size: 1.3rem;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        .ocr-badges {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .ocr-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 20px;
            background: var(--ocr-bg);
            border: 1px solid var(--ocr-border);
            font-size: 0.95rem;
            color: var(--ocr-primary);
            font-weight: 500;
        }
        .ocr-badge i {
            font-size: 1.1rem;
        }

        /* Credit Bar */
        .ocr-credit-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            background: var(--ocr-bg);
            border: 1px solid var(--ocr-border);
            border-radius: 10px;
            margin-bottom: 24px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .ocr-credit-info {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1rem;
            color: #555;
        }
        .ocr-credit-info strong {
            color: var(--ocr-primary);
            font-size: 1.2rem;
        }
        .ocr-credit-tier {
            background: var(--ocr-primary);
            color: #fff;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        .ocr-upgrade-link {
            color: var(--ocr-primary);
            font-size: 0.95rem;
            font-weight: 600;
            text-decoration: none;
        }
        .ocr-upgrade-link:hover { text-decoration: underline; }

        /* Login prompt */
        .ocr-login-prompt {
            text-align: center;
            padding: 24px;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 10px;
            margin-bottom: 24px;
        }
        .ocr-login-prompt a {
            color: var(--ocr-primary);
            font-weight: 600;
        }

        /* Upload Zone */
        .ocr-upload-zone {
            border: 2px dashed var(--ocr-border);
            border-radius: 16px;
            padding: 48px 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;
            margin-bottom: 24px;
            position: relative;
        }
        .ocr-upload-zone:hover,
        .ocr-upload-zone.drag-over {
            border-color: var(--ocr-primary);
            background: var(--ocr-bg);
            transform: translateY(-1px);
        }
        .ocr-upload-zone.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }
        .ocr-upload-icon {
            font-size: 56px;
            color: var(--ocr-primary-light);
            margin-bottom: 14px;
        }
        .ocr-upload-zone h3 {
            font-size: 1.25rem;
            color: #333;
            margin-bottom: 8px;
        }
        .ocr-upload-zone p {
            font-size: 0.95rem;
            color: #999;
        }
        .ocr-upload-zone input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }

        /* Pre-upload Preview */
        .ocr-preview {
            display: none;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
        }
        .ocr-preview.active { display: block; }
        .ocr-preview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .ocr-preview-file {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .ocr-preview-file i {
            font-size: 32px;
            color: var(--ocr-primary);
        }
        .ocr-preview-file .name {
            font-weight: 600;
            color: #333;
            font-size: 1rem;
        }
        .ocr-preview-file .size {
            font-size: 0.85rem;
            color: #999;
        }
        .ocr-preview-cancel {
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 4px 8px;
        }
        .ocr-preview-cancel:hover { color: var(--ocr-error); }

        .ocr-cost-estimate {
            display: flex;
            gap: 20px;
            padding: 12px 16px;
            background: var(--ocr-bg);
            border-radius: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }
        .ocr-cost-item {
            display: flex;
            flex-direction: column;
            font-size: 0.95rem;
            color: #666;
        }
        .ocr-cost-item strong {
            color: var(--ocr-primary);
            font-size: 1.1rem;
        }
        .ocr-cost-insufficient {
            color: var(--ocr-error) !important;
            font-weight: 600;
        }

        .ocr-submit-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--ocr-primary-light), var(--ocr-primary-dark));
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .ocr-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,0.3); }
        .ocr-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
        .ocr-submit-btn .spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
            margin-inline-end: 8px;
            vertical-align: middle;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Error alert */
        .ocr-alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 16px;
            font-size: 0.9rem;
            display: none;
        }
        .ocr-alert.error {
            background: #fef2f2;
            border: 1px solid #fecaca;
            color: #991b1b;
        }
        .ocr-alert.success {
            background: #ecfdf5;
            border: 1px solid #a7f3d0;
            color: #065f46;
        }
        .ocr-alert.active { display: block; }

        /* Jobs List */
        .ocr-jobs-section {
            margin-top: 40px;
        }
        .ocr-jobs-section h2 {
            font-size: 1.4rem;
            color: #1a1a2e;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ocr-jobs-empty {
            text-align: center;
            padding: 40px 20px;
            color: #999;
            background: #fafafa;
            border-radius: 12px;
        }

        .ocr-job-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 16px 20px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            transition: box-shadow 0.2s;
        }
        .ocr-job-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }

        .ocr-job-info {
            flex: 1;
            min-width: 200px;
        }
        .ocr-job-name {
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
            word-break: break-all;
        }
        .ocr-job-meta {
            font-size: 0.85rem;
            color: #999;
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .ocr-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 12px;
            border-radius: 12px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        .ocr-status.pending { background: #fef3c7; color: #92400e; }
        .ocr-status.processing { background: #dbeafe; color: #1e40af; }
        .ocr-status.completed { background: #d1fae5; color: #065f46; }
        .ocr-status.failed { background: #fee2e2; color: #991b1b; }

        .ocr-job-actions {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .ocr-dl-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            text-decoration: none;
            border: 1px solid #e5e7eb;
            color: #333;
            background: #fff;
            cursor: pointer;
            transition: all 0.15s;
        }
        .ocr-dl-btn i {
            font-size: 1.15rem;
        }
        .ocr-dl-btn:hover { border-color: var(--ocr-primary); color: var(--ocr-primary); background: var(--ocr-bg); text-decoration: none; }
        .ocr-dl-btn.primary { background: var(--ocr-primary); color: #fff; border-color: var(--ocr-primary); }
        .ocr-dl-btn.primary:hover { background: var(--ocr-primary-dark); }
        .ocr-del-btn {
            background: none;
            border: none;
            color: #ccc;
            cursor: pointer;
            padding: 6px;
            font-size: 1rem;
            transition: color 0.15s;
        }
        .ocr-del-btn:hover { color: var(--ocr-error); }

        /* Guest / No‑credits overlay */
        .ocr-overlay-wrapper {
            position: relative;
        }
        .ocr-overlay-wrapper.disabled .ocr-upload-zone,
        .ocr-overlay-wrapper.disabled .ocr-preview {
            opacity: 0.4;
            pointer-events: none;
            filter: grayscale(30%);
        }
        .ocr-overlay-cta {
            text-align: center;
            padding: 28px 24px;
            background: linear-gradient(135deg, #fffbeb, #fef3c7);
            border: 1px solid #fde68a;
            border-radius: 12px;
            margin-bottom: 24px;
            font-size: 1.1rem;
            line-height: 1.7;
        }
        .ocr-overlay-cta .cta-icon {
            font-size: 2rem;
            display: block;
            margin-bottom: 10px;
            color: var(--ocr-warning);
        }
        .ocr-overlay-cta a {
            display: inline-block;
            margin-top: 12px;
            padding: 10px 28px;
            background: var(--ocr-primary);
            color: #fff;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            text-decoration: none;
            transition: background 0.2s;
        }
        .ocr-overlay-cta a:hover {
            background: var(--ocr-primary-dark);
            text-decoration: none;
            color: #fff;
        }
    </style>
{% endblock %}

{% block body %}
<div class="ocr-page">

    <!-- Hero -->
    <div class="ocr-hero">
        <h1><i class="fa fa-file-text-o"></i> {{ 'ocr.title'|trans({}, 'Ocr') }}</h1>
        <p>{{ 'ocr.subtitle'|trans({}, 'Ocr') }}</p>
        <div class="ocr-badges">
            <span class="ocr-badge"><i class="fa fa-file-pdf-o"></i> PDF</span>
            <span class="ocr-badge"><i class="fa fa-file-image-o"></i> PNG / JPG</span>
            <span class="ocr-badge"><i class="fa fa-file-image-o"></i> TIFF / BMP</span>
            <span class="ocr-badge"><i class="fa fa-download"></i> DOCX / PDF / Markdown</span>
        </div>
    </div>

    {% set hasCredits = false %}
    {% set canUpload = false %}
    {% if app.user and subscription %}
        {% set hasCredits = subscription.availableCredits >= minCredits %}
        {% set canUpload = hasCredits %}
    {% endif %}

    {% if app.user and subscription %}
        <!-- Credit Bar -->
        <div class="ocr-credit-bar">
            <div class="ocr-credit-info">
                <span class="ocr-credit-tier">{{ subscription.tier }}</span>
                <span>{{ 'ocr.credits_available'|trans({}, 'Ocr') }}: <strong id="ocr-credits-display">{{ subscription.availableCredits }}</strong></span>
                <span>{{ 'ocr.credits_per_page'|trans({'%credits%': creditsPerPage}, 'Ocr') }}</span>
            </div>
            {% if subscription.tier == 'trial' or not hasCredits %}
                <a href="{{ path('playground_index') }}" class="ocr-upgrade-link">
                    <i class="fa fa-arrow-up"></i> {{ 'ocr.upgrade'|trans({}, 'Ocr') }}
                </a>
            {% endif %}
        </div>
    {% endif %}

    {# ── CTA for guests or users with no credits ── #}
    {% if not app.user %}
        <div class="ocr-overlay-cta">
            <span class="cta-icon"><i class="fa fa-lock"></i></span>
            {{ 'ocr.login_required'|trans({}, 'Ocr') }}
            <br>
            <a href="{{ path('app_login') }}"><i class="fa fa-sign-in"></i> {{ 'ocr.login_link'|trans({}, 'Ocr') }}</a>
        </div>
    {% elseif not hasCredits %}
        <div class="ocr-overlay-cta">
            <span class="cta-icon"><i class="fa fa-diamond"></i></span>
            {{ 'ocr.no_credits'|trans({}, 'Ocr') }}
            <br>
            <a href="{{ path('playground_index') }}"><i class="fa fa-arrow-up"></i> {{ 'ocr.upgrade'|trans({}, 'Ocr') }}</a>
        </div>
    {% endif %}

    <!-- Alert -->
    <div id="ocr-alert" class="ocr-alert"></div>

    {# ── Upload zone (visible to all, disabled for guests/no credits) ── #}
    <div class="ocr-overlay-wrapper {{ canUpload ? '' : 'disabled' }}">
        <!-- Upload Zone -->
        <div id="ocr-upload-zone" class="ocr-upload-zone">
            <div class="ocr-upload-icon"><i class="fa fa-cloud-upload"></i></div>
            <h3>{{ 'ocr.upload_title'|trans({}, 'Ocr') }}</h3>
            <p>{{ 'ocr.upload_hint'|trans({}, 'Ocr') }}</p>
            {% if canUpload %}
                <input type="file" id="ocr-file-input" accept=".pdf,.png,.jpg,.jpeg,.tiff,.tif,.bmp">
            {% endif %}
        </div>

        <!-- Pre-upload Preview -->
        <div id="ocr-preview" class="ocr-preview">
            <div class="ocr-preview-header">
                <div class="ocr-preview-file">
                    <i class="fa fa-file-pdf-o"></i>
                    <div>
                        <div class="name" id="ocr-preview-name"></div>
                        <div class="size" id="ocr-preview-size"></div>
                    </div>
                </div>
                <button class="ocr-preview-cancel" id="ocr-preview-cancel" title="{{ 'ocr.cancel'|trans({}, 'Ocr') }}">&times;</button>
            </div>

            <div class="ocr-cost-estimate" id="ocr-cost-estimate">
                <div class="ocr-cost-item">
                    <span>{{ 'ocr.estimated_pages'|trans({}, 'Ocr') }}</span>
                    <strong id="ocr-est-pages">—</strong>
                </div>
                <div class="ocr-cost-item">
                    <span>{{ 'ocr.estimated_credits'|trans({}, 'Ocr') }}</span>
                    <strong id="ocr-est-credits">—</strong>
                </div>
                <div class="ocr-cost-item">
                    <span>{{ 'ocr.remaining_after'|trans({}, 'Ocr') }}</span>
                    <strong id="ocr-est-remaining">—</strong>
                </div>
            </div>

            <button id="ocr-submit-btn" class="ocr-submit-btn" disabled>
                {{ 'ocr.process_button'|trans({}, 'Ocr') }}
            </button>
        </div>
    </div>

    {# ── Jobs list (only for logged‑in users) ── #}
    {% if app.user %}
        <div class="ocr-jobs-section">
            <h2><i class="fa fa-history"></i> {{ 'ocr.history_title'|trans({}, 'Ocr') }}</h2>
            <div id="ocr-jobs-list">
                {% if jobs is empty %}
                    <div class="ocr-jobs-empty" id="ocr-empty-state">
                        <p>{{ 'ocr.no_jobs'|trans({}, 'Ocr') }}</p>
                    </div>
                {% else %}
                    {% for job in jobs %}
                        {{ _self.jobCard(job) }}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>

{% macro jobCard(job) %}
<div class="ocr-job-card" data-slug="{{ job.slug }}" data-status="{{ job.status }}" id="job-{{ job.slug }}">
    <div class="ocr-job-info">
        <div class="ocr-job-name">{{ job.fileName }}</div>
        <div class="ocr-job-meta">
            <span><i class="fa fa-file-o"></i> {{ job.pageCount }} {{ 'ocr.pages'|trans({}, 'Ocr') }}</span>
            <span><i class="fa fa-diamond"></i> {{ job.creditsCharged }} {{ 'ocr.credits'|trans({}, 'Ocr') }}</span>
            <span><i class="fa fa-clock-o"></i> {{ job.createdAt|date('Y-m-d H:i') }}</span>
            {% if job.processingDuration is not null %}
                <span><i class="fa fa-tachometer"></i> {{ job.processingDuration }}s</span>
            {% endif %}
        </div>
    </div>

    <span class="ocr-status {{ job.status }}">
        {% if job.status == 'pending' %}
            <i class="fa fa-clock-o"></i> {{ 'ocr.status.pending'|trans({}, 'Ocr') }}
        {% elseif job.status == 'processing' %}
            <i class="fa fa-spinner fa-spin"></i> {{ 'ocr.status.processing'|trans({}, 'Ocr') }}
        {% elseif job.status == 'completed' %}
            <i class="fa fa-check-circle"></i> {{ 'ocr.status.completed'|trans({}, 'Ocr') }}
        {% elseif job.status == 'failed' %}
            <i class="fa fa-exclamation-circle"></i> {{ 'ocr.status.failed'|trans({}, 'Ocr') }}
        {% endif %}
    </span>

    <div class="ocr-job-actions">
        {% if job.status == 'completed' %}
            <a href="{{ path('app_ocr_download', {slug: job.slug, format: 'docx'}) }}" class="ocr-dl-btn primary" title="DOCX">
                <i class="fa fa-file-word-o"></i> DOCX
            </a>
            <a href="{{ path('app_ocr_download', {slug: job.slug, format: 'pdf'}) }}" class="ocr-dl-btn" title="PDF">
                <i class="fa fa-file-pdf-o"></i> PDF
            </a>
            <a href="{{ path('app_ocr_download', {slug: job.slug, format: 'md'}) }}" class="ocr-dl-btn" title="Markdown">
                <i class="fa fa-file-code-o"></i> MD
            </a>
        {% endif %}
        {% if job.status != 'processing' %}
            <button class="ocr-del-btn" onclick="deleteJob('{{ job.slug }}')" title="{{ 'ocr.delete'|trans({}, 'Ocr') }}">
                <i class="fa fa-trash-o"></i>
            </button>
        {% endif %}
    </div>
</div>
{% endmacro %}

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/csat-widget.css') }}?v=1.0">
    <script src="{{ asset('js/csat-widget.js') }}?v=1.0"></script>
    <script>
    (function() {
        'use strict';

        const POLL_INTERVAL = 3000;
        const MAX_FILE_SIZE = {{ maxFileSize }};
        const CREDITS_PER_PAGE = {{ creditsPerPage }};
        const MIN_CREDITS = {{ minCredits }};

        let selectedFile = null;
        let availableCredits = parseInt(document.getElementById('ocr-credits-display')?.textContent || '0');
        let pollTimers = {};

        // ── DOM refs ──────────────────────────────────────
        const uploadZone = document.getElementById('ocr-upload-zone');
        const fileInput = document.getElementById('ocr-file-input');
        const preview = document.getElementById('ocr-preview');
        const previewName = document.getElementById('ocr-preview-name');
        const previewSize = document.getElementById('ocr-preview-size');
        const previewCancel = document.getElementById('ocr-preview-cancel');
        const submitBtn = document.getElementById('ocr-submit-btn');
        const estPages = document.getElementById('ocr-est-pages');
        const estCredits = document.getElementById('ocr-est-credits');
        const estRemaining = document.getElementById('ocr-est-remaining');
        const alertBox = document.getElementById('ocr-alert');
        const jobsList = document.getElementById('ocr-jobs-list');
        const emptyState = document.getElementById('ocr-empty-state');

        if (!uploadZone) return; // Not logged in or no upload capability
        if (!fileInput) return; // Guest or no credits — upload disabled

        // ── Drag & Drop ──────────────────────────────────
        uploadZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadZone.classList.add('drag-over');
        });
        uploadZone.addEventListener('dragleave', () => {
            uploadZone.classList.remove('drag-over');
        });
        uploadZone.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadZone.classList.remove('drag-over');
            if (e.dataTransfer.files.length > 0) {
                handleFileSelect(e.dataTransfer.files[0]);
            }
        });

        fileInput?.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });

        previewCancel?.addEventListener('click', clearSelection);
        submitBtn?.addEventListener('click', uploadFile);

        // ── File Selection ───────────────────────────────
        function handleFileSelect(file) {
            hideAlert();

            // Validate size
            if (file.size > MAX_FILE_SIZE) {
                showAlert('{{ "ocr.error.file_too_large"|trans({}, "Ocr") }}', 'error');
                return;
            }

            // Validate type
            const validTypes = ['application/pdf', 'image/png', 'image/jpeg', 'image/tiff', 'image/bmp'];
            if (!validTypes.includes(file.type) && !file.name.match(/\.(pdf|png|jpe?g|tiff?|bmp)$/i)) {
                showAlert('{{ "ocr.error.unsupported_type"|trans({}, "Ocr") }}', 'error');
                return;
            }

            selectedFile = file;
            previewName.textContent = file.name;
            previewSize.textContent = formatSize(file.size);

            uploadZone.style.display = 'none';
            preview.classList.add('active');

            // Estimate pages (rough: 1 page per ~100KB for PDFs, 1 for images)
            let estimatedPages = 1;
            if (file.type === 'application/pdf') {
                estimatedPages = Math.max(1, Math.round(file.size / 100000));
            }

            updateCostEstimate(estimatedPages);
        }

        function clearSelection() {
            selectedFile = null;
            fileInput.value = '';
            preview.classList.remove('active');
            uploadZone.style.display = '';
            hideAlert();
        }

        function updateCostEstimate(pages) {
            const credits = Math.max(MIN_CREDITS, pages * CREDITS_PER_PAGE);
            const remaining = availableCredits - credits;

            estPages.textContent = pages;
            estCredits.textContent = credits;
            estRemaining.textContent = remaining;

            if (remaining < 0) {
                estRemaining.classList.add('ocr-cost-insufficient');
                submitBtn.disabled = true;
            } else {
                estRemaining.classList.remove('ocr-cost-insufficient');
                submitBtn.disabled = false;
            }
        }

        // ── Upload ───────────────────────────────────────
        async function uploadFile() {
            if (!selectedFile) return;

            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner"></span> {{ "ocr.processing"|trans({}, "Ocr") }}';
            hideAlert();

            const formData = new FormData();
            formData.append('file', selectedFile);

            try {
                const resp = await fetch('{{ path("app_ocr_upload") }}', {
                    method: 'POST',
                    body: formData,
                });

                const data = await resp.json();

                if (!resp.ok || data.error) {
                    showAlert(data.error || '{{ "ocr.error.upload_failed"|trans({}, "Ocr") }}', 'error');
                    submitBtn.disabled = false;
                    submitBtn.textContent = '{{ "ocr.process_button"|trans({}, "Ocr") }}';
                    return;
                }

                // Success — add job card and start polling
                showAlert(data.message || '{{ "ocr.upload_success"|trans({}, "Ocr") }}', 'success');
                clearSelection();
                submitBtn.textContent = '{{ "ocr.process_button"|trans({}, "Ocr") }}';

                if (data.job) {
                    addJobCard(data.job);
                    startPolling(data.job.slug);
                    // Update credits display
                    availableCredits -= data.job.creditsCharged;
                    updateCreditsDisplay();
                    // GA: track OCR submission
                    if (typeof gtag === 'function') {
                        gtag('event', 'ocr_submit', {
                            event_category: 'OCR',
                            event_label: selectedFile ? selectedFile.name : '',
                            value: data.job.creditsCharged || 0
                        });
                    }
                }

            } catch (err) {
                showAlert('{{ "ocr.error.network"|trans({}, "Ocr") }}', 'error');
                submitBtn.disabled = false;
                submitBtn.textContent = '{{ "ocr.process_button"|trans({}, "Ocr") }}';
            }
        }

        // ── Job Cards ────────────────────────────────────
        function addJobCard(job) {
            if (emptyState) emptyState.style.display = 'none';

            const card = document.createElement('div');
            card.className = 'ocr-job-card';
            card.id = 'job-' + job.slug;
            card.dataset.slug = job.slug;
            card.dataset.status = job.status;
            card.innerHTML = buildJobCardHTML(job);

            jobsList.insertBefore(card, jobsList.firstChild);
        }

        function updateJobCard(job) {
            const card = document.getElementById('job-' + job.slug);
            if (!card) return;

            card.dataset.status = job.status;
            card.innerHTML = buildJobCardHTML(job);
        }

        function buildJobCardHTML(job) {
            const statusIcons = {
                pending: '<i class="fa fa-clock-o"></i>',
                processing: '<i class="fa fa-spinner fa-spin"></i>',
                completed: '<i class="fa fa-check-circle"></i>',
                failed: '<i class="fa fa-exclamation-circle"></i>',
            };
            const statusLabels = {
                pending: '{{ "ocr.status.pending"|trans({}, "Ocr") }}',
                processing: '{{ "ocr.status.processing"|trans({}, "Ocr") }}',
                completed: '{{ "ocr.status.completed"|trans({}, "Ocr") }}',
                failed: '{{ "ocr.status.failed"|trans({}, "Ocr") }}',
            };

            let actionsHTML = '';
            if (job.status === 'completed') {
                const base = '/ocr/jobs/' + job.slug + '/download/';
                actionsHTML = `
                    <a href="${base}docx" class="ocr-dl-btn primary" onclick="if(typeof gtag==='function')gtag('event','ocr_download',{event_category:'OCR',event_label:'docx'})"><i class="fa fa-file-word-o"></i> DOCX</a>
                    <a href="${base}pdf" class="ocr-dl-btn" onclick="if(typeof gtag==='function')gtag('event','ocr_download',{event_category:'OCR',event_label:'pdf'})"><i class="fa fa-file-pdf-o"></i> PDF</a>
                    <a href="${base}md" class="ocr-dl-btn" onclick="if(typeof gtag==='function')gtag('event','ocr_download',{event_category:'OCR',event_label:'md'})"><i class="fa fa-file-code-o"></i> MD</a>
                `;
            }
            if (job.status !== 'processing') {
                actionsHTML += `<button class="ocr-del-btn" onclick="deleteJob('${job.slug}')"><i class="fa fa-trash-o"></i></button>`;
            }

            const durationHTML = job.processingDuration != null
                ? `<span><i class="fa fa-tachometer"></i> ${job.processingDuration}s</span>` : '';

            const created = new Date(job.createdAt);
            const dateStr = created.toISOString().slice(0, 16).replace('T', ' ');

            return `
                <div class="ocr-job-info">
                    <div class="ocr-job-name">${escapeHtml(job.fileName)}</div>
                    <div class="ocr-job-meta">
                        <span><i class="fa fa-file-o"></i> ${job.pageCount} {{ 'ocr.pages'|trans({}, 'Ocr') }}</span>
                        <span><i class="fa fa-diamond"></i> ${job.creditsCharged} {{ 'ocr.credits'|trans({}, 'Ocr') }}</span>
                        <span><i class="fa fa-clock-o"></i> ${dateStr}</span>
                        ${durationHTML}
                    </div>
                </div>
                <span class="ocr-status ${job.status}">
                    ${statusIcons[job.status] || ''} ${statusLabels[job.status] || job.status}
                </span>
                <div class="ocr-job-actions">${actionsHTML}</div>
            `;
        }

        // ── Polling ──────────────────────────────────────
        function startPolling(slug) {
            if (pollTimers[slug]) return;
            pollTimers[slug] = setInterval(() => pollJobStatus(slug), POLL_INTERVAL);
        }

        async function pollJobStatus(slug) {
            try {
                const resp = await fetch('/ocr/jobs/' + slug + '/status');
                if (!resp.ok) return;
                const data = await resp.json();
                if (!data.job) return;

                updateJobCard(data.job);

                // Stop polling if done
                if (data.job.status === 'completed' || data.job.status === 'failed') {
                    clearInterval(pollTimers[slug]);
                    delete pollTimers[slug];

                    // Show CSAT feedback for completed OCR jobs
                    if (data.job.status === 'completed' && typeof ShamraCsat !== 'undefined') {
                        try {
                            new ShamraCsat({
                                context: 'ocr',
                                position: 'bottom-right',
                                delay: 2000,
                                showNps: false,
                                showComment: true,
                                metadata: {
                                    job_slug: slug,
                                    pages: data.job.pageCount || 0
                                }
                            }).show();
                        } catch (e) { /* silently fail */ }
                    }
                }
            } catch (e) {
                // Silently retry
            }
        }

        // Start polling for existing active jobs
        document.querySelectorAll('.ocr-job-card').forEach(card => {
            const status = card.dataset.status;
            if (status === 'pending' || status === 'processing') {
                startPolling(card.dataset.slug);
            }
        });

        // ── Delete ───────────────────────────────────────
        window.deleteJob = async function(slug) {
            if (!confirm('{{ "ocr.confirm_delete"|trans({}, "Ocr") }}')) return;

            try {
                const resp = await fetch('/ocr/jobs/' + slug, { method: 'DELETE' });
                if (resp.ok) {
                    const card = document.getElementById('job-' + slug);
                    if (card) card.remove();

                    // Show empty state if no more jobs
                    if (jobsList.querySelectorAll('.ocr-job-card').length === 0 && emptyState) {
                        emptyState.style.display = '';
                    }
                }
            } catch (e) {
                showAlert('{{ "ocr.error.delete_failed"|trans({}, "Ocr") }}', 'error');
            }
        };

        // ── Helpers ──────────────────────────────────────
        function showAlert(msg, type) {
            alertBox.textContent = msg;
            alertBox.className = 'ocr-alert ' + type + ' active';
        }
        function hideAlert() {
            alertBox.className = 'ocr-alert';
        }
        function updateCreditsDisplay() {
            const el = document.getElementById('ocr-credits-display');
            if (el) el.textContent = Math.max(0, availableCredits);
        }
        function formatSize(bytes) {
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / 1048576).toFixed(1) + ' MB';
        }
        function escapeHtml(str) {
            const div = document.createElement('div');
            div.textContent = str;
            return div.innerHTML;
        }

    })();
    </script>
{% endblock %}