// user.component.ts - WITH REAL-TIME ROLE UPDATES
import { Component, OnInit, OnDestroy, ViewChild, ChangeDetectorRef, AfterViewInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator';
import { MatSort, MatSortModule, Sort } from '@angular/material/sort';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import { CommonModule } from '@angular/common';
import { Observable, Subject, BehaviorSubject, combineLatest } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, startWith, takeUntil } from 'rxjs/operators';
import { User, UserService, UserDocument, DocumentWithMetadata } from '../user/user.service';
import { AuthService } from 'app/core/auth/auth.service';
import { RoleService, Role } from '../role-management/role-management.service';
import { RoleStateService } from 'app/core/services/role-state.service';

// ⭐ NEW: Import types for assignment
interface Client {
  id: number;
  username: string;
  email: string;
}

interface Machine {
  machine_id: string;
  machine_model: string;
  branch_name: string;
  operation_status: string;
}

@Component({
  selector: 'app-user',
  standalone: true,
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressBarModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatIconModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatTooltipModule
  ]
})
export class UserComponent implements OnInit, OnDestroy, AfterViewInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

  // Observables
  users$!: Observable<User[]>;
  private _unsubscribeAll: Subject<any> = new Subject<any>();
  
  // Data
  dataSource = new MatTableDataSource<User>();
  private _users: BehaviorSubject<User[]> = new BehaviorSubject<User[]>([]);
  
  // UI State
  isLoading: boolean = false;
  selectedUser: User | null = null;
  flashMessage: 'success' | 'error' | null = null;
  
  // Role-based properties
  currentUserRole: string | null = null;
  isClient: boolean = false;
  isAdmin: boolean = false;
  availableRoles: { value: string; label: string }[] = [];
  allRoles: Role[] = [];
  rolesLoading: boolean = false;
  rolesLoaded: boolean = false;
  
  // ⭐ NEW: Option 3 - Client Assignment
  availableClients: Client[] = [];
  clientsLoading: boolean = false;
  showClientAssignment: boolean = false;
  
  // ⭐ NEW: Option 3 - Machine Assignment
  availableMachines: Machine[] = [];
  selectedMachineIds: string[] = [];
  showMachineAssignment: boolean = false;
  machinesLoading: boolean = false;
  
  // Forms
  searchInputControl: FormControl = new FormControl('');
  selectedUserForm: FormGroup;
  
  // File handling
  selectedPhoto: File | null = null;
  selectedLogo: File | null = null;
  selectedDocuments: Array<{
    file: File;
    documentType: string;
    documentTypeOther?: string;
  }> = [];
  photoPreview: string | null = null;
  logoPreview: string | null = null;
  
  // Document types
  documentTypes = [
    { value: 'aadhar', label: 'Aadhar Card' },
    { value: 'pan', label: 'PAN Card' },
    { value: 'gst', label: 'GST Certificate' },
    { value: 'msme', label: 'MSME Certificate' },
    { value: 'fssai', label: 'FSSAI License' },
    { value: 'other', label: 'Other' }
  ];
  
  // For viewing documents
  viewingDocument: UserDocument | null = null;
  
  // Pagination
  pagination = {
    length: 0,
    page: 0,
    size: 10
  };

  constructor(
    private _userService: UserService,
    private _formBuilder: FormBuilder,
    private _changeDetectorRef: ChangeDetectorRef,
    private _authService: AuthService,
    private _roleService: RoleService,
    private _roleStateService: RoleStateService // ⭐ NEW: Inject RoleStateService
  ) {
    // Initialize form with assigned_to
    this.selectedUserForm = this._formBuilder.group({
      username: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      contact: ['', [Validators.required, Validators.pattern('^[0-9]{10}$')]],
      roles: ['', [Validators.required]],
      user_status: ['Active'],
      password: [''],
      assigned_to: ['']
    });
  }

  ngOnInit(): void {
    // Get current user role
    this.currentUserRole = this._authService.userRole;
    this.isClient = this._authService.hasRole('Client');
    this.isAdmin = this._authService.hasAnyRole(['Management', 'SuperAdmin', 'Admin']);
    
    console.log('User Management - Current Role:', this.currentUserRole);
    console.log('Is Client:', this.isClient);
    console.log('Is Admin:', this.isAdmin);
    
    // Load roles from database FIRST
    this.loadRolesFromDatabase();
    
    // ⭐ NEW: Subscribe to role changes from Role Management
    this.subscribeToRoleChanges();
    
    // Load clients for dropdown (only for admins)
    if (this.isAdmin) {
      this.loadClients();
    }
    
    // Watch for role and client changes to show/hide machine assignment
    combineLatest([
      this.selectedUserForm.get('roles')!.valueChanges.pipe(startWith('')),
      this.selectedUserForm.get('assigned_to')!.valueChanges.pipe(startWith(''))
    ]).pipe(takeUntil(this._unsubscribeAll))
      .subscribe(([role, clientId]) => {
        // Show client assignment dropdown only for Refillers and Admins
        this.showClientAssignment = role === 'Refiller' && this.isAdmin;
        
        // Show machine assignment only when role is Refiller, user is Admin, and client is assigned
        this.showMachineAssignment = role === 'Refiller' && this.isAdmin && !!clientId && clientId !== '';
        
        if (this.showMachineAssignment && clientId) {
          this.loadClientMachines(parseInt(clientId, 10));
        } else {
          this.availableMachines = [];
          this.selectedMachineIds = [];
        }
      });
    
    this.users$ = this._users.asObservable();

    this.searchInputControl.valueChanges
      .pipe(
        takeUntil(this._unsubscribeAll),
        debounceTime(300),
        distinctUntilChanged(),
        startWith('')
      )
      .subscribe(() => {
        this.filterUsers();
      });

    // Load users after a small delay to ensure roles are loaded
    setTimeout(() => {
      this.loadUsers();
    }, 500);
  }

  ngAfterViewInit(): void {
    if (this.paginator) {
      this.paginator.page
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((page: PageEvent) => {
          this.pagination.page = page.pageIndex;
          this.pagination.size = page.pageSize;
          this.filterUsers();
        });
    }

    if (this.sort) {
      this.sort.sortChange
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe((sort: Sort) => {
          this.sortUsers(sort);
        });
    }
  }

  ngOnDestroy(): void {
    this._unsubscribeAll.next(null);
    this._unsubscribeAll.complete();
  }

  /**
   * ⭐ NEW: Subscribe to role changes from Role Management component
   */
  private subscribeToRoleChanges(): void {
    console.log('📢 Subscribing to role changes...');
    
    // Listen for role updates (permission changes)
    this._roleStateService.roleUpdated$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(update => {
        if (update) {
          console.log('📢 ROLE UPDATED notification received:', update);
          
          // Reload roles to get latest permissions
          this.loadRolesFromDatabase();
          
          // Update users who have this role
          this.updateUsersWithRole(update.roleName);
          
          // Show notification
          this.showRoleUpdateNotification(`Role "${update.roleName}" permissions updated`);
        }
      });

    // Listen for role deletions
    this._roleStateService.roleDeleted$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(roleId => {
        if (roleId) {
          console.log('📢 ROLE DELETED notification received:', roleId);
          
          // Reload roles and users
          this.loadRolesFromDatabase();
          this.loadUsers();
          
          // Show notification
          this.showRoleUpdateNotification('A role has been deleted. User list refreshed.');
        }
      });

    // Listen for new roles
    this._roleStateService.roleCreated$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(update => {
        if (update) {
          console.log('📢 ROLE CREATED notification received:', update);
          
          // Reload roles
          this.loadRolesFromDatabase();
          
          // Show notification
          this.showRoleUpdateNotification(`New role "${update.roleName}" created`);
        }
      });
  }

  /**
   * ⭐ NEW: Update users in the list who have the changed role
   */
  private updateUsersWithRole(roleName: string): void {
    const users = this._users.getValue();
    let updatedCount = 0;
    
    // Mark users with this role as needing refresh
    const updatedUsers = users.map(user => {
      if (user.roles === roleName) {
        updatedCount++;
        // Flag for UI update - you might want to show an indicator
        return { ...user, _roleUpdated: true };
      }
      return user;
    });
    
    this._users.next(updatedUsers);
    this.filterUsers();
    
    console.log(`✓ Flagged ${updatedCount} users with role: ${roleName} for update`);
  }

  /**
   * ⭐ NEW: Show notification about role updates
   */
  private showRoleUpdateNotification(message: string): void {
    console.log('🔔 Role Update:', message);
    
    // Option 1: Browser notification (if permission granted)
    if ('Notification' in window && Notification.permission === 'granted') {
      new Notification('Role Management Update', {
        body: message,
        icon: '/assets/icons/icon-72x72.png' // Adjust path
      });
    }
    
    // Option 2: Console log (always)
    console.log('📬', message);
    
    // Option 3: Show flash message
    this.flashMessage = 'success';
    setTimeout(() => {
      this.flashMessage = null;
      this._changeDetectorRef.markForCheck();
    }, 3000);
    
    // Option 4: Add a visual indicator in the UI
    // You could add a badge or highlight to the role management button
  }

  /**
   * Load roles from database
   */
  private loadRolesFromDatabase(): void {
    this.rolesLoading = true;
    this.rolesLoaded = false;
    
    console.log('Loading roles from database...');
    
    this._roleService.getRoles()
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(
        (roles: Role[]) => {
          console.log('✓ Roles loaded from database:', roles);
          this.allRoles = roles;
          
          // Filter roles based on current user's permissions
          this.setAvailableRoles(roles);
          
          this.rolesLoading = false;
          this.rolesLoaded = true;
          this._changeDetectorRef.markForCheck();
          
          console.log('Available roles for dropdown:', this.availableRoles);
        },
        (error) => {
          console.error('✗ Error loading roles:', error);
          this.rolesLoading = false;
          this.rolesLoaded = true;
          
          // Fallback to empty roles if error
          this.availableRoles = [];
          this._changeDetectorRef.markForCheck();
        }
      );
  }

  /**
   * Filter roles based on current user's role
   */
  private setAvailableRoles(roles: Role[]): void {
    let filteredRoles: Role[] = [];
    
    if (this.isClient) {
      // Clients can ONLY assign Refiller role
      filteredRoles = roles.filter(role => role.name === 'Refiller');
      console.log('Client role - Filtered to Refiller only');
    } else if (this.isAdmin) {
      // Admins can assign any role from database
      filteredRoles = roles;
      console.log('Admin role - All roles available');
    } else {
      // Other roles - no permissions to assign roles
      filteredRoles = [];
      console.log('Other role - No role assignment permissions');
    }
    
    // Convert to dropdown format
    this.availableRoles = this._roleService.rolesToDropdownFormat(filteredRoles);
    
    console.log('Available roles for dropdown:', this.availableRoles);
  }

  // ⭐ NEW: Load Clients for assignment dropdown
  private loadClients(): void {
    this.clientsLoading = true;
    this._userService.getClients()
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe({
        next: (clients) => {
          this.availableClients = clients;
          this.clientsLoading = false;
          console.log('Loaded clients:', clients);
        },
        error: (err) => {
          console.error('Error loading clients:', err);
          this.clientsLoading = false;
        }
      });
  }

  // ⭐ NEW: Load machines for selected client
  private loadClientMachines(clientId: number): void {
    if (!clientId) {
      this.availableMachines = [];
      return;
    }
    
    this.machinesLoading = true;
    this._userService.getClientMachines(clientId)
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe({
        next: (machines) => {
          this.availableMachines = machines;
          this.machinesLoading = false;
          console.log('Loaded machines for client:', machines);
        },
        error: (err) => {
          console.error('Error loading client machines:', err);
          this.machinesLoading = false;
        }
      });
  }

  // ⭐ NEW: Remove machine ID from selection
  removeMachineId(machineId: string): void {
    this.selectedMachineIds = this.selectedMachineIds.filter(id => id !== machineId);
  }

  /**
   * Refresh roles from database
   */
  refreshRoles(): void {
    console.log('Refreshing roles from database...');
    this.loadRolesFromDatabase();
  }

  /**
   * Check if form is ready to submit
   */
  isFormReady(): boolean {
    return this.selectedUserForm.valid && !this.isLoading && !this.rolesLoading && this.rolesLoaded;
  }

  /**
   * Debug form validation
   */
  debugFormValidation(): void {
    console.log('=== FORM VALIDATION DEBUG ===');
    console.log('Form valid:', this.selectedUserForm.valid);
    console.log('Form errors:', this.selectedUserForm.errors);
    console.log('Roles loaded:', this.rolesLoaded);
    console.log('Roles loading:', this.rolesLoading);
    console.log('Available roles:', this.availableRoles);
    
    Object.keys(this.selectedUserForm.controls).forEach(key => {
      const control = this.selectedUserForm.get(key);
      if (control?.invalid) {
        console.log(`❌ ${key}:`, {
          errors: control.errors,
          value: control.value,
          touched: control.touched,
          dirty: control.dirty
        });
      } else {
        console.log(`✓ ${key}:`, control?.value);
      }
    });
    console.log('=== END DEBUG ===');
  }

  trackByFn(index: number, item: any): any {
    return item.id || index;
  }

  loadUsers(): void {
    this.isLoading = true;

    this._userService.getUsers()
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe(
        (users: User[]) => {
          // Filter users based on current user role
          let filteredUsers = users;
          
          if (this.isClient) {
            // Clients can only see Refillers they created
            filteredUsers = users.filter(u => u.roles === 'Refiller');
          }
          
          this._users.next(filteredUsers);
          this.pagination.length = filteredUsers.length;
          this.isLoading = false;
          this.filterUsers();
          this._changeDetectorRef.markForCheck();
        },
        (error) => {
          console.error('Error loading users:', error);
          this.isLoading = false;
          this.showFlashMessage('error');
        }
      );
  }

  filterUsers(): void {
    let filteredUsers = this._users.getValue();
    const searchTerm = this.searchInputControl.value?.toLowerCase() || '';

    if (searchTerm) {
      filteredUsers = filteredUsers.filter(user => 
        user.username.toLowerCase().includes(searchTerm) ||
        user.email.toLowerCase().includes(searchTerm) ||
        user.contact.includes(searchTerm) ||
        user.roles.toLowerCase().includes(searchTerm) ||
        (user.user_id && user.user_id.toLowerCase().includes(searchTerm))
      );
    }

    this.pagination.length = filteredUsers.length;
    
    const start = this.pagination.page * this.pagination.size;
    const end = start + this.pagination.size;
    filteredUsers = filteredUsers.slice(start, end);

    this.dataSource.data = filteredUsers;
    this._changeDetectorRef.markForCheck();
  }

  sortUsers(sort: Sort): void {
    const users = this._users.getValue().slice();
    
    if (!sort.active || sort.direction === '') {
      this._users.next(users);
      return;
    }

    const sortedUsers = users.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'id': return this.compare(a.id, b.id, isAsc);
        case 'user_id': return this.compare(a.user_id, b.user_id, isAsc);
        case 'username': return this.compare(a.username, b.username, isAsc);
        case 'email': return this.compare(a.email, b.email, isAsc);
        case 'contact': return this.compare(a.contact, b.contact, isAsc);
        case 'roles': return this.compare(a.roles, b.roles, isAsc);
        case 'user_status': return this.compare(a.user_status, b.user_status, isAsc);
        default: return 0;
      }
    });

    this._users.next(sortedUsers);
    this.filterUsers();
  }

  private compare(a: string | number | undefined, b: string | number | undefined, isAsc: boolean): number {
    return (a! < b! ? -1 : 1) * (isAsc ? 1 : -1);
  }

  toggleDetails(userId?: number): void {
    if (this.selectedUser && this.selectedUser.id === userId) {
      this.closeDetails();
      return;
    }

    const user = this._users.getValue().find(u => u.id === userId);
    if (user) {
      this.selectedUser = { ...user };
      this.selectedUserForm.patchValue({
        username: user.username,
        email: user.email,
        contact: user.contact,
        roles: user.roles,
        user_status: user.user_status,
        assigned_to: user.assigned_to || ''
      });

      this.photoPreview = this._userService.getFullFileUrl(user.photo);
      this.logoPreview = this._userService.getFullFileUrl(user.company_logo);

      // Load assigned machines for Refillers
      if (user.roles === 'Refiller') {
        this.selectedMachineIds = user.assigned_machines?.map((m: any) => m.machine_id) || [];
        
        // Load available machines if client is assigned
        if (user.assigned_to) {
          this.loadClientMachines(user.assigned_to);
        }
      } else {
        this.selectedMachineIds = [];
      }

      // For existing users, password is optional
      this.selectedUserForm.get('password')?.clearValidators();
      this.selectedUserForm.get('password')?.updateValueAndValidity();
      
      this._changeDetectorRef.markForCheck();
    }
  }

  getFullFileUrl(path: string | undefined): string | null {
    return this._userService.getFullFileUrl(path);
  }

  closeDetails(): void {
    this.selectedUser = null;
    this.selectedPhoto = null;
    this.selectedLogo = null;
    this.selectedDocuments = [];
    this.photoPreview = null;
    this.logoPreview = null;
    this.viewingDocument = null;
    this.selectedMachineIds = [];
    this.selectedUserForm.reset();
    this._changeDetectorRef.markForCheck();
  }

  createUser(): void {
    console.log('Creating new user...');
    console.log('Roles loaded:', this.rolesLoaded);
    console.log('Available roles:', this.availableRoles);
    
    if (this.selectedUser) {
      this.closeDetails();
    }
    
    // Determine default role
    let defaultRole = '';
    
    if (this.isClient) {
      // Clients can only create Refiller users
      defaultRole = 'Refiller';
      console.log('Client creating user - default role: Refiller');
    } else if (this.availableRoles.length > 0) {
      // For admins, use first available role as default
      defaultRole = this.availableRoles[0].value;
      console.log('Admin creating user - default role:', defaultRole);
    }
    
    const newUser: User = {
      username: '',
      email: '',
      contact: '',
      roles: defaultRole,
      user_status: 'Active',
      password: ''
    };

    this.selectedUser = newUser;
    
    // Reset form and set defaults
    this.selectedUserForm.reset();
    this.selectedUserForm.patchValue({
      user_status: 'Active',
      roles: defaultRole,
      assigned_to: ''
    });
    
    this.selectedMachineIds = [];

    // For new users, password is required
    this.selectedUserForm.get('password')?.setValidators([Validators.required, Validators.minLength(6)]);
    this.selectedUserForm.get('password')?.updateValueAndValidity();

    // Scroll to top
    window.scrollTo({ top: 0, behavior: 'smooth' });
    
    this._changeDetectorRef.markForCheck();
    
    // Debug form state
    this.debugFormValidation();
  }

  onPhotoSelected(event: any): void {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
      this.selectedPhoto = file;
      
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.photoPreview = e.target.result;
        this._changeDetectorRef.markForCheck();
      };
      reader.readAsDataURL(file);
    }
  }

  onLogoSelected(event: any): void {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
      this.selectedLogo = file;
      
      const reader = new FileReader();
      reader.onload = (e: any) => {
        this.logoPreview = e.target.result;
        this._changeDetectorRef.markForCheck();
      };
      reader.readAsDataURL(file);
    }
  }

  onDocumentsSelected(event: any): void {
    const files = Array.from(event.target.files) as File[];
    
    files.forEach(file => {
      this.selectedDocuments.push({
        file: file,
        documentType: 'aadhar',
        documentTypeOther: ''
      });
    });
    
    this._changeDetectorRef.markForCheck();
  }

  removeDocument(index: number): void {
    this.selectedDocuments.splice(index, 1);
    this._changeDetectorRef.markForCheck();
  }

  updateDocumentType(index: number, type: string): void {
    this.selectedDocuments[index].documentType = type;
    if (type !== 'other') {
      this.selectedDocuments[index].documentTypeOther = '';
    }
    this._changeDetectorRef.markForCheck();
  }

  updateDocumentTypeOther(index: number, value: string): void {
    this.selectedDocuments[index].documentTypeOther = value;
    this._changeDetectorRef.markForCheck();
  }

  viewDocument(doc: UserDocument): void {
    this.viewingDocument = doc;

    const fullUrl = this._userService.getFullFileUrl(doc.path);
    if (!fullUrl) return;
    
    const fileExtension = doc.path.split('.').pop()?.toLowerCase();
    const viewableExtensions = ['pdf', 'jpg', 'jpeg', 'png', 'gif'];
    
    if (fileExtension && viewableExtensions.includes(fileExtension)) {
      window.open(fullUrl, '_blank');
    } else {
      const link = window.document.createElement('a');
      link.href = fullUrl;
      link.download = doc.filename;
      link.click();
    }
  }

  getDocumentTypeLabel(type: string): string {
    const docType = this.documentTypes.find(dt => dt.value === type);
    return docType ? docType.label : type;
  }

  getDocumentIcon(filename: string): string {
    const extension = filename.split('.').pop()?.toLowerCase();
    switch (extension) {
      case 'pdf': return 'picture_as_pdf';
      case 'doc':
      case 'docx': return 'description';
      case 'jpg':
      case 'jpeg':
      case 'png':
      case 'gif': return 'image';
      default: return 'insert_drive_file';
    }
  }

  deleteExistingDocument(documentPath: string): void {
    if (!this.selectedUser?.id) return;

    if (confirm('Are you sure you want to delete this document?')) {
      this.isLoading = true;
      
      this._userService.deleteUserDocument(this.selectedUser.id, documentPath)
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe(
          () => {
            if (this.selectedUser?.documents) {
              this.selectedUser.documents = this.selectedUser.documents.filter(
                doc => doc.path !== documentPath
              );
            }
            this.showFlashMessage('success');
            this.isLoading = false;
            this.loadUsers();
          },
          (error) => {
            console.error('Error deleting document:', error);
            this.showFlashMessage('error');
            this.isLoading = false;
          }
        );
    }
  }

  updateSelectedUser(): void {
    // Debug form before submission
    this.debugFormValidation();
    
    if (!this.selectedUserForm.valid) {
      console.warn('Form is invalid, cannot submit');
      alert('Please fill in all required fields correctly.');
      return;
    }

    if (!this.rolesLoaded) {
      console.warn('Roles not loaded yet');
      alert('Please wait for roles to load.');
      return;
    }

    this.isLoading = true;
    const formValue = this.selectedUserForm.value;
    
    console.log('Submitting user with role:', formValue.roles);
    console.log('Assigned to client:', formValue.assigned_to);
    console.log('Selected machines:', this.selectedMachineIds);
    
    if (this.selectedUser?.id) {
      // Update existing user
      this._userService.updateUser(
        this.selectedUser.id,
        formValue,
        this.selectedPhoto || undefined,
        this.selectedLogo || undefined,
        this.selectedDocuments.length > 0 ? this.selectedDocuments : undefined
      )
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe(
          () => {
            console.log('✓ User updated successfully');
            
            // Update machine assignments if Refiller
            if (formValue.roles === 'Refiller' && this.isAdmin && this.selectedMachineIds.length > 0) {
              this._userService.updateRefillerMachines(this.selectedUser!.id!, this.selectedMachineIds)
                .subscribe({
                  next: (machineResponse) => {
                    console.log('Machines updated:', machineResponse);
                    this.loadUsers();
                    this.showFlashMessage('success');
                    this.closeDetails();
                    this.isLoading = false;
                  },
                  error: (err) => {
                    console.error('Error updating machines:', err);
                    this.showFlashMessage('error');
                    this.isLoading = false;
                  }
                });
            } else {
              this.loadUsers();
              this.showFlashMessage('success');
              this.closeDetails();
              this.isLoading = false;
            }
          },
          (error) => {
            console.error('✗ Error updating user:', error);
            this.showFlashMessage('error');
            this.isLoading = false;
          }
        );
    } else {
      // Create new user
      this._userService.addUser(
        formValue,
        this.selectedPhoto || undefined,
        this.selectedLogo || undefined,
        this.selectedDocuments.length > 0 ? this.selectedDocuments : undefined
      )
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe(
          (created) => {
            console.log('✓ User created successfully');
            
            // Assign machines if Refiller
            if (formValue.roles === 'Refiller' && this.isAdmin && this.selectedMachineIds.length > 0) {
              this._userService.assignMachinesToRefiller(created.id!, this.selectedMachineIds)
                .subscribe({
                  next: (machineResponse) => {
                    console.log('Machines assigned:', machineResponse);
                    this.loadUsers();
                    this.showFlashMessage('success');
                    this.closeDetails();
                    this.isLoading = false;
                  },
                  error: (err) => {
                    console.error('Error assigning machines:', err);
                    this.showFlashMessage('error');
                    this.isLoading = false;
                  }
                });
            } else {
              this.loadUsers();
              this.showFlashMessage('success');
              this.closeDetails();
              this.isLoading = false;
            }
          },
          (error) => {
            console.error('✗ Error creating user:', error);
            this.showFlashMessage('error');
            this.isLoading = false;
          }
        );
    }
  }

  deleteSelectedUser(): void {
    if (!this.selectedUser?.id) {
      return;
    }

    if (confirm('Are you sure you want to delete this user? All associated files will be deleted.')) {
      this.isLoading = true;
      
      this._userService.deleteUser(this.selectedUser.id)
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe(
          () => {
            this.loadUsers();
            this.closeDetails();
            this.showFlashMessage('success');
            this.isLoading = false;
          },
          (error) => {
            console.error('Error deleting user:', error);
            this.showFlashMessage('error');
            this.isLoading = false;
          }
        );
    }
  }

  onStatusChange(event: any): void {
    const newStatus = event.checked ? 'Active' : 'Inactive';
    this.selectedUserForm.patchValue({
      user_status: newStatus
    });
    this._changeDetectorRef.markForCheck();
  }

  private showFlashMessage(type: 'success' | 'error'): void {
    this.flashMessage = type;
    
    setTimeout(() => {
      this.flashMessage = null;
      this._changeDetectorRef.markForCheck();
    }, 3000);
  }

  getFileSize(bytes: number): string {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  }
}