import { RouterLink } from '@angular/router';
import {
  CdkDrag,
  CdkDragDrop,
  CdkDragHandle,
  CdkDropList,
  moveItemInArray,
} from '@angular/cdk/drag-drop';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  inject,
  input,
  signal,
  untracked,
} from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { PiCheckboxComponent, PiIconComponent, PiNoteComponent } from '@pi/ui';
import { GitIntegrationComponent } from '../ui/git-integration';
import { WebhooksComponent } from '../ui/webhooks';
import { TransferComponent } from '../ui/transfer';
import { AutomationsComponent } from '../ui/automations';
import { ClientShareComponent } from '../ui/client-share';
import { ProjectFacade } from '@task-stream/web/tracker/application';
import {
  CustomFieldType,
  IssueTypeOption,
  ProjectSettings,
  SETTING_COLORS,
  StatusCategory,
  TYPE_ICONS,
} from '@task-stream/web/tracker/domain';
import { CATEGORY, COLOR_LABEL, ICON_LABEL, tone } from '../ui/copy';

type Section = 'statuses' | 'issueTypes' | 'areas' | 'customFields' | 'teams';

const FIELD_TYPES: { id: CustomFieldType; label: string }[] = [
  { id: CustomFieldType.TEXT, label: 'Texto' },
  { id: CustomFieldType.NUMBER, label: 'Número' },
  { id: CustomFieldType.DATE, label: 'Fecha' },
  { id: CustomFieldType.SELECT, label: 'Lista de opciones' },
];

const CATEGORIES = Object.values(StatusCategory);

interface SettingsSection {
  id: string;
  label: string;
  hint: string;
  /** Edits the settings draft (saved with the bar below). */
  draft?: boolean;
  /** Only for who can manage the project (or its owner). */
  needs?: 'manage' | 'owner';
}

const SECTIONS: SettingsSection[] = [
  {
    id: 'general',
    label: 'General',
    hint: 'Quién ve el proyecto, si el público puede proponer cosas y el panel para clientes.',
  },
  {
    id: 'workflow',
    draft: true,
    label: 'Flujo de trabajo',
    hint: 'Las columnas del tablero, a cuáles se puede pasar desde cada una y cuándo algo está hecho.',
  },
  {
    id: 'tickets',
    draft: true,
    label: 'Tickets',
    hint: 'Tipos, áreas y campos propios. Lo que ya se usa no se borra: se archiva y deja de ofrecerse.',
  },
  {
    id: 'teams',
    draft: true,
    label: 'Equipos',
    hint: 'Grupos de miembros, para asignarles tickets y avisarles con «@equipo».',
  },
  {
    id: 'automations',
    label: 'Automatizaciones',
    hint: 'Reglas «cuando… si… entonces…» que hacen solas el trabajo repetido.',
    needs: 'manage',
  },
  {
    id: 'integrations',
    label: 'Integraciones',
    hint: 'Commits y pull requests de Git en cada ticket, y avisos a otros sistemas.',
    needs: 'manage',
  },
  {
    id: 'data',
    label: 'Importar y exportar',
    hint: 'Los tickets en CSV: sacarlos, o traerlos de TaskStream o de Jira.',
    needs: 'manage',
  },
  {
    id: 'danger',
    label: 'Zona peligrosa',
    hint: 'Archivar el proyecto o eliminarlo del todo.',
    needs: 'owner',
  },
];

/** Which section holds each part of the draft. */
const DRAFT_SECTION: Partial<Record<keyof ProjectSettings, string>> = {
  statuses: 'workflow',
  transitions: 'workflow',
  checklistBeforeDone: 'workflow',
  issueTypes: 'tickets',
  areas: 'tickets',
  customFields: 'tickets',
  teams: 'teams',
};

/** "Datos y análisis" → "DATOS_Y_ANALISIS": ids of new values (they never change after saving). */
function idFrom(name: string): string {
  const slug = name
    .normalize('NFD')
    .replace(/[̀-ͯ]/g, '')
    .toUpperCase()
    .replace(/[^A-Z0-9]+/g, '_')
    .replace(/^_+|_+$/g, '')
    .replace(/^[^A-Z]+/, '')
    .slice(0, 30);
  return slug || 'NUEVO';
}

/**
 * "Configuración" (owners and admins): the project's statuses, how tickets
 * move between them, ticket types and areas. Edits a local draft, saved in
 * one go; values can be archived but not removed once saved.
 */
