{% extends "pos/base.html" %}

{% block title %}Product Image{% endblock %}

{% block content %}

<style>
  .pi-wrap {
    padding: 16px;
  }

  .pi-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    overflow: hidden;
  }

  .pi-card-header {
    padding: 16px 18px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
  }

  .pi-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
  }

  .pi-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6b7280;
  }

  .pi-card-body {
    padding: 18px;
  }

  .pi-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 22px;
    align-items: start;
  }

  .pi-preview-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    background: #f9fafb;
  }

  .pi-preview-img {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
  }

  .pi-no-image {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    border: 1px dashed #9ca3af;
    border-radius: 12px;
    background: #ffffff;
  }

  .pi-agent-status {
    font-size: 12px;
    margin-top: 10px;
    color: #6b7280;
  }

  .pi-agent-status.ok {
    color: #15803d;
  }

  .pi-agent-status.bad {
    color: #b91c1c;
  }

  .pi-form-group {
    margin-bottom: 14px;
  }

  .pi-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
  }

  .pi-input {
    width: 100%;
    height: 38px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0 10px;
    outline: none;
    background: #ffffff;
    color: #111827;
  }

  .pi-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  }

  .pi-input[readonly] {
    background: #f3f4f6;
    color: #4b5563;
  }

  .pi-help {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
  }

  .pi-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 14px;
  }

  .pi-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
  }

  .pi-btn {
    height: 38px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    border-radius: 8px;
    padding: 0 14px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  .pi-btn:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
  }

  .pi-btn-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }

  .pi-btn-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
  }

  .pi-btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
  }

  .pi-btn-danger:hover {
    background: #b91c1c;
    color: #ffffff;
  }

  .pi-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    min-width: 260px;
    max-width: 420px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #fff;
    background: #111827;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
    display: none;
    font-size: 14px;
  }

  .pi-toast.success {
    background: #15803d;
  }

  .pi-toast.error {
    background: #b91c1c;
  }

  @media (max-width: 768px) {
    .pi-card-header {
      align-items: flex-start;
      flex-direction: column;
    }

    .pi-grid {
      grid-template-columns: 1fr;
    }

    .pi-preview-img {
      max-width: 100%;
    }
  }
</style>

<div class="pi-wrap">
  <div class="pi-card">

    <div class="pi-card-header">
      <div>
        <h2 class="pi-title">Product Image</h2>
        <p class="pi-subtitle">{{ product.name }} — {{ product.product_code }}</p>
      </div>

      <div>
        <a href="{% url 'hotel:restaurant:product_image_list' %}" class="pi-btn">
          Back
        </a>
      </div>
    </div>

    <div class="pi-card-body">

      <div class="pi-grid">

        <div>
          <div class="pi-preview-card">
            {% if image_url %}
              <img
                id="imagePreview"
                src="{{ image_url }}"
                alt="{{ product.name }}"
                class="pi-preview-img"
                onerror="this.style.display='none';"
              >
            {% else %}
              <img
                id="imagePreview"
                src=""
                alt=""
                class="pi-preview-img"
                style="display:none;"
              >
              <div id="noImageBox" class="pi-no-image">
                No Image
              </div>
            {% endif %}
          </div>

          <div id="agentStatus" class="pi-agent-status">
            Checking local agent...
          </div>
        </div>

        <form method="post" id="productImageForm">
          {% csrf_token %}

          <input
            type="hidden"
            name="image_key"
            id="imageKeyInput"
            value="{% if image %}{{ image.image_key }}{% endif %}"
          >

          <input
            type="hidden"
            name="original_name"
            id="originalNameInput"
            value="{% if image %}{{ image.original_name }}{% endif %}"
          >

          <div class="pi-form-group">
            <label class="pi-label">Product</label>
            <input
              type="text"
              value="{{ product.name }}"
              class="pi-input"
              readonly
            >
          </div>

          <div class="pi-form-group">
            <label class="pi-label">Upload Image</label>
            <input
              type="file"
              id="productImageFile"
              accept="image/*"
              class="pi-input"
            >
            <div class="pi-help">
              Image BP Local Agent ke SQLite database mein save hogi. Server par sirf image key save hogi.
            </div>
          </div>

          <div class="pi-form-group">
            <label class="pi-label">Image Key</label>
            <input
              type="text"
              id="imageKeyText"
              value="{% if image %}{{ image.image_key }}{% endif %}"
              class="pi-input"
              readonly
            >
          </div>

          <div class="pi-form-group">
            <label class="pi-label">Description</label>
            <input
              type="text"
              name="descp"
              value="{% if image %}{{ image.descp }}{% endif %}"
              class="pi-input"
              placeholder="Optional note"
            >
          </div>

          <div class="pi-form-group">
            <label class="pi-check">
              <input
                type="checkbox"
                name="status"
                value="1"
                {% if not image or image.status == 1 %}checked{% endif %}
              >
              Active
            </label>
          </div>

          <div class="pi-actions">
            <button type="submit" id="saveBtn" class="pi-btn pi-btn-primary">
              Save Image
            </button>

            {% if image %}
              <button
                type="submit"
                formaction="{% url 'hotel:restaurant:product_image_delete' product_t_id %}"
                formmethod="post"
                class="pi-btn pi-btn-danger"
                onclick="return confirm('Remove this product image link from server? Image DB backup/agent record will remain.');">
                Delete Link
              </button>
            {% endif %}
          </div>
        </form>

      </div>

    </div>
  </div>
