{% extends "portal_base.html" %}
{% load static %}
{% block title %}{% if product %}Edit{% else %}New{% endif %} product · Portal{% endblock %}
{% block topbar_title %}{% if product %}Edit product{% else %}New product{% endif %}{% endblock %}
{% block extra_head %}
{% include "shop/_stl_importmap.html" %}
{% endblock %}
{% block portal_content %}
<div class="product-edit-layout">
<form method="post" class="form-grid" id="product-form" enctype="multipart/form-data">
  {% csrf_token %}
  <div class="field"><label>Name</label><input name="name" required value="{{ product.name|default:'' }}"></div>
  <div class="field"><label>SKU</label><input name="sku" value="{{ product.sku|default:'' }}" placeholder="auto from name"></div>
  <div class="field"><label>Slug</label><input name="slug" value="{{ product.slug|default:'' }}" placeholder="auto from name"></div>
  <div class="field"><label>Price</label><input name="price" type="number" step="0.01" min="0" required value="{{ product.price|default:'' }}"></div>
  <div class="field">
    <label>Fulfillment</label>
    <select name="fulfillment">
      <option value="stocked" {% if product.fulfillment == 'stocked' or not product %}selected{% endif %}>On-hand stock</option>
      <option value="made_to_order" {% if product.fulfillment == 'made_to_order' %}selected{% endif %}>Made to order</option>
    </select>
  </div>
  <div class="field" data-product-stock>
    <label>Stock qty</label>
    <input name="stock_qty" type="number" value="{{ product.stock_qty|default:0 }}">
    <p class="hint">Used when this product has no colors. Color stock is set on each color below.</p>
  </div>
  <div class="field"><label>Print minutes</label><input name="print_minutes" type="number" min="0" value="{{ product.print_minutes|default:0 }}"></div>
  <div class="field"><label>Filament grams</label><input name="filament_grams" type="number" min="0" value="{{ product.filament_grams|default:0 }}"></div>
  <div class="field">
    <label>Photos</label>
    <input name="images" type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple>
    <input type="hidden" name="smart_crop" value="off">
    <label class="inline">
      <input type="checkbox" name="smart_crop" value="on" checked>
      Smart crop and background filter
    </label>
    <p class="hint">JPEG, PNG, GIF, or WebP. Multiple photos. Used on the listing card and as the default gallery. Color-specific photos below replace these when that color is selected. Leave the filter on to knock out the background and center the subject on a square canvas.</p>
    {% if product.catalog_images %}
    <div class="photo-thumbs">
      {% for image in product.catalog_images %}
      <label class="photo-thumb">
        <img src="{{ image.url }}" alt="">
        <span><input type="checkbox" name="remove_image" value="{{ image.pk }}"> Remove</span>
      </label>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  <div class="field">
    <label>STL model</label>
    <input name="stl" type="file" accept=".stl,model/stl,model/x.stl-ascii,model/x.stl-binary" data-stl-file-input data-stl-target="#product-stl-preview">
    {% if product.stl_id %}
    <p class="hint">Shared across all colors. Current model is shown in the 3D preview. Upload a new STL to replace it.</p>
    <label class="inline"><input type="checkbox" name="clear_stl"> Remove current STL</label>
    {% else %}
    <p class="hint">Optional, shared across colors. Shoppers can spin the model on the product page. 25 MB max.</p>
    {% endif %}
  </div>
  <div class="field"><label>Description</label><textarea name="description" style="min-height:120px">{{ product.description|default:'' }}</textarea></div>
  <div class="field">
    <label>Colors</label>
    <p class="hint">Same name, price, description, and STL for every color. Stock and photos are per color.</p>
    <div id="color-rows" class="color-rows">
      {% for color in product.colors.all %}
      <div class="color-row">
        <div class="color-row-main">
          <input type="hidden" name="color_id" value="{{ color.pk }}">
          <input type="hidden" name="color_key" value="{{ color.pk }}">
          <input name="color_name" value="{{ color.name }}" placeholder="Color name" aria-label="Color name">
          <input name="color_hex" type="color" value="{{ color.hex }}" aria-label="Color swatch">
          <input name="color_stock" type="number" min="0" value="{{ color.stock_qty }}" placeholder="Qty" aria-label="Color stock">
          <button type="button" class="btn btn-sm btn-ghost color-remove">Remove</button>
        </div>
        <div class="color-row-photos">
          {% for image in color.images.all %}
          <label class="photo-thumb">
            <img src="{{ image.url }}" alt="">
            <span><input type="checkbox" name="remove_image" value="{{ image.pk }}"> Remove</span>
          </label>
          {% endfor %}
          <input name="color_images_{{ color.pk }}" type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple data-color-images>
        </div>
      </div>
      {% endfor %}
    </div>
    <button type="button" class="btn btn-sm btn-ghost" id="add-color">Add color</button>
  </div>
  <label><input type="checkbox" name="is_published" {% if product.is_published %}checked{% endif %}> Published</label>
  <label><input type="checkbox" name="track_inventory" {% if product.track_inventory or not product %}checked{% endif %}> Track inventory</label>
  <button class="btn btn-primary" type="submit">Save</button>
