{% extends "base.html" %}

{% block title %}Create app{% endblock %}

{% block crumbs %}
{% import "_app_crumbs.html" as app_crumbs with context %}
{{ app_crumbs.nav(request=request) }}
{% endblock %}

{% block extra_head %}
{{ codemirror_assets|safe }}
{% endblock %}

{% block content %}
{% import "_stored_query_picker.html" as stored_query_picker %}
{% import "_llm_prompt.html" as llm_prompt %}
<h1>Create app</h1>

<form class="datasette-app-form datasette-app-edit-form" method="post">
  <div class="datasette-app-edit-layout">
    <div class="datasette-app-edit-main">
      <div class="datasette-app-form-row">
        <label for="app-name">Name</label>
        <input id="app-name" type="text" name="name">
      </div>
      <div class="datasette-app-form-row">
        <label for="app-description">Description</label>
        <textarea id="app-description" name="description" rows="3"></textarea>
      </div>
      <div class="datasette-app-form-row">
        <label for="html-editor">HTML</label>
        <textarea id="html-editor" name="html"></textarea>
      </div>
    </div>

    <aside class="datasette-app-edit-sidebar">
      <h2>Visibility</h2>
      <div class="datasette-app-form-row">
        <input type="hidden" name="is_private" value="0">
        <label>
          <input type="checkbox" name="is_private" value="1" checked>
          Private (only me)
        </label>
        <p class="datasette-app-form-help">
          If Private is unchecked, this app will be visible to other users of this site.
        </p>
      </div>

      <h2>Data access</h2>
      <div class="datasette-app-form-row">
        <fieldset class="datasette-app-checkbox-group">
          <legend>Read-only SQL query databases</legend>
          <input type="hidden" name="sql_databases_present" value="1">
          {% for database in sql_database_options %}
            <label class="datasette-app-database-option">
              <input
                type="checkbox"
                name="sql_databases"
                value="{{ database.name }}"
                {% if database.selected %}checked{% endif %}
              >
              <span class="datasette-app-database-option-text">
                <a href="{{ database.href }}"><strong>{{ database.name }}</strong></a>{% if database.table_preview %}<span class="datasette-app-database-tables">, {{ database.table_preview|join(", ") }}{% if database.has_more_tables %}, ...{% endif %}</span>{% endif %}
              </span>
            </label>
          {% else %}
            <p>No databases are visible to you.</p>
          {% endfor %}
        </fieldset>
        <p class="datasette-app-form-help">
          The app will only be able to access data from the selected databases.
        </p>
      </div>

      <h2>Query access</h2>
      <div class="datasette-app-form-row">
        {{ stored_query_picker.picker(stored_query_options, query_search_url) }}
      </div>

      <h2>Network access</h2>
      <div class="datasette-app-form-row">
        <label for="app-csp-origins">Allowed network and asset origins</label>
        <p class="datasette-app-form-warning">
          Be cautious: any site listed here could receive private data from this app.
        </p>
        <textarea id="app-csp-origins" name="csp_origins" rows="4" placeholder="https://cdn.jsdelivr.net"></textarea>
        <p class="datasette-app-form-help">
          Enter exact https:// origins, one per line. Do not include paths, query strings, wildcards, or localhost. These origins can be used for fetch(), images, scripts, and styles.
        </p>
      </div>

      <div class="datasette-app-form-actions">
        <button type="submit">Create app</button>
      </div>
    </aside>
  </div>
</form>

{{ llm_prompt.prompt(llm_prompt_data, "Use AI to build this app") }}

