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

{% block settings_content %}
<div>
  <h2 class="ui-section-title text-xl">Installation</h2>
  <p class="ui-section-subtitle">Update how this Governor instance authenticates with Google Cloud and GitHub. Changes apply immediately after save.</p>

  {% if flash %}
    <div class="mt-4 ui-alert border
      {% if flash.level == 'info' %}
        border-blue-300 dark:border-blue-500/30 bg-blue-50 dark:bg-blue-950/40 text-blue-600 dark:text-blue-300
      {% elif flash.level == 'error' %}
        border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-300
      {% else %}
        border-brand-200 dark:border-brand-500/30 bg-brand-50 dark:bg-brand-700/40 text-brand-500 dark:text-brand-200
      {% endif %}
    ">
      {{ flash.message }}
    </div>
  {% endif %}

  <div class="mt-6 rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4">
    <p class="text-sm font-medium text-slate-900 dark:text-slate-100">Local dev reminder</p>
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">After switching this instance to local development, each project still needs <span class="font-medium">Manifest Source = Manual upload</span> in its configuration. Upload <code>manifest.json</code> on the configuration detail page after saving the project.</p>
  </div>

  <form method="post" action="/settings/installation" enctype="multipart/form-data" class="ui-form-scope mt-6 space-y-6">
    <section>
      <h3 class="text-sm font-medium text-slate-900 dark:text-slate-100">Installation Mode</h3>
      <p class="ui-form-help">Choose the operating mode for this Governor instance.</p>
      {% if errors.get('installation_mode') %}
        <p class="mt-2 text-sm text-red-500 dark:text-red-400">{{ errors['installation_mode'] }}</p>
      {% endif %}
      <div class="mt-3 grid gap-3 md:grid-cols-2" id="installation-mode-picker">
        <label class="installation-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if form_data.get('installation_mode') == 'cloud' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/60{% endif %}">
          <input type="radio" name="installation_mode_pick" value="cloud" class="sr-only" {% if form_data.get('installation_mode') == 'cloud' %}checked{% endif %}>
          <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Cloud</p>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Use shared infrastructure patterns like managed runtime credentials and GitHub App auth.</p>
        </label>
        <label class="installation-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if form_data.get('installation_mode') == 'local_dev' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/60{% endif %}">
          <input type="radio" name="installation_mode_pick" value="local_dev" class="sr-only" {% if form_data.get('installation_mode') == 'local_dev' %}checked{% endif %}>
          <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Local Dev</p>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Use your own service account, your own GitHub credentials, and manual manifest uploads.</p>
        </label>
      </div>
      <input type="hidden" name="installation_mode" id="installation_mode_hidden" value="{{ form_data.get('installation_mode', 'cloud') }}">
    </section>

    <section class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4">
      <h3 class="text-sm font-medium text-slate-900 dark:text-slate-100">Google Cloud</h3>
      <p class="ui-form-help">Governor uses this for project discovery, logging, and BigQuery Information Schema access.</p>

      {% if errors.get('gcp_auth_method') %}
        <p class="mt-2 text-sm text-red-500 dark:text-red-400">{{ errors['gcp_auth_method'] }}</p>
      {% endif %}

      <div class="mt-4 grid gap-3 md:grid-cols-2" id="gcp-auth-picker">
        <label class="gcp-auth-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if form_data.get('gcp_auth_method') == 'json' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
          <input type="radio" name="gcp_auth_method_pick" value="json" class="sr-only" {% if form_data.get('gcp_auth_method') == 'json' %}checked{% endif %}>
          <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Service Account JSON</p>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Recommended for local development and machines outside Cloud Run.</p>
        </label>
        <label class="gcp-auth-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if form_data.get('gcp_auth_method') == 'adc' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
          <input type="radio" name="gcp_auth_method_pick" value="adc" class="sr-only" {% if form_data.get('gcp_auth_method') == 'adc' %}checked{% endif %}>
          <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Workload Identity / ADC</p>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Use application default credentials from the runtime environment.</p>
        </label>
      </div>
      <input type="hidden" name="gcp_auth_method" id="gcp_auth_method_hidden" value="{{ form_data.get('gcp_auth_method', 'json') }}">

      <div class="mt-4">
        <label for="bigquery_region" class="ui-form-label">BigQuery Region</label>
        <input
          type="text"
          name="bigquery_region"
          id="bigquery_region"
          value="{{ form_data.get('bigquery_region', '') }}"
          placeholder="us"
          class="ui-form-input mt-2 px-4 py-2.5 {% if errors.get('bigquery_region') %}border-red-400 dark:border-red-500{% endif %}"
        />
        <p class="mt-1.5 text-xs text-slate-500 dark:text-slate-400">Example values: <code>us</code>, <code>eu</code>, <code>us-central1</code>.</p>
        {% if errors.get('bigquery_region') %}
          <p class="mt-1.5 text-sm text-red-500 dark:text-red-400">{{ errors['bigquery_region'] }}</p>
        {% endif %}
      </div>

      <div id="gcp-json-fields" class="mt-4 {% if form_data.get('gcp_auth_method') != 'json' %}hidden{% endif %}">
        <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/40 p-3 text-sm text-slate-600 dark:text-slate-300">
          {% if has_saved_gcp_credentials %}
            A service account JSON is already stored. Leave the fields below blank to keep it.
          {% else %}
            No service account JSON is stored yet.
          {% endif %}
        </div>
        <div class="mt-4">
          <label for="credentials_json" class="ui-form-label">Service Account JSON</label>
          <textarea
            name="credentials_json"
            id="credentials_json"
            spellcheck="false"
            placeholder='{ "type": "service_account", "project_id": "...", ... }'
            class="ui-form-input mt-2 h-36 resize-none px-4 py-2.5 font-mono text-xs {% if errors.get('gcp_credentials_json') %}border-red-400 dark:border-red-500{% endif %}"
          >{{ form_data.get('credentials_json', '') }}</textarea>
        </div>
        <div class="mt-3">
          <label for="credentials_file" class="ui-form-label">Upload JSON File</label>
          <input
            type="file"
            name="credentials_file"
            id="credentials_file"
            accept=".json,application/json"
            class="mt-2 block w-full text-sm text-slate-600 dark:text-slate-300 file:mr-3 file:rounded file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-slate-700 dark:file:bg-slate-800 dark:file:text-slate-300"
          />
        </div>
        {% if errors.get('gcp_credentials_json') %}
          <p class="mt-2 text-sm text-red-500 dark:text-red-400">{{ errors['gcp_credentials_json'] }}</p>
        {% endif %}
      </div>
    </section>

    <section class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4">
      <h3 class="text-sm font-medium text-slate-900 dark:text-slate-100">GitHub</h3>
      <p class="ui-form-help">Governor uses GitHub to fetch repository files and create pull requests.</p>

      {% if errors.get('github_auth_mode') %}
        <p class="mt-2 text-sm text-red-500 dark:text-red-400">{{ errors['github_auth_mode'] }}</p>
      {% endif %}
      {% if errors.get('github') %}
        <p class="mt-2 text-sm text-red-500 dark:text-red-400">{{ errors['github'] }}</p>
      {% endif %}

      <div class="mt-4 grid gap-3 md:grid-cols-3" id="github-auth-picker">
        <label class="github-auth-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if form_data.get('github_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="github_auth_mode_pick" value="app" class="sr-only" {% if form_data.get('github_auth_mode') == 'app' %}checked{% endif %}>
          <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">GitHub App</p>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Best for shared or org-managed installations.</p>
        </label>
        <label class="github-auth-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if form_data.get('github_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="github_auth_mode_pick" value="personal_token" class="sr-only" {% if form_data.get('github_auth_mode') == 'personal_token' %}checked{% endif %}>
          <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Personal Access Token</p>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Recommended for local development using your own GitHub account.</p>
        </label>
        <label class="github-auth-option cursor-pointer rounded-xl border-2 p-4 transition-colors {% if form_data.get('github_auth_mode') == 'disabled' %}border-brand-500 bg-brand-50 dark:bg-brand-900/20{% else %}border-slate-200 dark:border-slate-700{% endif %}">
          <input type="radio" name="github_auth_mode_pick" value="disabled" class="sr-only" {% if form_data.get('github_auth_mode') == 'disabled' %}checked{% endif %}>
          <p class="text-sm font-semibold text-slate-900 dark:text-slate-100">Disabled</p>
          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Use Governor in detection-only mode without repository or PR access.</p>
        </label>
      </div>
      <input type="hidden" name="github_auth_mode" id="github_auth_mode_hidden" value="{{ form_data.get('github_auth_mode', 'app') }}">

      <div id="github-app-fields" class="mt-4 space-y-4 {% if form_data.get('github_auth_mode') != 'app' %}hidden{% endif %}">
        <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/40 p-3 text-sm text-slate-600 dark:text-slate-300">
          {% if has_saved_github_app_credentials %}
            GitHub App credentials are already stored. Leave fields blank to keep them.
          {% else %}
            No GitHub App credentials are stored yet.
          {% endif %}
        </div>
        <div>
          <label for="app_id" class="ui-form-label">GitHub App ID</label>
          <input
            type="text"
            name="app_id"
            id="app_id"
            value="{{ form_data.get('app_id', '') }}"
            placeholder="123456"
            class="ui-form-input mt-2 px-4 py-2.5 {% if errors.get('app_id') %}border-red-400 dark:border-red-500{% endif %}"
          />
          {% if errors.get('app_id') %}
            <p class="mt-1.5 text-sm text-red-500 dark:text-red-400">{{ errors['app_id'] }}</p>
          {% endif %}
        </div>
        <div>
          <label for="installation_id" class="ui-form-label">Installation ID</label>
          <input
            type="text"
            name="installation_id"
            id="installation_id"
            value="{{ form_data.get('installation_id', '') }}"
            placeholder="78901234"
            class="ui-form-input mt-2 px-4 py-2.5 {% if errors.get('installation_id') %}border-red-400 dark:border-red-500{% endif %}"
          />
          {% if errors.get('installation_id') %}
            <p class="mt-1.5 text-sm text-red-500 dark:text-red-400">{{ errors['installation_id'] }}</p>
          {% endif %}
        </div>
        <div>
          <label for="private_key" class="ui-form-label">Private Key PEM</label>
          <textarea
            name="private_key"
            id="private_key"
            spellcheck="false"
            placeholder="-----BEGIN RSA PRIVATE KEY-----&#10;...&#10;-----END RSA PRIVATE KEY-----"
            class="ui-form-input mt-2 h-32 resize-none px-4 py-2.5 font-mono text-xs {% if errors.get('private_key') %}border-red-400 dark:border-red-500{% endif %}"
          >{{ form_data.get('private_key', '') }}</textarea>
          {% if errors.get('private_key') %}
            <p class="mt-1.5 text-sm text-red-500 dark:text-red-400">{{ errors['private_key'] }}</p>
          {% endif %}
        </div>
      </div>

      <div id="github-pat-fields" class="mt-4 {% if form_data.get('github_auth_mode') != 'personal_token' %}hidden{% endif %}">
        <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950/40 p-3 text-sm text-slate-600 dark:text-slate-300">
          {% if has_saved_github_personal_access_token %}
            A personal access token is already stored. Leave the field blank to keep it.
          {% else %}
            No personal access token is stored yet.
          {% endif %}
        </div>
        <div class="mt-4">
          <label for="personal_access_token" class="ui-form-label">Personal Access Token</label>
          <textarea
            name="personal_access_token"
            id="personal_access_token"
            spellcheck="false"
            placeholder="github_pat_..."
            class="ui-form-input mt-2 h-24 resize-none px-4 py-2.5 font-mono text-xs {% if errors.get('personal_access_token') %}border-red-400 dark:border-red-500{% endif %}"
          >{{ form_data.get('personal_access_token', '') }}</textarea>
          <p class="mt-1.5 text-xs text-slate-500 dark:text-slate-400">Use a token that can read repositories and create branches and pull requests.</p>
          {% if errors.get('personal_access_token') %}
            <p class="mt-1.5 text-sm text-red-500 dark:text-red-400">{{ errors['personal_access_token'] }}</p>
          {% endif %}
        </div>
      </div>
    </section>

    <div>
      <button type="submit" class="ui-btn-primary transition-colors">Save Installation Settings</button>
    </div>
  </form>
