{% extends "scitex_sdk/app/app_shell.html" %}
{% load static %}

{% block scitex_app_content %}
<link rel="stylesheet" href="{% static 'scitex_sdk_creator/wizard.css' %}">
<div class="stx-creator">
  {# Shared AppHeader primitive (data-stx-app-header mount), like every other #}
  {# leaf app — no leaf-local <header>. Title/version flow from the view. #}
  <link rel="stylesheet" href="{% static 'scitex_sdk/ui/css/app/app-header.css' %}">
  <div data-stx-app-header
       data-app-title="SDK"
       {% if sdk_version %}data-app-version="{{ sdk_version }}"{% endif %}></div>
  <script type="module" src="{% static 'scitex_sdk/ui/js/app/app-header.js' %}"></script>
  {% if project_picker_available %}{% include "scitex_sdk_creator/_project_picker.html" %}{% endif %}
  <p>Pick a starter, name the app, and scaffold it. Then validate it here
    before dev-installing or publishing it to SciTeX Cloud.</p>

  <section aria-label="New app from starter">
    <h2>1. New app from starter</h2>
    <div class="stx-starters" id="stx-starters" role="radiogroup" aria-label="Starter template">
      {% for s in starters %}
      <label class="stx-starter">
        <input type="radio" name="starter" value="{{ s.key }}"{% if s.key == default_starter %} checked{% endif %}>
        <strong><i class="{{ s.icon }}"></i> {{ s.label }}</strong>
        <span>{{ s.hint }}</span>
      </label>
      {% endfor %}
    </div>
    <div class="stx-field">
      <label for="stx-label">App name</label>
      <div class="stx-control">
        <input id="stx-label" name="label" type="text" maxlength="90" placeholder="My analysis app">
      </div>
    </div>
    <div class="stx-field">
      <label for="stx-description">Description</label>
      <div class="stx-control">
        <textarea id="stx-description" name="description" rows="5" placeholder="What should the app do?"></textarea>
      </div>
    </div>
    <div class="stx-field">
      <label for="stx-target">Target directory</label>
      <div class="stx-control">
        <input id="stx-target" name="target_dir" type="text" placeholder="">
      </div>
      <p class="stx-help">Optional. Defaults to ./&lt;name-slug&gt;.</p>
    </div>
    <div class="stx-actions">
      <button id="stx-create" type="button" class="stx-primary">Scaffold app</button>
      <button id="stx-check-input" type="button">Check inputs</button>
    </div>
    <div class="stx-result" id="stx-create-result" role="status" aria-live="polite"></div>
  </section>

  <section aria-label="Validate an app">
    <h2>2. Validate a built app</h2>
    <p>Point at the package directory — the one containing
      <code>manifest.json</code> (for a fresh scaffold that is
      <code>&lt;project&gt;/&lt;module&gt;_app/</code>).</p>
    <div class="stx-field">
      <label for="stx-appdir">App directory</label>
      <div class="stx-control">
        <input id="stx-appdir" name="app_dir" type="text" placeholder="/path/to/my_app/my_app_app">
      </div>
    </div>
    <div class="stx-actions">
      <button id="stx-validate" type="button" class="stx-primary">Validate</button>
    </div>
    <div class="stx-result" id="stx-validate-result" role="status" aria-live="polite"></div>
  </section>

  <section aria-label="Publish or dev-install">
    <h2>3. Dev-install / publish</h2>
    <div class="stx-field">
      <label for="stx-server">Server</label>
      <div class="stx-control">
        <input id="stx-server" name="server_url" type="text" value="http://127.0.0.1:8000">
      </div>
    </div>
    <div class="stx-field">
      <label for="stx-token">API token</label>
      <div class="stx-control">
        <input id="stx-token" name="token" type="password" placeholder="Paste a token, or leave empty">
      </div>
      <p class="stx-help">Leave empty to use the SCITEX_API_TOKEN environment variable.</p>
    </div>
    <div class="stx-actions">
      <button id="stx-dev-install" type="button" class="stx-primary">Dev-install</button>
      <button id="stx-publish" type="button">Publish</button>
    </div>
    <div class="stx-result" id="stx-cloud-result" role="status" aria-live="polite"></div>
  </section>
</div>

<script>
(function () {
  "use strict";
  async function post(path, body, outId) {
    const out = document.getElementById(outId);
    out.textContent = "Working…";
    let resp;
    try {
      resp = await fetch(path, {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(body),
      });
    } catch (err) {
      out.textContent = "Request failed: " + err;
      return null;
    }
    const data = await resp.json();
    const lines = [];
    if (data.success === true) {
      lines.push("Done.");
      if (data.project_dir) lines.push("Project: " + data.project_dir);
      if (data.files) lines.push(data.files.length + " file(s) scaffolded.");
      if (data.pr_url) lines.push("PR: " + data.pr_url);
      if (data.module_name) lines.push("Module: " + data.module_name);
    } else if (data.ok === true) {
      lines.push("Input is valid.");
    } else {
      for (const e of (data.errors || ["Unknown error"])) lines.push("✗ " + e);
    }
    for (const w of (data.warnings || [])) lines.push("! " + w);
    out.textContent = lines.join("\n");
    return data;
  }
  function val(id) {
    const el = document.getElementById(id);
    return el ? el.value : "";
  }
  function starter() {
    const el = document.querySelector('input[name="starter"]:checked');
    return el ? el.value : "";
  }
  document.getElementById("stx-check-input").addEventListener("click", function () {
    post("api/validate-input",
      {label: val("stx-label"), description: val("stx-description"), starter: starter()},
      "stx-create-result");
  });
  document.getElementById("stx-create").addEventListener("click", function () {
    post("api/create",
      {label: val("stx-label"), description: val("stx-description"),
       starter: starter(), target_dir: val("stx-target")},
      "stx-create-result");
  });
  document.getElementById("stx-validate").addEventListener("click", function () {
    post("api/validate-app", {app_dir: val("stx-appdir")}, "stx-validate-result");
  });
  document.getElementById("stx-dev-install").addEventListener("click", function () {
    post("api/dev-install",
      {app_dir: val("stx-appdir"), server_url: val("stx-server"), token: val("stx-token")},
      "stx-cloud-result");
  });
  document.getElementById("stx-publish").addEventListener("click", function () {
    post("api/publish",
      {app_dir: val("stx-appdir"), server_url: val("stx-server"), token: val("stx-token")},
      "stx-cloud-result");
  });
  /* Project picker: move into the AppHeader slot, resume on change.
   * Fail-soft: no picker (anon/standalone) means plain wizard behavior. */
  function placePicker() {
    var picker = document.querySelector("[data-stx-project-picker]");
    if (!picker) return;
    var api = window.stxAppHeader;
    var header = api && typeof api.get === "function" ? api.get() : null;
    if (header && header.projectSlot) header.projectSlot.appendChild(picker);
    picker.addEventListener("stx-project-selector:change", function (ev) {
      var d = (ev && ev.detail) || {};
      if (d.id && d.name) {
        var target = document.getElementById("stx-target");
        if (target) {
          if (!target.value) target.value = d.name;
          target.placeholder = "Resuming: " + d.name + " (edit as needed)";
        }
      }
    });
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", placePicker);
  } else {
    placePicker();
  }
})();
</script>
{% endblock %}