<script>
(function() {
  var htmlInput = document.getElementById("html-editor");
  if (!htmlInput) {
    return;
  }

  var autoUpdate = true;
  var applyingTemplate = false;

  function selectedDatabases() {
    return Array.prototype.map.call(
      document.querySelectorAll("input[name='sql_databases']:checked"),
      function(input) { return input.value; }
    );
  }

  function selectedStoredQueries() {
    return Array.prototype.map.call(
      document.querySelectorAll(".datasette-app-stored-query-list [data-query-key]"),
      function(item) {
        var parameters = [];
        try {
          parameters = JSON.parse(item.getAttribute("data-query-parameters") || "[]");
        } catch (ignore) {
        }
        return {
          key: item.getAttribute("data-query-key"),
          label: item.getAttribute("data-query-label") || item.getAttribute("data-query-key"),
          parameters: parameters,
          isWrite: item.getAttribute("data-query-is-write") === "1"
        };
      }
    );
  }

  function appTitle() {
    var input = document.getElementById("app-name");
    if (input && input.value.trim()) {
      return input.value.trim();
    }
    return "Datasette app";
  }

  function escapeHtml(value) {
    return value.replace(/[&<>]/g, function(character) {
      return {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;"
      }[character];
    });
  }

  function jsString(value) {
    return JSON.stringify(value);
  }

  function slug(value, index) {
    return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "item-" + index;
  }

  function paramsObject(parameters) {
    var params = {};
    parameters.forEach(function(parameter) {
      params[parameter] = "TODO";
    });
    return params;
  }

  function splitStoredQueryKey(key) {
    var slash = key.indexOf("/");
    if (slash === -1) {
      return {database: "", query: key};
    }
    return {
      database: key.slice(0, slash),
      query: key.slice(slash + 1)
    };
  }

  function indent(lines, spaces) {
    var prefix = " ".repeat(spaces);
    return lines.map(function(line) {
      return line ? prefix + line : "";
    });
  }

  function buildDatabaseMarkup(databases) {
    if (!databases.length) {
      return [
        "    <p>No read-only databases are selected yet.</p>"
      ];
    }
    var lines = [];
    databases.forEach(function(database, index) {
      var id = "database-" + slug(database, index);
      var escapedDatabase = escapeHtml(database);
      lines.push("    <section>");
      lines.push("      <h2>Database: " + escapedDatabase + "</h2>");
      lines.push("      <pre id=\"" + id + "\">Loading...</pre>");
      lines.push("    </section>");
    });
    return lines;
  }

  function buildStoredQueryMarkup(queries) {
    if (!queries.length) {
      return [];
    }
    var lines = [];
    queries.forEach(function(query, index) {
      var id = "stored-query-" + slug(query.key, index);
      var escapedKey = escapeHtml(query.key);
      lines.push("    <section>");
      lines.push("      <h2>Stored query: " + escapedKey + "</h2>");
      if (query.isWrite) {
        lines.push("      <button id=\"" + id + "-button\" type=\"button\">Run stored query</button>");
        lines.push("      <pre id=\"" + id + "\">Not run yet.</pre>");
      } else {
        lines.push("      <pre id=\"" + id + "\">Loading...</pre>");
      }
      lines.push("    </section>");
    });
    return lines;
  }

  function buildDatabaseScript(databases) {
    if (!databases.length) {
      return [
        "render('database-status', 'Select a read-only database to enable datasette.query().');"
      ];
    }
    var lines = [];
    databases.forEach(function(database, index) {
      var id = "database-" + slug(database, index);
      var variable = "databaseResult" + index;
      lines.push("const " + variable + " = await datasette.query(" + jsString(database) + ", \"select name, type from sqlite_master where type in ('table', 'view') order by name limit 10\");");
      lines.push("render(" + jsString(id) + ", " + variable + ".rows);");
    });
    return lines;
  }

  function buildStoredQueryScript(queries) {
    if (!queries.length) {
      return [];
    }
    var lines = [];
    queries.forEach(function(query, index) {
      var id = "stored-query-" + slug(query.key, index);
      var params = jsString(paramsObject(query.parameters || []));
      var variable = "storedQueryResult" + index;
      var parts = splitStoredQueryKey(query.key);
      var call = "datasette.storedQuery(" + jsString(parts.database) + ", " + jsString(parts.query) + ", " + params + ")";
      if (query.isWrite) {
        lines.push("document.getElementById(" + jsString(id + "-button") + ").addEventListener('click', async () => {");
        lines.push("  try {");
        lines.push("    const " + variable + " = await " + call + ";");
        lines.push("    render(" + jsString(id) + ", " + variable + ");");
        lines.push("  } catch (error) {");
        lines.push("    render(" + jsString(id) + ", error.message || String(error));");
        lines.push("  }");
        lines.push("});");
      } else {
        lines.push("const " + variable + " = await " + call + ";");
        lines.push("render(" + jsString(id) + ", " + variable + ".rows || " + variable + ");");
      }
    });
    return lines;
  }

  function starterHtml(databases, storedQueries, title) {
    var databaseMarkup = buildDatabaseMarkup(databases);
    var storedQueryMarkup = buildStoredQueryMarkup(storedQueries);
    var databaseScript = buildDatabaseScript(databases);
    var storedQueryScript = buildStoredQueryScript(storedQueries);
    var storedQuerySection = storedQueries.length ? [
      "",
      "    <h2>Stored query examples</h2>"
    ].concat(
      storedQueryMarkup,
      [
        "    <pre id=\"stored-query-status\" hidden></pre>"
      ]
    ) : [];
    var escapedTitle = escapeHtml(title);
    return [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <meta charset=\"utf-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
      "  <title>" + escapedTitle + "</title>",
      "  <style>",
      "  body { font-family: Helvetica }",
      "  pre { background: #f6f6f6; padding: 1rem; white-space: pre-wrap; }",
      "  button { font: inherit; }",
      "  </style>",
      "</head>",
      "<body>",
      "  <h1>" + escapedTitle + "</h1>",
      "  <main>",
      "    <h2>Read-only SQL examples</h2>"
    ].concat(
      databaseMarkup,
      [
        "    <pre id=\"database-status\" hidden></pre>"
      ],
      storedQuerySection,
      [
        "  </main>",
        "",
        "  <script>",
        "  function render(id, value) {",
        "    const element = document.getElementById(id);",
        "    element.hidden = false;",
        "    element.textContent = typeof value === 'string' ? value : JSON.stringify(value, null, 2);",
        "  }",
        "",
        "  async function main() {"
      ],
      indent(databaseScript, 4),
      [""],
      indent(storedQueryScript, 4),
      [
        "  }",
        "",
        "  main().catch(error => {",
        "    render('database-status', error.message || String(error));",
        "  });",
        "  <\/script>",
        "</body>",
        "</html>",
        ""
      ]
    ).join("\n");
  }

  function currentEditorText() {
    if (htmlInput.datasetteAppsEditorView) {
      return htmlInput.datasetteAppsEditorView.state.doc.toString();
    }
    return htmlInput.value;
  }

  function setEditorText(text) {
    applyingTemplate = true;
    if (htmlInput.datasetteAppsEditorView) {
      var view = htmlInput.datasetteAppsEditorView;
      view.dispatch({
        changes: {
          from: 0,
          to: view.state.doc.length,
          insert: text
        }
      });
    }
    htmlInput.value = text;
    applyingTemplate = false;
    htmlInput.dispatchEvent(new Event("input", {bubbles: true}));
  }

  function updateTemplate() {
    if (!autoUpdate) {
      return;
    }
    setEditorText(starterHtml(selectedDatabases(), selectedStoredQueries(), appTitle()));
  }

  function stopAutoUpdate() {
    if (applyingTemplate) {
      return;
    }
    autoUpdate = false;
  }

  function watchEditor(view) {
    if (!view || view.datasetteAppsCreateTemplateWatching) {
      return;
    }
    view.datasetteAppsCreateTemplateWatching = true;
    var originalDispatch = view.dispatch.bind(view);
    view.dispatch = function() {
      var transactions = Array.prototype.slice.call(arguments);
      var changed = transactions.some(function(transaction) {
        return transaction && transaction.docChanged;
      });
      var result = originalDispatch.apply(null, arguments);
      if (changed) {
        stopAutoUpdate();
      }
      return result;
    };
    view.contentDOM.addEventListener("beforeinput", stopAutoUpdate);
    view.contentDOM.addEventListener("paste", stopAutoUpdate);
    view.contentDOM.addEventListener("drop", stopAutoUpdate);
    view.contentDOM.addEventListener("cut", stopAutoUpdate);
  }

  function editorReady() {
    watchEditor(htmlInput.datasetteAppsEditorView);
    if (!currentEditorText()) {
      updateTemplate();
    }
  }

  document.addEventListener("change", function(event) {
    if (event.target && event.target.matches("input[name='sql_databases']")) {
      updateTemplate();
    }
  });
  document.getElementById("app-name").addEventListener("input", updateTemplate);
  document.addEventListener("datasette-app-stored-queries-changed", updateTemplate);
  htmlInput.addEventListener("datasette-app-editor-ready", editorReady);

  if (htmlInput.datasetteAppsEditorView) {
    editorReady();
  } else {
    window.addEventListener("DOMContentLoaded", function() {
      window.setTimeout(editorReady, 0);
    });
  }
})();
</script>
{% endblock %}