import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { ApiService } from '../../core/api.service';
import { MailStateService } from '../../core/mail-state.service';
import { Mailbox, errorText, formatBytes } from '../../core/models';
import { ToastService } from '../../ui/toast.service';

/** Settings → Mailboxes (administrators): create no-reply@, monitor@, support@ …, new password, switch off. */
@Component({
  selector: 'app-mailboxes-section',
  imports: [FormsModule, MatIconModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <section class="glass-panel static p-5 md:p-6 xl:col-span-2" aria-labelledby="mailboxes-title">
      <h2 id="mailboxes-title" class="text-lg font-orbitron font-bold text-cyan-300 flex items-center gap-2 mb-4 border-b border-cyan-500/20 pb-2">
        <mat-icon class="text-pink-500">group</mat-icon> MAILBOXES
      </h2>

      <form (ngSubmit)="create()" class="grid grid-cols-1 md:grid-cols-[1fr_1fr_1fr_auto] gap-3 items-end mb-4">
        <div><label class="synth-label" for="mb-email">Address</label>
          <input id="mb-email" name="email" class="synth-input" [(ngModel)]="email" [placeholder]="'no-reply@' + domain()" autocomplete="off" required></div>
        <div><label class="synth-label" for="mb-name">Name</label>
          <input id="mb-name" name="name" class="synth-input" [(ngModel)]="name" maxlength="100" autocomplete="off"></div>
        <div><label class="synth-label" for="mb-password">Password (empty — generate)</label>
          <input id="mb-password" name="password" type="password" class="synth-input" [(ngModel)]="password" autocomplete="new-password"></div>
        <button type="submit" class="cyber-btn px-4 py-2 rounded-lg text-xs font-bold" [disabled]="busy()"><mat-icon>add</mat-icon> CREATE</button>
      </form>
      @if (error()) { <p class="text-sm text-pink-400 mb-3" role="alert">{{ error() }}</p> }

      @if (secret(); as s) {
        <div class="p-3 mb-4 rounded-lg border border-pink-500/40 bg-slate-900/60" role="status">
          <div class="text-xs text-slate-400 mb-1">Password of <span class="font-mono text-cyan-300">{{ s.email }}</span> — shown once, copy it now</div>
          <div class="flex items-center gap-2">
            <code class="font-mono text-pink-300 break-all select-all">{{ s.password }}</code>
            <button type="button" class="ghost-btn !py-1" (click)="copy(s.password)" aria-label="Copy password"><mat-icon>content_copy</mat-icon></button>
            <button type="button" class="ghost-btn !py-1" (click)="secret.set(null)" aria-label="Hide password"><mat-icon>close</mat-icon></button>
          </div>
        </div>
      }

      <ul class="divide-y divide-cyan-500/10">
        @for (m of mailboxes(); track m.id) {
          <li class="flex flex-wrap items-center gap-x-4 gap-y-1 py-2">
            <span class="font-mono text-sm" [class.text-cyan-300]="m.active" [class.text-slate-500]="!m.active" [class.line-through]="!m.active">{{ m.email }}</span>
            <span class="text-sm text-slate-400">{{ m.displayName }}</span>
            @if (m.admin) { <span class="text-[10px] font-mono px-1.5 rounded border border-pink-500/40 text-pink-300">ADMIN</span> }
            <span class="text-xs font-mono text-slate-500 ml-auto">{{ size(m.usedBytes) }}</span>
            <button type="button" class="ghost-btn !py-1" (click)="newPassword(m)" [attr.aria-label]="'New password for ' + m.email"><mat-icon>key</mat-icon></button>
            @if (m.email !== me()) {
              <button type="button" class="ghost-btn !py-1" (click)="toggle(m)"
                      [attr.aria-label]="(m.active ? 'Switch off ' : 'Switch on ') + m.email">
                <mat-icon>{{ m.active ? 'toggle_on' : 'toggle_off' }}</mat-icon></button>
            }
          </li>
        }
      </ul>
    </section>
  `
})
export class MailboxesSection {
  private api = inject(ApiService);
  private state = inject(MailStateService);
  private toasts = inject(ToastService);

  readonly mailboxes = signal<Mailbox[]>([]);
  readonly secret = signal<{ email: string; password: string } | null>(null);
  readonly error = signal('');
  readonly busy = signal(false);
  readonly me = computed(() => this.state.profile()?.email ?? '');
  readonly domain = computed(() => this.me().split('@')[1] ?? 'example.com');

  email = '';
  name = '';
  password = '';

  constructor() {
    this.load();
  }

  size(bytes: number): string {
    return formatBytes(bytes);
  }

  load(): void {
    this.api.mailboxes().subscribe({ next: list => this.mailboxes.set(list), error: e => this.error.set(errorText(e)) });
  }

  create(): void {
    const email = this.email.trim();
    if (!email) { this.error.set('Enter an address'); return; }
    this.error.set('');
    this.busy.set(true);
    this.api.createMailbox(email, this.name.trim(), this.password).subscribe({
      next: created => {
        this.busy.set(false);
        this.email = this.name = this.password = '';
        if (created.password) { this.secret.set({ email: created.mailbox.email, password: created.password }); }
        this.toasts.ok('Mailbox ' + created.mailbox.email + ' created');
        this.load();
      },
      error: e => { this.busy.set(false); this.error.set(errorText(e)); }
    });
  }

  newPassword(m: Mailbox): void {
    if (!confirm('New password for ' + m.email + '? The old one stops working at once.')) return;
    this.api.newMailboxPassword(m.id).subscribe({
      next: created => created.password && this.secret.set({ email: m.email, password: created.password }),
      error: e => this.toasts.error(errorText(e))
    });
  }

  toggle(m: Mailbox): void {
    this.api.setMailboxActive(m.id, !m.active).subscribe({
      next: () => this.load(),
      error: e => this.toasts.error(errorText(e))
    });
  }

  copy(text: string): void {
    navigator.clipboard?.writeText(text).then(() => this.toasts.ok('Copied'), () => this.toasts.error('Copy it by hand'));
  }
}