@Component({
  selector: 'ts-settings-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    PiCheckboxComponent,
    RouterLink,
    GitIntegrationComponent,
    WebhooksComponent,
    TransferComponent,
    AutomationsComponent,
    ClientShareComponent,
    CdkDropList,
    CdkDrag,
    CdkDragHandle,
    NgTemplateOutlet,
    PiIconComponent,
    PiNoteComponent,
  ],
  template: `
    <div class="ts-settings-layout">
      <nav class="ts-settings-nav" aria-label="Secciones de la configuración">
        <p class="ts-settings-nav__title">Configuración</p>
        @for (item of sections(); track item.id) {
          <a
            [routerLink]="[]"
            [queryParams]="{ section: item.id }"
            [class.is-active]="item.id === current().id"
            [class.is-danger]="item.id === 'danger'"
            [attr.aria-current]="item.id === current().id ? 'page' : null"
          >
            <span>{{ item.label }}</span>
            @if (changed().has(item.id)) {
              <span class="ts-settings-nav__dot" title="Cambios sin guardar"
                ><span class="visually-hidden">(cambios sin guardar)</span></span
              >
            }
          </a>
        }
      </nav>

      <div class="ts-settings-main">
        <header class="ts-settings-head">
          <h2>{{ current().label }}</h2>
          <p>{{ current().hint }}</p>
        </header>

        @if (!facade.canManage()) {
          <pi-note
            gap="xs"
            status="info"
            appearance="fill"
            type="status"
            title="Solo lectura"
            text="Solo el propietario y los admins pueden cambiar la configuración."
          />
        }

    @if (current().id === 'general' && facade.project(); as project) {
      <section
        class="ts-panel ts-block ts-visibility"
        aria-labelledby="vis-title"
      >
        <div>
          <h3 id="vis-title">Visibilidad</h3>
          <p class="ts-muted">
            @if (project.isPublic) {
              Público: cualquiera, también sin iniciar sesión, ve el tablero,
              los tickets, los comentarios, las releases, la actividad y las
              estadísticas (en la web, por GraphQL y por REST). Solo los
              miembros pueden cambiar algo.
            } @else {
              Privado: solo los miembros del proyecto lo ven.
            }
          </p>
        </div>
        <pi-checkbox
          class="ts-toggle"
          label="Proyecto público"
          [checked]="project.isPublic"
          [disabled]="!facade.canManage()"
          (checkedChange)="facade.setPublic($event)"
        />
      </section>

      <section
        class="ts-panel ts-block ts-visibility"
        aria-labelledby="proposals-title"
      >
        <div>
          <h3 id="proposals-title">Propuestas del público</h3>
          <p class="ts-muted">
            @if (!project.isPublic) {
              Solo para proyectos públicos: hazlo público para abrir un
              formulario donde cualquiera, sin cuenta, reporte un error o
              proponga una idea.
            } @else if (project.acceptsProposals) {
              Abierto: cualquiera puede enviar un error o una idea desde
              <a class="ts-plain-link" routerLink="../propose">el formulario</a
              >. Llegan como tickets con la etiqueta «propuesta», y se pueden
              votar.
            } @else {
              Cerrado. Ábrelo para que cualquiera, sin cuenta, pueda reportar un
              error o proponer una idea; llegarán como tickets con la etiqueta
              «propuesta».
            }
          </p>
        </div>
        <pi-checkbox
          class="ts-toggle"
          label="Formulario abierto"
          [checked]="project.isPublic && project.acceptsProposals"
          [disabled]="!facade.canManage() || !project.isPublic"
          (checkedChange)="facade.setAcceptsProposals($event)"
        />
      </section>

      @if (facade.canManage()) {
        <ts-client-share [projectId]="project.id" />
      }
    }

    @if (draft(); as d) {
      @if (current().draft) {
      <form
        class="ts-settings"
        (submit)="$event.preventDefault(); save()"
        novalidate
      >
        <fieldset [disabled]="!facade.canManage()">
          @switch (current().id) {
            @case ('workflow') {
          <!-- Statuses -->
          <section class="ts-panel ts-block" aria-labelledby="st-title">
            <header class="ts-block__head">
              <div>
                <h3 id="st-title">Estados</h3>
                <p class="ts-muted">
                  En el orden de las columnas del tablero. La categoría dice qué
                  significa cada uno para releases, «Mi trabajo» y estadísticas.
                </p>
              </div>
              <button type="button" class="ts-add" (click)="addStatus()">
                + Añadir estado
              </button>
            </header>
            <div class="ts-rows-head ts-status-grid" aria-hidden="true">
              <span></span><span>Nombre</span><span>Categoría</span
              ><span>Color</span><span>Límite WIP</span><span>Pide motivo</span
              ><span></span>
            </div>
            <ol
              class="ts-rows"
              cdkDropList
              [cdkDropListDisabled]="!facade.canManage()"
              (cdkDropListDropped)="reorder($event)"
            >
              @for (status of d.statuses; track $index; let i = $index) {
                <li
                  class="ts-row ts-status-grid"
                  cdkDrag
                  [class.is-archived]="status.archived"
                  [style.--tone]="toneOf(status.color)"
                >
                  <span
                    class="ts-grip"
                    cdkDragHandle
                    title="Arrastra para reordenar"
                    aria-hidden="true"
                    >⠿</span
                  >
                  <span class="ts-name">
                    <span class="ts-swatch" aria-hidden="true"></span>
                    <input
                      class="ts-input"
                      maxlength="40"
                      [attr.aria-label]="'Nombre del estado ' + (i + 1)"
                      [value]="status.name"
                      (input)="setStatusName(i, $any($event.target).value)"
                    />
                    <code class="ts-id">{{ status.id }}</code>
                  </span>
                  <select
                    class="ts-input"
                    aria-label="Categoría"
                    [value]="status.category"
                    [attr.title]="categoryHint(status.category)"
                    (change)="
                      edit('statuses', i, {
                        category: $any($event.target).value,
                      })
                    "
                  >
                    @for (c of categories; track c) {
                      <option [value]="c" [selected]="c === status.category">
                        {{ categoryLabel(c) }}
                      </option>
                    }
                  </select>
                  <select
                    class="ts-input"
                    aria-label="Color"
                    (change)="
                      edit('statuses', i, { color: $any($event.target).value })
                    "
                  >
                    @for (c of colors; track c) {
                      <option [value]="c" [selected]="c === status.color">
                        {{ colorLabel(c) }}
                      </option>
                    }
                  </select>
                  <input
                    class="ts-input"
                    type="number"
                    min="1"
                    max="999"
                    placeholder="—"
                    [attr.aria-label]="'Límite WIP de ' + status.name"
                    title="Cuántos tickets debería tener la columna como mucho (vacío: sin límite)"
                    [value]="status.wipLimit ?? ''"
                    (change)="
                      edit('statuses', i, {
                        wipLimit: wipFrom($any($event.target).value),
                      })
                    "
                  />
                  <pi-checkbox
                    class="ts-check"
                    [checked]="status.requiresReason"
                    (checkedChange)="
                      edit('statuses', i, { requiresReason: $event })
                    "
                    ><span class="visually-hidden"
                      >Pide motivo</span
                    ></pi-checkbox
                  >
                  <ng-container
                    [ngTemplateOutlet]="archive"
                    [ngTemplateOutletContext]="{
                      section: 'statuses',
                      index: i,
                      item: status,
                    }"
                  />
                </li>
              }
            </ol>
          </section>

          <!-- Transitions -->
          <section class="ts-panel ts-block" aria-labelledby="tr-title">
            <header class="ts-block__head">
              <div>
                <h3 id="tr-title">Transiciones</h3>
                <p class="ts-muted">
                  A qué estados puede pasar un ticket desde cada uno (fila →
                  columna). Los archivados no reciben tickets.
                </p>
              </div>
            </header>
            <div class="ts-matrix-wrap">
              <table class="ts-matrix">
                <thead>
                  <tr>
                    <th scope="col">
                      <span class="visually-hidden">Desde</span>
                    </th>
                    @for (to of activeStatuses(); track to.id) {
                      <th scope="col">
                        <span
                          class="ts-pill"
                          [style.--tone]="toneOf(to.color)"
                          >{{ to.name }}</span
                        >
                      </th>
                    }
                  </tr>
                </thead>
                <tbody>
                  @for (from of d.statuses; track from.id) {
                    <tr [class.is-archived]="from.archived">
                      <th scope="row">
                        <span
                          class="ts-pill"
                          [style.--tone]="toneOf(from.color)"
                          >{{ from.name }}</span
                        >
                      </th>
                      @for (to of activeStatuses(); track to.id) {
                        <td>
                          @if (from.id !== to.id) {
                            <pi-checkbox
                              [checked]="allows(from.id, to.id)"
                              (checkedChange)="
                                toggleTransition(from.id, to.id, $event)
                              "
                              ><span class="visually-hidden"
                                >{{ from.name }} → {{ to.name }}</span
                              ></pi-checkbox
                            >
                          }
                        </td>
                      }
                    </tr>
                  }
                </tbody>
              </table>
            </div>
          </section>

            <!-- Definition of done -->
            <section class="ts-panel ts-block" aria-labelledby="dod-title">
              <header class="ts-block__head">
                <div>
                  <h3 id="dod-title">Definición de «Hecho»</h3>
                  <p class="ts-muted">
                    Un ticket no pasa a un estado «Hecho» con su checklist a
                    medias. El propietario y los admins sí pueden cerrarlo.
                  </p>
                </div>
                <pi-checkbox
                  class="ts-toggle"
                  label="Exigir la checklist completa"
                  [checked]="!!d.checklistBeforeDone"
                  (checkedChange)="setChecklistBeforeDone($event)"
                />
              </header>
            </section>

            }
            @case ('tickets') {
            <!-- Ticket types -->
            <section class="ts-panel ts-block" aria-labelledby="ty-title">
              <header class="ts-block__head">
                <div>
                  <h3 id="ty-title">Tipos de ticket</h3>
                  <p class="ts-muted">
                    Los de icono de paleta piden un frame de Figma.
                  </p>
                </div>
                <button type="button" class="ts-add" (click)="addType()">
                  + Añadir tipo
                </button>
              </header>
              <ol class="ts-rows">
                @for (type of d.issueTypes; track $index; let i = $index) {
                  <li
                    class="ts-row ts-type-grid"
                    [class.is-archived]="type.archived"
                    [style.--tone]="toneOf(type.color)"
                  >
                    <span class="ts-type-icon" aria-hidden="true">
                      <pi-icon [icon]="type.icon" size="small" />
                    </span>
                    <span class="ts-name">
                      <input
                        class="ts-input"
                        maxlength="40"
                        [attr.aria-label]="'Nombre del tipo ' + (i + 1)"
                        [value]="type.name"
                        (input)="
                          setName('issueTypes', i, $any($event.target).value)
                        "
                      />
                      <code class="ts-id">{{ type.id }}</code>
                    </span>
                    <select
                      class="ts-input"
                      aria-label="Icono"
                      (change)="
                        edit('issueTypes', i, {
                          icon: $any($event.target).value,
                        })
                      "
                    >
                      @for (icon of icons; track icon) {
                        <option [value]="icon" [selected]="icon === type.icon">
                          {{ iconLabel(icon) }}
                        </option>
                      }
                    </select>
                    <select
                      class="ts-input"
                      aria-label="Color"
                      (change)="
                        edit('issueTypes', i, {
                          color: $any($event.target).value,
                        })
                      "
                    >
                      @for (c of colors; track c) {
                        <option [value]="c" [selected]="c === type.color">
                          {{ colorLabel(c) }}
                        </option>
                      }
                    </select>
                    <button
                      type="button"
                      class="ts-add ts-template-toggle"
                      [class.has-template]="hasTemplate(type)"
                      [attr.aria-expanded]="openTemplate() === i"
                      [attr.aria-label]="'Plantilla de ' + type.name"
                      (click)="
                        openTemplate.set(openTemplate() === i ? null : i)
                      "
                    >
                      Plantilla{{ hasTemplate(type) ? ' ●' : '' }}
                    </button>
                    <ng-container
                      [ngTemplateOutlet]="archive"
                      [ngTemplateOutletContext]="{
                        section: 'issueTypes',
                        index: i,
                        item: type,
                      }"
                    />
                    @if (openTemplate() === i) {
                      <div class="ts-template">
                        <label class="ts-template__field">
                          <span
                            >Descripción inicial (si el ticket llega sin
                            ella)</span
                          >
                          <textarea
                            class="ts-input"
                            rows="5"
                            maxlength="5000"
                            [value]="type.template?.description ?? ''"
                            (input)="
                              setTemplate(i, {
                                description: $any($event.target).value,
                              })
                            "
                          ></textarea>
                        </label>
                        <label class="ts-template__field">
                          <span>Checklist (un paso por línea, hasta 20)</span>
                          <textarea
                            class="ts-input"
                            rows="4"
                            [value]="
                              (type.template?.checklist ?? []).join(
                                '
'
                              )
                            "
                            (input)="
                              setTemplate(i, {
                                checklist: $any($event.target).value.split(
                                  '
'
                                ),
                              })
                            "
                          ></textarea>
                        </label>
                      </div>
                    }
                  </li>
                }
              </ol>
            </section>

            <!-- Areas -->
            <section class="ts-panel ts-block" aria-labelledby="ar-title">
              <header class="ts-block__head">
                <div>
                  <h3 id="ar-title">Áreas</h3>
                  <p class="ts-muted">Equipo o capa a la que va el ticket.</p>
                </div>
                <button type="button" class="ts-add" (click)="addArea()">
                  + Añadir área
                </button>
              </header>
              <ol class="ts-rows">
                @for (area of d.areas; track $index; let i = $index) {
                  <li
                    class="ts-row ts-area-grid"
                    [class.is-archived]="area.archived"
                  >
                    <span class="ts-name">
                      <input
                        class="ts-input"
                        maxlength="40"
                        [attr.aria-label]="'Nombre del área ' + (i + 1)"
                        [value]="area.name"
                        (input)="setName('areas', i, $any($event.target).value)"
                      />
                      <code class="ts-id">{{ area.id }}</code>
                    </span>
                    <ng-container
                      [ngTemplateOutlet]="archive"
                      [ngTemplateOutletContext]="{
                        section: 'areas',
                        index: i,
                        item: area,
                      }"
                    />
                  </li>
                }
              </ol>
            </section>

            <!-- Custom fields -->
            <section class="ts-panel ts-block" aria-labelledby="cf-title">
              <header class="ts-block__head">
                <div>
                  <h3 id="cf-title">Campos personalizados</h3>
                  <p class="ts-muted">
                    Datos propios de este proyecto en cada ticket (navegador,
                    cliente, coste…). El tipo no cambia una vez guardado.
                  </p>
                </div>
                <button
                  type="button"
                  class="ts-add"
                  [disabled]="d.customFields.length >= 30"
                  (click)="addField()"
                >
                  + Añadir campo
                </button>
              </header>
              @if (!d.customFields.length) {
                <p class="ts-muted ts-empty-fields">Ningún campo todavía.</p>
              }
              <ol class="ts-rows">
                @for (field of d.customFields; track $index; let i = $index) {
                  <li
                    class="ts-row ts-field-grid"
                    [class.is-archived]="field.archived"
                  >
                    <span class="ts-name">
                      <input
                        class="ts-input"
                        maxlength="40"
                        [attr.aria-label]="'Nombre del campo ' + (i + 1)"
                        [value]="field.name"
                        (input)="
                          setName('customFields', i, $any($event.target).value)
                        "
                      />
                      <code class="ts-id">{{ field.id }}</code>
                    </span>
                    <select
                      class="ts-input ts-field-type"
                      aria-label="Tipo de campo"
                      [disabled]="!isNew('customFields', field.id)"
                      [attr.title]="
                        isNew('customFields', field.id)
                          ? null
                          : 'Ya guardado: el tipo no se puede cambiar'
                      "
                      (change)="setFieldType(i, $any($event.target).value)"
                    >
                      @for (t of fieldTypes; track t.id) {
                        <option [value]="t.id" [selected]="t.id === field.type">
                          {{ t.label }}
                        </option>
                      }
                    </select>
                    <ng-container
                      [ngTemplateOutlet]="archive"
                      [ngTemplateOutletContext]="{
                        section: 'customFields',
                        index: i,
                        item: field,
                      }"
                    />
                    @if (field.type === 'SELECT') {
                      <label class="ts-field-options">
                        <span>Opciones (una por línea)</span>
                        <textarea
                          rows="3"
                          [attr.aria-label]="'Opciones de ' + field.name"
                          [value]="
                            field.options.join(
                              '
'
                            )
                          "
                          (input)="setOptions(i, $any($event.target).value)"
                        ></textarea>
                      </label>
                    }
                  </li>
                }
              </ol>
            </section>
            }
            @case ('teams') {
            <!-- Teams -->
            <section class="ts-panel ts-block" aria-labelledby="teams-title">
              <header class="ts-block__head">
                <div>
                  <h3 id="teams-title">Equipos</h3>
                  <p class="ts-muted">
                    Grupos de miembros: los tickets se pueden asignar a uno y
                    «@equipo» avisa a todos sus miembros.
                  </p>
                </div>
                <button type="button" class="ts-add" (click)="addTeam()">
                  + Añadir equipo
                </button>
              </header>
              @if (!d.teams.length) {
                <p class="ts-muted ts-empty-fields">Ningún equipo todavía.</p>
              }
              <ol class="ts-rows">
                @for (team of d.teams; track $index; let i = $index) {
                  <li
                    class="ts-row ts-field-grid"
                    [class.is-archived]="team.archived"
                  >
                    <span class="ts-name">
                      <input
                        class="ts-input"
                        maxlength="40"
                        [attr.aria-label]="'Nombre del equipo ' + (i + 1)"
                        [value]="team.name"
                        (input)="setName('teams', i, $any($event.target).value)"
                      />
                      <code class="ts-id">{{ team.id }}</code>
                    </span>
                    <ng-container
                      [ngTemplateOutlet]="archive"
                      [ngTemplateOutletContext]="{
                        section: 'teams',
                        index: i,
                        item: team,
                      }"
                    />
                    <div class="ts-team-members ts-field-type">
                      @for (member of facade.members(); track member.user.id) {
                        <pi-checkbox
                          [label]="member.user.name"
                          [checked]="team.memberIds.includes(member.user.id)"
                          (checkedChange)="
                            setTeamMember(i, member.user.id, $event)
                          "
                        />
                      }
                    </div>
                  </li>
                }
              </ol>
            </section>

            }
          }
        </fieldset>

      </form>
      }

      @if (facade.canManage() && facade.project(); as project) {
        @switch (current().id) {
          @case ('automations') {
            <ts-automations [projectId]="project.id" />
          }
          @case ('integrations') {
            <ts-git-integration
              [projectId]="project.id"
              [projectKey]="project.key"
            />
            <ts-webhooks [projectId]="project.id" />
          }
          @case ('data') {
            <ts-transfer [projectId]="project.id" [projectKey]="project.key" />
          }
        }
      }

      @if (
        current().id === 'danger' && facade.isOwner() && facade.project();
        as project
      ) {
        <section
          class="ts-panel ts-block ts-visibility"
          aria-labelledby="archive-title"
        >
          <div>
            <h3 id="archive-title">Archivar el proyecto</h3>
            <p class="ts-muted">
              @if (project.archivedAt) {
                Archivado: se puede ver todo, pero nadie puede cambiar nada
                hasta que lo desarchives.
              } @else {
                Para un proyecto terminado: queda todo a la vista (tablero,
                tickets, historia, estadísticas) y en solo lectura. Se puede
                desarchivar cuando quieras.
              }
            </p>
          </div>
          <button
            type="button"
            class="ts-secondary"
            (click)="facade.setArchived(!project.archivedAt)"
          >
            {{ project.archivedAt ? 'Desarchivar' : 'Archivar' }}
          </button>
        </section>

        <section
          class="ts-panel ts-block ts-danger"
          aria-labelledby="danger-title"
        >
          <div>
            <h3 id="danger-title">Eliminar el proyecto</h3>
            <p class="ts-muted">
              Se borran sus tickets, comentarios y releases, y los enlaces que
              tickets de otros proyectos tengan hacia los suyos. La clave
              {{ project.key }} queda libre. No se puede deshacer.
            </p>
          </div>
          <div class="ts-danger__confirm">
            <label class="ts-danger__label">
              <span
                >Escribe <code>{{ project.key }}</code> para confirmar</span
              >
              <input
                class="ts-input"
                autocomplete="off"
                spellcheck="false"
                [value]="confirmKey()"
                (input)="confirmKey.set($any($event.target).value)"
              />
            </label>
            <button
              type="button"
              class="ts-delete"
              [disabled]="
                confirmKey().trim().toUpperCase() !== project.key ||
                facade.deleting()
              "
              (click)="facade.deleteProject(confirmKey())"
            >
              {{ facade.deleting() ? 'Eliminando…' : 'Eliminar proyecto' }}
            </button>
          </div>
        </section>
      }
    }

    <!-- After whichever section is open: the draft spans several. -->
        @if (facade.canManage() && (dirty() || facade.savingSettings())) {
          <footer class="ts-savebar" [class.is-dirty]="dirty()">
            <div class="ts-savebar__status" aria-live="polite">
              @if (problems().length) {
                <ul class="ts-problems">
                  @for (problem of problems(); track problem) {
                    <li>
                      <pi-icon icon="exclamation" size="x-small" />
                      {{ problem }}
                    </li>
                  }
                </ul>
              } @else {
                <span>Cambios sin guardar</span>
              }
            </div>
            <button
              type="button"
              class="ts-secondary"
              [disabled]="!dirty() || facade.savingSettings()"
              (click)="discard()"
            >
              Descartar
            </button>
            <button
              type="button"
              class="ts-primary"
              (click)="save()"
              [disabled]="
                !dirty() || !!problems().length || facade.savingSettings()
              "
            >
              {{ facade.savingSettings() ? 'Guardando…' : 'Guardar cambios' }}
            </button>
          </footer>
        }
      </div>
    </div>

    <ng-template
      #archive
      let-section="section"
      let-index="index"
      let-item="item"
    >
      @if (isNew(section, item.id)) {
        <button
          type="button"
          class="ts-icon-button"
          title="Quitar (aún no se ha guardado)"
          [attr.aria-label]="'Quitar ' + item.name"
          (click)="remove(section, index)"
        >
          <pi-icon icon="trash" size="small" />
        </button>
      } @else if (item.archived) {
        <button
          type="button"
          class="ts-archive is-archived"
          [attr.aria-label]="'Restaurar ' + item.name"
          (click)="edit(section, index, { archived: false })"
        >
          Restaurar
        </button>
      } @else {
        <button
          type="button"
          class="ts-archive"
          [attr.aria-label]="'Archivar ' + item.name"
          (click)="edit(section, index, { archived: true })"
        >
          Archivar
        </button>
      }
    </ng-template>
  `,
  styles: `
    :host {
      display: block;
    }
    /* A menu of sections on the left, one section at a time on the right. */
    .ts-settings-layout {
      display: grid;
      grid-template-columns: 13.5rem minmax(0, 1fr);
      gap: 2.5rem;
      align-items: start;
      margin-top: 0.5rem;
    }
    .ts-settings-nav {
      position: sticky;
      top: 5.5rem;
      display: grid;
      gap: 0.125rem;
      a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.625rem;
        color: var(--ts-ink-soft);
        font-size: 0.875rem;
        font-weight: 500;
        text-decoration: none;
        transition:
          background-color 0.15s ease,
          color 0.15s ease;
        &:hover {
          background: color-mix(in srgb, var(--ts-ink) 6%, transparent);
          color: var(--ts-ink);
        }
        &.is-active {
          background: color-mix(in srgb, var(--ts-brand) 14%, transparent);
          box-shadow: inset 3px 0 0 var(--ts-brand);
          color: var(--ts-ink);
          font-weight: 600;
        }
        &.is-danger {
          margin-top: 0.75rem;
          color: var(--ts-c-red);
        }
        &:focus-visible {
          outline: 2px solid var(--ts-brand);
          outline-offset: 2px;
        }
      }
    }
    .ts-settings-nav__title {
      margin: 0 0 0.5rem;
      padding: 0 0.75rem;
      color: var(--ts-muted);
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .ts-settings-nav__dot {
      flex: none;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: var(--ts-c-amber);
    }
    .ts-settings-main {
      display: grid;
      gap: 1rem;
      min-width: 0;
    }
    .ts-settings-head {
      margin-bottom: 0.25rem;
      h2 {
        margin: 0;
        font-size: 1.375rem;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      p {
        max-width: 46rem;
        margin: 0.375rem 0 0;
        color: var(--ts-muted);
        font-size: 0.875rem;
      }
    }
    @media (max-width: 900px) {
      .ts-settings-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
      }
      /* The menu becomes a row of chips that scrolls sideways. */
      .ts-settings-nav {
        position: static;
        display: flex;
        gap: 0.375rem;
        margin: 0 -1rem;
        padding: 0 1rem 0.25rem;
        overflow-x: auto;
        scrollbar-width: none;
        a {
          flex: none;
          padding: 0.4375rem 0.875rem;
          border: 1px solid var(--ts-line);
          border-radius: 999px;
          white-space: nowrap;
          &.is-active {
            border-color: transparent;
            box-shadow: none;
          }
          &.is-danger {
            margin-top: 0;
          }
        }
      }
      .ts-settings-nav__title {
        display: none;
      }
    }
    .ts-block.ts-visibility,
    .ts-block.ts-danger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      > div {
        flex: 1 1 26rem;
      }
      p {
        max-width: 46rem;
        margin: 0.25rem 0 0;
        font-size: 0.8125rem;
      }
    }
    .ts-toggle {
      flex: none;
      font-weight: 600;
    }
    .ts-danger__confirm {
      display: flex;
      align-items: flex-end;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .ts-danger__label {
      display: grid;
      gap: 0.375rem;
      font-size: 0.8125rem;
      color: var(--ts-ink-soft);
      code {
        font-family: var(--ts-font-mono);
        font-weight: 600;
      }
      .ts-input {
        width: 12rem;
      }
    }
    .ts-delete {
      min-width: 0 !important;
      height: 2.125rem;
      padding: 0 1rem !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: var(--ts-c-red) !important;
      color: #fff !important;
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      &:disabled {
        opacity: 0.45;
        cursor: default;
      }
    }
    .ts-settings {
      display: grid;
      gap: 1rem;
      padding-bottom: 0;
    }
    fieldset {
      display: grid;
      gap: 1rem;
      min-width: 0;
      margin: 0;
      padding: 0;
      border: 0;
    }
    .ts-block {
      container-type: inline-size;
      display: grid;
      gap: 0.75rem;
      min-width: 0;
      padding: 1.25rem;
      h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
      }
    }
    .ts-block__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      p {
        margin: 0.25rem 0 0;
        font-size: 0.8125rem;
      }
    }
    .ts-rows {
      display: grid;
      gap: 0.375rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .ts-rows-head {
      padding: 0 0.5rem;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ts-muted);
    }
    .ts-status-grid {
      display: grid;
      grid-template-columns:
        1.25rem minmax(10rem, 1fr)
        9rem 8rem 5.5rem 5.5rem 6.5rem;
      align-items: center;
      gap: 0.5rem;
    }
    .ts-template {
      display: grid;
      grid-column: 1 / -1;
      gap: 0.5rem;
      padding: 0.5rem 0 0.25rem;
    }
    .ts-template__field {
      display: grid;
      gap: 0.25rem;
      font-size: 0.8125rem;
      color: var(--ts-muted);
      textarea {
        font: inherit;
        color: var(--ts-ink);
        resize: vertical;
      }
    }
    .ts-template-toggle {
      white-space: nowrap;
      &.has-template {
        border-color: var(--ts-brand) !important;
        color: var(--ts-ink) !important;
      }
    }
    /* Two lines in a narrow panel: name and archive on top; icon, color
       and template below. One line when it fits (below). */
    .ts-type-grid {
      display: grid;
      grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 6.5rem;
      align-items: center;
      gap: 0.5rem;
      > .ts-type-icon {
        grid-area: 1 / 1;
      }
      > .ts-name {
        grid-area: 1 / 2 / 2 / 4;
      }
      > .ts-archive,
      > .ts-icon-button {
        grid-area: 1 / 4;
      }
      > select:nth-of-type(1) {
        grid-area: 2 / 2;
      }
      > select:nth-of-type(2) {
        grid-area: 2 / 3;
      }
      > .ts-template-toggle {
        grid-area: 2 / 4;
      }
      > .ts-template {
        grid-row: 3;
      }
    }
    @container (min-width: 46rem) {
      .ts-type-grid {
        grid-template-columns: 2rem minmax(8rem, 1fr) 8rem 8rem auto 6.5rem;
        > .ts-name {
          grid-area: 1 / 2;
        }
        > select:nth-of-type(1) {
          grid-area: 1 / 3;
        }
        > select:nth-of-type(2) {
          grid-area: 1 / 4;
        }
        > .ts-template-toggle {
          grid-area: 1 / 5;
        }
        > .ts-archive,
        > .ts-icon-button {
          grid-area: 1 / 6;
        }
        > .ts-template {
          grid-row: 2;
        }
      }
    }
    .ts-area-grid {
      display: grid;
      grid-template-columns: minmax(8rem, 1fr) 6.5rem;
      align-items: center;
      gap: 0.5rem;
    }
    /* Name and archive on top; the type (and options) below. */
    .ts-field-grid {
      display: grid;
      grid-template-columns: minmax(8rem, 1fr) 6.5rem;
      align-items: center;
      gap: 0.5rem;
      .ts-field-type {
        grid-row: 2;
        grid-column: 1 / -1;
      }
    }
    .ts-field-options {
      grid-column: 1 / -1;
      display: grid;
      gap: 0.25rem;
      font-size: 0.8125rem;
      color: var(--ts-muted);
      textarea {
        font: inherit;
        color: var(--ts-ink);
        background: var(--ts-surface);
        border: 1px solid var(--ts-line);
        border-radius: 0.5rem;
        padding: 0.375rem 0.5rem;
        resize: vertical;
      }
    }
    .ts-team-members {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 1rem;
    }
    .ts-empty-fields {
      margin: 0;
    }
    .ts-row {
      --tone: var(--ts-muted);
      padding: 0.375rem 0.5rem;
      border-radius: 0.625rem;
      background: var(--ts-surface);
      border: 1px solid var(--ts-line);
      &.is-archived {
        background: var(--ts-sunken);
        .ts-input,
        .ts-type-icon {
          opacity: 0.6;
        }
      }
    }
    .cdk-drag-preview {
      box-shadow: var(--ts-lift);
    }
    .cdk-drag-placeholder {
      opacity: 0.35;
    }
    .ts-grip {
      cursor: grab;
      color: var(--ts-muted);
      text-align: center;
      user-select: none;
    }
    .ts-name {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 0;
      .ts-input {
        flex: 1;
        min-width: 0;
      }
    }
    .ts-swatch {
      flex: none;
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 50%;
      background: var(--tone);
    }
    .ts-id {
      flex: 0 0 5.5rem;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: var(--ts-font-mono);
      font-size: 0.625rem;
      color: var(--ts-muted);
    }
    .ts-input {
      box-sizing: border-box;
      height: 2.125rem;
      width: 100%;
      padding: 0 0.5rem;
      border: 1px solid var(--ts-line);
      border-radius: 0.5rem;
      background: var(--ts-surface);
      color: var(--ts-ink);
      font: inherit;
      font-size: 0.875rem;
      &:focus-visible {
        outline: 2px solid var(--ts-brand);
        outline-offset: 1px;
      }
      &:disabled {
        color: var(--ts-ink-soft);
        background: transparent;
      }
    }
    .ts-check {
      display: grid;
      place-items: center;
    }
    .ts-type-icon {
      display: inline-grid;
      place-items: center;
      width: 2rem;
      height: 2rem;
      border-radius: 0.5rem;
      color: var(--tone);
      background: color-mix(in srgb, var(--tone) 12%, var(--ts-surface));
    }
    .ts-matrix-wrap {
      overflow-x: auto;
    }
    .ts-matrix {
      border-collapse: collapse;
      font-size: 0.8125rem;
      th,
      td {
        padding: 0.375rem 0.5rem;
        border-bottom: 1px solid var(--ts-line);
        text-align: center;
      }
      th[scope='row'] {
        text-align: left;
        white-space: nowrap;
      }
      thead th {
        vertical-align: bottom;
      }
      tr.is-archived th[scope='row'] {
        opacity: 0.6;
      }
      td:hover {
        background: var(--pi-color-primary-25);
      }
    }
    /* @pi/ui styles every <button>: these opt back into a compact look. */
    .ts-add,
    .ts-archive,
    .ts-template-toggle,
    .ts-primary,
    .ts-secondary {
      min-width: 0 !important;
      height: 2.125rem;
      padding: 0 0.875rem !important;
      border-radius: 999px !important;
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 600;
      cursor: pointer;
      &:disabled {
        opacity: 0.5;
        cursor: default;
      }
    }
    .ts-add,
    .ts-archive,
    .ts-secondary {
      border: 1px solid var(--ts-line-strong) !important;
      background: var(--ts-surface) !important;
      color: var(--ts-ink-soft) !important;
    }
    .ts-archive.is-archived {
      border-style: dashed !important;
    }
    .ts-primary {
      border: 0 !important;
      background: var(--ts-brand) !important;
      color: #fff !important;
    }
    .ts-savebar {
      position: sticky;
      bottom: 1rem;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      border-radius: 999px;
      background: var(--ts-surface-raised);
      border: 1px solid var(--ts-line-strong);
      box-shadow: var(--ts-lift);
      font-size: 0.875rem;
      &.is-dirty {
        border-color: var(--ts-brand);
      }
    }
    .ts-savebar__status {
      flex: 1;
      min-width: 0;
    }
    .ts-problems {
      display: grid;
      gap: 0.125rem;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--ts-c-red);
      font-size: 0.8125rem;
      li {
        display: flex;
        align-items: center;
        gap: 0.375rem;
      }
    }
    @media (max-width: 720px) {
      .ts-rows-head {
        display: none;
      }
      .ts-status-grid {
        grid-template-columns: 1fr 1fr;
      }
      .ts-grip {
        display: none;
      }
      .ts-status-grid > .ts-name {
        grid-column: 1 / -1;
      }
      /* Name; icon and color; template and archive. */
      .ts-type-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        > .ts-type-icon {
          display: none;
        }
        > .ts-name {
          grid-area: 1 / 1 / 2 / 3;
        }
        > select:nth-of-type(1) {
          grid-area: 2 / 1;
        }
        > select:nth-of-type(2) {
          grid-area: 2 / 2;
        }
        > .ts-template-toggle {
          grid-area: 3 / 1;
        }
        > .ts-archive,
        > .ts-icon-button {
          grid-area: 3 / 2;
        }
        > .ts-template {
          grid-row: 4;
        }
      }
      .ts-savebar {
        flex-wrap: wrap;
        border-radius: var(--ts-radius);
      }
    }
  `,
})
export class SettingsPage {
  protected readonly facade = inject(ProjectFacade);
  protected readonly categories = CATEGORIES;
  protected readonly colors = SETTING_COLORS;
  protected readonly icons = TYPE_ICONS;
  protected readonly fieldTypes = FIELD_TYPES;

