import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, RouterLink } from '@angular/router';
import {
  ApiClientService,
  type AdminSessionDto,
  type AdminUserDetailDto,
  type ApiErrorBody,
  type RoleDto,
} from '@boilerplate/api-client';

@Component({
  standalone: true,
  imports: [FormsModule, RouterLink],
  template: `
    <a routerLink="/admin/users">Zurueck zur Benutzerliste</a>

    @if (error(); as currentError) {
      <section class="notice error">
        <strong>{{ messageFor(currentError) }}</strong>
        @if (currentError.requestId) {
          <small>Request-ID: {{ currentError.requestId }}</small>
        }
      </section>
    }

    @if (user(); as currentUser) {
      <section class="hero" [class.inactive]="!currentUser.active">
        <div>
          <h2>{{ currentUser.name }}</h2>
          <p>{{ currentUser.email || 'Keine E-Mail' }}</p>
          <p>{{ currentUser.active ? 'Aktiv' : 'Deaktiviert' }}</p>
        </div>
        <div class="actions">
          @if (currentUser.active) {
            <button type="button" class="danger" (click)="deactivate(currentUser.id)">
              Deaktivieren
            </button>
          } @else {
            <button type="button" (click)="activate(currentUser.id)">Aktivieren</button>
          }
          <button type="button" class="secondary" (click)="revokeAllSessions(currentUser.id)">
            Alle Sessions beenden
          </button>
        </div>
      </section>

      <section class="grid">
        <article>
          <h3>Rollen</h3>
          <div class="chips">
            @for (role of currentUser.roles; track role.id) {
              <span>
                {{ role.name }}
                <button type="button" (click)="removeRole(currentUser.id, role.id, role.name)">
                  Entfernen
                </button>
              </span>
            }
          </div>
          <form class="inline" (ngSubmit)="assignRole(currentUser.id)">
            <select name="selectedRoleId" [(ngModel)]="selectedRoleId">
              <option value="">Rolle waehlen</option>
              @for (role of availableRoles(currentUser); track role.id) {
                <option [value]="role.id">{{ role.name }}</option>
              }
            </select>
            <button type="submit" [disabled]="!selectedRoleId">Zuweisen</button>
          </form>
        </article>

        <article>
          <h3>Effektive Permissions</h3>
          <div class="permission-list">
            @for (permission of currentUser.effectivePermissions; track permission) {
              <code>{{ permission }}</code>
            }
          </div>
        </article>
      </section>

      <section>
        <h3>Aktive Sessions</h3>
        @if (currentUser.sessions.length === 0) {
          <div class="notice">Keine aktiven Sessions.</div>
        } @else {
          <div class="list">
            @for (session of currentUser.sessions; track session.id) {
              <article>
                <div>
                  <strong>{{ session.current ? 'Aktuelle Session' : 'Session' }}</strong>
                  <span>{{ session.userAgent || 'Unbekannter Browser' }}</span>
                  <span>{{ session.approximateIp || 'Keine IP' }}</span>
                </div>
                <dl>
                  <div>
                    <dt>Aktivitaet</dt>
                    <dd>{{ session.lastActivityAt }}</dd>
                  </div>
                  <div>
                    <dt>Ablauf</dt>
                    <dd>{{ session.expiresAt }}</dd>
                  </div>
                </dl>
                <button
                  type="button"
                  class="danger"
                  (click)="revokeSession(currentUser.id, session)"
                >
                  Beenden
                </button>
              </article>
            }
          </div>
        }
      </section>
    } @else if (loading()) {
      <section class="notice">Benutzer wird geladen.</section>
    }
  `,
  styles: [
    `
      a {
        display: inline-flex;
        margin-bottom: 16px;
        color: var(--color-primary-hover);
      }
      .notice,
      .hero,
      article {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 16px;
      }
      .notice.error {
        border-color: var(--color-danger);
        color: var(--color-danger);
        margin-bottom: 16px;
      }
      .hero {
        display: grid;
        gap: 16px;
        margin-bottom: 16px;
      }
      .hero.inactive {
        border-left: 4px solid var(--color-border-strong);
      }
      h2,
      h3,
      p {
        margin: 0;
      }
      h3 {
        margin-bottom: 12px;
      }
      .actions,
      .inline,
      .grid,
      .list,
      article,
      dl,
      .permission-list {
        display: grid;
        gap: 12px;
      }
      button,
      select {
        min-height: 44px;
      }
      button {
        border: 0;
        border-radius: 6px;
        background: var(--color-primary);
        color: var(--color-surface);
        padding: 0 14px;
      }
      button.secondary {
        background: var(--color-text-secondary);
      }
      button.danger {
        background: var(--color-danger);
      }
      button:disabled {
        opacity: 0.55;
      }
      select {
        border: 1px solid var(--color-border);
        border-radius: 6px;
        padding: 0 10px;
      }
      .chips,
      .permission-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .chips span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        padding: 4px 6px 4px 10px;
      }
      .chips button {
        min-height: 34px;
        background: var(--color-danger);
      }
      code {
        border: 1px solid var(--color-border);
        border-radius: 6px;
        background: var(--color-background);
        padding: 6px 8px;
      }
      dl {
        margin: 0;
      }
      dt {
        color: var(--color-text-muted);
        font-size: 0.88rem;
      }
      dd {
        margin: 0;
      }
      @media (min-width: 900px) {
        .hero,
        .list article {
          grid-template-columns: 1fr auto;
          align-items: center;
        }
        .actions,
        .inline {
          grid-template-columns: auto auto;
        }
        .grid {
          grid-template-columns: 1fr 1fr;
          margin-bottom: 16px;
        }
        .list article {
          grid-template-columns: 1.2fr 1fr auto;
        }
      }
    `,
  ],
})
export class AdminUserDetailPageComponent {
  private readonly api = inject(ApiClientService);
  private readonly route = inject(ActivatedRoute);
  readonly user = signal<AdminUserDetailDto | null>(null);
  readonly roles = signal<RoleDto[]>([]);
  readonly loading = signal(false);
  readonly error = signal<ApiErrorBody | null>(null);
  selectedRoleId = '';

