{% extends 'dashboard/base.html' %}
{% load static %}

{% block title %}OCR API Testing - Peza API{% endblock %}
{% block breadcrumb %}OCR API Testing{% endblock %}

{% block extra_css %}
<style>
  @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
  .btn-gradient {
    background: var(--primary);
  }
  .code-bg { background: #0d1117; }
  .tab-active {
    border-bottom: 2px solid #0969da;
    color: #0969da;
    font-weight: 600;
  }
  .drag-over {
    border-color: #0969da;
    background-color: #ddf4ff;
  }
  .endpoint-meta {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-secondary);
  }
  .gicon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 6px;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
  }
  .processing-modal {
    position: fixed;
    inset: 0;
    background: rgba(13, 17, 23, 0.45);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 60;
  }
  .processing-modal.active {
    display: flex;
  }
  .processing-card {
    width: min(92vw, 340px);
    background: #ffffff;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    padding: 18px;
    text-align: center;
  }
  .processing-spinner {
    width: 38px;
    height: 38px;
    margin: 0 auto 10px;
    border: 3px solid #d0d7de;
    border-top-color: #0969da;
    border-radius: 9999px;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>
{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-6">
  <div class="grid lg:grid-cols-2 gap-4">
    <!-- Left: Testing Interface -->
    <div class="bg-white rounded-lg shadow p-4">
      <h2 class="text-lg font-bold text-gray-900 mb-4">OCR API Testing</h2>
      
      <!-- API Key Selection -->
      <div class="mb-4">
        <label class="block text-gray-700 text-sm font-medium mb-2">
          <span class="gicon" aria-hidden="true">key</span>
          API Key
        </label>
        <select id="apiKeySelect" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 outline-none">
          <option value="">Select an API key</option>
          {% for key in api_keys %}
          <option value="{{ key.key }}" data-testing="{{ key.is_testing|yesno:'true,false' }}">{{ key.name }}{% if key.is_testing %} (playground){% endif %} ({{ key.key|slice:":8" }}...)</option>
          {% endfor %}
        </select>
        <p id="apiKeyHint" class="text-xs text-gray-500 mt-1">Testing keys automatically include the playground header when supported by the OCR gateway.</p>
        {% if not api_keys %}
        <p class="text-xs text-red-600 mt-1">No API keys. <a href="{% url 'api-keys-management' %}" class="underline">Create one</a></p>
        {% endif %}
      </div>
      
      <!-- Endpoint Selection -->
      <div class="mb-4">
        <label class="block text-gray-700 text-sm font-medium mb-2">
          <span class="gicon" aria-hidden="true">tune</span>
          OCR Endpoint
        </label>
        <select id="endpointSelect" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 outline-none"></select>
        <div class="endpoint-meta p-3 mt-2 text-xs text-gray-700">
          <div class="flex items-center justify-between gap-2">
            <span id="selectedEndpointLabel" class="font-semibold text-gray-900">Text</span>
            <code id="selectedEndpointPath" class="font-mono">/v1/ocr/text</code>
          </div>
          <p id="selectedEndpointDescription" class="mt-2 text-gray-600">Extract plain OCR text from image/PDF documents.</p>
        </div>
        <div class="mt-3 p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-700">
          <p><strong>Service:</strong> OCR API</p>
          <p><strong>Version:</strong> 1.0.0</p>
          <p><strong>Note:</strong> All OCR endpoints require <code>X-API-Key</code> header.</p>
          <p><strong>Health:</strong> <code>GET https://api.pezamw.com/health</code></p>
          <p><strong>Endpoints:</strong> <code>/v1/ocr/text</code>, <code>/v1/ocr/extract</code>, <code>/v1/ocr/invoice</code>, <code>/v1/ocr/receipt</code>, <code>/v1/ocr/invoice/validate</code>, <code>/v1/ocr/kyc</code>, <code>/v1/ocr/bank-statement</code>, <code>/v1/ocr/utility-bill</code>, <code>/v1/ocr/business-card</code>, <code>/v1/ocr/pdf-to-json</code>, <code>/v1/ocr/data-entry</code>, <code>/v1/ocr/classify</code>, <code>/v1/ocr/risk-signals</code></p>
        </div>
      </div>
      
      <!-- Image Upload -->
      <div class="mb-4">
        <label class="block text-gray-700 text-sm font-medium mb-2">
          <span class="gicon" aria-hidden="true">upload_file</span>
          Upload Document
        </label>
        <div id="dropZone" class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-purple-400 cursor-pointer">
          <span class="gicon text-purple-600 mb-2" style="font-size:36px;margin-right:0;display:block;" aria-hidden="true">cloud_upload</span>
          <p class="text-sm font-medium text-gray-900">Drag & drop or click to browse</p>
          <p class="text-xs text-gray-500 mt-1">JPG, PNG, WEBP, BMP, TIFF, PDF (max 10MB)</p>
          <button type="button" onclick="document.getElementById('imageInput').click()" class="mt-3 px-4 py-2 text-sm bg-purple-50 text-purple-700 rounded-lg font-medium border border-purple-200">
            Browse Files
          </button>
        </div>
        <input type="file" id="imageInput" accept=".jpg,.jpeg,.png,.webp,.bmp,.tif,.tiff,.pdf" class="hidden" onchange="handleImageUpload(event)">
        
        <div id="imagePreview" class="mt-3 hidden">
          <div class="flex items-center justify-between bg-gray-50 rounded-lg p-3 border">
            <div class="flex items-center">
              <span class="gicon text-blue-600 mr-3" style="font-size:24px;" aria-hidden="true">image</span>
              <div>
                <p id="fileName" class="font-medium text-gray-900 text-sm"></p>
                <p id="fileSize" class="text-xs text-gray-500"></p>
              </div>
            </div>
            <button onclick="removeImage()" class="px-2 py-1 text-xs text-red-600 bg-red-50 hover:bg-red-100 rounded border border-red-200">
              Remove
            </button>
          </div>
        </div>
      </div>
      
      <!-- Test Button -->
      <button onclick="testAPI()" id="testButton" class="w-full py-3 btn-gradient text-white rounded-lg font-semibold shadow hover:shadow-lg transition" {% if not api_keys %}disabled{% endif %}>
        <span class="gicon" aria-hidden="true">play_arrow</span>Test OCR API
      </button>
      
      <div id="loading" class="hidden mt-3 text-center">
        <div class="inline-flex items-center text-sm">
          <div class="w-4 h-4 border-2 border-purple-600 border-t-transparent rounded-full animate-spin mr-2"></div>
          <span class="text-gray-600">Processing document...</span>
        </div>
      </div>
      
      <!-- API Response -->
      <div class="mt-4">
        <div class="flex justify-between items-center mb-2">
          <h3 class="text-sm font-medium text-gray-900">API Response</h3>
          <button onclick="copyResponse()" class="text-xs text-purple-600 hover:text-purple-800">
            <span class="gicon" aria-hidden="true">content_copy</span>Copy
          </button>
        </div>
        <div class="code-bg rounded-lg p-3 max-h-64 overflow-auto">
          <pre id="responseOutput" class="text-gray-300 font-mono text-xs">
{
  "status": "ready",
  "message": "Upload a document and test"
}</pre>
        </div>
      </div>

      <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
        <div class="p-3 bg-gray-50 border border-gray-200 rounded-lg">
          <div class="font-medium text-gray-900 mb-1">Status</div>
          <div id="responseStatusMeta" class="text-gray-700">—</div>
        </div>
        <div class="p-3 bg-gray-50 border border-gray-200 rounded-lg">
          <div class="font-medium text-gray-900 mb-1">Duration</div>
          <div id="responseDurationMeta" class="text-gray-700">—</div>
        </div>
      </div>

      <div class="mt-4">
        <div class="flex justify-between items-center mb-2">
          <h3 class="text-sm font-medium text-gray-900">Response Headers</h3>
        </div>
        <div class="code-bg rounded-lg p-3 max-h-48 overflow-auto">
          <pre id="headersOutput" class="text-gray-300 font-mono text-xs">—</pre>
        </div>
      </div>
    </div>
    
    <!-- Right: Code Examples & Results -->
    <div>
      <!-- Code Examples -->
      <div class="bg-white rounded-lg shadow p-4 mb-4">
        <h2 class="text-lg font-bold text-gray-900 mb-3">
          <span class="gicon" aria-hidden="true">code</span>
          Code Examples
        </h2>
        
        <div class="flex border-b border-gray-200 mb-3">
          <button onclick="selectLanguage('curl')" id="tab-curl" class="px-3 py-2 text-xs tab-active"><span class="gicon" aria-hidden="true">terminal</span>cURL</button>
          <button onclick="selectLanguage('python')" id="tab-python" class="px-3 py-2 text-xs text-gray-600"><span class="gicon" aria-hidden="true">data_object</span>Python</button>
          <button onclick="selectLanguage('javascript')" id="tab-javascript" class="px-3 py-2 text-xs text-gray-600"><span class="gicon" aria-hidden="true">javascript</span>JavaScript</button>
          <button onclick="selectLanguage('node')" id="tab-node" class="px-3 py-2 text-xs text-gray-600"><span class="gicon" aria-hidden="true">deployed_code</span>Node.js</button>
        </div>
        
        <!-- cURL -->
        <div id="snippet-curl">
          <div class="code-bg rounded p-3">
            <div class="flex justify-between items-center mb-2">
              <span class="text-gray-300 text-xs">cURL Command</span>
              <button onclick="copyCode('curl')" class="text-xs text-gray-400 hover:text-white">
                <span class="gicon" aria-hidden="true">content_copy</span>
              </button>
            </div>
            <pre id="code-curl" class="text-gray-300 font-mono text-xs overflow-auto">curl -X POST \
  -H "X-API-Key: YOUR_KEY" \
  -F "image=@document.jpg" \
  https://api.pezamw.com/v1/ocr/text</pre>
          </div>
        </div>
        
        <!-- Python -->
        <div id="snippet-python" class="hidden">
          <div class="code-bg rounded p-3">
            <div class="flex justify-between items-center mb-2">
              <span class="text-gray-300 text-xs">Python</span>
              <button onclick="copyCode('python')" class="text-xs text-gray-400 hover:text-white">
                <span class="gicon" aria-hidden="true">content_copy</span>
              </button>
            </div>
            <pre id="code-python" class="text-gray-300 font-mono text-xs overflow-auto">import requests

api_key = "YOUR_KEY"
endpoint = "https://api.pezamw.com/v1/ocr/text"

with open("document.jpg", "rb") as f:
    files = {"image": f}
    headers = {"X-API-Key": api_key}
    response = requests.post(endpoint, files=files, headers=headers)
    
print(response.json())</pre>
          </div>
        </div>
        
        <!-- JavaScript -->
        <div id="snippet-javascript" class="hidden">
          <div class="code-bg rounded p-3">
            <div class="flex justify-between items-center mb-2">
              <span class="text-gray-300 text-xs">JavaScript</span>
              <button onclick="copyCode('javascript')" class="text-xs text-gray-400 hover:text-white">
                <span class="gicon" aria-hidden="true">content_copy</span>
              </button>
            </div>
            <pre id="code-javascript" class="text-gray-300 font-mono text-xs overflow-auto">const formData = new FormData();
formData.append('image', imageFile);

const response = await fetch('https://api.pezamw.com/v1/ocr/text', {
    method: 'POST',
    headers: {
        'X-API-Key': 'YOUR_KEY'
    },
    body: formData
});

const result = await response.json();
console.log(result);</pre>
          </div>
        </div>
        
        <!-- Node.js -->
        <div id="snippet-node" class="hidden">
          <div class="code-bg rounded p-3">
            <div class="flex justify-between items-center mb-2">
              <span class="text-gray-300 text-xs">Node.js</span>
              <button onclick="copyCode('node')" class="text-xs text-gray-400 hover:text-white">
                <span class="gicon" aria-hidden="true">content_copy</span>
              </button>
            </div>
            <pre id="code-node" class="text-gray-300 font-mono text-xs overflow-auto">const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const formData = new FormData();
formData.append('image', fs.createReadStream('document.jpg'));

axios.post('https://api.pezamw.com/v1/ocr/text', formData, {
    headers: {
        'X-API-Key': 'YOUR_KEY',
        ...formData.getHeaders()
    }
}).then(res => console.log(res.data));</pre>
          </div>
        </div>
      </div>
      
      <!-- Results Section -->
      <div id="resultsSection" class="bg-white rounded-lg shadow p-4 hidden">
        <div class="flex justify-between items-center mb-3">
          <h2 class="text-lg font-bold text-gray-900">OCR Results</h2>
          <button onclick="exportResults()" class="text-xs text-purple-600 hover:text-purple-800">
            <span class="gicon" aria-hidden="true">download</span>Export
          </button>
        </div>
        
        <!-- Metrics -->
        <div class="grid grid-cols-2 gap-3 mb-4">
          <div class="p-3 bg-blue-50 rounded-lg border border-blue-100">
            <div class="text-xs text-gray-600">Confidence</div>
            <div id="confidenceScore" class="text-xl font-bold text-gray-900">--%</div>
          </div>
          <div class="p-3 bg-green-50 rounded-lg border border-green-100">
            <div class="text-xs text-gray-600">Response Time</div>
            <div id="responseTime" class="text-xl font-bold text-gray-900">-- ms</div>
          </div>
        </div>
        
        <!-- Confidence Bar -->
        <div class="mb-4">
          <div class="w-full bg-gray-200 rounded-full h-2">
            <div id="confidenceBar" class="h-2 rounded-full transition-all" style="width: 0%"></div>
          </div>
        </div>
        
        <!-- Extracted Text -->
        <div>
          <h3 class="text-sm font-medium text-gray-900 mb-2">Extracted Text</h3>
          <div class="code-bg rounded-lg p-3 max-h-64 overflow-auto">
            <pre id="extractedText" class="text-gray-300 font-mono text-xs whitespace-pre-wrap"></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<div id="processingModal" class="processing-modal" role="dialog" aria-modal="true" aria-hidden="true">
  <div class="processing-card">
    <div class="processing-spinner" aria-hidden="true"></div>
    <div class="text-sm font-semibold text-gray-900">Processing OCR request</div>
    <div class="text-xs text-gray-600 mt-1">Please wait while we analyze your document.</div>
  </div>
</div>

<script>
  const OCR_ENDPOINTS = [
    { id: 'text', label: 'Text OCR', description: 'Extract plain OCR text from image/PDF documents.' },
    { id: 'extract', label: 'Extract OCR', description: 'Return OCR text with words and confidence metadata.' },
    { id: 'invoice', label: 'Invoice OCR', description: 'Extract invoice number, VAT/tax totals, and date.' },
    { id: 'receipt', label: 'Receipt OCR', description: 'Parse merchant, tax, totals, and line items.' },
    { id: 'invoice/validate', label: 'Invoice Validate', description: 'Validate VAT presence, duplicate invoice number, and total consistency.' },
    { id: 'kyc', label: 'KYC OCR', description: 'Extract identity document fields for onboarding.' },
    { id: 'bank-statement', label: 'Bank Statement', description: 'Extract account and transaction table data.' },
    { id: 'utility-bill', label: 'Utility Bill', description: 'Parse customer, meter/account, due date, and amount.' },
    { id: 'business-card', label: 'Business Card', description: 'Extract name, phone, email, company, and role.' },
    { id: 'pdf-to-json', label: 'PDF to JSON', description: 'Convert OCR/PDF text into structured key-value JSON.' },
    { id: 'data-entry', label: 'Data Entry', description: 'Map extracted values for data-entry automation.' },
    { id: 'classify', label: 'Classify', description: 'Detect document type and classification confidence.' },
    { id: 'risk-signals', label: 'Risk Signals', description: 'Generate fraud/risk checks from extracted document text.' }
  ];

  let selectedEndpoint = 'text';
  let selectedLanguage = 'curl';
  let uploadedFile = null;

  function selectedKeyIsTesting() {
    const select = document.getElementById('apiKeySelect');
    const option = select && select.selectedOptions ? select.selectedOptions[0] : null;
    return !!(option && option.dataset && option.dataset.testing === 'true');
  }

  function prettyPrint(value) {
    if (typeof value === 'string') return value;
    try {
      return JSON.stringify(value, null, 2);
    } catch (error) {
      return String(value);
    }
  }

  function updateApiKeyHint() {
    const hint = document.getElementById('apiKeyHint');
    if (!hint) return;
    hint.textContent = selectedKeyIsTesting()
      ? 'Playground key selected. The request will include X-ALLOW-TESTING: 1.'
      : 'Live keys send a normal authenticated OCR request.';
  }

  function setProcessingModal(isOpen) {
    const modal = document.getElementById('processingModal');
    if (!modal) return;
    modal.classList.toggle('active', isOpen);
    modal.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
  }
  
  document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    
    dropZone.addEventListener('dragover', (e) => {
      e.preventDefault();
      dropZone.classList.add('drag-over');
    });
    
    dropZone.addEventListener('dragleave', (e) => {
      e.preventDefault();
      dropZone.classList.remove('drag-over');
    });
    
    dropZone.addEventListener('drop', (e) => {
      e.preventDefault();
      dropZone.classList.remove('drag-over');
      if (e.dataTransfer.files.length) {
        handleImageUpload({ target: { files: e.dataTransfer.files } });
      }
    });
    
    dropZone.addEventListener('click', () => {
      document.getElementById('imageInput').click();
    });
    
    document.getElementById('apiKeySelect').addEventListener('change', () => {
      updateCodeSnippets();
      updateApiKeyHint();
    });
    const endpointSelect = document.getElementById('endpointSelect');
    endpointSelect.addEventListener('change', (e) => selectEndpoint(e.target.value));
    renderEndpointOptions();
    updateEndpointMeta();
    updateCodeSnippets();
    updateApiKeyHint();
  });

  function renderEndpointOptions() {
    const select = document.getElementById('endpointSelect');
    if (!select) return;
    select.innerHTML = '';
    OCR_ENDPOINTS.forEach((ep) => {
      const option = document.createElement('option');
      option.value = ep.id;
      option.textContent = ep.label;
      if (ep.id === selectedEndpoint) {
        option.selected = true;
      }
      select.appendChild(option);
    });
  }

  function getSelectedEndpointInfo() {
    return OCR_ENDPOINTS.find((ep) => ep.id === selectedEndpoint) || OCR_ENDPOINTS[0];
  }

  function updateEndpointMeta() {
    const info = getSelectedEndpointInfo();
    document.getElementById('selectedEndpointLabel').textContent = info.label;
    document.getElementById('selectedEndpointPath').textContent = `/v1/ocr/${info.id}`;
    document.getElementById('selectedEndpointDescription').textContent = info.description || '';
  }
  
  function selectEndpoint(endpoint) {
    selectedEndpoint = endpoint;
    const endpointSelect = document.getElementById('endpointSelect');
    if (endpointSelect && endpointSelect.value !== endpoint) {
      endpointSelect.value = endpoint;
    }
    updateEndpointMeta();
    updateCodeSnippets();
  }
  
  function selectLanguage(lang) {
    selectedLanguage = lang;
    
    ['curl', 'python', 'javascript', 'node'].forEach(l => {
      const tab = document.getElementById(`tab-${l}`);
      const snippet = document.getElementById(`snippet-${l}`);
      
      if (l === lang) {
        tab.className = 'px-3 py-2 text-xs tab-active';
        snippet.classList.remove('hidden');
      } else {
        tab.className = 'px-3 py-2 text-xs text-gray-600';
        snippet.classList.add('hidden');
      }
    });
  }
  
  function handleImageUpload(event) {
    const file = event.target.files[0];
    if (!file) return;
    
    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/bmp', 'image/tiff', 'application/pdf'];
    if (!validTypes.includes(file.type)) {
      showNotification('Please upload JPG, PNG, WEBP, BMP, TIFF, or PDF', 'error');
      return;
    }
    
    if (file.size > 10 * 1024 * 1024) {
      showNotification('File must be less than 10MB', 'error');
      return;
    }
    
    uploadedFile = file;
    
    document.getElementById('fileName').textContent = file.name;
    document.getElementById('fileSize').textContent = formatFileSize(file.size);
    document.getElementById('imagePreview').classList.remove('hidden');
    
    showNotification(`Uploaded: ${file.name}`, 'success');
  }
  
  function removeImage() {
    uploadedFile = null;
    document.getElementById('imagePreview').classList.add('hidden');
    document.getElementById('imageInput').value = '';
    showNotification('Image removed', 'info');
  }
  
  async function testAPI() {
    const apiKey = document.getElementById('apiKeySelect').value;
    
    if (!apiKey) {
      showNotification('Please select an API key', 'error');
      return;
    }
    
    if (!uploadedFile) {
      showNotification('Please upload an image', 'error');
      return;
    }
    
    const testButton = document.getElementById('testButton');
    const loading = document.getElementById('loading');
    testButton.disabled = true;
    loading.classList.remove('hidden');
    setProcessingModal(true);
    
    const startTime = Date.now();
    
    try {
      const formData = new FormData();
      formData.append('image', uploadedFile);
      
      const response = await fetch(`https://api.pezamw.com/v1/ocr/${selectedEndpoint}`, {
        method: 'POST',
        headers: {
          'X-API-Key': apiKey,
          ...(selectedKeyIsTesting() ? { 'X-ALLOW-TESTING': '1' } : {})
        },
        body: formData
      });
      
      const responseTime = Date.now() - startTime;
      const responseHeaders = {};
      response.headers.forEach((value, key) => {
        responseHeaders[key] = value;
      });
      const contentType = (response.headers.get('content-type') || '').toLowerCase();
      const data = contentType.includes('application/json')
        ? await response.json()
        : await response.text();

      document.getElementById('responseStatusMeta').textContent = `${response.status} ${response.statusText}`;
      document.getElementById('responseDurationMeta').textContent = `${responseTime} ms`;
      document.getElementById('headersOutput').textContent = prettyPrint(responseHeaders);
      
      if (!response.ok) {
        throw new Error((data && data.error) || `HTTP ${response.status}`);
      }
      
      // Display response
      document.getElementById('responseOutput').textContent = prettyPrint(data);
      
      // Show results summary for all endpoint response shapes
      const previewText = data.text
        || data.raw_text
        || data.extracted_text
        || JSON.stringify(data.extracted || data.data || data.classification || data.risk || {}, null, 2);

      if (previewText) {
        const confidence = data.confidence ?? 0;
        
        document.getElementById('resultsSection').classList.remove('hidden');
        document.getElementById('extractedText').textContent = previewText;
        document.getElementById('confidenceScore').textContent = confidence === null ? 'N/A' : confidence + '%';
        document.getElementById('responseTime').textContent = responseTime + ' ms';
        
        const confidenceBar = document.getElementById('confidenceBar');
        confidenceBar.style.width = confidence === null ? '0%' : confidence + '%';
        
        if (confidence === null) {
          confidenceBar.className = 'h-2 rounded-full transition-all bg-gray-400';
        } else if (confidence >= 80) {
          confidenceBar.className = 'h-2 rounded-full transition-all bg-green-500';
        } else if (confidence >= 50) {
          confidenceBar.className = 'h-2 rounded-full transition-all bg-yellow-500';
        } else {
          confidenceBar.className = 'h-2 rounded-full transition-all bg-red-500';
        }
        
        showNotification('OCR completed', 'success');
      } else {
        showNotification('OCR completed', 'success');
      }
      
    } catch (error) {
      console.error('API Error:', error);
      showNotification(error.message || 'Failed to process document', 'error');
      document.getElementById('responseStatusMeta').textContent = 'Request error';
      document.getElementById('responseDurationMeta').textContent = '—';
      document.getElementById('headersOutput').textContent = '—';
      
      document.getElementById('responseOutput').textContent = JSON.stringify({
        error: error.message,
        endpoint: selectedEndpoint
      }, null, 2);
    } finally {
      testButton.disabled = false;
      loading.classList.add('hidden');
      setProcessingModal(false);
    }
  }
  
  function updateCodeSnippets() {
    const apiKey = document.getElementById('apiKeySelect').value || 'YOUR_KEY';
    const endpoint = selectedEndpoint;
    const baseUrl = 'https://api.pezamw.com';
    
    document.getElementById('code-curl').textContent = `curl -X POST \\
  -H "X-API-Key: ${apiKey}" \\
  -F "image=@document.jpg" \\
  ${baseUrl}/v1/ocr/${endpoint}`;
    
    document.getElementById('code-python').textContent = `import requests

api_key = "${apiKey}"
endpoint = "${baseUrl}/v1/ocr/${endpoint}"

with open("document.jpg", "rb") as f:
    files = {"image": f}
    headers = {"X-API-Key": api_key}
    response = requests.post(endpoint, files=files, headers=headers)
    
print(response.json())`;
    
    document.getElementById('code-javascript').textContent = `const formData = new FormData();
formData.append('image', imageFile);

const response = await fetch('${baseUrl}/v1/ocr/${endpoint}', {
    method: 'POST',
    headers: {
        'X-API-Key': '${apiKey}'
    },
    body: formData
});

const result = await response.json();
console.log(result);`;
    
    document.getElementById('code-node').textContent = `const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const formData = new FormData();
formData.append('image', fs.createReadStream('document.jpg'));

axios.post('${baseUrl}/v1/ocr/${endpoint}', formData, {
    headers: {
        'X-API-Key': '${apiKey}',
        ...formData.getHeaders()
    }
}).then(res => console.log(res.data));`;
  }
  
  function copyCode(lang) {
    const text = document.getElementById(`code-${lang}`).textContent;
    navigator.clipboard.writeText(text).then(() => {
      showNotification('Code copied!', 'success');
    });
  }
  
  function copyResponse() {
    const text = document.getElementById('responseOutput').textContent;
    navigator.clipboard.writeText(text).then(() => {
      showNotification('Response copied!', 'success');
    });
  }
  
  function exportResults() {
    const text = document.getElementById('extractedText').textContent;
    const blob = new Blob([text], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'ocr_results.txt';
    a.click();
    URL.revokeObjectURL(url);
    showNotification('Results exported', 'success');
  }
  
  function showNotification(message, type) {
    const existing = document.querySelector('.notification');
    if (existing) existing.remove();
    
    const notification = document.createElement('div');
    notification.className = `notification fixed top-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50 text-sm ${
      type === 'success' ? 'bg-green-100 text-green-800 border border-green-300' :
      type === 'error' ? 'bg-red-100 text-red-800 border border-red-300' :
      'bg-blue-100 text-blue-800 border border-blue-300'
    }`;

    const iconName = type === 'success'
      ? 'check_circle'
      : type === 'error'
        ? 'error'
        : 'info';
    
    notification.innerHTML = `
      <div class="flex items-center">
        <span class="gicon" aria-hidden="true">${iconName}</span>
        <span>${message}</span>
      </div>
    `;
    
    document.body.appendChild(notification);
    setTimeout(() => notification.remove(), 3000);
  }
  
  function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
  }
</script>

<style>
  @keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  .notification { animation: slideIn 0.3s ease-out; }
</style>
{% endblock %}