reactive-mail-server/frontend/src/app/pages/shell/shell.component.ts

import { ChangeDetectionStrategy, Component, DestroyRef, computed, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NavigationEnd, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { JtRowActionsComponent, RowAction } from '@jambotron/aria-grid';
import { filter } from 'rxjs';
import { ApiService } from '../../core/api.service';
import { AuthService } from '../../core/auth.service';
import { MailStateService } from '../../core/mail-state.service';
import { Folder, MailboxEntry, errorText, folderIcon, folderLabel, formatBytes } from '../../core/models';
import { BackgroundComponent } from '../../ui/background.component';
import { DialogService } from '../../ui/dialog.service';
import { THEMES, ThemeService } from '../../ui/theme.service';
import { ToastService } from '../../ui/toast.service';

/** Header, folders sidebar and the page — everything after login. */
@Component({
  selector: 'app-shell',
  imports: [FormsModule, RouterOutlet, RouterLink, RouterLinkActive, MatIconModule, MatTooltipModule,
    JtRowActionsComponent, BackgroundComponent],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <app-background />
    <div class="relative z-10 flex flex-col min-h-screen">
      <header class="px-4 py-3 lg:px-6 border-b border-cyan-500/20 glass-panel static rounded-none border-t-0 border-x-0 sticky top-0 z-40 backdrop-blur-xl">
        <div class="max-w-[1500px] mx-auto flex items-center gap-3">
          <button type="button" class="lg:hidden ghost-btn !px-2" aria-label="Folders" [attr.aria-expanded]="menuOpen()"
                  (click)="menuOpen.set(!menuOpen())"><mat-icon>menu</mat-icon></button>
          <a routerLink="/" class="flex items-center gap-3 shrink-0" aria-label="Synth Mail — inbox">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-pink-500 to-cyan-400 flex items-center justify-center
                        text-slate-950 font-black text-xl shadow-[0_0_15px_rgba(255,0,127,0.8)] font-orbitron">M</div>
            <div class="hidden sm:block">
              <div class="text-xl font-extrabold font-orbitron tracking-wider neon-text-primary leading-tight">
                SYNTH <span class="text-cyan-400 font-normal">MAIL</span>
              </div>
              <div class="text-[10px] text-cyan-300/70 font-mono tracking-widest uppercase">Reactive mail server</div>
            </div>
          </a>

          <form class="flex-grow max-w-xl mx-auto" role="search" (ngSubmit)="search()">
            <label for="global-search" class="sr-only">Search in the current folder</label>
            <div class="relative">
              <mat-icon class="absolute left-3 top-1/2 -translate-y-1/2 text-cyan-400/70 !text-xl">search</mat-icon>
              <input id="global-search" name="q" [(ngModel)]="query" placeholder="Search mail…"
                     class="synth-input !pl-10 !rounded-full !py-2">
            </div>
          </form>

          <div class="hidden md:flex items-center gap-3 bg-slate-950/60 px-4 py-1.5 rounded-full border border-pink-500/30 text-xs font-mono">
            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping" aria-hidden="true"></span>
            <span class="text-slate-300">Unread: <span class="text-pink-400 font-bold">{{ state.unreadTotal() }}</span></span>
            <span class="text-slate-600" aria-hidden="true">|</span>
            <span class="text-cyan-300 max-w-[220px] truncate" [matTooltip]="auth.email() ?? ''">{{ state.profile()?.displayName || auth.email() }}</span>
          </div>

          <label for="palette" class="sr-only">Color theme</label>
          <select id="palette" class="hidden xl:block bg-slate-900/90 text-cyan-300 border border-cyan-500/40 rounded-lg px-2 py-1.5 text-xs font-mono"
                  [ngModel]="theme.theme()" (ngModelChange)="theme.theme.set($event)">
            @for (t of themes; track t.value) { <option [value]="t.value">{{ t.label }}</option> }
          </select>
          <button type="button" class="ghost-btn !px-2" matTooltip="High contrast" aria-label="High contrast"
                  [attr.aria-pressed]="theme.highContrast()" (click)="theme.highContrast.set(!theme.highContrast())">
            <mat-icon class="text-yellow-400">contrast</mat-icon>
          </button>
          <button type="button" class="ghost-btn !px-2" matTooltip="Log out" aria-label="Log out" (click)="logout()">
            <mat-icon>logout</mat-icon>
          </button>
        </div>
      </header>

      @if (auth.openedBy(); as admin) {
        <div class="bg-pink-600/90 text-white text-sm font-rajdhani px-4 py-2 flex flex-wrap items-center justify-center gap-3" role="status">
          <mat-icon class="!text-base">visibility</mat-icon>
          <span>You are in mailbox <b class="font-mono">{{ auth.email() }}</b> as administrator</span>
          <button type="button" class="ghost-btn !py-1 !border-white !text-white" (click)="backToAdmin()">
            <mat-icon>arrow_back</mat-icon> Back to {{ admin }}</button>
        </div>
      }

      <div class="flex-grow max-w-[1500px] w-full mx-auto p-3 md:p-5 grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-5">
        <nav class="glass-panel static p-4 md:pt-6 h-fit lg:sticky lg:top-20 lg:block" [class.hidden]="!menuOpen()"
             aria-label="Mail folders">
          <div class="flex items-center justify-between mb-2 px-1">
            <h2 class="text-[11px] font-orbitron font-bold text-cyan-300 tracking-widest">MAILBOXES</h2>
            <button type="button" class="text-slate-400 hover:text-cyan-300" matTooltip="Add a mailbox you have the password of"
                    aria-label="Add mailbox" [attr.aria-expanded]="attachOpen()" (click)="attachOpen.set(!attachOpen())">
              <mat-icon class="!text-xl">add_circle_outline</mat-icon></button>
          </div>
          <ul class="space-y-1 mb-3" aria-label="Your mailboxes">
            @for (b of boxes(); track b.email) {
              <li class="flex items-center gap-1">
                <button type="button" (click)="switchTo(b)" [attr.aria-current]="b.email === auth.email() ? 'true' : null"
                        class="flex-grow flex items-center gap-2 px-3 py-1.5 rounded-lg border text-left font-rajdhani font-semibold min-w-0"
                        [class.border-pink-500/40]="b.email === auth.email()" [class.bg-pink-500/15]="b.email === auth.email()"
                        [class.text-pink-200]="b.email === auth.email()" [class.border-transparent]="b.email !== auth.email()"
                        [class.text-slate-300]="b.email !== auth.email()"
                        [matTooltip]="b.email + (b.shared ? ' — shared' : b.kind === 'ATTACHED' ? ' — attached' : '')">
                  <mat-icon class="!text-lg shrink-0">{{ b.shared ? 'groups' : b.kind === 'OWN' ? 'person' : 'link' }}</mat-icon>
                  <span class="flex-grow truncate text-sm">{{ b.email }}</span>
                  @if (b.unread) {
                    <span class="text-[11px] font-mono px-2 rounded-full bg-pink-500/25 text-pink-300" [attr.aria-label]="b.unread + ' unread'">{{ b.unread }}</span>
                  }
                </button>
                @if (b.kind !== 'OWN') {
                  <button type="button" class="text-slate-500 hover:text-pink-400" [attr.aria-label]="'Remove ' + b.email + ' from my mailboxes'"
                          matTooltip="Remove from my mailboxes" (click)="leave(b)"><mat-icon class="!text-base">close</mat-icon></button>
                }
              </li>
            }
          </ul>
          @if (attachOpen()) {
            <form class="space-y-2 mb-4 p-2 rounded-lg border border-cyan-500/20" (ngSubmit)="attach()" aria-label="Add a mailbox">
              <label class="synth-label" for="att-email">Mailbox</label>
              <input id="att-email" name="attEmail" class="synth-input !py-1.5" [(ngModel)]="attachEmail" autocomplete="off" placeholder="name&#64;domain">
              <label class="synth-label" for="att-pw">Its password</label>
              <input id="att-pw" name="attPw" type="password" class="synth-input !py-1.5" [(ngModel)]="attachPassword" autocomplete="off">
              <button type="submit" class="cyber-btn w-full py-1.5 rounded-lg text-xs font-bold"><mat-icon>link</mat-icon> ADD</button>
            </form>
          }

          <a routerLink="/compose" class="cyber-btn w-full py-2.5 rounded-xl font-bold text-xs mb-4" (click)="menuOpen.set(false)">
            <mat-icon>edit</mat-icon> COMPOSE
          </a>

          <ul class="space-y-1">
            @for (folder of systemFolders(); track folder.id) {
              <li>
                <a [routerLink]="['/folder', folder.id]" routerLinkActive="!bg-pink-500/20 !text-pink-300 !border-pink-500/40"
                   class="flex items-center gap-3 px-3 py-2 rounded-lg border border-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-300 font-rajdhani font-semibold"
                   (click)="menuOpen.set(false)">
                  <mat-icon class="!text-xl">{{ icon(folder) }}</mat-icon>
                  <span class="flex-grow">{{ label(folder) }}</span>
                  @if (badge(folder)) {
                    <span class="text-[11px] font-mono px-2 rounded-full bg-pink-500/25 text-pink-300 border border-pink-500/40"
                          [attr.aria-label]="badge(folder) + ' unread'">{{ badge(folder) }}</span>
                  }
                </a>
              </li>
            }
          </ul>

          <div class="flex items-center justify-between mt-5 mb-2 px-1">
            <h2 class="text-[11px] font-orbitron font-bold text-cyan-300 tracking-widest">MY FOLDERS</h2>
            <button type="button" class="text-slate-400 hover:text-cyan-300" matTooltip="New folder" aria-label="New folder"
                    (click)="createFolder()"><mat-icon class="!text-xl">create_new_folder</mat-icon></button>
          </div>
          <ul class="space-y-1">
            @for (folder of ownFolders(); track folder.id) {
              <li class="flex items-center gap-1">
                <a [routerLink]="['/folder', folder.id]" routerLinkActive="!bg-pink-500/20 !text-pink-300 !border-pink-500/40"
                   class="flex-grow flex items-center gap-3 px-3 py-1.5 rounded-lg border border-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-300 font-rajdhani font-semibold min-w-0"
                   (click)="menuOpen.set(false)">
                  <mat-icon class="!text-xl">folder</mat-icon>
                  <span class="flex-grow truncate">{{ folder.name }}</span>
                  @if (folder.unreadCount) {
                    <span class="text-[11px] font-mono px-2 rounded-full bg-pink-500/25 text-pink-300">{{ folder.unreadCount }}</span>
                  }
                </a>
                <jt-row-actions [actions]="folderActions" [subject]="folder.name" (action)="onFolderAction($event, folder)" />
              </li>
            } @empty {
              <li class="px-3 text-xs text-slate-500 font-mono">No folders yet</li>
            }
          </ul>

          <div class="border-t border-cyan-500/20 mt-5 pt-3 space-y-1">
            @for (link of links; track link.path) {
              <a [routerLink]="link.path" routerLinkActive="!text-pink-300"
                 class="flex items-center gap-3 px-3 py-1.5 rounded-lg text-slate-400 hover:text-cyan-300 font-rajdhani font-semibold"
                 (click)="menuOpen.set(false)">
                <mat-icon class="!text-xl">{{ link.icon }}</mat-icon>{{ link.label }}
              </a>
            }
          </div>

          @if (state.profile(); as p) {
            <div class="mt-4 px-1 text-[11px] font-mono text-slate-400">
              <div class="flex justify-between mb-1"><span>Storage</span><span class="text-cyan-300">{{ used() }}</span></div>
              <div class="h-1.5 rounded-full bg-slate-800 overflow-hidden" role="progressbar" aria-label="Storage used"
                   [attr.aria-valuenow]="usedPercent()" aria-valuemin="0" aria-valuemax="100">
                <div class="h-full bg-gradient-to-r from-cyan-400 to-pink-500" [style.width.%]="usedPercent()"></div>
              </div>
            </div>
          }
        </nav>

        <main class="min-w-0" id="main">
          <router-outlet />
        </main>
      </div>
    </div>
  `
})
export class ShellComponent {
  readonly auth = inject(AuthService);
  readonly state = inject(MailStateService);
  readonly theme = inject(ThemeService);
  private api = inject(ApiService);
  private dialogs = inject(DialogService);
  private toasts = inject(ToastService);
  private router = inject(Router);

  readonly themes = THEMES;
  readonly menuOpen = signal(false);
  /** own, shared and attached mailboxes of the login (shown when there is more than the own one, or to add one) */
  readonly boxes = signal<MailboxEntry[]>([]);
  readonly attachOpen = signal(false);
  attachEmail = '';
  attachPassword = '';
  query = '';

  readonly links = [
    { path: '/contacts', label: 'Contacts', icon: 'contacts' },
    { path: '/blocked', label: 'Blocked senders', icon: 'block' },
    { path: '/settings', label: 'Settings', icon: 'settings' }
  ];

  readonly folderActions: RowAction[] = [
    { value: 'rename', label: 'Rename', icon: 'drive_file_rename_outline' },
    { value: 'delete', label: 'Delete folder', icon: 'delete', danger: true }
  ];

  readonly systemFolders = computed(() => this.state.folders().filter(f => f.system));
  readonly ownFolders = computed(() => this.state.folders().filter(f => !f.system));
  readonly used = computed(() => {
    const p = this.state.profile();
    return p ? `${formatBytes(p.usedBytes)} / ${formatBytes(p.quotaBytes)}` : '';
  });
  readonly usedPercent = computed(() => {
    const p = this.state.profile();
    return p && p.quotaBytes ? Math.min(100, Math.round(p.usedBytes / p.quotaBytes * 100)) : 0;
  });

  label = folderLabel;
  icon = folderIcon;

  constructor() {
    this.state.refreshFolders();
    this.state.refreshProfile();
    this.loadBoxes();
    const timer = setInterval(() => { this.state.refreshFolders(); this.loadBoxes(); }, 30000);
    inject(DestroyRef).onDestroy(() => clearInterval(timer));
    this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
      const q = this.router.parseUrl(this.router.url).queryParams['q'];
      this.query = typeof q === 'string' ? q : '';
    });
  }

  /** Drafts: how many; Sent, Trash: nothing; others: unread. */
  badge(folder: Folder): number {
    if (folder.name === 'Drafts') return folder.messageCount;
    if (folder.name === 'Sent' || folder.name === 'Trash') return 0;
    return folder.unreadCount;
  }

  search(): void {
    const match = this.router.url.match(/^\/folder\/(\d+)/);
    const folderId = match ? Number(match[1]) : this.state.inbox()?.id;
    if (!folderId) return;
    const q = this.query.trim();
    this.router.navigate(['/folder', folderId], { queryParams: q ? { q } : {} });
  }

  createFolder(): void {
    this.dialogs.prompt('New folder', 'Folder name', '', 'Create').subscribe(name => {
      if (!name) return;
      this.api.createFolder(name).subscribe({
        next: folder => {
          this.state.refreshFolders();
          this.toasts.ok(`Folder "${folder.name}" created`);
          this.router.navigate(['/folder', folder.id]);
        },
        error: e => this.toasts.error(errorText(e))
      });
    });
  }

  onFolderAction(action: string, folder: Folder): void {
    if (action === 'rename') {
      this.dialogs.prompt('Rename folder', 'Folder name', folder.name, 'Rename').subscribe(name => {
        if (!name || name === folder.name) return;
        this.api.renameFolder(folder.id, name).subscribe({
          next: () => { this.state.refreshFolders(); this.toasts.ok('Folder renamed'); },
          error: e => this.toasts.error(errorText(e))
        });
      });
    } else if (action === 'delete') {
      this.dialogs.confirm(`Delete "${folder.name}"?`, 'Its messages go to the Trash.', 'Delete', true).subscribe(ok => {
        if (ok === null) return;
        this.api.deleteFolder(folder.id).subscribe({
          next: () => {
            this.state.refreshFolders();
            this.toasts.ok('Folder deleted');
            if (this.router.url.startsWith(`/folder/${folder.id}`)) this.router.navigate(['/']);
          },
          error: e => this.toasts.error(errorText(e))
        });
      });
    }
  }

  loadBoxes(): void {
    this.api.myMailboxes().subscribe({ next: list => this.boxes.set(list), error: () => {} });
  }

  /** Another mailbox of this login: its session, full reload — fresh folders and profile. */
  switchTo(b: MailboxEntry): void {
    if (b.email === this.auth.email()) { this.router.navigate(['/']); return; }
    this.api.mailboxSession(b.email).subscribe({
      next: session => { this.state.reset(); this.auth.switchTo(session); location.assign('/'); },
      error: e => this.toasts.error(errorText(e))
    });
  }

  attach(): void {
    const email = this.attachEmail.trim().toLowerCase();
    if (!email || !this.attachPassword) { this.toasts.error('Mailbox and its password'); return; }
    this.api.attachMailbox(email, this.attachPassword).subscribe({
      next: b => {
        this.attachEmail = this.attachPassword = '';
        this.attachOpen.set(false);
        this.toasts.ok(b.email + ' added to your mailboxes');
        this.loadBoxes();
      },
      error: e => this.toasts.error(errorText(e))
    });
  }

  leave(b: MailboxEntry): void {
    this.dialogs.confirm(`Remove ${b.email}?`, b.shared
      ? 'It disappears from your menu. An administrator can give it back.'
      : 'It disappears from your menu. Add it again with its password.', 'Remove', true).subscribe(ok => {
      if (ok === null) return;
      this.api.leaveMailbox(b.email).subscribe({
        next: () => {
          this.toasts.ok(b.email + ' removed');
          if (b.email === this.auth.email()) {
            const own = this.boxes().find(x => x.kind === 'OWN');
            if (own) { this.switchTo(own); return; }
          }
          this.loadBoxes();
        },
        error: e => this.toasts.error(errorText(e))
      });
    });
  }

  backToAdmin(): void {
    this.auth.backToAdmin();
    location.assign('/settings');
  }

  logout(): void {
    this.state.reset();
    this.auth.logout();
  }
}