</div>

<script>
  (function () {
    var installationOptions = document.querySelectorAll('.installation-option');
    var installationHidden = document.getElementById('installation_mode_hidden');
    var gcpOptions = document.querySelectorAll('.gcp-auth-option');
    var gcpHidden = document.getElementById('gcp_auth_method_hidden');
    var githubOptions = document.querySelectorAll('.github-auth-option');
    var githubHidden = document.getElementById('github_auth_mode_hidden');
    var gcpJsonFields = document.getElementById('gcp-json-fields');
    var githubAppFields = document.getElementById('github-app-fields');
    var githubPatFields = document.getElementById('github-pat-fields');

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

    function applyInstallationMode(mode) {
      installationHidden.value = mode;
      updateSelectableGroup(installationOptions, mode);
    }

    function applyGcpMode(mode) {
      gcpHidden.value = mode;
      updateSelectableGroup(gcpOptions, mode);
      gcpJsonFields.classList.toggle('hidden', mode !== 'json');
    }

    function applyGitHubMode(mode) {
      githubHidden.value = mode;
      updateSelectableGroup(githubOptions, mode);
      githubAppFields.classList.toggle('hidden', mode !== 'app');
      githubPatFields.classList.toggle('hidden', mode !== 'personal_token');
    }

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

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

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

    applyInstallationMode(installationHidden.value);
    applyGcpMode(gcpHidden.value);
    applyGitHubMode(githubHidden.value);
  })();
</script>
{% endblock %}