  constructor() {
    this.api.adminRoles().subscribe((roles) => this.roles.set(roles));
    this.load();
  }

  load(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (!id) return;
    this.loading.set(true);
    this.error.set(null);
    this.api.adminUser(id).subscribe({
      next: (user) => {
        this.user.set(user);
        this.selectedRoleId = '';
        this.loading.set(false);
      },
      error: (error: { error?: ApiErrorBody }) => {
        this.error.set(error.error ?? this.genericError());
        this.loading.set(false);
      },
    });
  }

  activate(id: string): void {
    this.api.activateAdminUser(id).subscribe({
      next: () => this.load(),
      error: (error: unknown) => this.handleError(error),
    });
  }

  deactivate(id: string): void {
    if (!confirm('Benutzer wirklich deaktivieren und alle Sessions beenden?')) return;
    this.api.deactivateAdminUser(id).subscribe({
      next: () => this.load(),
      error: (error: unknown) => this.handleError(error),
    });
  }

  assignRole(userId: string): void {
    if (!this.selectedRoleId) return;
    this.api.assignAdminUserRole(userId, this.selectedRoleId).subscribe({
      next: () => this.load(),
      error: (error: unknown) => this.handleError(error),
    });
  }

  removeRole(userId: string, roleId: string, roleName: string): void {
    if (roleName === 'admin' && !confirm('Adminrolle wirklich entfernen?')) return;
    this.api.removeAdminUserRole(userId, roleId).subscribe({
      next: () => this.load(),
      error: (error: unknown) => this.handleError(error),
    });
  }

  revokeSession(userId: string, session: AdminSessionDto): void {
    this.api.revokeAdminUserSession(userId, session.id).subscribe({
      next: () => this.load(),
      error: (error: unknown) => this.handleError(error),
    });
  }

  revokeAllSessions(userId: string): void {
    if (!confirm('Alle Sessions dieses Benutzers beenden?')) return;
    this.api.revokeAdminUserSessions(userId).subscribe({
      next: () => this.load(),
      error: (error: unknown) => this.handleError(error),
    });
  }

  availableRoles(user: AdminUserDetailDto): RoleDto[] {
    const assigned = new Set(user.roles.map((role) => role.id));
    return this.roles().filter((role) => !assigned.has(role.id));
  }

  messageFor(error: ApiErrorBody): string {
    if (error.code === 'LAST_ACTIVE_ADMIN_REQUIRED') {
      return 'Dieser Benutzer ist der letzte aktive Administrator und kann nicht entmachtet werden.';
    }
    return error.message;
  }

  private handleError(error: unknown): void {
    this.error.set(this.extractError(error));
  }

  private extractError(error: unknown): ApiErrorBody {
    if (typeof error === 'object' && error !== null && 'error' in error) {
      const body = (error as { error?: unknown }).error;
      if (this.isApiErrorBody(body)) return body;
    }
    return this.genericError();
  }

  private isApiErrorBody(value: unknown): value is ApiErrorBody {
    return (
      typeof value === 'object' &&
      value !== null &&
      'message' in value &&
      'code' in value &&
      'status' in value &&
      'requestId' in value
    );
  }

  private genericError(): ApiErrorBody {
    return {
      status: 0,
      code: 'UNKNOWN',
      message: 'Die Aktion konnte nicht ausgefuehrt werden.',
      requestId: '',
    };
  }
}