</div>

<div id="piToast" class="pi-toast"></div>

{% endblock %}

{% block javascripts %}
<script>
(function () {
  var AGENT = {
    enabled: {{ agent.enabled|yesno:"true,false" }},
    healthUrl: "{{ agent.health_url|escapejs }}",
    uploadUrl: "{{ agent.product_upload_url|escapejs }}",
    baseUrl: "{{ agent.base_url|escapejs }}",
    maxMb: {{ agent.product_image_max_mb|default:5 }},
    allowedExt: [{% for ext in agent.product_image_allowed_ext %}"{{ ext|escapejs }}"{% if not forloop.last %},{% endif %}{% endfor %}]
  };

  var fileInput = document.getElementById("productImageFile");
  var imageKeyInput = document.getElementById("imageKeyInput");
  var originalNameInput = document.getElementById("originalNameInput");
  var imageKeyText = document.getElementById("imageKeyText");
  var imagePreview = document.getElementById("imagePreview");
  var noImageBox = document.getElementById("noImageBox");
  var saveBtn = document.getElementById("saveBtn");
  var agentStatus = document.getElementById("agentStatus");
  var toastBox = document.getElementById("piToast");

  function showMessage(type, message) {
    if (!toastBox) {
      alert(message);
      return;
    }

    toastBox.className = "pi-toast " + (type === "success" ? "success" : "error");
    toastBox.innerHTML = message;
    toastBox.style.display = "block";

    setTimeout(function () {
      toastBox.style.display = "none";
    }, 3000);
  }

  function getExt(filename) {
    var parts = String(filename || "").split(".");
    if (parts.length <= 1) return "";
    return parts.pop().toLowerCase();
  }

  function validateFile(file) {
    if (!file) {
      return "Please select image.";
    }

    var ext = getExt(file.name);

    if (AGENT.allowedExt.length && AGENT.allowedExt.indexOf(ext) === -1) {
      return "Invalid image type. Allowed: " + AGENT.allowedExt.join(", ");
    }

    var maxBytes = Number(AGENT.maxMb || 5) * 1024 * 1024;

    if (file.size > maxBytes) {
      return "Image size must be less than " + AGENT.maxMb + " MB.";
    }

    return "";
  }

  function setAgentStatus(ok, message) {
    if (!agentStatus) return;

    agentStatus.className = ok ? "pi-agent-status ok" : "pi-agent-status bad";
    agentStatus.innerHTML = message;
  }

  async function checkAgent() {
    if (!AGENT.enabled) {
      setAgentStatus(false, "Local agent disabled from settings.");
      return false;
    }

    try {
      var res = await fetch(AGENT.healthUrl, { method: "GET" });
      var data = await res.json();

      if (data.ok) {
        var storage = data.storage || "unknown";
        var version = data.version || "";
        setAgentStatus(true, "Local agent connected: " + AGENT.baseUrl + " | version: " + version + " | storage: " + storage);
        return true;
      }

      setAgentStatus(false, "Local agent not ready.");
      return false;

    } catch (err) {
      setAgentStatus(false, "Local agent OFF. Run BP Local Agent first.");
      return false;
    }
  }

  async function uploadToLocalAgent(file) {
    var fd = new FormData();
    fd.append("file", file);

    var res = await fetch(AGENT.uploadUrl, {
      method: "POST",
      body: fd
    });

    var data = await res.json();

    if (!data.ok) {
      throw new Error(data.error || data.message || "Image upload failed.");
    }

    return data;
  }

  if (fileInput) {
    fileInput.addEventListener("change", async function () {
      var agentOk = await checkAgent();

      if (!agentOk) {
        showMessage("error", "BP Local Agent ON nahi hai.");
        fileInput.value = "";
        return;
      }

      var file = fileInput.files && fileInput.files[0];
      var error = validateFile(file);

      if (error) {
        showMessage("error", error);
        fileInput.value = "";
        return;
      }

      saveBtn.disabled = true;
      saveBtn.innerText = "Uploading...";

      try {
        var data = await uploadToLocalAgent(file);

        imageKeyInput.value = data.image_key || "";
        originalNameInput.value = data.original_name || file.name || "";
        imageKeyText.value = data.image_key || "";

        if (data.public_url) {
          imagePreview.src = data.public_url;
        } else {
          imagePreview.src = AGENT.baseUrl.replace(/\/$/, "") + "/" + String(data.image_key || "").replace(/^\//, "");
        }

        imagePreview.style.display = "inline-block";

        if (noImageBox) {
          noImageBox.style.display = "none";
        }

        showMessage("success", "Image saved in local agent database.");

      } catch (err) {
        imageKeyInput.value = "";
        imageKeyText.value = "";
        showMessage("error", "Local image upload failed. Error: " + err.message);
      }

      saveBtn.disabled = false;
      saveBtn.innerText = "Save Image";
    });
  }

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