  /** `?section=` (`withComponentInputBinding`). */
  readonly section = input<string | undefined>();

  protected readonly sections = computed(() =>
    SECTIONS.filter(
      (s) =>
        !s.needs ||
        (s.needs === 'manage' && this.facade.canManage()) ||
        (s.needs === 'owner' && this.facade.isOwner()),
    ),
  );
  protected readonly current = computed(
    () =>
      this.sections().find((s) => s.id === this.section()) ??
      this.sections()[0],
  );

  /** Sections with unsaved changes, marked in the menu. */
  protected readonly changed = computed(() => {
    const draft = this.draft();
    const saved = this.saved();
    const changed = new Set<string>();
    if (!draft || !saved) return changed;
    for (const [key, section] of Object.entries(DRAFT_SECTION)) {
      const k = key as keyof ProjectSettings;
      if (JSON.stringify(draft[k]) !== JSON.stringify(saved[k]))
        changed.add(section);
    }
    return changed;
  });

  /** What the API has; the draft is compared against it. */
  private readonly saved = computed(
    () => this.facade.project()?.settings ?? null,
  );
  protected readonly draft = signal<ProjectSettings | null>(null);
  /** The key, typed to confirm deleting the project. */
  protected readonly confirmKey = signal('');

  protected readonly dirty = computed(
    () =>
      !!this.draft() &&
      JSON.stringify(this.draft()) !== JSON.stringify(this.saved()),
  );

