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

{% block title %}Flood Detection Testing - Peza{% endblock %}

{% block content %}
<main class="mx-auto px-4 py-5">

  <!-- Header -->
  <div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Flood Detection Testing</h1>
    <p class="text-sm text-gray-600 mt-1">Test flood detection on your images</p>
  </div>

  <!-- API Info -->
  <div class="bg-blue-50 border border-blue-200 rounded-lg p-5 mb-6">
    <div class="flex items-start gap-4">
      <svg class="w-6 h-6 text-blue-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
      </svg>
      <div>
        <h3 class="text-base font-semibold text-gray-900 mb-2">Endpoint</h3>
        <div class="text-sm space-y-1.5">
          <p><span class="font-medium">POST</span> <code class="bg-white px-2 py-0.5 rounded text-blue-700">{{ base_url }}/api/flood-detection/</code></p>
          <p><span class="font-medium">Header:</span> <code>X-API-Key: your-key</code></p>
          <p><span class="font-medium">Body:</span> multipart/form-data • field: <code>image</code></p>
        </div>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

    <!-- Left: Form -->
    <div class="bg-white rounded-lg border border-gray-200 p-5">
      <h2 class="text-lg font-semibold mb-5">Test Upload</h2>

      <form id="floodTestForm" class="space-y-5">
        <!-- API Key -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1.5">API Key</label>
          <select id="apiKeySelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <option value="">Select key...</option>
            {% for key in api_keys %}
            <option value="{{ key.key }}">{{ key.name }}{% if key.is_testing %} (test){% endif %}</option>
            {% endfor %}
          </select>
        </div>

        <!-- Image Upload -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1.5">Image</label>
          <div class="border-2 border-dashed border-gray-300 rounded-lg p-5 text-center hover:border-blue-400 transition">
            <input type="file" id="imageInput" accept="image/*" class="hidden">
            <label for="imageInput" class="cursor-pointer block">
              <div id="uploadPrompt">
                <svg class="mx-auto h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <p class="mt-2 text-sm text-gray-600">Click or drag image here</p>
                <p class="text-xs text-gray-500 mt-1">max 10 MB • jpg/png</p>
              </div>
              <div id="imagePreviewContainer" class="hidden">
                <img id="imagePreview" class="max-h-40 mx-auto rounded mt-2">
                <p class="mt-2 text-xs text-gray-600" id="imageName"></p>
              </div>
            </label>
          </div>
        </div>

        <button type="submit" id="submitBtn" class="w-full bg-blue-600 text-white py-2.5 px-4 rounded-lg hover:bg-blue-700 flex items-center justify-center gap-2 text-sm font-medium">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
          </svg>
          Analyze Image
        </button>
      </form>

      <!-- cURL quick copy -->
      <div class="mt-6 pt-5 border-t border-gray-200">
        <h3 class="text-sm font-medium mb-2">cURL</h3>
        <div class="bg-gray-900 rounded p-3 text-xs overflow-x-auto font-mono text-green-300">
          <code id="curlExample">curl -X POST {{ base_url }}/api/flood-detection/ \
  -H "X-API-Key: YOUR_KEY" \
  -F "image=@/path/to/flood.jpg"</code>
        </div>
        <button onclick="copyToClipboard('curlExample')" class="mt-2 text-xs text-blue-600 hover:text-blue-800">
          Copy cURL
        </button>
      </div>
    </div>

    <!-- Right: Results -->
    <div class="bg-white rounded-lg border border-gray-200 p-5">
      <h2 class="text-lg font-semibold mb-5">Result</h2>

      <div id="loadingState" class="hidden text-center py-10">
        <div class="inline-block animate-spin rounded-full h-10 w-10 border-b-2 border-blue-600"></div>
        <p class="mt-3 text-sm text-gray-600">Processing...</p>
      </div>

      <div id="errorState" class="hidden">
        <div class="bg-red-50 border border-red-200 rounded p-4 text-sm">
          <p class="font-medium text-red-800">Error</p>
          <p id="errorMessage" class="mt-1 text-red-700"></p>
        </div>
      </div>

      <div id="successState" class="hidden space-y-5">
        <!-- Stats -->
        <div class="grid grid-cols-2 gap-4">
          <div class="bg-blue-50 rounded p-3 text-center">
            <p class="text-xs text-blue-700">Water</p>
            <p class="text-xl font-bold text-blue-900" id="waterPercentage">—</p>
          </div>
          <div class="bg-green-50 rounded p-3 text-center">
            <p class="text-xs text-green-700">Dry</p>
            <p class="text-xl font-bold text-green-900" id="dryPercentage">—</p>
          </div>
        </div>

        <div class="bg-gray-50 rounded p-3 text-center">
          <p class="text-xs text-gray-600">Flood regions detected</p>
          <p class="text-lg font-bold" id="regionCount">—</p>
        </div>

        <!-- Image tabs -->
        <div>
          <div class="flex gap-2 mb-3 flex-wrap">
            <button onclick="showImage('mask')" class="image-tab px-3 py-1.5 text-xs font-medium rounded bg-blue-100 text-blue-800" data-tab="mask">Water Mask</button>
            <button onclick="showImage('overlay')" class="image-tab px-3 py-1.5 text-xs font-medium rounded text-gray-700 hover:bg-gray-100" data-tab="overlay">Overlay</button>
            <button onclick="showImage('annotated')" class="image-tab px-3 py-1.5 text-xs font-medium rounded text-gray-700 hover:bg-gray-100" data-tab="annotated">Annotated</button>
          </div>
          <div class="bg-gray-100 rounded p-3 min-h-[220px] flex items-center justify-center">
            <img id="resultImage" class="max-w-full rounded hidden">
            <p id="noImageText" class="text-sm text-gray-500">Select view</p>
          </div>
        </div>

        <!-- Regions -->
        <div id="regionsList" class="border-t pt-5">
          <h3 class="text-sm font-medium mb-2">Detected Regions</h3>
          <div id="regionsContainer" class="space-y-2 max-h-40 overflow-y-auto text-sm"></div>
        </div>

        <!-- JSON -->
        <details class="border-t pt-5">
          <summary class="cursor-pointer text-sm font-medium text-gray-900">Full JSON</summary>
          <div class="mt-3 bg-gray-900 rounded p-3 text-xs overflow-x-auto font-mono text-green-300">
            <pre><code id="jsonResponse"></code></pre>
          </div>
        </details>
      </div>

      <div id="initialState" class="text-center py-12">
        <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
        </svg>
        <p class="mt-3 text-sm text-gray-500">Upload image to begin</p>
      </div>
    </div>
  </div>

  <!-- Code Examples -->
  <div class="mt-8 border-t pt-6">
    <h2 class="text-lg font-semibold mb-4">Code Examples</h2>

    <div class="space-y-4">

      <!-- Python -->
      <details class="bg-gray-50 rounded border">
        <summary class="cursor-pointer px-4 py-3 font-medium">Python (requests)</summary>
        <div class="px-4 pb-4">
