import { Component, Input, computed, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-pdf-viewer',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="pdf-container">
      <div class="pdf-header">
        <span class="pdf-icon">📄</span>
        <span class="pdf-title">PDF</span>
        <span class="pdf-filename">{{ fileName() }}</span>
      </div>
      <iframe class="viewer" [src]="safeSrc()" title="PDF Viewer"></iframe>
    </div>
  `,
  styles: [`
    :host { display:flex; flex:1 1 auto; width:100%; min-width:0; min-height:0; padding: 0; }
    .pdf-container {
      flex:1 1 auto;
      display:flex;
      flex-direction:column;
      min-height:0;
      border-radius: 0.5rem;
      border: 1px solid var(--border);
      background: var(--card);
      overflow: hidden;
    }
    .pdf-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--card) 95%, var(--text-main) 5%);
      font-size: 0.875rem;
    }
    .pdf-icon { font-size: 1.25rem; }
    .pdf-title {
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-muted);
    }
    .pdf-filename {
      margin-left: auto;
      font-weight: 500;
      color: var(--text-main);
      max-width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .viewer { flex:1 1 auto; display:block; width:100%; height:100%; border:0; min-height:0; }
  `]
})
export class PdfViewerComponent {
  @Input() src: string = '';
  @Input() path: string = '';
  private sanitizer = inject(DomSanitizer);

  safeSrc = computed<SafeResourceUrl>(() => this.sanitizer.bypassSecurityTrustResourceUrl(this.src || ''));

  fileName = computed(() => {
    const p = this.path || this.src || '';
    try {
      const u = decodeURI(p);
      return u.split('/').pop() || u.split('\\').pop() || 'document.pdf';
    } catch {
      return p.split('/').pop() || p.split('\\').pop() || 'document.pdf';
    }
  });

}