import { Component, inject, signal } from '@angular/core';
import { DatePipe, DecimalPipe } from '@angular/common';
import { Router } from '@angular/router';
import { DocumentsService } from '../../core/documents.service';
import { DocumentPdf } from '../../core/models';

/**
 * Tableau de bord : liste les PDF sauvegardés de l'utilisateur.
 * Permet d'ouvrir un document dans l'éditeur ou de le supprimer.
 */
@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [DatePipe, DecimalPipe],
  template: `
    <div class="conteneur">
      <header class="entete">
        <h1>Mes documents</h1>
        <button class="btn btn-primaire" (click)="nouveau()">
          + Nouveau document
        </button>
      </header>

      @if (chargement()) {
        <p class="info">Chargement…</p>
      } @else if (erreur()) {
        <p class="message-erreur">{{ erreur() }}</p>
      } @else if (documents().length === 0) {
        <div class="vide">
          <p>Aucun document sauvegardé pour le moment.</p>
          <button class="btn btn-primaire" (click)="nouveau()">
            Charger un PDF
          </button>
        </div>
      } @else {
        <table class="tableau">
          <thead>
            <tr>
              <th>Nom</th>
              <th>Taille</th>
              <th>Modifié le</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            @for (doc of documents(); track doc.id) {
              <tr>
                <td class="nom" (click)="ouvrir(doc)">📄 {{ doc.name }}</td>
                <td>{{ doc.size / 1024 | number: '1.0-0' }} Ko</td>
                <td>{{ doc.updated_at | date: 'dd/MM/yyyy HH:mm' }}</td>
                <td class="actions">
                  <button class="btn" (click)="ouvrir(doc)">Ouvrir</button>
                  <button
                    class="btn btn-danger"
                    (click)="supprimer(doc)"
                    [disabled]="suppressionEnCours() === doc.id"
                  >
                    Supprimer
                  </button>
                </td>
              </tr>
            }
          </tbody>
        </table>
      }
    </div>
  `,
  styles: [
    `
      .conteneur {
        max-width: 900px;
        margin: 0 auto;
        padding: 28px 20px;
      }
      .entete {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      .entete h1 {
        margin: 0;
        font-size: 24px;
      }
      .info {
        color: var(--couleur-texte-doux);
      }
      .vide {
        text-align: center;
        padding: 60px 20px;
        background: var(--couleur-surface);
        border: 1px dashed var(--couleur-bordure);
        border-radius: var(--rayon);
      }
      .vide p {
        color: var(--couleur-texte-doux);
        margin-bottom: 16px;
      }
      .tableau {
        width: 100%;
        border-collapse: collapse;
        background: var(--couleur-surface);
        border-radius: var(--rayon);
        overflow: hidden;
        box-shadow: var(--ombre);
      }
      .tableau th,
      .tableau td {
        text-align: left;
        padding: 12px 16px;
        border-bottom: 1px solid var(--couleur-bordure);
        font-size: 14px;
      }
      .tableau th {
        background: #f8fafc;
        color: var(--couleur-texte-doux);
        font-weight: 600;
      }
      .nom {
        cursor: pointer;
        font-weight: 600;
      }
      .nom:hover {
        color: var(--couleur-primaire);
      }
      .actions {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
      }
    `,
  ],
})
export class DashboardComponent {
  private readonly documentsService = inject(DocumentsService);
  private readonly router = inject(Router);

  readonly documents = signal<DocumentPdf[]>([]);
  readonly chargement = signal(true);
  readonly erreur = signal<string | null>(null);
  readonly suppressionEnCours = signal<string | null>(null);

  constructor() {
    this.recharger();
  }

  recharger(): void {
    this.chargement.set(true);
    this.documentsService.lister().subscribe({
      next: (docs) => {
        this.documents.set(docs);
        this.chargement.set(false);
      },
      error: () => {
        this.erreur.set('Impossible de charger vos documents.');
        this.chargement.set(false);
      },
    });
  }

  nouveau(): void {
    this.router.navigate(['/editor']);
  }

  ouvrir(doc: DocumentPdf): void {
    this.router.navigate(['/editor', doc.id]);
  }

  supprimer(doc: DocumentPdf): void {
    if (!confirm(`Supprimer définitivement « ${doc.name} » ?`)) {
      return;
    }
    this.suppressionEnCours.set(doc.id);
    this.documentsService.supprimer(doc.id).subscribe({
      next: () => {
        this.documents.update((liste) =>
          liste.filter((d) => d.id !== doc.id),
        );
        this.suppressionEnCours.set(null);
      },
      error: () => {
        this.erreur.set('La suppression a échoué.');
        this.suppressionEnCours.set(null);
      },
    });
  }
}