  protected readonly activeStatuses = computed(
    () => this.draft()?.statuses.filter((s) => !s.archived) ?? [],
  );

  /** The same rules the API enforces, shown before saving. */
  protected readonly problems = computed(() => {
    const d = this.draft();
    if (!d) return [];
    const problems: string[] = [];
    const lists = [d.statuses, d.issueTypes, d.areas, d.customFields, d.teams];
    if (lists.some((list) => list.some((item) => !item.name.trim())))
      problems.push('Hay nombres vacíos');
    if (
      lists.some((list) => {
        const ids = list.map((item) => item.id);
        return ids.some((id, i) => ids.indexOf(id) !== i);
      })
    )
      problems.push('Hay dos valores con el mismo nombre');
    const active = d.statuses.filter((s) => !s.archived);
    if (!active.some((s) => s.category === StatusCategory.TODO))
      problems.push(
        'Falta un estado activo «Pendiente» donde entren los tickets',
      );
    if (!active.some((s) => s.category === StatusCategory.DONE))
      problems.push('Falta un estado activo «Hecho»');
    if (!d.issueTypes.some((t) => !t.archived))
      problems.push('Hace falta al menos un tipo de ticket activo');
    for (const field of d.customFields)
      if (
        field.type === CustomFieldType.SELECT &&
        !field.options.some((o) => o.trim())
      )
        problems.push(`El campo «${field.name}» necesita alguna opción`);
    return problems;
  });