<pre class="text-sm bg-gray-900 text-green-300 p-4 rounded overflow-x-auto font-mono">import requests

url = "{{ base_url }}/api/flood-detection/"
headers = {"X-API-Key": "YOUR_API_KEY"}
files = {"image": open("flood_image.jpg", "rb")}

response = requests.post(url, headers=headers, files=files)
print(response.json())</pre>
        </div>
      </details>

      <!-- PHP -->
      <details class="bg-gray-50 rounded border">
        <summary class="cursor-pointer px-4 py-3 font-medium">PHP (cURL)</summary>
        <div class="px-4 pb-4">
<pre class="text-sm bg-gray-900 text-green-300 p-4 rounded overflow-x-auto font-mono">$url = "{{ base_url }}/api/flood-detection/";
$apiKey = "YOUR_API_KEY";
$file = new CURLFile('flood_image.jpg', 'image/jpeg', 'image.jpg');

$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ["X-API-Key: $apiKey"]);
curl_setopt($ch, CURLOPT_POSTFIELDS, ['image' => $file]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
curl_close($ch);

echo $response;</pre>
        </div>
      </details>

      <!-- Node.js -->
      <details class="bg-gray-50 rounded border">
        <summary class="cursor-pointer px-4 py-3 font-medium">Node.js (axios + form-data)</summary>
        <div class="px-4 pb-4">
<pre class="text-sm bg-gray-900 text-green-300 p-4 rounded overflow-x-auto font-mono">const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');

const form = new FormData();
form.append('image', fs.createReadStream('flood_image.jpg'));

axios.post('{{ base_url }}/api/flood-detection/', form, {
  headers: {
    ...form.getHeaders(),
    'X-API-Key': 'YOUR_API_KEY'
  }
})
.then(res => console.log(res.data))
.catch(err => console.error(err));</pre>
        </div>
      </details>

    </div>
  </div>

</main>

<script>
// ──────────────────────────────────────────────
//  Your original JavaScript (slightly compacted)
// ──────────────────────────────────────────────

let currentResponse = null;

document.getElementById('imageInput').addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = e => {
    document.getElementById('imagePreview').src = e.target.result;
    document.getElementById('imageName').textContent = file.name;
    document.getElementById('uploadPrompt').classList.add('hidden');
    document.getElementById('imagePreviewContainer').classList.remove('hidden');
  };
  reader.readAsDataURL(file);
});

