{% extends "base.html" %}
{% import "_macros.html" as m with context %}
{% block title %}Pageboy · {{ t('settings.title') }}{% endblock %}
{% block subtitle %}{{ t('settings.subtitle') }}{% endblock %}
{% block content %}

{% if flash_saved %}
<p class="flash ok" role="status">{{ th('flash.saved', what=flash_saved) }}</p>
{% endif %}
{% if flash_ok %}
<p class="flash ok" role="status">{{ flash_ok }}</p>
{% endif %}
{% if flash_err %}
<p class="flash bad" role="alert">{{ t('flash.err', what=flash_err) }}</p>
{% endif %}

{% for row in channels %}
{% set g = row.guide %}
<section class="panel" id="channel-{{ g.name }}">
  <div class="panel-head">
    <h2>{{ g.title }}</h2>
    <span class="status-pill {% if row.running %}on{% elif row.enabled %}enabled{% else %}off{% endif %}">
      {% if row.running %}{{ t('status.receiving') }}{% elif row.enabled %}{{ t('status.enabled_waiting') }}{% else %}{{ t('status.off') }}{% endif %}
    </span>
  </div>

  <p class="prose"><strong>{{ t('settings.summary') }}</strong> {{ g.blurb }}</p>
  <p class="prose muted">{{ g.what_it_does }}</p>

  {% if g.name != 'telegram' %}
  <h3 class="subhead">{{ t('settings.prepare') }}</h3>
  <ol class="steps">
    {% for step in g.steps %}
    <li>{{ step }}</li>
    {% endfor %}
  </ol>

  <ul class="links">
    {% for link in g.links %}
    <li>
      <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.label }}</a>
    </li>
    {% endfor %}
  </ul>
  {% endif %}

  {% if g.name == 'telegram' %}
  {% set bot_step = row.bot_step %}
  {% set bot_order = ['token', 'enable', 'pair', 'protected'] %}
  {% set bot_pos = bot_order.index(bot_step) %}
  {% set token_field = g.fields | selectattr('secret_name', 'equalto', 'bot_token') | first %}
  {% set allowlist_field = g.fields | selectattr('secret_name', 'equalto', 'allowlist') | first %}
  <div class="bot-flow" id="telegram-bot" data-bot-step="{{ bot_step }}">
    <h3 class="flow-section-title">{{ t('bot.section_title') }} <span class="muted">{{ t('bot.section_sub') }}</span></h3>
    <ol class="flow-steps" aria-label="{{ t('bot.steps_aria') }}">
      {% for label in [t('bot.step1'), t('bot.step2'), t('bot.step3'), t('bot.step4')] %}
      <li class="{% if loop.index0 == bot_pos %}current{% elif loop.index0 < bot_pos %}done{% endif %}"
          {% if loop.index0 == bot_pos %}aria-current="step"{% endif %}>{{ label }}</li>
      {% endfor %}
    </ol>

    {# 1 · bot token #}
    {% if bot_step == 'token' %}
    <h4 class="flow-step-title">{{ t('bot.token_title') }}</h4>
    {% set bot_links %}{% for link in g.links %}<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.label }}</a>{% if not loop.last %} · {% endif %}{% endfor %}{% endset %}
    <p class="prose muted">{{ th('bot.token_from', links=bot_links) }}</p>
    {{ m.secret_field(g.name, token_field, row.secret_flags) }}
    {% else %}
    <details class="flow-done">
      <summary>{{ t('bot.token_saved') }} <span class="muted">{{ t('common.change') }}</span></summary>
      <p class="prose muted">{{ t('bot.token_change_note') }}</p>
      {{ m.secret_field(g.name, token_field, row.secret_flags) }}
    </details>
    {% endif %}

    {# 2 · enable (also receiving error / not started) #}
    {% if bot_step == 'enable' %}
    <h4 class="flow-step-title">{{ t('bot.enable_title') }}</h4>
    {% if row.enabled and not row.receiving_ok %}
    <p class="flash bad" role="alert">
      {% if row.bot_last_error %}
      {{ row.bot_last_error }}
      {% else %}
      {{ t('bot.not_receiving') }}
      {% endif %}
    </p>
    <div class="actions">
      <form method="post" action="/ui/settings/channels/{{ g.name }}/disable">
        <button type="submit" class="btn">{{ t('channel.disable') }}</button>
      </form>
      <form method="post" action="/ui/settings/channels/{{ g.name }}/enable">
        <button type="submit" class="btn primary">{{ t('channel.reenable') }}</button>
      </form>
    </div>
    {% else %}
    <p class="prose muted">{{ t('bot.enable_note') }}</p>
    <div class="actions">
      <form method="post" action="/ui/settings/channels/{{ g.name }}/enable">
        <button type="submit" class="btn primary">{{ t('channel.enable') }}</button>
      </form>
    </div>
    {% endif %}
    {% elif bot_step in ['pair', 'protected'] %}
    <div class="flow-done-row">
      {{ t('bot.on_receiving') }}
      <form method="post" action="/ui/settings/channels/{{ g.name }}/disable">
        <button type="submit" class="btn link">{{ t('channel.off_short') }}</button>
      </form>
    </div>
    {% endif %}

    {# 3 · pairing / allowlist #}
    {% if bot_step == 'pair' %}
    <h4 class="flow-step-title">{{ t('bot.pair_title') }}</h4>
    <p class="flash bad" role="alert">{{ th('bot.pair_warning') }}</p>
    <p class="prose muted">{{ th('bot.pair_note') }}</p>
    {{ m.pairing_form(row.pairing_active) }}
    <details class="flow-done">
      <summary>{{ t('bot.edit_directly') }} <span class="muted">{{ t('bot.allowlist_ids') }}</span></summary>
      {{ m.secret_field(g.name, allowlist_field, row.secret_flags) }}
    </details>
    {% elif bot_step == 'protected' %}
    <div class="flow-done-row">{{ t('bot.protected') }}</div>
    <p class="prose muted">{{ th('bot.protected_note') }}</p>
    <details class="flow-done">
      <summary>{{ t('bot.repair') }}</summary>
      {{ m.pairing_form(row.pairing_active) }}
      {{ m.secret_field(g.name, allowlist_field, row.secret_flags) }}
    </details>
    {% endif %}
  </div>

  <hr class="sep" />
  {% set ag = row.app_guide %}
  {% set step = row.app_step %}
  {% set order = ['credentials', 'phone', 'code', 'connected'] %}
  {% set pos = order.index('code' if step == 'password' else step) %}
  <div class="app-api-flow" id="telegram-app-api" data-app-step="{{ step }}">
    <h3 class="flow-section-title">{{ ag.title }}</h3>
    <p class="prose muted">{{ ag.blurb }}</p>
    <ol class="flow-steps" aria-label="{{ t('app.steps_aria') }}">
      {% for label in [t('app.step1'), t('app.step2'), t('app.step3_2fa') if step == 'password' else t('app.step3_code'), t('app.step4')] %}
      <li class="{% if loop.index0 == pos %}current{% elif loop.index0 < pos %}done{% endif %}"
          {% if loop.index0 == pos %}aria-current="step"{% endif %}>{{ label }}</li>
      {% endfor %}
    </ol>

    {# 1 · App API credentials — open form until both are saved, then a one-line summary #}
    {% if step == 'credentials' %}
    <h4 class="flow-step-title">{{ t('app.cred_title') }}</h4>
    {% set app_links %}{% for link in ag.links %}<a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.label }}</a>{% endfor %}{% endset %}
    <p class="prose muted">{{ th('app.cred_note', links=app_links) }}</p>
    {{ m.secret_group('telegram', ag.fields, row.secret_flags, t('app.save_cred')) }}
    {% else %}
    <details class="flow-done">
      <summary>{{ t('app.cred_saved') }} <span class="muted">{{ t('common.change') }}</span></summary>
      <p class="prose muted">{{ t('app.cred_change_note') }}</p>
      {{ m.secret_group('telegram', ag.fields, row.secret_flags, t('app.save_cred')) }}
    </details>
    {% endif %}

    {# 2 · phone #}
    {% if step == 'phone' %}
    <h4 class="flow-step-title">{{ t('app.phone_title') }}</h4>
    <form method="post" action="/ui/settings/channels/telegram/app-login-start" class="stack secret-form">
      <label class="field">
        <span class="label-row">{{ t('app.phone_label') }}</span>
        <input type="tel" name="phone" autocomplete="tel" required placeholder="+821012345678" />
        <span class="field-help">{{ t('app.phone_help') }}</span>
      </label>
      <button type="submit" class="btn primary">{{ t('app.phone_submit') }}</button>
    </form>
    {% elif step in ['code', 'password'] %}
    <div class="flow-done-row">
      {{ th('app.code_sent', phone=row.app_phone_masked) }}
      <form method="post" action="/ui/settings/channels/telegram/app-login-cancel">
        <button type="submit" class="btn link">{{ t('app.reenter_phone') }}</button>
      </form>
    </div>
    {% endif %}

    {# 3 · code, then 2FA password only if Telegram asks for it #}
    {% if step == 'code' %}
    <h4 class="flow-step-title">{{ t('app.code_title') }}</h4>
    <p class="prose muted">{{ t('app.code_note') }}</p>
    <form method="post" action="/ui/settings/channels/telegram/app-login-verify" class="stack secret-form">
      <label class="field">
        <span class="label-row">{{ t('app.code_label') }}</span>
        <input type="text" name="code" inputmode="numeric" autocomplete="one-time-code" required placeholder="12345" />
      </label>
      <button type="submit" class="btn primary">{{ t('app.code_submit') }}</button>
    </form>
    {% elif step == 'password' %}
    <div class="flow-done-row">{{ t('app.code_ok') }}</div>
    <h4 class="flow-step-title">{{ t('app.2fa_title') }}</h4>
    <p class="prose muted">{{ t('app.2fa_note') }}</p>
    <form method="post" action="/ui/settings/channels/telegram/app-login-password" class="stack secret-form">
      <label class="field">
        <span class="label-row">{{ t('app.2fa_label') }}</span>
        <input type="password" name="password" autocomplete="current-password" required />
      </label>
      <button type="submit" class="btn primary">{{ t('app.2fa_submit') }}</button>
    </form>
    {% endif %}

    {# done #}
    {% if step == 'connected' %}
    <p class="flash ok" role="status">{{ th('app.connected') }}</p>
    <form method="post" action="/ui/settings/channels/telegram/app-disconnect" class="actions">
      <button type="submit" class="btn">{{ t('app.disconnect') }}</button>
    </form>
    {% endif %}
  </div>

  {% else %}
  {{ m.secret_group(g.name, g.fields, row.secret_flags, t('channel.save_tokens')) }}

  <div class="actions">
    {% if row.enabled %}
    <form method="post" action="/ui/settings/channels/{{ g.name }}/disable">
      <button type="submit" class="btn">{{ t('channel.disable') }}</button>
    </form>
    {% else %}
    <form method="post" action="/ui/settings/channels/{{ g.name }}/enable">
      <button type="submit" class="btn primary" {% if not row.has_secret %}disabled{% endif %}>
        {{ t('channel.enable') }}
      </button>
    </form>
    {% if not row.has_secret %}
    <span class="field-help">{{ t('channel.need_tokens') }}</span>
    {% else %}
    <span class="field-help">{{ t('channel.enable_note') }}</span>
    {% endif %}
    {% endif %}
  </div>
  {% endif %}
</section>
{% endfor %}

<section class="panel" id="jira-info">
  <div class="panel-head">
    <h2>{{ jira_info.title }}</h2>
  </div>
  <p class="prose"><strong>{{ t('settings.summary') }}</strong> {{ jira_info.blurb }}</p>
  <p class="prose muted">{{ jira_info.what_it_does }}</p>
  <h3 class="subhead">{{ t('jira.how_to') }}</h3>
  <ol class="steps">
    {% for step in jira_info.steps %}
    <li>{{ step }}</li>
    {% endfor %}
  </ol>
  <ul class="links">
    {% for link in jira_info.links %}
    <li>
      <a href="{{ link.url }}" target="_blank" rel="noopener noreferrer">{{ link.label }}</a>
    </li>
    {% endfor %}
  </ul>
  <p class="note">{{ jira_info.note }}</p>

  <h3 class="subhead">{{ t('harness.title') }}</h3>
  <p class="prose muted">{{ t('harness.note') }}</p>
  {% for field in harness_secrets %}
  <form method="post" action="/ui/settings/harness-secret" class="stack secret-form">
    <input type="hidden" name="key" value="{{ field.key }}" />
    <label class="field">
      <span class="label-row">
        {{ field.label }}
        {% if field.exists %}
        <span class="badge">{{ t('field.saved') }}</span>
        {% else %}
        <span class="badge muted">{{ t('field.not_set') }}</span>
        {% endif %}
      </span>
      <input
        type="password"
        name="value"
        autocomplete="off"
        required
        placeholder="{{ field.placeholder }}"
      />
      <span class="field-help">{{ field.help }} · {{ t('harness.key_name') }} <code>{{ field.key }}</code></span>
      <details class="field-more">
        <summary>{{ t('field.more') }}</summary>
        <p>{{ field.tooltip }}</p>
      </details>
    </label>
    <button type="submit" class="btn primary">{{ t('btn.save') }}</button>
  </form>
  {% endfor %}
</section>

{% endblock %}