  constructor() {
    // Follow the saved settings while there is nothing pending (after saving,
    // the project comes back equal to the draft, so it is clean again).
    effect(() => {
      const saved = this.saved();
      if (saved && !untracked(this.dirty))
        this.draft.set(structuredClone(saved));
    });
  }

  protected readonly toneOf = tone;
  protected readonly categoryLabel = (c: StatusCategory) => CATEGORY[c].label;
  protected readonly categoryHint = (c: StatusCategory) => CATEGORY[c].hint;
  protected readonly iconLabel = (icon: string) => ICON_LABEL[icon] ?? icon;
  protected readonly colorLabel = (c: (typeof SETTING_COLORS)[number]) =>
    COLOR_LABEL[c];

  /** Values the API does not have yet: they can still be removed or have their id follow the name. */
  protected isNew(section: Section, id: string): boolean {
    return !this.saved()?.[section].some((item) => item.id === id);
  }

  protected allows(from: string, to: string): boolean {
    return !!this.draft()
      ?.transitions.find((t) => t.from === from)
      ?.to.includes(to);
  }

  /** '' (or anything below 1) clears the limit. */
  protected wipFrom(value: string): number | null {
    const limit = Math.round(Number(value));
    return Number.isFinite(limit) && limit >= 1 ? Math.min(limit, 999) : null;
  }

