API de Transcripción

<!-- Contenedor para la subida de facturas -->
<div>
    <label for="invoiceFileInput">Seleccionar Factura:</label>
    <input type="file" id="invoiceFileInput" accept=".pdf,.jpg,.jpeg,.png">
    <button id="uploadButton">Transcribir Factura</button>
</div>

<!-- Área para mostrar el estado y los resultados -->
<div id="statusArea" style="margin-top: 15px;"></div>

<!-- Contenedor para la respuesta JSON (oculto por defecto) -->
<pre id="responseContainer" style="display:none;"><code class="language-json"></code></pre>

document.addEventListener("DOMContentLoaded", () => {
    const fileInput = document.getElementById("invoiceFileInput");
    const uploadButton = document.getElementById("uploadButton");
    const statusArea = document.getElementById("statusArea");
    const responseContainer = document.getElementById("responseContainer");
    const jsonCodeBlock = responseContainer.querySelector("code");

    // IMPORTANTE: Gestiona tu API Key de forma segura.
    // Nunca la expongas directamente en el código del frontend en producción.
    const API_KEY = "TU_X-CAPDATA-TOKEN_AQUI";
    const API_ENDPOINT = "https://capdata.es/api/transcribe-invoice";

    uploadButton.addEventListener("click", async () => {
        const file = fileInput.files[0];

        if (!file) {
            statusArea.textContent = "Por favor, selecciona un archivo primero.";
            return;
        }

        // --- 1. Preparar la petición ---
        const formData = new FormData();
        formData.append("files", file); // La clave debe ser "files"

        // --- 2. Actualizar la UI y realizar la llamada ---
        statusArea.textContent = "Transcribiendo, por favor espera...";
        uploadButton.disabled = true;
        responseContainer.style.display = "none";

        try {
            const response = await fetch(API_ENDPOINT, {
                method: "POST",
                headers: {
                    "X-CapData-Token": API_KEY
                },
                body: formData
            });

            const responseData = await response.json();

            if (!response.ok) {
                // Si la API devuelve un error (4xx, 5xx), lo lanzamos
                throw new Error(responseData.error || `Error HTTP: ${response.status}`);
            }

            // --- 3. Procesar la respuesta exitosa ---
            statusArea.textContent = "¡Transcripción completada con éxito!";
            jsonCodeBlock.textContent = JSON.stringify(responseData, null, 2);
            responseContainer.style.display = "block";

            // Opcional: Resaltar la sintaxis si usas Prism.js
            if (window.Prism) {
                Prism.highlightElement(jsonCodeBlock);
            }
            
            // Aquí guardarías `responseData.resultados[0].full_view_url`
            // para usarlo en la Fase 2.

        } catch (error) {
            statusArea.textContent = `Error: ${error.message}`;
            console.error("Error en la transcripción:", error);
        } finally {
            uploadButton.disabled = false;
        }
    });
});