<button 
  class="add-resume-btn" 
  [disabled]="uploading || slots.used >= slots.total" 
  (click)="fileInput.click()"
>
  <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:4px;">
    <rect x="7" y="2" width="6" height="12" rx="2"/>
    <path d="M10 6v6m-3-3h6"/>
  </svg>
  <span *ngIf="!uploading">Add Resume</span>
  <span *ngIf="uploading">Uploading...</span>
</button>

<input 
  #fileInput 
  type="file" 
  accept="application/pdf,.doc,.docx" 
  style="display:none" 
  (change)="onFileSelected($event)"
  name="file"
/>




  onFileSelected(event: any) {
const file = event.target.files[0];
if (!file) return;

console.log('File selected:', {
  name: file.name,
  size: file.size,
  type: file.type,
  lastModified: file.lastModified
});

// Check slot availability
if (this.slots.used >= this.slots.total) {
  this.uploadError = 'Maximum number of resumes reached. Please delete a resume before uploading a new one.';
  return;
}

// Validate file size (10MB limit)
const maxSize = 10 * 1024 * 1024; // 10MB
if (file.size > maxSize) {
  this.uploadError = 'File size exceeds 10MB limit';
  return;
}

// Enhanced file type validation
const allowedTypes = [
  'application/pdf',
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document', // .docx
  'application/msword' // .doc
];

if (!allowedTypes.includes(file.type)) {
  this.uploadError = `Invalid file type: ${file.type}. Only PDF, DOC, and DOCX files are allowed`;
  return;
}

this.uploading = true;
this.uploadError = '';

this.resumeService.uploadResume(file).subscribe({
  next: (resume: any) => {
    console.log('Upload successful:', resume);
    
    const newResume = {
      ...resume,
      name: resume.original_filename || resume.name,
      targetJobTitle: resume.target_job_title || resume.targetJobTitle,
      created: resume.created_at || resume.created,
      lastModified: resume.updated_at || resume.lastModified,
      isPrimary: resume.is_primary || resume.isPrimary
    };
    
    this.resumes.push(newResume);
    this.slots.used = this.resumes.length;
    this.uploading = false;
    
    // Reset file input
    const fileInput = event.target;
    fileInput.value = '';
  },
  error: (error) => {
    console.error('Upload failed:', error);
    
    // Enhanced error handling
    if (error.status === 0) {
      this.uploadError = 'Cannot connect to server. Check if backend is running.';
    } else if (error.status === 401) {
      this.uploadError = 'Authentication failed. Please login again.';
    } else if (error.status === 413) {
      this.uploadError = 'File too large.';
    } else if (error.status === 422) {
      // Parse validation errors
      if (error.error?.detail && Array.isArray(error.error.detail)) {
        this.uploadError = error.error.detail.map((err: any) => 
          `${err.loc?.join('.')}: ${err.msg}`).join(', ');
      } else {
        this.uploadError = error.error?.detail || 'Validation error occurred.';
      }
    } else {
      this.uploadError = error.error?.detail || `Server error (${error.status})`;
    }
    
    this.uploading = false;
  }
});

uploadResume(file: File, targetJobTitle?: string): Observable<Resume> {
const token = localStorage.getItem('authToken') || sessionStorage.getItem('authToken');

// DON'T manually set Content-Type for multipart/form-data
let headers = new HttpHeaders();
if (token) {
  headers = headers.set('Authorization', `Bearer ${token}`);
}

const formData = new FormData();
formData.append('file', file);  // This matches the FastAPI parameter name
if (targetJobTitle) {
  formData.append('target_job_title', targetJobTitle);
}

return this.http.post<Resume>(`${this.apiUrl}/upload`, formData, { 
  headers,
}).pipe(
  tap(response => console.log('Upload success:', response)),
  catchError((error) => {
    console.error('Upload error details:', error);
    return throwError(() => error);
  })
);