  /** Index of the type whose template is open. */
  protected readonly openTemplate = signal<number | null>(null);

  protected hasTemplate(type: IssueTypeOption): boolean {
    return !!(
      type.template?.description?.trim() ||
      type.template?.checklist.some((s) => s.trim())
    );
  }

  /** Edits the template in the draft; empty lines go when saved. */
  protected setTemplate(
    index: number,
    changes: { description?: string; checklist?: string[] },
  ): void {
    this.patch((d) => {
      const type = d.issueTypes[index];
      const current = type.template ?? { description: null, checklist: [] };
      type.template = {
        description:
          changes.description !== undefined
            ? changes.description || null
            : current.description,
        checklist: (changes.checklist ?? current.checklist).slice(0, 20),
      };
    });
  }

  protected edit(section: Section, index: number, changes: object): void {
    this.patch((d) => Object.assign(d[section][index], changes));
  }

  protected setName(section: Section, index: number, name: string): void {
    this.patch((d) => {
      const item = d[section][index];
      item.name = name;
      if (this.isNew(section, item.id)) {
        const id = this.uniqueId(d[section], idFrom(name), index);
        if (section === 'statuses') this.renameStatus(d, item.id, id);
        item.id = id;
      }
    });
  }

  protected setStatusName(index: number, name: string): void {
    this.setName('statuses', index, name);
  }

