<div class="pdf-uploader">
  <!-- Header -->
  <div class="uploader-header">
    <h3 class="uploader-title">{{ title }}</h3>
    <p class="uploader-subtitle">{{ subtitle }}</p>
  </div>

  <!-- Upload Area -->
  <div 
    class="upload-area"
    [class.drag-over]="isDragOver"
    (dragover)="onDragOver($event)"
    (dragleave)="onDragLeave($event)"
    (drop)="onDrop($event)">
    
    <div class="upload-icon">
      <i class="fas fa-cloud-upload-alt"></i>
    </div>
    
    <div class="upload-content">
      <p class="upload-text">Arraste e solte seu arquivo aqui</p>
      <p class="upload-support">Suporte para PDF, JPG e PNG até 10MB</p>
      
      <label class="upload-button">
        Selecionar Arquivo
        <input
          type="file"
          [accept]="allowedTypes.join(',')"
          (change)="onFileSelected($event)"
          [multiple]="acceptMultiple"
          hidden
        />
      </label>
    </div>
  </div>

  <!-- Documents List -->
  <div class="documents-section" *ngIf="documents.length > 0">
    <div class="section-header">
      <h4>Documentos Anexados</h4>
      <button class="clear-all-btn" (click)="clearAll()">
        <i class="fas fa-trash"></i>
        Limpar Tudo
      </button>
    </div>

    <div 
      class="documents-list"
      cdkDropList
      (cdkDropListDropped)="onDocumentDrop($event)">
      
      <div 
        class="document-item"
        *ngFor="let doc of documents; let i = index"
        cdkDrag>
        
        <div class="document-icon">
          <i [class]="getDocumentIcon(doc)"></i>
        </div>
        
        <div class="document-info">
          <div class="document-name">{{ doc.name }}</div>
          <div class="document-details">
            <span class="document-size">{{ formatFileSize(doc.size || 0) }}</span>
            <span class="document-date" *ngIf="doc.uploadDate">
              {{ doc.uploadDate | date:'dd/MM/yyyy HH:mm' }}
            </span>
          </div>
        </div>
        
        <div class="document-actions">
          <button 
            class="action-btn view-btn" 
            (click)="openDocument(doc)"
            title="Visualizar documento">
            <i class="fas fa-eye"></i>
          </button>
          
          <button 
            class="action-btn remove-btn" 
            (click)="removeDocument(i)"
            title="Remover documento">
            <i class="fas fa-trash"></i>
          </button>
        </div>
        
        <div class="drag-handle" cdkDragHandle>
          <i class="fas fa-grip-vertical"></i>
        </div>
      </div>
    </div>
  </div>

  <!-- Pending Documents Section -->
  <div class="pending-documents" *ngIf="showPendingList && pendingDocuments.length > 0">
    <div class="section-header">
      <h4>Documentos Pendentes</h4>
      <span class="pending-count">Documentos que ainda precisam ser enviados</span>
    </div>

    <div class="pending-list">
      <div 
        class="pending-item"
        *ngFor="let pendingDoc of pendingDocuments"
        [class.completed]="isPendingDocumentUploaded(pendingDoc)"
        [class.required]="pendingDoc.required">
        
        <div class="pending-icon">
          <i class="fas fa-exclamation-triangle" *ngIf="pendingDoc.required && !isPendingDocumentUploaded(pendingDoc)"></i>
          <i class="fas fa-check-circle" *ngIf="isPendingDocumentUploaded(pendingDoc)"></i>
          <i class="fas fa-file-alt" *ngIf="!pendingDoc.required && !isPendingDocumentUploaded(pendingDoc)"></i>
        </div>
        
        <div class="pending-info">
          <div class="pending-name">{{ pendingDoc.name }}</div>
          <div class="pending-description">{{ pendingDoc.description }}</div>
        </div>
        
        <div class="pending-actions">
          <span class="status-badge" [class]="pendingDoc.status">
            {{ pendingDoc.status === 'uploaded' ? 'Enviado' : 'Pendente' }}
          </span>
          
          <button 
            class="send-btn"
            *ngIf="!isPendingDocumentUploaded(pendingDoc)"
            (click)="sendDocument(pendingDoc)">
            Enviar
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Empty State -->
  <div class="empty-state" *ngIf="documents.length === 0 && (!pendingDocuments.length || !showPendingList)">
    <i class="fas fa-file-upload"></i>
    <h4>Nenhum documento anexado</h4>
    <p>Clique em "Selecionar Arquivo" ou arraste arquivos para esta área</p>
  </div>
</div>
