<section class="max-w-3xl mx-auto px-5 pt-6 lg:pt-8 pb-6">
  <header class="flex items-end justify-between mb-6">
    <div>
      <a
        routerLink="/calendar"
        class="text-xs text-[color:var(--color-ink-3)] flex items-center gap-1 mb-2"
        i18n="@@calendar.accounts.back-link"
      >
        <fn-icon name="arrow-left" [size]="14" [strokeWidth]="2" />
        Calendario
      </a>
      <h1 class="font-serif text-3xl lg:text-5xl font-medium tracking-tight">
        <ng-container i18n="@@calendar.accounts.title-prefix">Cuentas</ng-container>
        <em class="text-[color:var(--color-terra)] italic font-normal" i18n="@@calendar.accounts.title-emph">vinculadas</em>
      </h1>
      <p i18n="@@calendar.accounts.subtitle" class="text-sm text-[color:var(--color-ink-3)] mt-1">
        Las cuentas de Google que sincronizan eventos al nido.
      </p>
    </div>
    <button
      type="button"
      class="w-11 h-11 rounded-full border-0 bg-[color:var(--color-terra)] text-white flex items-center justify-center cursor-pointer"
      i18n-aria-label="@@calendar.accounts.link-aria"
      aria-label="Vincular cuenta de Google"
      (click)="startLink()"
    >
      <fn-icon name="plus" [size]="20" [strokeWidth]="2.2" />
    </button>
  </header>

  @if (banner(); as b) {
    <div
      class="mb-4 px-4 py-3 rounded-lg text-sm"
      [class.bg-green-50]="b.kind === 'success'"
      [class.text-green-800]="b.kind === 'success'"
      [class.bg-red-50]="b.kind === 'error'"
      [class.text-red-800]="b.kind === 'error'"
    >
      {{ b.message }}
    </div>
  }

  @if (loading()) {
    <p i18n="@@calendar.accounts.loading" class="text-sm text-[color:var(--color-ink-3)]">Cargando…</p>
  } @else if (error()) {
    <p class="text-sm text-[color:var(--color-error)]">{{ error() }}</p>
  } @else if (!hasAccounts()) {
    <div class="rounded-xl bg-[color:var(--color-bg-2)] p-6 text-center">
      <p i18n="@@calendar.accounts.empty" class="text-sm text-[color:var(--color-ink-3)] mb-3">
        Aún no hay ninguna cuenta vinculada.
      </p>
      <button
        type="button"
        class="inline-block px-4 py-2 rounded-lg bg-[color:var(--color-terra)] text-white text-sm cursor-pointer border-0"
        (click)="startLink()"
        i18n="@@calendar.accounts.link-google"
      >
        Vincular Google Calendar
      </button>
    </div>
  } @else {
    <ul class="flex flex-col gap-5">
      @for (account of accounts(); track account.id) {
        <li class="rounded-xl bg-white border border-[color:var(--color-line)] overflow-hidden">
          <header
            class="flex items-center justify-between gap-3 px-4 py-3 bg-[color:var(--color-bg-2)] border-b border-[color:var(--color-line)]"
          >
            <div class="min-w-0 flex-1">
              <p class="font-medium text-[color:var(--color-ink)] truncate">
                {{ account.displayName || account.email }}
              </p>
              <p class="text-xs text-[color:var(--color-ink-3)] truncate">
                {{ account.email }}
              </p>
              @if (account.isRevoked) {
                <p i18n="@@calendar.accounts.revoked" class="text-xs text-[color:var(--color-error)] mt-1">
                  Acceso revocado — vincula la cuenta de nuevo.
                </p>
              } @else if (account.lastError) {
                <p class="text-xs text-[color:var(--color-error)] mt-1 truncate">
                  <ng-container i18n="@@calendar.accounts.last-error-prefix">Último error:</ng-container>
                  {{ account.lastError }}
                </p>
              }
            </div>
            <div class="flex gap-1 shrink-0">
              <button
                type="button"
                class="w-9 h-9 rounded-full border border-[color:var(--color-line)] bg-white flex items-center justify-center cursor-pointer disabled:opacity-50"
                i18n-aria-label="@@calendar.accounts.sync-aria"
                aria-label="Sincronizar ahora"
                [disabled]="busyAccountId() === account.id"
                (click)="sync(account)"
              >
                <fn-icon name="refresh-cw" [size]="16" [strokeWidth]="2" />
              </button>
              <button
                type="button"
                class="w-9 h-9 rounded-full border border-[color:var(--color-line)] bg-white text-[color:var(--color-error)] flex items-center justify-center cursor-pointer disabled:opacity-50"
                i18n-aria-label="@@calendar.accounts.unlink-aria"
                aria-label="Desvincular cuenta"
                [disabled]="busyAccountId() === account.id"
                (click)="unlink(account)"
              >
                <fn-icon name="trash-2" [size]="16" [strokeWidth]="2" />
              </button>
            </div>
          </header>

          <ul class="flex flex-col divide-y divide-[color:var(--color-line)]">
            @for (calendar of account.calendars; track calendar.id) {
              <li class="px-4 py-3 flex flex-wrap items-center gap-3">
                <span
                  class="w-3 h-3 rounded-full shrink-0"
                  [style.background-color]="calendar.colorHex || 'var(--color-terra)'"
                  aria-hidden="true"
                ></span>
                <div class="flex-1 min-w-0">
                  <p class="font-medium text-sm text-[color:var(--color-ink)] truncate">
                    {{ calendar.summary }}
                  </p>
                  <p class="text-xs text-[color:var(--color-ink-3)]">
                    {{ lastSyncLabel(calendar) }}
                  </p>
                </div>

                <select
                  class="text-xs px-2 py-1 rounded-md border border-[color:var(--color-line)] bg-white"
                  [disabled]="!calendar.isImported || busyAccountId() === account.id"
                  (change)="assignMember(account, calendar, $any($event.target).value)"
                  [attr.aria-label]="memberAssignAriaLabel(calendar.summary)"
                >
                  <option value="" [selected]="!calendar.familyMemberId" i18n="@@calendar.accounts.unassigned">Sin asignar</option>
                  @for (member of members(); track member.id) {
                    <option [value]="member.id" [selected]="member.id === calendar.familyMemberId">{{ member.displayName }}</option>
                  }
                </select>

                <label class="flex items-center gap-2 cursor-pointer text-xs">
                  <input
                    type="checkbox"
                    [checked]="calendar.isImported"
                    [disabled]="busyAccountId() === account.id"
                    (change)="toggleImport(account, calendar)"
                  />
                  <ng-container i18n="@@calendar.accounts.import">Importar</ng-container>
                </label>
              </li>
            }
          </ul>
        </li>
      }
    </ul>
  }
</section>
