{% extends "setup/layout.html" %}

{% block content %}
<div class="ui-pane p-6">
  {% set selected_auth_mode = auth_mode if auth_mode is defined else ("personal_token" if state and state.installation_mode == "local_dev" else "app") %}
  <div class="mb-6">
    <p class="ui-eyebrow">Step 4 of 6 <span class="ml-2 text-xs font-normal text-slate-400">(optional)</span></p>
    <h1 class="ui-page-title">GitHub Access</h1>
    <p class="ui-page-subtitle">
      Connect GitHub so Governor can fetch repository files and create pull requests.
      Skip this step to run in detection-only mode — you can configure it later in Admin settings.
    </p>
  </div>

  {% if errors and errors.github %}
    <div class="mb-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
      {{ errors.github }}
    </div>
  {% endif %}
  {% if errors and errors.network %}
    <div class="mb-4 ui-alert border-amber-300 dark:border-amber-500/60 bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-300">
      GitHub unreachable: {{ errors.network }}
    </div>
  {% endif %}

  <form method="post" action="/setup/4" class="space-y-5">
    <input type="hidden" name="auth_mode" id="auth_mode_hidden" value="{{ selected_auth_mode }}">

    <div class="grid grid-cols-2 gap-3" id="github-auth-picker">
      <label class="github-auth-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if selected_auth_mode == 'app' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
        <input type="radio" name="auth_mode_pick" value="app" class="sr-only" {% if selected_auth_mode == 'app' %}checked{% endif %}>
        <p class="text-sm font-semibold text-slate-800 dark:text-slate-100">GitHub App</p>
        <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Best for shared cloud installs and org-managed permissions.</p>
      </label>
      <label class="github-auth-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if selected_auth_mode == 'personal_token' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
        <input type="radio" name="auth_mode_pick" value="personal_token" class="sr-only" {% if selected_auth_mode == 'personal_token' %}checked{% endif %}>
        <p class="text-sm font-semibold text-slate-800 dark:text-slate-100">Personal Access Token</p>
        <p class="mt-1 text-sm text-slate-400 dark:text-slate-500">Great for local development when you want to use your own GitHub account.</p>
      </label>
    </div>

    <div id="github-app-fields" {% if selected_auth_mode != 'app' %}class="hidden"{% endif %}>
      <div>
        <label class="ui-form-label" for="app_id">GitHub App ID</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5 {% if errors and errors.app_id %}border-rose-400 dark:border-rose-500{% endif %}"
          type="text"
          name="app_id"
          id="app_id"
          value="{{ app_id or '' }}"
          placeholder="123456"
          inputmode="numeric"
        />
        {% if errors and errors.app_id %}<p class="mt-1.5 text-sm text-rose-600 dark:text-rose-400">{{ errors.app_id }}</p>{% endif %}
      </div>

      <div>
        <label class="ui-form-label" for="installation_id">Installation ID</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5 {% if errors and errors.installation_id %}border-rose-400 dark:border-rose-500{% endif %}"
          type="text"
          name="installation_id"
          id="installation_id"
          value="{{ installation_id or '' }}"
          placeholder="78901234"
          inputmode="numeric"
        />
        {% if errors and errors.installation_id %}<p class="mt-1.5 text-sm text-rose-600 dark:text-rose-400">{{ errors.installation_id }}</p>{% endif %}
      </div>

      <div>
        <label class="ui-form-label" for="private_key">Private key PEM</label>
        <div class="relative mt-2">
          <textarea
            class="ui-form-input px-4 py-2.5 font-mono text-xs h-32 resize-none {% if errors and errors.private_key %}border-rose-400 dark:border-rose-500{% endif %}"
            name="private_key"
            id="private_key"
            placeholder="-----BEGIN RSA PRIVATE KEY-----&#10;...&#10;-----END RSA PRIVATE KEY-----"
            spellcheck="false"
          ></textarea>
        </div>
        {% if errors and errors.private_key %}<p class="mt-1.5 text-sm text-rose-600 dark:text-rose-400">{{ errors.private_key }}</p>{% endif %}
      </div>
    </div>

    <div id="github-pat-fields" {% if selected_auth_mode != 'personal_token' %}class="hidden"{% endif %}>
      <div>
        <label class="ui-form-label" for="personal_access_token">Personal Access Token</label>
        <textarea
          class="ui-form-input mt-2 px-4 py-2.5 font-mono text-xs h-24 resize-none {% if errors and errors.personal_access_token %}border-rose-400 dark:border-rose-500{% endif %}"
          name="personal_access_token"
          id="personal_access_token"
          placeholder="github_pat_..."
          spellcheck="false"
        ></textarea>
        <p class="mt-1.5 text-xs text-slate-500 dark:text-slate-400">Use a token that can read the repository and create branches/pull requests.</p>
        {% if errors and errors.personal_access_token %}<p class="mt-1.5 text-sm text-rose-600 dark:text-rose-400">{{ errors.personal_access_token }}</p>{% endif %}
      </div>
    </div>

    <div class="flex gap-3">
      <button type="submit" name="skip" value="" class="flex-1 ui-btn-primary py-2.5">
        <span class="btn-label">Verify and continue</span>
        <svg class="btn-spinner w-4 h-4 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg>
      </button>
      <button type="submit" name="skip" value="1" class="flex-1 ui-btn-secondary py-2.5">
        Skip for now
      </button>
    </div>
  </form>

  {% if retry is defined and retry %}
    <p class="mt-4 text-xs text-center text-slate-500 dark:text-slate-400">
      The connectivity check failed due to a network error.
      Check your connection and try again.
    </p>
  {% endif %}
</div>
<script>
  (function () {
    var options = document.querySelectorAll('.github-auth-option');
    var hidden = document.getElementById('auth_mode_hidden');
    var appFields = document.getElementById('github-app-fields');
    var patFields = document.getElementById('github-pat-fields');

    function applyMode(mode) {
      hidden.value = mode;
      if (mode === 'personal_token') {
        patFields.classList.remove('hidden');
        appFields.classList.add('hidden');
      } else {
        appFields.classList.remove('hidden');
        patFields.classList.add('hidden');
      }

      options.forEach(function (label) {
        var radio = label.querySelector('input[type="radio"]');
        var isSelected = radio.value === mode;
        label.classList.toggle('border-brand-500', isSelected);
        label.classList.toggle('bg-brand-50', isSelected);
        label.classList.toggle('border-slate-200', !isSelected);
        label.classList.toggle('dark:border-slate-700', !isSelected);
      });
    }

    options.forEach(function (label) {
      label.addEventListener('click', function () {
        var radio = this.querySelector('input[type="radio"]');
        radio.checked = true;
        applyMode(radio.value);
      });
    });

    applyMode(hidden.value);
  })();
</script>
{% endblock %}