  protected toggleTransition(from: string, to: string, on: boolean): void {
    this.patch((d) => {
      let row = d.transitions.find((t) => t.from === from);
      if (!row) {
        row = { from, to: [] };
        d.transitions.push(row);
      }
      row.to = on
        ? [...new Set([...row.to, to])]
        : row.to.filter((target) => target !== to);
    });
  }

  protected reorder(event: CdkDragDrop<unknown>): void {
    this.patch((d) =>
      moveItemInArray(d.statuses, event.previousIndex, event.currentIndex),
    );
  }

  protected addStatus(): void {
    this.patch((d) => {
      const id = this.uniqueId(d.statuses, 'NUEVO_ESTADO');
      // Before the done/cancelled statuses, so it lands mid-board.
      const at = d.statuses.findIndex(
        (s) =>
          s.category === StatusCategory.DONE ||
          s.category === StatusCategory.CANCELLED,
      );
      d.statuses.splice(at === -1 ? d.statuses.length : at, 0, {
        id,
        name: 'Nuevo estado',
        category: StatusCategory.IN_PROGRESS,
        color: 'teal',
        requiresReason: false,
        archived: false,
      });
      d.transitions.push({ from: id, to: [] });
    });
  }

  protected addType(): void {
    this.patch((d) =>
      d.issueTypes.push({
        id: this.uniqueId(d.issueTypes, 'NUEVO_TIPO'),
        name: 'Nuevo tipo',
        icon: 'flag',
        color: 'teal',
        archived: false,
      }),
    );
  }

