{% extends "layout.html" %}

{% block content %}
  {% set page_mode = creation_mode | default(form_data.get('creation_mode', 'cloud')) %}
  <section class="ui-shell">
    <p class="ui-eyebrow">Admin Only</p>
    <div class="mt-3 flex items-start justify-between gap-4">
      <div>
        <h1 class="ui-page-title">New Configuration</h1>
        <p class="ui-page-subtitle">
          {% if page_mode == 'local' %}
            Local mode uses your machine's dbt project folder and a manual <code class="font-mono">manifest.json</code> upload.
          {% else %}
            Cloud mode starts with a GCS-backed manifest and shared-infrastructure defaults.
          {% endif %}
        </p>
      </div>
      <a
        href="/admin/configurations/new"
        class="inline-flex shrink-0 items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-900/60 dark:text-slate-300 dark:hover:border-slate-700 dark:hover:text-slate-100"
      >
        Change Mode
      </a>
    </div>

    {% if errors and errors.get('_general') %}
      <div class="mt-4 border border-red-300 dark:border-red-500/30 bg-red-50 dark:bg-red-950/40 px-4 py-3 text-sm text-red-600 dark:text-red-300">
        {{ errors['_general'][0] }}
      </div>
    {% endif %}

    {% if not gcp_projects %}
      <div class="mt-6 rounded-none border border-amber-300 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-950/40 p-4 text-sm text-amber-700 dark:text-amber-300">
        No GCP projects were discovered automatically. You can still continue by entering the project ID manually.
      </div>
    {% endif %}

      <form method="post" action="/admin/configurations" enctype="multipart/form-data" class="ui-form-scope mt-6 space-y-6"
        data-signals="{schType: '{{ form_data.get('schedule_type', 'interval') }}', schValue: '{{ form_data.get('schedule_value', '24') }}', schInterval: '{{ form_data.get('schedule_value', '24') if form_data.get('schedule_type', 'interval') == 'interval' else '24' }}', schCron: '{{ form_data.get('schedule_value', '') if form_data.get('schedule_type', 'interval') == 'cron' else '' }}', schEnabled: {{ 'true' if form_data.get('schedule_enabled', 'true') in ('true', 'True', True, 'on') else 'false' }}}"
        onsubmit="var btn=document.getElementById('config-submit-btn'); btn.disabled=true; document.getElementById('config-submit-spinner').classList.remove('hidden'); document.getElementById('config-submit-label').textContent='Saving\u2026';"
      >
        <input type="hidden" name="creation_mode" value="{{ page_mode }}" />
        <input
          type="hidden"
          name="manifest_source"
          value="{{ 'manual_upload' if page_mode == 'local' else 'gcs' }}"
        />
        <div>
          <label for="gcp_project_id" class="block text-sm font-medium text-slate-600 dark:text-slate-300">GCP Project</label>
          <input
            type="text"
            name="gcp_project_id"
            id="gcp_project_id"
            required
            list="gcp-project-options"
            value="{{ form_data.get('gcp_project_id', '') }}"
            placeholder="my-gcp-project"
            class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
          />
          <datalist id="gcp-project-options">
            {% for project in gcp_projects %}
              <option value="{{ project.project_id }}">{{ project.display_name or project.project_id }}</option>
            {% endfor %}
          </datalist>
          <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Manual entry works even when project discovery is unavailable.</p>
          {% if errors and errors.get('gcp_project_id') %}
            <p class="mt-1 text-xs text-red-500 dark:text-red-400">{{ errors['gcp_project_id'][0] }}</p>
          {% endif %}
        </div>

        {% if page_mode == 'local' %}
          <div class="rounded-none border border-brand-200 dark:border-brand-700/40 bg-brand-50/70 dark:bg-brand-900/20 p-4">
            <p class="text-sm font-medium text-brand-700 dark:text-brand-200">Manifest Upload</p>
            <p class="mt-1 text-sm text-brand-700/80 dark:text-brand-200/80">
              Upload your <code class="font-mono">manifest.json</code> now and Governor will store it as part of configuration creation.
            </p>
          </div>
          <div>
            <label for="local_project_path" class="block text-sm font-medium text-slate-600 dark:text-slate-300">Local dbt Project Folder</label>
            <input
              type="text"
              name="local_project_path"
              id="local_project_path"
              value="{{ form_data.get('local_project_path', '') }}"
              placeholder="/Users/you/src/my-dbt-project"
              class="mt-1 w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
            />
            <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Optional, but recommended. This lets Governor apply reviewed solutions directly into that working tree, even if you start the server from another folder.</p>
            {% if errors and errors.get('local_project_path') %}
              <p class="mt-1 text-xs text-red-500 dark:text-red-400">{{ errors['local_project_path'][0] }}</p>
            {% endif %}
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-600 dark:text-slate-300 mb-2">Manifest File</label>
            <!-- Upload state -->
            <label
              for="manifest_file"
              id="manifest_drop_zone"
              class="flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900/40 px-6 py-8 cursor-pointer transition-colors hover:border-brand-400 hover:bg-brand-50/50 dark:hover:border-brand-500 dark:hover:bg-brand-900/20"
            >
              <svg class="h-10 w-10 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
              </svg>
              <div class="text-center">
                <span class="text-sm font-semibold text-brand-600 dark:text-brand-400">Click to upload</span>
                <span class="text-sm text-slate-500 dark:text-slate-400"> or drag and drop</span>
              </div>
              <p class="text-xs text-slate-400 dark:text-slate-500">manifest.json (JSON, max 50 MB)</p>
            </label>
            <!-- Success state (hidden until file chosen) -->
            <div
              id="manifest_success_zone"
              class="hidden rounded-lg border-2 border-solid border-emerald-400 dark:border-emerald-500 bg-emerald-50 dark:bg-emerald-900/20 px-6 py-6"
            >
              <div class="flex items-center gap-4">
                <svg class="h-10 w-10 shrink-0 text-emerald-500 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-semibold text-emerald-700 dark:text-emerald-300">File ready</p>
                  <p id="manifest_file_name" class="mt-0.5 text-sm text-emerald-600 dark:text-emerald-400 truncate"></p>
                </div>
                <label
                  for="manifest_file"
                  class="shrink-0 cursor-pointer rounded-md border border-emerald-300 dark:border-emerald-600 bg-white dark:bg-slate-900 px-3 py-1.5 text-xs font-medium text-emerald-700 dark:text-emerald-300 transition-colors hover:bg-emerald-50 dark:hover:bg-emerald-900/40"
                >
                  Change file
                </label>
              </div>
            </div>
            <input
              type="file"
              name="manifest_file"
              id="manifest_file"
              accept=".json,application/json"
              required
              class="sr-only"
              onchange="
                var dropZone = document.getElementById('manifest_drop_zone');
                var successZone = document.getElementById('manifest_success_zone');
                var nameEl = document.getElementById('manifest_file_name');
                if (this.files && this.files.length) {
                  nameEl.textContent = this.files[0].name;
                  dropZone.classList.add('hidden');
                  successZone.classList.remove('hidden');
                } else {
                  dropZone.classList.remove('hidden');
                  successZone.classList.add('hidden');
                }
              "
            />
            {% if errors and errors.get('manifest_upload') %}
              <p class="mt-2 text-xs text-red-500 dark:text-red-400">{{ errors['manifest_upload'][0] }}</p>
            {% endif %}
          </div>
        {% endif %}

        {% if page_mode == 'cloud' %}
          <div
            data-signals="{repoSearch: '{{ form_data.get('github_repo', '') }}', repoValue: '{{ form_data.get('github_repo', '') }}', repoOpen: false}"
            data-on:click__outside="$repoOpen = false"
            class="relative"
          >
            <label for="repo_search" class="block text-sm font-medium text-slate-600 dark:text-slate-300">GitHub Repository</label>
            <div class="relative mt-1">
              <input
                type="text"
                id="repo_search"
                data-bind:repo-search
                data-on:focus="$repoOpen = true; @get('/admin/configurations/search-repos')"
                data-on:input__debounce.200ms="@get('/admin/configurations/search-repos')"
                placeholder="Search repositories..."
                autocomplete="off"
                class="w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
              />
              <input type="hidden" name="github_repo" data-bind:repo-value />
              <div data-show="$repoLoading" class="absolute right-3 top-2.5">
                <svg class="animate-spin h-4 w-4 text-brand-500" 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"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                </svg>
              </div>
            </div>
            <div data-show="$repoOpen" class="absolute z-50 mt-1 w-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-lg max-h-60 overflow-auto">
              <div id="repo-results">
                <div class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
                  Loading...
                </div>
              </div>
            </div>
            {% if errors and errors.get('github_repo') %}
              <p class="mt-1 text-xs text-red-500 dark:text-red-400">{{ errors['github_repo'][0] }}</p>
            {% endif %}
          </div>
        {% endif %}

        {% if page_mode == 'cloud' %}
          <div>
            <h2 class="text-sm font-medium text-slate-600 dark:text-slate-300">Manifest Location</h2>
            <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Cloud mode uses a GCS-backed manifest.</p>
            {% if errors and errors.get('manifest_location') %}
              <p class="mt-1 text-xs text-red-500 dark:text-red-400">{{ errors['manifest_location'][0] }}</p>
            {% endif %}

            <div
              data-signals="{bucketSearch: '{{ form_data.get('bucket_name', '') }}', bucketValue: '{{ form_data.get('bucket_name', '') }}', bucketOpen: false, pathSearch: '{{ form_data.get('path_prefix', '') }}', pathValue: '{{ form_data.get('path_prefix', '') }}', pathOpen: false}"
              class="mt-3 rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4"
            >
              <div class="grid gap-3 md:grid-cols-3">
                <div
                  data-on:click__outside="$bucketOpen = false"
                  class="relative"
                >
                  <label for="bucket_search" class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Bucket Name</label>
                  <div class="relative">
                    <input
                      type="text"
                      id="bucket_search"
                      data-bind:bucket-search
                      data-on:focus="$bucketOpen = true; @get('/admin/configurations/search-buckets')"
                      data-on:input__debounce.200ms="@get('/admin/configurations/search-buckets')"
                      placeholder="Search buckets..."
                      autocomplete="off"
                      class="w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
                    />
                    <input type="hidden" name="bucket_name" id="bucket_name" data-bind:bucket-value />
                    <div data-show="$bucketLoading" class="absolute right-3 top-2.5">
                      <svg class="animate-spin h-4 w-4 text-brand-500" 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"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                      </svg>
                    </div>
                  </div>
                  <div data-show="$bucketOpen" class="absolute z-50 mt-1 w-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-lg max-h-60 overflow-auto">
                    <div id="bucket-results">
                      <div class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
                        Loading...
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  data-on:click__outside="$pathOpen = false"
                  class="relative"
                >
                  <label for="path_search" class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Path Prefix</label>
                  <div class="relative">
                    <input
                      type="text"
                      id="path_search"
                      data-bind:path-search
                      data-on:focus="$pathOpen = true; @get('/admin/configurations/search-gcs-paths')"
                      data-on:input__debounce.200ms="$pathValue = $pathSearch; @get('/admin/configurations/search-gcs-paths')"
                      placeholder="Browse directories..."
                      autocomplete="off"
                      class="w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
                    />
                    <input type="hidden" name="path_prefix" data-bind:path-value />
                  </div>
                  <div data-show="$pathOpen" class="absolute z-50 mt-1 w-full border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-lg max-h-60 overflow-auto">
                    <div id="path-results">
                      <div class="px-3 py-2 text-sm text-slate-500 dark:text-slate-400">
                        Select a bucket first
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <label for="object_name" class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Object Name</label>
                  <input
                    type="text"
                    name="object_name"
                    id="object_name"
                    value="{{ form_data.get('object_name', 'manifest.json') }}"
                    placeholder="manifest.json"
                    class="w-full border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:border-brand-500 focus:outline-hidden"
                  />
                </div>
              </div>
              <div class="mt-3 flex items-center gap-3">
                <button
                  id="validate-btn"
                  type="button"
                  data-on:click="
                    var btn = document.getElementById('validate-btn');
                    var spinner = document.getElementById('validate-btn-spinner');
                    var label = document.getElementById('validate-btn-label');
                    if (btn) { btn.disabled = true; }
                    if (spinner) { spinner.classList.remove('hidden'); }
                    if (label) { label.textContent = 'Validating…'; }
                    document.getElementById('validation-result').innerHTML = '';
                    @post('/admin/configurations/validate-manifest', {contentType: 'form', body: {bucket_name: document.getElementById('bucket_name').value, path_prefix: $pathValue, object_name: document.getElementById('object_name').value}})
                  "
                  class="inline-flex items-center gap-1.5 border border-brand-200 dark:border-brand-500/30 bg-brand-50 dark:bg-brand-700/40 px-3 py-1.5 text-xs font-medium text-brand-500 dark:text-brand-300 hover:bg-brand-50 dark:hover:bg-brand-700/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                >
                  <svg id="validate-btn-spinner" class="hidden h-3.5 w-3.5 animate-spin" 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"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                  </svg>
                  <span id="validate-btn-label" data-validate-label>Validate</span>
                </button>
                <div id="validation-result" class="text-xs text-slate-400 dark:text-slate-500"></div>
              </div>
            </div>
          </div>
        {% endif %}

        {% include "configurations/_schedule_fields.html" %}

        <!-- Advanced Detection Settings -->
        <style>
          .adv-accordion-content {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows 200ms ease-out;
          }
          details[open] .adv-accordion-content {
            grid-template-rows: 1fr;
          }
          .adv-accordion-inner {
            overflow: hidden;
          }
          .adv-accordion-chevron {
            transition: transform 200ms ease-out;
          }
          details[open] .adv-accordion-chevron {
            transform: rotate(180deg);
          }
        </style>

        <details id="advanced-settings" class="mt-6 border-t border-slate-200 dark:border-slate-800 pt-4">
          <summary class="cursor-pointer list-none">
            <div class="flex items-center justify-between">
              <div>
                <h2 class="text-sm font-medium text-slate-600 dark:text-slate-300">Advanced Settings</h2>
                <p class="mt-0.5 text-xs text-slate-400 dark:text-slate-500">
                  {% if page_mode == 'local' %}
                    Configure detection and generated solution settings for this local project.
                  {% else %}
                    Configure detection and PR submission settings for this project.
                  {% endif %}
                </p>
              </div>
              <svg class="adv-accordion-chevron h-5 w-5 text-slate-500 dark:text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
              </svg>
            </div>
          </summary>

          <div class="adv-accordion-content">
            <div class="adv-accordion-inner">
              <div class="mt-4 space-y-6">
                <!-- Detection group -->
                <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                  <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Detection</h3>
                  <div>
                    <label for="lookback_window_days" class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Lookback Window (days)</label>
                    <input
                      type="number"
                      name="lookback_window_days"
                      id="lookback_window_days"
                      value="{{ form_data.get('lookback_window_days', '30') }}"
                      min="1"
                      class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                    />
                    <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Number of days to track detection frequency. Opportunities are reported as "detected in X of the last Y days".</p>
                    {% if errors and errors.get('lookback_window_days') %}
                      <p class="mt-1 text-xs text-red-500 dark:text-red-400">{{ errors['lookback_window_days'][0] }}</p>
                    {% endif %}
                  </div>

                  <div>
                    <label for="resolution_period_days" class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Resolution Period (days)</label>
                    <input
                      type="number"
                      name="resolution_period_days"
                      id="resolution_period_days"
                      value="{{ form_data.get('resolution_period_days', '14') }}"
                      min="1"
                      class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                    />
                    <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Number of consecutive days without detection before an opportunity is marked as resolved.</p>
                    {% if errors and errors.get('resolution_period_days') %}
                      <p class="mt-1 text-xs text-red-500 dark:text-red-400">{{ errors['resolution_period_days'][0] }}</p>
                    {% endif %}
                  </div>

                  <div class="border-t border-slate-200 dark:border-slate-800 pt-4 space-y-4">
                  <div>
                    <p class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Watched Rules</p>
                    <p class="text-xs text-slate-400 dark:text-slate-500">Choose which optimization rules Governor watches for this project.</p>
                  </div>

                  {% if detection_analysis_surfaces %}
                    <div class="grid gap-2 md:grid-cols-3">
                      {% for surface in detection_analysis_surfaces %}
                        <div class="border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 px-3 py-2">
                          <p class="text-xs font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-300">{{ surface.title }}</p>
                          <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ surface.description }}</p>
                        </div>
                      {% endfor %}
                    </div>
                  {% endif %}

                    {% if unknown_watched_rule_types %}
                      <div class="border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:border-amber-500/30 dark:bg-amber-950/40 dark:text-amber-300">
                        Some submitted rule ids are no longer available: {{ unknown_watched_rule_types | join(', ') }}.
                      </div>
                    {% endif %}

                    <div class="space-y-2">
                      <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 px-3 py-2">
                        <input
                          type="radio"
                          name="watched_rules_mode"
                          value="all"
                          {% if watched_rules_mode == 'all' %}checked{% endif %}
                          class="mt-1 h-4 w-4 border-slate-300 text-brand-500 focus:ring-brand-500"
                        />
                        <span>
                          <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Use all enabled rules</span>
                          <span class="block text-xs text-slate-400 dark:text-slate-500">Inherit the full set of globally enabled detection rules, including future additions.</span>
                        </span>
                      </label>

                      <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 px-3 py-2">
                        <input
                          type="radio"
                          name="watched_rules_mode"
                          value="custom"
                          {% if watched_rules_mode == 'custom' %}checked{% endif %}
                          class="mt-1 h-4 w-4 border-slate-300 text-brand-500 focus:ring-brand-500"
                        />
                        <span>
                          <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Custom selection</span>
                          <span class="block text-xs text-slate-400 dark:text-slate-500">Only run the checked rules for this project.</span>
                        </span>
                      </label>
                    </div>

                    <div
                      id="watched-rules-custom"
                      class="{% if watched_rules_mode != 'custom' %}hidden {% endif %}space-y-3 border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 p-3"
                    >
                      {% if detection_rule_groups %}
                        {% for group in detection_rule_groups %}
                          <section class="rounded-none border border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/60 p-4" data-rule-group-panel="{{ group.key }}">
                            <label class="flex items-start gap-3">
                              <input
                                type="checkbox"
                                data-rule-group-master="{{ group.key }}"
                                class="mt-1 h-4 w-4 rounded border-slate-300 text-brand-500 focus:ring-brand-500"
                              />
                              <span class="min-w-0 flex-1">
                                <span class="flex flex-wrap items-center gap-2">
                                  <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ group.title }}</span>
                                  <span class="ui-pill ui-pill-neutral">{{ group.rules | length }} rules</span>
                                  {% for surface_summary in group.analysis_surface_summaries %}
                                    <span class="ui-pill ui-pill-neutral">{{ surface_summary.title }} · {{ surface_summary.count }}</span>
                                  {% endfor %}
                                </span>
                                <span class="mt-1 block text-xs text-slate-500 dark:text-slate-400">{{ group.description }}</span>
                              </span>
                            </label>
                            <div class="mt-3 space-y-1 border-t border-slate-200 dark:border-slate-800 pt-3 pl-7">
                              {% for rule in group.rules %}
                                <label class="flex items-start gap-3 rounded-md px-2 py-2 hover:bg-slate-50 dark:hover:bg-slate-900/70">
                                  <input
                                    type="checkbox"
                                    name="watched_rule_types"
                                    value="{{ rule.rule_type }}"
                                    data-rule-group-child="{{ group.key }}"
                                    {% if rule.rule_type in selected_watched_rule_types %}checked{% endif %}
                                    class="mt-1 h-4 w-4 rounded border-slate-300 text-brand-500 focus:ring-brand-500"
                                  />
                                  <span class="min-w-0">
                                    <span class="flex flex-wrap items-center gap-2">
                                      <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ rule.display_name }}</span>
                                      <span class="ui-pill ui-pill-neutral">{{ rule.analysis_surface_title }}</span>
                                      {% if rule.rule_type in disabled_rule_types %}
                                        <span class="ui-pill ui-pill-warning">Globally disabled</span>
                                      {% endif %}
                                    </span>
                                    <span class="mt-1 block text-xs text-slate-500 dark:text-slate-400">{{ rule.description }}</span>
                                    <span class="mt-1 block text-xs text-slate-400 dark:text-slate-500">{{ rule.analysis_surface_description }}</span>
                                    {% if rule.rule_type in disabled_rule_types %}
                                      <span class="mt-1 block text-xs text-amber-600 dark:text-amber-300">This rule stays unavailable at runtime until it is re-enabled globally.</span>
                                    {% endif %}
                                  </span>
                                </label>
                              {% endfor %}
                            </div>
                          </section>
                        {% endfor %}
                      {% else %}
                        <p class="text-xs text-slate-500 dark:text-slate-400">No project-level detection rules are currently registered.</p>
                      {% endif %}
                      <p class="text-xs text-slate-400 dark:text-slate-500">Leaving every rule unchecked is valid and means Governor will skip project-level detection for this configuration.</p>
                    </div>

                    {% if errors and errors.get('watched_rule_types') %}
                      <p class="text-xs text-red-500 dark:text-red-400">{{ errors['watched_rule_types'][0] }}</p>
                    {% endif %}
                  </div>
                </div>

                <!-- Solution guardrails group -->
                <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                  <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Solution Guardrails</h3>

                  <div>
                    <p class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Allowed Solution Types</p>
                    <p class="text-xs text-slate-400 dark:text-slate-500">Choose which remediation families Governor may generate for this project. Detection still runs independently.</p>
                  </div>

                  {% if unknown_solution_policy_tags %}
                    <div class="border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:border-amber-500/30 dark:bg-amber-950/40 dark:text-amber-300">
                      Some submitted solution policy tags are no longer available: {{ unknown_solution_policy_tags | join(', ') }}.
                    </div>
                  {% endif %}

                  <div class="space-y-2">
                    <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 px-3 py-2">
                      <input
                        type="radio"
                        name="solution_guardrails_mode"
                        value="all"
                        {% if solution_guardrails_mode == 'all' %}checked{% endif %}
                        class="mt-1 h-4 w-4 border-slate-300 text-brand-500 focus:ring-brand-500"
                      />
                      <span>
                        <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Allow all supported solution types</span>
                        <span class="block text-xs text-slate-400 dark:text-slate-500">Inherit the full set of supported solution families, including future additions.</span>
                      </span>
                    </label>

                    <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 px-3 py-2">
                      <input
                        type="radio"
                        name="solution_guardrails_mode"
                        value="custom"
                        {% if solution_guardrails_mode == 'custom' %}checked{% endif %}
                        class="mt-1 h-4 w-4 border-slate-300 text-brand-500 focus:ring-brand-500"
                      />
                      <span>
                        <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">Custom allow-list</span>
                        <span class="block text-xs text-slate-400 dark:text-slate-500">Only the checked remediation families may be generated or stored for this project.</span>
                      </span>
                    </label>
                  </div>

                  <div
                    id="solution-guardrails-custom"
                    class="{% if solution_guardrails_mode != 'custom' %}hidden {% endif %}space-y-3 border border-slate-200 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-950/40 p-3"
                  >
                    {% if solution_policy_catalog %}
                      {% for policy in solution_policy_catalog %}
                        <label class="flex items-start gap-3 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 px-3 py-3">
                          <input
                            type="checkbox"
                            name="allowed_solution_policy_tags"
                            value="{{ policy.policy_tag }}"
                            {% if policy.policy_tag in selected_solution_policy_tags %}checked{% endif %}
                            class="mt-1 h-4 w-4 rounded border-slate-300 text-brand-500 focus:ring-brand-500"
                          />
                          <span class="min-w-0">
                            <span class="block text-sm font-medium text-slate-900 dark:text-slate-100">{{ policy.display_name }}</span>
                            <span class="mt-1 block text-xs text-slate-500 dark:text-slate-400">{{ policy.description }}</span>
                          </span>
                        </label>
                      {% endfor %}
                    {% else %}
                      <p class="text-xs text-slate-500 dark:text-slate-400">No solution policy tags are currently registered.</p>
                    {% endif %}
                    <p class="text-xs text-slate-400 dark:text-slate-500">Leaving every policy unchecked is valid and means Governor can still detect opportunities, but it will not store new solutions for this project.</p>
                  </div>

                  {% if errors and errors.get('allowed_solution_policy_tags') %}
                    <p class="text-xs text-red-500 dark:text-red-400">{{ errors['allowed_solution_policy_tags'][0] }}</p>
                  {% endif %}
                </div>

                {% if page_mode == 'cloud' %}
                <!-- PR Submission group -->
                <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                  <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">PR Submission</h3>
                  <div>
                    <label for="auto_pr_trust_tier" class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Auto-PR Trust Tier</label>
                    <select
                      name="auto_pr_trust_tier"
                      id="auto_pr_trust_tier"
                      class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                    >
                      <option value="" {% if not form_data.get('auto_pr_trust_tier', '') %}selected{% endif %}>Use organisation default</option>
                      <option value="disabled" {% if form_data.get('auto_pr_trust_tier', '') == 'disabled' %}selected{% endif %}>Disabled</option>
                      <option value="guaranteed_safe" {% if form_data.get('auto_pr_trust_tier', '') == 'guaranteed_safe' %}selected{% endif %}>Guaranteed Safe only</option>
                      <option value="validated" {% if form_data.get('auto_pr_trust_tier', '') == 'validated' %}selected{% endif %}>Validated and above</option>
                      <option value="requires_review" {% if form_data.get('auto_pr_trust_tier', '') == 'requires_review' %}selected{% endif %}>All (including Requires Review)</option>
                    </select>
                    <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Override the organisation-level auto-PR threshold for this project. Leave as "Use organisation default" to inherit the global setting.</p>
                  </div>
                </div>
                {% endif %}

                <!-- Display group -->
                <div class="rounded-none border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900/60 p-4 space-y-4">
                  <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Display</h3>
                  <div>
                    <label for="cost_display_multiplier" class="block text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Cost Display Multiplier</label>
                    <input
                      type="number"
                      name="cost_display_multiplier"
                      id="cost_display_multiplier"
                      value="{{ form_data.get('cost_display_multiplier', cost_display_multiplier|default(1)) if form_data else cost_display_multiplier|default(1) }}"
                      min="1"
                      max="10000"
                      step="1"
                      class="w-full max-w-xs border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-slate-900 dark:text-slate-100 focus:border-brand-500 focus:outline-hidden"
                    />
                    <p class="mt-1 text-xs text-slate-400 dark:text-slate-500">Scale all displayed cost values by this factor. For presentation purposes only — does not affect stored data. Default: 1 (no scaling).</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </details>

        <div class="flex items-center gap-4 pt-4 border-t border-slate-200 dark:border-slate-800">
          <button
            type="submit"
            id="config-submit-btn"
            class="ui-btn-primary disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            <svg class="animate-spin h-4 w-4 text-white hidden" id="config-submit-spinner" 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"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            <span id="config-submit-label">Create Configuration</span>
          </button>
          <a href="/admin/configurations" class="text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 transition-colors">Cancel</a>
        </div>
      </form>
  </section>
  <script>
  (function() {
    function wireCustomPanel(radioName, panelId) {
      const panel = document.getElementById(panelId);
      if (!panel) return;

      const radios = document.querySelectorAll(`input[name="${radioName}"]`);
      function syncMode() {
        const selected = document.querySelector(`input[name="${radioName}"]:checked`);
        const isCustom = selected && selected.value === 'custom';
        panel.classList.toggle('hidden', !isCustom);
      }

      radios.forEach((radio) => radio.addEventListener('change', syncMode));
      syncMode();
    }

    function syncRuleGroupState(scope, groupKey) {
      const master = scope.querySelector(`[data-rule-group-master="${groupKey}"]`);
      if (!master) return;

      const inputs = Array.from(
        scope.querySelectorAll(`input[type="checkbox"][data-rule-group-child="${groupKey}"]`)
      );
      const checkedCount = inputs.filter((input) => input.checked).length;

      master.checked = inputs.length > 0 && checkedCount === inputs.length;
      master.indeterminate = checkedCount > 0 && checkedCount < inputs.length;
    }

    function wireRuleGroupCheckboxes(scopeId) {
      const scope = document.getElementById(scopeId);
      if (!scope) return;

      scope.querySelectorAll('[data-rule-group-master]').forEach((master) => {
        master.addEventListener('change', function() {
          const groupKey = master.dataset.ruleGroupMaster;
          const inputs = scope.querySelectorAll(
            `input[type="checkbox"][data-rule-group-child="${groupKey}"]`
          );
          inputs.forEach((input) => {
            input.checked = master.checked;
          });
          syncRuleGroupState(scope, groupKey);
        });
      });

      scope.querySelectorAll('[data-rule-group-child]').forEach((input) => {
        input.addEventListener('change', function() {
          syncRuleGroupState(scope, input.dataset.ruleGroupChild);
        });
      });

      scope.querySelectorAll('[data-rule-group-master]').forEach((master) => {
        syncRuleGroupState(scope, master.dataset.ruleGroupMaster);
      });
    }

    wireCustomPanel('watched_rules_mode', 'watched-rules-custom');
    wireCustomPanel('solution_guardrails_mode', 'solution-guardrails-custom');
    wireRuleGroupCheckboxes('watched-rules-custom');
  })();
  </script>
{% endblock %}