@Component({
  selector: 'app-domain-list',
  standalone: true,
  imports: [
    CommonModule,
    RouterLink,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatButtonModule,
    MatIconModule,
    MatChipsModule
  ],
  template: `
    

      
        Rechercher un domaine
        
        search
      
      
      
    
  `,
  styles: [`
    .domain-list-container {
      padding: 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
  `]
})
export class DomainListComponent implements OnInit {
  private domainService = inject(DomainService);
  
  searchControl = new FormControl('');
  dataSource = new MatTableDataSource();
  
  ngOnInit() {
    this.loadDomains();
    this.setupSearch();
  }
  
  private loadDomains() {
    this.domainService.getDomains()
      .subscribe(domains => this.dataSource.data = domains);
  }
  
  private setupSearch() {
    this.searchControl.valueChanges
      .pipe(debounceTime(300), distinctUntilChanged())
      .subscribe(query => this.applyFilter(query));
  }
}

@Injectable({
  providedIn: 'root'
})
export class DomainStore {
  private http = inject(HttpClient);
  
  // State signals
  private domainsSignal = signal([]);
  private loadingSignal = signal(false);
  private errorSignal = signal(null);
  
  // Computed signals
  readonly domains = this.domainsSignal.asReadonly();
  readonly loading = this.loadingSignal.asReadonly();
  readonly error = this.errorSignal.asReadonly();
  readonly domainCount = computed(() => this.domainsSignal().length);
  readonly activeDomains = computed(() => 
    this.domainsSignal().filter(d => d.status === 'active')
  );
  
  // Actions
  loadDomains() {
    this.loadingSignal.set(true);
    this.errorSignal.set(null);
    
    this.http.get('/api/domains')
      .subscribe({
        next: (domains) => {
          this.domainsSignal.set(domains);
          this.loadingSignal.set(false);
        },
        error: (error) => {
          this.errorSignal.set(error.message);
          this.loadingSignal.set(false);
        }
      });
  }
  
  addDomain(domain: Omit) {
    this.http.post('/api/domains', domain)
      .subscribe(newDomain => {
        this.domainsSignal.update(domains => [...domains, newDomain]);
      });
  }
}