import { ChangeDetectionStrategy, Component, computed, effect, inject, signal } from '@angular/core';
import { DatePipe } from '@angular/common';
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 { errorText, formatBytes } from '../../core/models';
import { THEMES, ThemeService } from '../../ui/theme.service';
import { ToastService } from '../../ui/toast.service';
import { MailboxesSection } from './mailboxes.section';
import { ListsSection } from './lists.section';

/** Profile name, password, storage, look. */
@Component({
  selector: 'app-settings',
  imports: [DatePipe, FormsModule, MatIconModule, MailboxesSection, ListsSection],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-5">
      <section class="glass-panel static p-5 md:p-6" aria-labelledby="profile-title">
        <h1 id="profile-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">badge</mat-icon> PROFILE
        </h1>
        @if (state.profile(); as p) {
          <dl class="text-sm font-rajdhani grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 mb-5">
            <dt class="text-slate-500 font-mono text-xs pt-0.5">Mailbox</dt><dd class="text-cyan-300 font-mono">{{ p.email }}</dd>
            <dt class="text-slate-500 font-mono text-xs pt-0.5">Since</dt><dd class="text-slate-300">{{ p.createdAt | date: 'd MMMM y' }}</dd>
          </dl>
        }
        <form (ngSubmit)="saveName()" class="space-y-3">
          <div>
            <label class="synth-label" for="display-name">Name shown to recipients</label>
            <input id="display-name" name="displayName" class="synth-input" [(ngModel)]="displayName" maxlength="100" required>
          </div>
          <button type="submit" class="cyber-btn px-4 py-2 rounded-lg text-xs font-bold"><mat-icon>save</mat-icon> SAVE NAME</button>
        </form>
      </section>

      <section class="glass-panel static p-5 md:p-6" aria-labelledby="password-title">
        <h2 id="password-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">key</mat-icon> PASSWORD
        </h2>
        <form (ngSubmit)="changePassword()" class="space-y-3">
          <input type="email" name="username" class="sr-only" [value]="state.profile()?.email ?? ''" autocomplete="username" tabindex="-1" aria-hidden="true">
          <div><label class="synth-label" for="pw-current">Current password</label>
            <div class="relative"><input id="pw-current" name="current" [type]="showPw() ? 'text' : 'password'" class="synth-input pr-10" [(ngModel)]="current" autocomplete="current-password">
            <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-cyan-300"
                    [attr.aria-label]="showPw() ? 'Hide password' : 'Show password'" (click)="showPw.set(!showPw())">
              <mat-icon>{{ showPw() ? 'visibility_off' : 'visibility' }}</mat-icon>
            </button></div></div>
          <div><label class="synth-label" for="pw-new">New password (8+ characters)</label>
            <div class="relative"><input id="pw-new" name="next" [type]="showPw() ? 'text' : 'password'" class="synth-input pr-10" [(ngModel)]="next" autocomplete="new-password">
            <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-cyan-300"
                    [attr.aria-label]="showPw() ? 'Hide password' : 'Show password'" (click)="showPw.set(!showPw())">
              <mat-icon>{{ showPw() ? 'visibility_off' : 'visibility' }}</mat-icon>
            </button></div></div>
          <div><label class="synth-label" for="pw-again">New password again</label>
            <div class="relative"><input id="pw-again" name="again" [type]="showPw() ? 'text' : 'password'" class="synth-input pr-10" [(ngModel)]="again" autocomplete="new-password">
            <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-cyan-300"
                    [attr.aria-label]="showPw() ? 'Hide password' : 'Show password'" (click)="showPw.set(!showPw())">
              <mat-icon>{{ showPw() ? 'visibility_off' : 'visibility' }}</mat-icon>
            </button></div></div>
          @if (passwordError()) { <p class="text-sm text-pink-400" role="alert">{{ passwordError() }}</p> }
          <button type="submit" class="cyber-btn px-4 py-2 rounded-lg text-xs font-bold"><mat-icon>lock_reset</mat-icon> CHANGE PASSWORD</button>
        </form>
      </section>

      <section class="glass-panel static p-5 md:p-6" aria-labelledby="storage-title">
        <h2 id="storage-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">storage</mat-icon> STORAGE
        </h2>
        <div class="flex justify-between text-xs font-mono text-slate-300 mb-1">
          <span>{{ used() }} of {{ quota() }}</span><span class="text-pink-400">{{ percent() }}%</span>
        </div>
        <div class="h-2 rounded-full bg-slate-800 overflow-hidden mb-4" role="progressbar" aria-label="Storage used"
             [attr.aria-valuenow]="percent()" aria-valuemin="0" aria-valuemax="100">
          <div class="h-full bg-gradient-to-r from-cyan-400 to-pink-500" [style.width.%]="percent()"></div>
        </div>
        <ul class="text-sm font-rajdhani text-slate-300 space-y-1">
          @for (f of state.folders(); track f.id) {
            <li class="flex justify-between"><span>{{ f.system ? label(f.name) : f.name }}</span>
              <span class="font-mono text-xs text-slate-400">{{ f.messageCount }} messages</span></li>
          }
        </ul>
      </section>

      <section class="glass-panel static p-5 md:p-6" aria-labelledby="look-title">
        <h2 id="look-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">palette</mat-icon> LOOK
        </h2>
        <fieldset class="mb-4">
          <legend class="synth-label">Palette</legend>
          <div class="grid grid-cols-2 gap-2">
            @for (t of themes; track t.value) {
              <button type="button" class="ghost-btn justify-center !py-2" [attr.aria-pressed]="theme.theme() === t.value"
                      [class.!border-pink-500]="theme.theme() === t.value" [class.!text-pink-300]="theme.theme() === t.value"
                      (click)="theme.theme.set(t.value)">{{ t.label }}</button>
            }
          </div>
        </fieldset>
        <div class="space-y-3">
          <div class="flex items-center justify-between p-3 bg-slate-900/50 rounded-lg border border-pink-500/20">
            <div><div class="font-bold text-slate-200">High contrast</div><div class="text-xs text-slate-400">Black background, bright outlines</div></div>
            <button type="button" class="ghost-btn" [attr.aria-pressed]="theme.highContrast()" (click)="theme.highContrast.set(!theme.highContrast())">
              {{ theme.highContrast() ? 'ON' : 'OFF' }}</button>
          </div>
          <div class="flex items-center justify-between p-3 bg-slate-900/50 rounded-lg border border-pink-500/20">
            <div><div class="font-bold text-slate-200">Grid motion</div><div class="text-xs text-slate-400">The moving retro floor in the background</div></div>
            <button type="button" class="ghost-btn" [attr.aria-pressed]="theme.animation()" (click)="theme.animation.set(!theme.animation())">
              {{ theme.animation() ? 'ON' : 'OFF' }}</button>
          </div>
        </div>
      </section>

      @if (state.profile()?.admin) {
        <app-mailboxes-section />
        <app-lists-section />
      }
    </div>
  `
})
export class SettingsPage {
  readonly state = inject(MailStateService);
  readonly theme = inject(ThemeService);
  private api = inject(ApiService);
  private toasts = inject(ToastService);

  readonly themes = THEMES;
  displayName = '';
  current = '';
  next = '';
  again = '';
  readonly passwordError = signal('');
  readonly showPw = signal(false);

  readonly used = computed(() => formatBytes(this.state.profile()?.usedBytes));
  readonly quota = computed(() => formatBytes(this.state.profile()?.quotaBytes));
  readonly percent = computed(() => {
    const p = this.state.profile();
    return p && p.quotaBytes ? Math.min(100, Math.round(p.usedBytes / p.quotaBytes * 1000) / 10) : 0;
  });

  constructor() {
    this.state.refreshProfile();
    effect(() => { this.displayName = this.state.profile()?.displayName ?? ''; });
  }

  label(name: string): string {
    return ({ INBOX: 'Inbox', Drafts: 'Drafts', Sent: 'Sent', Spam: 'Spam', Trash: 'Trash' } as Record<string, string>)[name] ?? name;
  }

  saveName(): void {
    const name = this.displayName.trim();
    if (!name) { this.toasts.error('The name cannot be empty'); return; }
    this.api.updateMe(name).subscribe({
      next: p => { this.state.profile.set(p); this.toasts.ok('Name saved'); },
      error: e => this.toasts.error(errorText(e))
    });
  }

  changePassword(): void {
    const problem = !this.current ? 'Enter the current password'
      : this.next.length < 8 ? 'The new password is shorter than 8 characters'
      : this.next !== this.again ? 'The new passwords do not match' : '';
    this.passwordError.set(problem);
    if (problem) return;
    this.api.changePassword(this.current, this.next).subscribe({
      next: () => { this.current = this.next = this.again = ''; this.toasts.ok('Password changed'); },
      error: e => this.passwordError.set(errorText(e))
    });
  }
}