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

{% block settings_content %}
<div>
  <h2 class="ui-section-title text-xl">{% if local_runtime_mode %}Configuration{% else %}Installation{% endif %}</h2>
  {% if local_runtime_mode %}
  <p class="ui-section-subtitle">Update how this local Governor instance authenticates with Google Cloud. GitHub is optional advanced fallback and is not part of the standard local review/apply workflow.</p>
  {% else %}
  <p class="ui-section-subtitle">Update how this Governor instance authenticates with Google Cloud and GitHub. Changes apply immediately after save.</p>
  {% endif %}

  {% 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">
    {% if local_runtime_mode %}
    <p class="text-sm font-medium text-slate-900 dark:text-slate-100">Local CLI reminder</p>
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Local mode reads source from configured workspace paths and applies approved fixes back to your working tree. GitHub and the Pull Requests page are optional fallback surfaces, not the standard local path.</p>
    {% else %}
    <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>
    {% endif %}
  </div>

  {% if local_runtime_mode and workspace_info %}
  <div class="mt-6 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">Local Workspace</h3>
    <p class="ui-form-help mb-3">Active workspace configured via <code class="text-xs bg-slate-100 dark:bg-slate-800 px-1 rounded">governor init</code>.</p>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      {% if workspace_info.project_path %}
      <div>
        <p class="ui-form-label">Project Path</p>
        <p class="text-sm text-slate-900 dark:text-slate-100 break-all">{{ workspace_info.project_path }}</p>
      </div>
      {% endif %}
      {% if workspace_info.profiles_dir %}
      <div>
        <p class="ui-form-label">Profiles Directory</p>
        <p class="text-sm text-slate-900 dark:text-slate-100 break-all">{{ workspace_info.profiles_dir }}</p>
      </div>
      {% endif %}
      {% if workspace_info.target_name %}
      <div>
        <p class="ui-form-label">Target Name</p>
        <p class="text-sm text-slate-900 dark:text-slate-100">{{ workspace_info.target_name }}</p>
      </div>
      {% endif %}
      {% if workspace_info.dbt_version %}
      <div>
        <p class="ui-form-label">dbt Version</p>
        <p class="text-sm text-slate-900 dark:text-slate-100">{{ workspace_info.dbt_version }}</p>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}

  <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 and local workspace paths for working-tree review and apply.</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">
      {% if local_runtime_mode %}
      <details {% if show_github_advanced %}open{% endif %}>
        <summary class="flex cursor-pointer list-none items-start justify-between gap-4">
          <div>
            <h3 class="text-sm font-medium text-slate-900 dark:text-slate-100">Optional GitHub Fallback</h3>
            <p class="ui-form-help">Not required for local CLI mode. Configure this only if you want optional repository fallback or hybrid workflows.</p>
          </div>
          <span class="rounded-full border border-slate-200 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500 dark:border-slate-700 dark:text-slate-400">Advanced</span>
        </summary>
        <div class="mt-4">
      {% else %}
      <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>
      {% endif %}

      {% 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 %}

      {% if local_runtime_mode %}
      <div class="mb-4 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">
        Local workspace review and <code>Apply to Working Tree</code> do not require GitHub credentials. PR pages stay hidden in local mode even if you configure this.
      </div>
      {% 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">{% if local_runtime_mode %}Optional for shared or hybrid repository access.{% else %}Best for shared or org-managed installations.{% endif %}</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">{% if local_runtime_mode %}Optional if you want repository fallback while still using local working-tree apply.{% else %}Recommended for local development using your own GitHub account.{% endif %}</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">{% if local_runtime_mode %}Recommended for the standard local CLI flow.{% else %}Use Governor in detection-only mode without repository or PR access.{% endif %}</p>
        </label>
      </div>
      <input type="hidden" name="github_auth_mode" id="github_auth_mode_hidden" value="{{ form_data.get('github_auth_mode', 'disabled' if local_runtime_mode else '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">{% if local_runtime_mode %}Only needed for optional repository fallback. Local working-tree apply does not require this token.{% else %}Use a token that can read repositories and create branches and pull requests.{% endif %}</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>

      {% if local_runtime_mode %}
        </div>
      </details>
      {% endif %}
    </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 %}