  protected addArea(): void {
    this.patch((d) =>
      d.areas.push({
        id: this.uniqueId(d.areas, 'NUEVA_AREA'),
        name: 'Nueva área',
        archived: false,
      }),
    );
  }

  protected addTeam(): void {
    this.patch((d) =>
      d.teams.push({
        id: this.uniqueId(d.teams, 'NUEVO_EQUIPO'),
        name: 'Nuevo equipo',
        memberIds: [],
        archived: false,
      }),
    );
  }

  protected setTeamMember(index: number, userId: string, on: boolean): void {
    this.patch((d) => {
      const team = d.teams[index];
      team.memberIds = on
        ? [...new Set([...team.memberIds, userId])]
        : team.memberIds.filter((id) => id !== userId);
    });
  }

  protected setChecklistBeforeDone(on: boolean): void {
    this.patch((d) => {
      d.checklistBeforeDone = on;
    });
  }

  protected addField(): void {
    this.patch((d) =>
      d.customFields.push({
        id: this.uniqueId(d.customFields, 'NUEVO_CAMPO'),
        name: 'Nuevo campo',
        type: CustomFieldType.TEXT,
        options: [],
        archived: false,
      }),
    );
  }

  protected setFieldType(index: number, type: CustomFieldType): void {
    this.patch((d) => {
      const field = d.customFields[index];
      field.type = type;
      if (type !== CustomFieldType.SELECT) field.options = [];
    });
  }

  /** One per line; blank lines and repeats go when saved. */
  protected setOptions(index: number, text: string): void {
    this.patch((d) => {
      d.customFields[index].options = text.split('\n').slice(0, 50);
    });
  }

  /** Only for values never saved; saved ones are archived instead. */
  protected remove(section: Section, index: number): void {
    this.patch((d) => {
      const [item] = d[section].splice(index, 1);
      if (section === 'statuses') {
        d.transitions = d.transitions
          .filter((t) => t.from !== item.id)
          .map((t) => ({ ...t, to: t.to.filter((to) => to !== item.id) }));
      }
    });
  }

  protected discard(): void {
    const saved = this.saved();
    if (saved) this.draft.set(structuredClone(saved));
  }

  protected save(): void {
    const draft = this.draft();
    if (!draft || !this.dirty() || this.problems().length) return;
    // Options as the API keeps them, so the draft is clean once saved.
    const cleaned: ProjectSettings = {
      ...draft,
      customFields: draft.customFields.map((f) => ({
        ...f,
        options: [...new Set(f.options.map((o) => o.trim()).filter(Boolean))],
      })),
    };
    this.draft.set(cleaned);
    this.facade.saveSettings({
      ...cleaned,
      // Only rows with targets; unknown ids would be rejected anyway.
      transitions: cleaned.transitions.filter((t) => t.to.length),
    });
  }

  private patch(change: (draft: ProjectSettings) => void): void {
    this.draft.update((d) => {
      if (!d) return d;
      const next = structuredClone(d);
      change(next);
      return next;
    });
  }

  private uniqueId(list: { id: string }[], base: string, except = -1): string {
    const taken = new Set(
      list.filter((_, i) => i !== except).map((item) => item.id),
    );
    let id = base;
    for (let n = 2; taken.has(id); n++) id = `${base.slice(0, 27)}_${n}`;
    return id;
  }

  private renameStatus(d: ProjectSettings, from: string, to: string): void {
    for (const row of d.transitions) {
      if (row.from === from) row.from = to;
      row.to = row.to.map((target) => (target === from ? to : target));
    }
  }
}