{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load currency_filters %}
{% block title %}Set winners for {{ auction }}{% endblock %}

{# Disable analytics and ads for this page to enable cross-origin isolation for SharedArrayBuffer #}
{% block analytics %}
{# Analytics disabled for voice recognition cross-origin isolation #}
{% endblock %}

{% block ads %}
{# Ads disabled for voice recognition cross-origin isolation #}
{% endblock %}

{# Override CDN resources with self-hosted versions for cross-origin isolation #}
{% block core_css %}
<link rel="stylesheet" href="{% static 'css/vendor/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/vendor/bootstrap-icons.min.css' %}">
{% endblock %}

{% block core_js %}
{# Self-hosted jQuery, Bootstrap for cross-origin isolation #}
{# jQuery must be self-hosted to enable cross-origin isolation - will be added to download script #}
<script type="text/javascript" src="{% static 'js/vendor/jquery.min.js' %}"></script>
<script src="{% static 'js/vendor/bootstrap.bundle.min.js' %}"></script>
{% endblock %}

{% block extra_js %}
{# Use self-hosted Vosklet instead of CDN for cross-origin isolation #}
{% comment %}
  Voice input (microphone) isn't wired up for the native app WebView yet and isn't used on the web
  either (the button below is commented out), so skip loading the speech WASM in the mobile app.
{% endcomment %}
{% if not request.is_mobile_app %}
<script src="{% static 'js/vendor/Vosklet.js' %}" async defer></script>
{% endif %}
<script>
  let tooltipTimeout;
  function initializeTooltipWithTimeout() {
      if (tooltipTimeout) {
          clearTimeout(tooltipTimeout);
      }
      tooltipTimeout = setTimeout(() => {
          const tooltipTriggerElement = document.getElementById('more_save_options_tooltip');
          if (tooltipTriggerElement) {
              const existingTooltip = bootstrap.Tooltip.getInstance(tooltipTriggerElement);

              if (!existingTooltip) {
                  tooltipTriggerElement.setAttribute('title', 'Ignore errors and save here');
                  const tooltip = new bootstrap.Tooltip(tooltipTriggerElement);
                  tooltip.show();
              }
          }
      }, 100);
  }

  function removeTooltip() {
      const tooltipTriggerElement = document.getElementById('more_save_options_tooltip');
      if (tooltipTriggerElement) {
          const existingTooltip = bootstrap.Tooltip.getInstance(tooltipTriggerElement);
          if (existingTooltip) {
              existingTooltip.dispose();
          }
          tooltipTriggerElement.removeAttribute('title');
      }
  }


  function undoSellLot() {
      let data = {
          lot_number: $("#last_sold_lot_number").text()
      };
      $.ajax({
          url: "{% url 'auction_unsell_lot' slug=auction.slug %}",
          method: 'POST',
          beforeSend: function (request) {
                  request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
              },
          data: data,
          success: function(response) {
              handleServerResponse(response);
          },
          error: function(error) {
              console.error(error);
          }
      });
    }

  function handleServerResponse(response) {
      $(".form-control").removeClass("is-invalid is-valid");
      let fields = ['price', 'winner', 'lot']
      if (response.success_message) {
        removeTooltip()
        fields.forEach(function(field) {
          $("#" + field).val('');
        })
        $("#result").html('');
        // If the lot queue has another lot ready, pull it up automatically: fill the lot number,
        // load its picture, and jump the cursor straight to the price. Otherwise focus the lot box.
        if (response.next_queued_lot_number) {
          $("#lot").val(response.next_queued_lot_number);
          getLotPicture();
          $("#price").focus();
        } else {
          $("#lot").focus();
        }
        $("#success_banner").removeClass('d-none');
        if (response.banner == "error") {
          $("#success_banner").removeClass('bg-success');
          $("#success_banner").addClass('bg-danger');
        } else {
          $("#success_banner").addClass('bg-success');
          $("#success_banner").removeClass('bg-danger');
        }

        $("#last_sold_lot_number").html(response.last_sold_lot_number);
        $("#success_message").html(response.success_message);
        if (response.hide_undo_button) {
          $("#undo_button").addClass('d-none');
        } else {
          $("#undo_button").removeClass('d-none');
        }
      } else {
        fields.forEach(function(field) {
            if (response[field] === "valid") {
                $("#" + field).addClass("is-valid");
            } else if (response[field]) {
                initializeTooltipWithTimeout();
                $("#" + field).addClass("is-invalid");
                $("#" + field).siblings(".invalid-tooltip").text(response[field]);
            }
        });
      }
      if (response.online_high_bidder_message) {
        $("#sell_to_online_high_bidder").removeClass('d-none');
        $("#sell_to_online_high_bidder").text(response.online_high_bidder_message);
      } else {
        $("#sell_to_online_high_bidder").addClass('d-none');
      }
      if (response.auction_minutes_to_end) {
        var result = response.unsold_lot_count + " unsold lots.  Based on the rate of the last 10 lots sold, this auction will end in "
        var hours = Math.floor(response.auction_minutes_to_end / 60);
        var remainingMinutes = response.auction_minutes_to_end % 60;
        if (hours > 0) {
            result += hours + " hour" + (hours > 1 ? "s" : "") + (remainingMinutes > 0 ? " and " + remainingMinutes + " minute" + (remainingMinutes > 1 ? "s" : "") : "");
        } else {
            result += remainingMinutes + " minute" + (remainingMinutes > 1 ? "s" : "");
        }
        $("#auction_minutes_to_end").removeClass('d-none');
        $("#auction_minutes_to_end").text(result);
      } else {
        $("#auction_minutes_to_end").addClass('d-none');
      }

  }

  function sendFormData(action = 'validate') {
      let formData = {
          lot: $("#lot").val(),
          price: $("#price").val(),
          winner: $("#winner").val(),
          action: action
      };
      $.ajax({
          url: '{{ request.path }}',
          method: 'POST',
          beforeSend: function (request) {
                  request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
              },
          data: formData,
          success: function(response) {
              handleServerResponse(response);
          },
          error: function(xhr, status, error) {
            $("#success_banner").removeClass('bg-success');
            $("#success_banner").addClass('bg-danger');
            $("#success_banner").removeClass('d-none');
            let errorMessage = (xhr.responseJSON && xhr.responseJSON.error) || error || (status === 'error' || status === 'timeout' ? 'Network connection problem, try again' : 'An unexpected error occurred, try again');
            $("#success_message").text(`FAILED: ${errorMessage}`);
            $("#undo_button").addClass('d-none');
          }
      });
  }

  function getLotPicture() {
    htmx.ajax('get','/api/{{ auction.slug }}/lots/' + encodeURIComponent($("#lot").val()), {target: '#result'});
  }

  // Voice recognition functionality
  let voiceRecognizer = null;
  let isListening = false;
  let pendingLot = null;
  let pendingPrice = null;
  let pendingWinner = null;
  let isSoldCommandGiven = false;

  // Convert spoken numbers to digits
  function parseSpokenNumber(text) {
    const numberWords = {
      'zero': '0', 'one': '1', 'two': '2', 'three': '3', 'four': '4',
      'five': '5', 'six': '6', 'seven': '7', 'eight': '8', 'nine': '9',
      'ten': '10', 'eleven': '11', 'twelve': '12', 'thirteen': '13',
      'fourteen': '14', 'fifteen': '15', 'sixteen': '16', 'seventeen': '17',
      'eighteen': '18', 'nineteen': '19', 'twenty': '20', 'thirty': '30',
      'forty': '40', 'fifty': '50', 'sixty': '60', 'seventy': '70',
      'eighty': '80', 'ninety': '90', 'hundred': '100', 'thousand': '1000'
    };

    let result = '';
    let words = text.toLowerCase().split(/[\s-]+/);

    for (let word of words) {
      if (numberWords[word] !== undefined) {
        result += numberWords[word];
      } else if (/^\d+$/.test(word)) {
        result += word;
      }
    }

    return result || null;
  }

  // Handle voice recognition results
  function handleVoiceResult(text) {
    text = text.toLowerCase().trim();
    //console.log('Voice recognized:', text);

    // Check for undo command
    if (/\bundo\b/.test(text)) {
      console.log('Undo command detected');
      if (!$("#undo_button").hasClass('d-none')) {
        undoSellLot();
      }
      return;
    }

    // Check for sold command
    if (/\bsold\b/.test(text)) {
      console.log('Sold command detected');
      isSoldCommandGiven = true;
      // Try to auto-submit if all fields are filled
      tryAutoSubmit();
      return;
    }

    // Check for lot number
    let lotMatch = text.match(/\blot\s+(?:number\s+)?(\d+|[A-Za-z]+(?:-[A-Za-z]+)*(?:\s+[A-Za-z]+(?:-[A-Za-z]+)*)*)(?:\s|$)/i);
    if (lotMatch) {
      let lotNumber = parseSpokenNumber(lotMatch[1]);
      if (lotNumber) {
        console.log('Lot number detected:', lotNumber);
        $("#lot").val(lotNumber);
        $("#lot").trigger('blur');
        pendingLot = lotNumber;
        tryAutoSubmit();
        return;
      }
    }

    // Check for price (dollar/dollars)
    let priceMatch = text.match(/(\d+|[A-Za-z]+(?:-[A-Za-z]+)*(?:\s+[A-Za-z]+(?:-[A-Za-z]+)*)*)\s+dollars?/i);
    if (priceMatch) {
      let price = parseSpokenNumber(priceMatch[1]);
      if (price) {
        console.log('Price detected:', price);
        $("#price").val(price);
        $("#price").trigger('blur');
        pendingPrice = price;
        tryAutoSubmit();
        return;
      }
    }

    // Check for bidder number
    let bidderMatch = text.match(/\bbidder\s+(\d+|[A-Za-z]+(?:-[A-Za-z]+)*)(?:\s|$)/i);
    if (bidderMatch) {
      let bidderNum = bidderMatch[1].trim();
      // Try to parse as number first
      let parsedBidder = parseSpokenNumber(bidderNum);
      if (!parsedBidder) {
        // If not a number, might be a letter or word - use as is
        parsedBidder = bidderNum.toUpperCase().charAt(0);
      }
      console.log('Bidder detected:', parsedBidder);
      $("#winner").val(parsedBidder);
      $("#winner").trigger('blur');
      pendingWinner = parsedBidder;
      tryAutoSubmit();
      return;
    }
  }

  // Try to auto-submit if sold command was given and all fields are filled
  function tryAutoSubmit() {
    if (isSoldCommandGiven) {
      let lot = $("#lot").val();
      let price = $("#price").val();
      let winner = $("#winner").val();

      if (lot && price && winner) {
        console.log('Auto-submitting form...');
        sendFormData('save');
        isSoldCommandGiven = false;
        pendingLot = null;
        pendingPrice = null;
        pendingWinner = null;
      }
    }
  }
async function startVoiceRecognition() {
  if (isListening) return;

  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: false,
      audio: { echoCancellation: true, noiseSuppression: true, channelCount: 1 }
    });
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const micNode = ctx.createMediaStreamSource(stream);
    const module = await loadVosklet();
    const modelUrl = "{% static 'models/vosk/vosk-model-small-en-us-0.15/' %}";
    const model = await module.createModel(modelUrl, "English", "vosk-model-small-en-us-0.15");
    const recognizer = await module.createRecognizer(model, ctx.sampleRate);
    recognizer.addEventListener("partialResult", ev => {
        $("#voice-status").text(ev.detail.partial);

      if (ev.detail && ev.detail.partial) {
        $("#voice-status").text(ev.detail.partial);
      }
    });

recognizer.addEventListener("result", ev => {
    let detailObj;
    try {
        detailObj = JSON.parse(ev.detail);
    } catch (err) {
        console.error("[DEBUG] Failed to parse ev.detail:", err, ev.detail);
        return;
    }
    if (detailObj && detailObj.text && detailObj.text.trim() !== "") {
        $("#voice-status").text(detailObj.text);
        handleVoiceResult(detailObj.text);
    }
});


    // Convert Float32 [-1..1] to Int16 PCM (optional, mostly for debugging)
    function floatToInt16(float32) {
      const out = new Int16Array(float32.length);
      for (let i = 0; i < float32.length; i++) {
        let s = Math.max(-1, Math.min(1, float32[i]));
        out[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
      }
      return out;
    }

    const transferer = await module.createTransferer(ctx, 128 * 150);

    // Gain factor to boost quiet audio
    const GAIN = 5;

    transferer.port.onmessage = ev => {
      const data = ev.data;
      if (!data) return;

      if (data.constructor.name === "Float32Array") {
        for (let i = 0; i < data.length; i++) data[i] *= GAIN;
      }

      const slice = data.subarray ? data.subarray(0,20) : data.slice(0,20);
      // RMS/volume
      // const rms = Math.sqrt(slice.reduce((sum,v)=>sum+v*v,0)/slice.length);
      // console.log("[DEBUG] Audio chunk RMS:", rms);

      // Feed Float32 directly to recognizer (Vosklet expects floats)
      try {
        const accepted = recognizer.acceptWaveform(data);
        //console.log("[DEBUG] acceptWaveform returned:", accepted);
      } catch (err) {
        console.error("[DEBUG] acceptWaveform error:", err);
      }
    };

    micNode.connect(transferer);

    voiceRecognizer = { ctx, recognizer, transferer, micNode, stream };
    isListening = true;
    $("#voice-btn").removeClass("btn-primary").addClass("btn-danger");
    $("#voice-btn").html('<i class="bi bi-mic-fill"></i> Stop Listening');
    $("#voice-status").text("Listening...");
    $("#voice-btn").prop("disabled", false);

  } catch (err) {
    $("#voice-status").text("Failed to start voice recognition: " + (err && err.message));
    isListening = false;
    voiceRecognizer = null;
  }
}

  // Stop voice recognition
  function stopVoiceRecognition() {
    if (!isListening || !voiceRecognizer) return;

    try {
      // Stop all media stream tracks
      if (voiceRecognizer.stream) {
        voiceRecognizer.stream.getTracks().forEach(track => track.stop());
      }

      // Close audio context
      if (voiceRecognizer.ctx) {
        voiceRecognizer.ctx.close();
      }

      voiceRecognizer = null;
      isListening = false;
      $("#voice-btn").removeClass("btn-danger").addClass("btn-primary");
      $("#voice-btn").html('<i class="bi bi-mic"></i> Start Voice Control');
      $("#voice-status").text("Voice control stopped");
    } catch (err) {
      console.error("Error stopping voice recognition:", err);
      // Reset state anyway
      voiceRecognizer = null;
      isListening = false;
      $("#voice-btn").removeClass("btn-danger").addClass("btn-primary");
      $("#voice-btn").html('<i class="bi bi-mic"></i> Start Voice Control');
      $("#voice-status").text("Voice control stopped");
    }
  }

  // Toggle voice recognition
  function toggleVoiceRecognition() {
    if (isListening) {
      stopVoiceRecognition();
    } else {
      startVoiceRecognition();
    }
  }


  let webSpeechRecognizer = null;
  let isWebSpeechListening = false;

  function startWebSpeechRecognition() {
    if (isWebSpeechListening) return;

    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SR) {
      $("#voice-status").text("Web Speech API not supported in this browser.");
      return;
    }

    webSpeechRecognizer = new SR();
    webSpeechRecognizer.lang = "en-US";
    webSpeechRecognizer.continuous = true;
    webSpeechRecognizer.interimResults = true;

    webSpeechRecognizer.onstart = function () {
      isWebSpeechListening = true;
      $("#voice-btn").removeClass("btn-primary").addClass("btn-danger");
      $("#voice-btn").html('<i class="bi bi-mic-fill"></i> Stop Listening');
      $("#voice-status").text("Listening (Web Speech)...");
    };

    webSpeechRecognizer.onerror = function (ev) {
      console.error("Web Speech error:", ev.error);
      $("#voice-status").text("Voice error: " + ev.error);
    };

    webSpeechRecognizer.onend = function () {
      isWebSpeechListening = false;
      $("#voice-btn").removeClass("btn-danger").addClass("btn-primary");
      $("#voice-btn").html('<i class="bi bi-mic"></i> Start Voice Control');
      $("#voice-status").text("Voice control stopped");
    };

    webSpeechRecognizer.onresult = function (ev) {
      // Iterate results to find final or best transcript
      for (let i = ev.resultIndex; i < ev.results.length; i++) {
        const res = ev.results[i];
        const transcript = res[0].transcript.trim();
        if (!transcript) continue;

        if (res.isFinal) {
          $("#voice-status").text(transcript);
          handleVoiceResult(transcript); // reuse existing handler
        } else {
          // Show partial result
          $("#voice-status").text(transcript);
        }
      }
    };

    try {
      webSpeechRecognizer.start();
    } catch (err) {
      console.error("Failed to start Web Speech:", err);
      $("#voice-status").text("Failed to start voice recognition: " + (err && err.message));
      isWebSpeechListening = false;
    }
  }

  function stopWebSpeechRecognition() {
    if (!isWebSpeechListening || !webSpeechRecognizer) return;
    try {
      webSpeechRecognizer.stop();
    } catch (err) {
      console.error("Error stopping Web Speech:", err);
    } finally {
      webSpeechRecognizer = null;
      isWebSpeechListening = false;
      $("#voice-btn").removeClass("btn-danger").addClass("btn-primary");
      $("#voice-btn").html('<i class="bi bi-mic"></i> Start Voice Control');
      $("#voice-status").text("Voice control stopped");
    }
  }

  function toggleWebSpeechRecognition() {
    if (isWebSpeechListening) {
      stopWebSpeechRecognition();
    } else {
      startWebSpeechRecognition();
    }
  }



$(document).ready(function() {
        var lotSearch;
        $("#lot").on('blur', function() {
          clearTimeout(lotSearch);
          getLotPicture();
        });
        // Prefill from the head of the in-person lot queue, if any: load its picture and focus the
        // price. Otherwise start with the lot box selected as before.
        var queueHeadLot = "{{ queue_head_lot_number|escapejs }}";
        if (queueHeadLot) {
          $("#lot").val(queueHeadLot);
          getLotPicture();
          $("#price").focus();
        } else {
          $('#lot').select();
        }
        var input = document.getElementById('lot');
        input.addEventListener('keyup', function () {
          clearTimeout(lotSearch);
          lotSearch = setTimeout(getLotPicture, 1000);
        });

      // Full screen mode
      $('#fullscreen-btn').on('click', function() {
        let elem = document.documentElement;
        if (!document.fullscreenElement && !document.webkitFullscreenElement) {
          // Use requestFullscreen if available, otherwise try webkitRequestFullscreen
          (elem.requestFullscreen ? elem.requestFullscreen() : elem.webkitRequestFullscreen())
            .catch(err => {
              console.error(`Error attempting to enable full-screen mode: ${err.message}`);
            });
        } else {
          // Use exitFullscreen if available, otherwise try webkitExitFullscreen
          (document.exitFullscreen ? document.exitFullscreen() : document.webkitExitFullscreen())
            .catch(err => {
              console.error(`Error attempting to exit full-screen mode: ${err.message}`);
            });
        }
      });

      $(document).on('fullscreenchange webkitfullscreenchange', function() {
        if (document.fullscreenElement || document.webkitFullscreenElement) {
          $('.hide-fullscreen').hide();
          $('#fullscreen-btn').removeClass('d-sm-inline-block');
        } else {
          $('.hide-fullscreen').show();
          $('#fullscreen-btn').addClass('d-sm-inline-block');
        }
      });

    // Form stuff
    $(".form-control").on('blur', function() {
        sendFormData();
    });
    $("#auctionForm").on('submit', function(e) {
        e.preventDefault();
        sendFormData('save');
    });
});


</script>
{% endblock %}
{% block content %}
<span class="hide-fullscreen">
{% include 'auction_ribbon.html' %}

<small>Use this page to mark lots as sold.  Press tab to move the to next field.  <a href='https://github.com/iragm/fishauctions/issues/223'>Leave feedback about this page here.</a></small><br>
<button id="fullscreen-btn" class="btn btn-sm bg-primary d-none d-sm-inline-block"><i class="bi bi-fullscreen"></i> Go fullscreen</button>
{% if not request.is_mobile_app %}
<!-- <button id="voice-btn" class="btn btn-sm btn-primary d-none d-sm-inline-block ms-2" onclick="toggleWebSpeechRecognition()"><i class="bi bi-mic"></i> Start Voice Control</button> -->
<small id="voice-status" class="ms-2 text-muted"></small>
{% endif %}

</span>
{% endblock %}
{% block undiv_content %}
<div class="container">


<div class="alert bg-success text-dark d-none" id="success_banner">
  <p class="mb-0"><span id='last_sold_lot_number' class="d-none">
    </span><span id='success_message'></span> <a id='undo_button' class='text-dark d-none' onclick="undoSellLot()" href='javascript:void(0)'>Undo</a>
  </p>
</div>

  <form id="auctionForm" class="row row-cols-md-auto g-3 d-flex align-items-center justify-content-center">
    <div class="col-12 mb-3">
        <div class="input-group">
            <input type="text" class="form-control" id="lot" placeholder="Lot number" autocomplete="off">
            <div class="invalid-tooltip"></div>
        </div>
    </div>
    <div class="col-12 mb-3">
        <label class="visually-hidden" for="price" class="form-label">Sell Price</label>
        <div class="input-group">
            <span class="input-group-text">{{ auction.currency_symbol }}</span>
            {% if auction.only_whole_dollar_bids %}
            <input type="number" step="1" class="form-control" id="price" placeholder="0" autocomplete="off">
            <span class="input-group-text">.00</span>
            {% else %}
            <input type="number" step="0.01" min="0.01" class="form-control" id="price" placeholder="0.00" autocomplete="off">
            {% endif %}
            <div class="invalid-tooltip"></div>
        </div>
    </div>
    <div class="col-12 mb-3">
        <div class="input-group">
            <input type="text" class="form-control" id="winner" placeholder="Winner" autocomplete="off">
            <div class="invalid-tooltip"></div>
        </div>
    </div>
    <div class="col-12 mb-3">
      <div class="btn-group" role="group" aria-label="Save">
        <button type="submit" class="btn bg-success text-dark">Save</button>
        <div class="btn-group" role="group">
          <button id="more_save_options" type="button" class="btn btn-success dropdown-toggle text-dark" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button><span id="more_save_options_tooltip"></span>
          <div class="dropdown-menu" aria-labelledby="more_save_options">
            <a class="dropdown-item" href='javascript:void(0)' onclick="sendFormData('force_save')">Ignore errors and save</a>
            <a id='sell_to_online_high_bidder' class="d-none dropdown-item" onclick="sendFormData('to_online_high_bidder')" href='javascript:void(0)'></a>
            <a class="dropdown-item" href='javascript:void(0)' onclick="sendFormData('end_unsold')">End lot unsold</a>
          </div>
        </div>
      </div>
    </div>
</form>
</div>
<div id="result"></div>
<div class="d-flex justify-content-center">
    <small><span class="text-muted" id="auction_minutes_to_end"></span></small>
</div>
{% endblock %}