document.getElementById('floodTestForm').addEventListener('submit', async e => {
  e.preventDefault();

  const apiKey = document.getElementById('apiKeySelect').value;
  const imageFile = document.getElementById('imageInput').files[0];

  if (!apiKey) return alert('Select an API key');
  if (!imageFile) return alert('Select an image');

  document.getElementById('initialState').classList.add('hidden');
  document.getElementById('errorState').classList.add('hidden');
  document.getElementById('successState').classList.add('hidden');
  document.getElementById('loadingState').classList.remove('hidden');

  const formData = new FormData();
  formData.append('image', imageFile);

  try {
    const res = await fetch('{{ base_url }}/api/flood-detection/', {
      method: 'POST',
      headers: { 'X-API-Key': apiKey },
      body: formData
    });

    const data = await res.json();
    document.getElementById('loadingState').classList.add('hidden');

    if (res.ok && data.success) {
      currentResponse = data;
      displaySuccess(data);
    } else {
      displayError(data.error || 'Request failed');
    }
  } catch (err) {
    document.getElementById('loadingState').classList.add('hidden');
    displayError('Network error: ' + err.message);
  }
});

function displaySuccess(data) {
  document.getElementById('successState').classList.remove('hidden');

  document.getElementById('waterPercentage').textContent = data.analysis.water_coverage.percentage + '%';
  document.getElementById('dryPercentage').textContent = data.analysis.dry_land_coverage.percentage + '%';
  document.getElementById('regionCount').textContent = data.analysis.flood_regions.total_count;

  const container = document.getElementById('regionsContainer');
  container.innerHTML = '';
  data.analysis.flood_regions.regions.forEach(r => {
    const div = document.createElement('div');
    div.className = 'flex justify-between bg-white p-2.5 rounded border text-sm';
    div.innerHTML = `<span>Region ${r.region_id}</span><span>${r.percentage_of_image}% (${r.area_pixels.toLocaleString()} px)</span>`;
    container.appendChild(div);
  });

  document.getElementById('jsonResponse').textContent = JSON.stringify(data, null, 2);

  showImage('mask');
}

function displayError(msg) {
  document.getElementById('errorState').classList.remove('hidden');
  document.getElementById('errorMessage').textContent = msg;
}

function showImage(type) {
  if (!currentResponse) return;

  const img = document.getElementById('resultImage');
  img.src = 'data:image/png;base64,' + currentResponse.images[type];
  img.classList.remove('hidden');
  document.getElementById('noImageText').classList.add('hidden');

  document.querySelectorAll('.image-tab').forEach(tab => {
    tab.classList.remove('bg-blue-100', 'text-blue-800');
    tab.classList.add('text-gray-700', 'hover:bg-gray-100');
  });

  const active = document.querySelector(`[data-tab="${type}"]`);
  if (active) {
    active.classList.add('bg-blue-100', 'text-blue-800');
    active.classList.remove('text-gray-700', 'hover:bg-gray-100');
  }
}

function copyToClipboard(id) {
  const text = document.getElementById(id).textContent;
  navigator.clipboard.writeText(text).then(() => alert('Copied!'));
}
</script>
{% endblock %}