</form>
<aside class="product-preview-col">
  <div class="field"><label>Shop card preview</label></div>
  <article class="product-card-preview" id="product-card-preview">
    <div class="product-card-preview-body">
      <div class="product-card-preview-figure">
        <img data-card-image
          src="{% if product.image_id %}{{ product.image_url }}{% else %}{% static 'images/product-1-292x256.png' %}{% endif %}"
          data-existing="{% if product.image_id %}{{ product.image_url }}{% endif %}"
          data-placeholder="{% static 'images/product-1-292x256.png' %}"
          alt="">
      </div>
      <h5 class="product-card-preview-title" data-card-title>{{ product.name|default:"Product name" }}</h5>
      <div class="product-card-preview-price" data-card-price>${{ product.price|default:"0.00" }}</div>
      <div class="product-color-dots" data-card-colors {% if not product.colors.all %}hidden{% endif %}>
        {% for color in product.colors.all %}
        <span class="product-color-dot" style="background:{{ color.hex }}" title="{{ color.name }}"></span>
        {% endfor %}
      </div>
      <p class="product-card-preview-desc" data-card-description>{{ product.description|default:""|truncatewords:18 }}</p>
    </div>
    <div class="product-card-preview-panel">
      <span data-card-price>${{ product.price|default:"0.00" }}</span>
      <span>View</span>
    </div>
  </article>
  <div class="field" style="margin-top:18px"><label>3D preview</label></div>
  <div id="product-stl-preview"
    class="stl-viewer stl-viewer-compact"
    data-stl-viewer
    data-color="#00aeef"
    data-label="STL preview. Drag to rotate, scroll to zoom."
    {% if product.stl_id %}data-src="{{ product.stl_url }}" data-existing="{{ product.stl_url }}"{% else %}hidden{% endif %}></div>
</aside>
</div>
<template id="color-row-template">
  <div class="color-row">
    <div class="color-row-main">
      <input type="hidden" name="color_id" value="">
      <input type="hidden" name="color_key" value="">
      <input name="color_name" value="" placeholder="Color name" aria-label="Color name">
      <input name="color_hex" type="color" value="#808080" aria-label="Color swatch">
      <input name="color_stock" type="number" min="0" value="0" placeholder="Qty" aria-label="Color stock">
      <button type="button" class="btn btn-sm btn-ghost color-remove">Remove</button>
    </div>
    <div class="color-row-photos">
      <input type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple data-color-images>
    </div>
  </div>
</template>
{% if product %}
<form method="post" action="{% url 'shop_portal:product_stock' product.pk %}" class="form-grid" style="margin-top:24px" data-product-stock>
  {% csrf_token %}
  <div class="field"><label>Adjust stock (+/−)</label><input name="delta" type="number" required value="1"></div>
  <button class="btn btn-ghost" type="submit">Apply adjustment</button>
