export function renderSettingsPage() {
  return `
    <section class="container-xxl py-4 py-lg-5">
      <div class="row g-4">
        <div class="col-12 col-lg-7">
          <div class="card border-0 shadow-sm">
            <div class="card-body p-4" x-data="settingsPage()">
              <div class="d-flex justify-content-between align-items-start mb-4">
                <div>
                  <p class="eyebrow mb-2">Client Settings</p>
                  <h1 class="h3 mb-1">Connection & workspace</h1>
                  <p class="text-body-secondary mb-0">
                    These values are stored locally and reused to start the Tryton user application flow.
                  </p>
                </div>
              </div>

              <form class="vstack gap-3" @submit.prevent="save()">
                <div>
                  <label class="form-label">Tryton server URL</label>
                  <input class="form-control" type="url" x-model="form.baseUrl" required />
                </div>
                <div>
                  <label class="form-label">Database name</label>
                  <input class="form-control" type="text" x-model="form.database" required />
                </div>
                <button class="btn btn-primary align-self-start" type="submit">Save settings</button>
              </form>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-5">
          <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
              <h2 class="h5">Integration notes</h2>
              <ul class="text-body-secondary small ps-3 mb-0">
                <li>Connection uses Tryton user application keys for the <code>kitchen</code> application.</li>
                <li>Kitchen-scoped requests are built as <code>/{database}/kitchen/{kitchenId}/...</code>.</li>
                <li>Label preview accepts image blobs, image URLs, or SVG payloads.</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  `;
}

export function settingsPageData(store) {
  return {
    form: {
      baseUrl: store.config.baseUrl || '',
      database: store.config.database || '',
    },
    save() {
      store.setConfig({
        baseUrl: this.form.baseUrl.trim(),
        database: this.form.database.trim(),
      });

      store.addAlert({ type: 'success', message: 'Settings saved locally.' });
    },
  };
}