</form>
{% endif %}
{% endblock %}
{% block extra_js %}
<script type="module" src="{% static 'js/stl-viewer.js' %}"></script>
<script>
(function () {
  const form = document.getElementById("product-form");
  const preview = document.getElementById("product-card-preview");
  const rows = document.getElementById("color-rows");
  const addBtn = document.getElementById("add-color");
  const tpl = document.getElementById("color-row-template");
  if (!form || !preview || !rows || !addBtn || !tpl) return;

  const nameEl = form.querySelector('[name="name"]');
  const priceEl = form.querySelector('[name="price"]');
  const descEl = form.querySelector('[name="description"]');
  const imageEl = form.querySelector('[name="images"]');
  const titleEls = preview.querySelectorAll("[data-card-title]");
  const priceEls = preview.querySelectorAll("[data-card-price]");
  const descOut = preview.querySelector("[data-card-description]");
  const imgEl = preview.querySelector("[data-card-image]");
  const colorsEl = preview.querySelector("[data-card-colors]");
  const placeholder = imgEl.getAttribute("data-placeholder") || "";
  const existing = imgEl.getAttribute("data-existing") || "";
  let objectUrl = "";
  let colorSeq = 0;

  function money(value) {
    const n = Number(value);
    if (!Number.isFinite(n)) return "$0.00";
    return "$" + n.toFixed(2);
  }

  function snippet(text) {
    const words = (text || "").trim().split(/\s+/).filter(Boolean);
    if (words.length <= 18) return words.join(" ");
    return words.slice(0, 18).join(" ") + " …";
  }

  function namedColorCount() {
    let count = 0;
    rows.querySelectorAll(".color-row").forEach(function (row) {
      if ((row.querySelector('[name="color_name"]').value || "").trim()) count += 1;
    });
    return count;
  }

  function sync() {
    const name = (nameEl.value || "").trim() || "Product name";
    titleEls.forEach(function (el) { el.textContent = name; });
    const price = money(priceEl.value);
    priceEls.forEach(function (el) { el.textContent = price; });
    if (descOut) descOut.textContent = snippet(descEl.value);
    colorsEl.replaceChildren();
    let count = 0;
    rows.querySelectorAll(".color-row").forEach(function (row) {
      const label = (row.querySelector('[name="color_name"]').value || "").trim();
      const hex = row.querySelector('[name="color_hex"]').value || "#808080";
      if (!label) return;
      count += 1;
      const dot = document.createElement("span");
      dot.className = "product-color-dot";
      dot.style.background = hex;
      dot.title = label;
      colorsEl.appendChild(dot);
    });
    colorsEl.hidden = count === 0;
    document.querySelectorAll("[data-product-stock]").forEach(function (el) {
      el.hidden = count > 0;
    });
  }

  function bindRemove(row) {
    const btn = row.querySelector(".color-remove");
    if (!btn) return;
    btn.addEventListener("click", function () {
      row.remove();
      sync();
    });
  }

  rows.querySelectorAll(".color-row").forEach(bindRemove);
  addBtn.addEventListener("click", function () {
    colorSeq += 1;
    const key = "new-" + colorSeq;
    const node = tpl.content.firstElementChild.cloneNode(true);
    node.querySelector('[name="color_key"]').value = key;
    const file = node.querySelector("[data-color-images]");
    if (file) file.name = "color_images_" + key;
    rows.appendChild(node);
    bindRemove(node);
    node.querySelector('[name="color_name"]').focus();
    sync();
  });
  if (imageEl) {
    imageEl.addEventListener("change", function () {
      if (objectUrl) URL.revokeObjectURL(objectUrl);
      const file = imageEl.files && imageEl.files[0];
      if (file) {
        objectUrl = URL.createObjectURL(file);
        imgEl.src = objectUrl;
        return;
      }
      imgEl.src = existing || placeholder;
    });
  }
  form.addEventListener("input", sync);
  sync();
})();
</script>
{% endblock %}