// ❌ 강한 결합: 컴포넌트 내부에서 직접 데이터 fetch
@Component({
  selector: "app-user-profile",
  template: `<div>{{ user?.name }}</div>`,
})
export class UserProfileComponent implements OnInit {
  user: User;
 
  constructor(private userService: UserService) {}
 
  ngOnInit() {
    // 이 컴포넌트는 "사용자 데이터가 필요한 컨텍스트"에서만 사용 가능
    this.userService.getCurrentUser().subscribe((user) => {
      this.user = user;
    });
  }
}

// ✅ 느슨한 결합: @Input으로 데이터를 받음
@Component({
  selector: "app-user-profile",
  template: `<div>{{ user?.name }}</div>`,
})
export class UserProfileComponent {
  @Input() user: User;
}

// 자식 컴포넌트
@Component({
  selector: "app-todo-item",
  template: `
    <div class="todo-item">
      <span>{{ todo.title }}</span>
      <button (click)="onDelete()">삭제</button>
    </div>
  `,
})
export class TodoItemComponent {
  @Input() todo: Todo;
  @Output() delete = new EventEmitter<number>();
 
  onDelete() {
    this.delete.emit(this.todo.id);
  }
}
 
// 부모 컴포넌트
@Component({
  selector: "app-todo-list",
  template: `
    <app-todo-item
      *ngFor="let todo of todos"
      [todo]="todo"
      (delete)="handleDelete($event)"
    >
    </app-todo-item>
  `,
})
export class TodoListComponent {
  todos: Todo[] = [];
 
  handleDelete(id: number) {
    this.todoService.delete(id).subscribe();
  }
}

// 서비스 정의
@Injectable({ providedIn: 'root' })
export class NotificationService {
  private messages$ = new Subject<string>();
 
  notify(message: string) {
    this.messages$.next(message);
  }
 
  getMessages() {
    return this.messages$.asObservable();
  }
}
 
// 컴포넌트 A: 알림 발송
@Component({ ... })
export class OrderComponent {
  constructor(private notification: NotificationService) {}
 
  placeOrder() {
    // 주문 로직...
    this.notification.notify('주문이 완료되었습니다');
  }
}
 
// 컴포넌트 B: 알림 표시 (A와 직접적인 의존 없음)
@Component({ ... })
export class NotificationComponent {
  constructor(private notification: NotificationService) {}
 
  messages$ = this.notification.getMessages();
}

@Injectable({ providedIn: "root" })
export class CartService {
  private items$ = new BehaviorSubject<CartItem[]>([]);
 
  getItems() {
    return this.items$.asObservable();
  }
 
  addItem(item: CartItem) {
    const current = this.items$.getValue();
    this.items$.next([...current, item]);
  }
}

// Container: 비즈니스 로직 담당
@Component({
  selector: "app-user-list-container",
  template: `
    <app-user-list
      [users]="users$ | async"
      [loading]="loading$ | async"
      (userSelect)="onUserSelect($event)"
    >
    </app-user-list>
  `,
})
export class UserListContainerComponent {
  users$ = this.userService.getUsers();
  loading$ = this.userService.loading$;
 
  constructor(private userService: UserService) {}
 
  onUserSelect(user: User) {
    this.router.navigate(["/users", user.id]);
  }
}
 
// Presenter: 순수하게 UI만 담당
@Component({
  selector: "app-user-list",
  template: `
    <div *ngIf="loading">로딩 중...</div>
    <ul *ngIf="!loading">
      <li *ngFor="let user of users" (click)="userSelect.emit(user)">
        {{ user.name }}
      </li>
    </ul>
  `,
})
export class UserListComponent {
  @Input() users: User[];
  @Input() loading: boolean;
  @Output() userSelect = new EventEmitter<User>();
}

// Angular에서는 RxJS Subject로 구현
@Injectable({ providedIn: "root" })
export class EventBus {
  private events$ = new Subject<AppEvent>();
 
  emit(event: AppEvent) {
    this.events$.next(event);
  }
 
  on(eventType: string) {
    return this.events$.pipe(filter((event) => event.type === eventType));
  }
}

@Injectable({ providedIn: "root" }) // 앱 전체에서 단일 인스턴스
export class ConfigService {
  private config: AppConfig;
 
  getConfig() {
    return this.config;
  }
}

@Injectable({ providedIn: "root" })
export class NotificationFactory {
  create(type: "success" | "error" | "warning", message: string): Notification {
    switch (type) {
      case "success":
        return new SuccessNotification(message);
      case "error":
        return new ErrorNotification(message);
      case "warning":
        return new WarningNotification(message);
    }
  }
}

// 메서드 실행 시간을 로깅하는 데코레이터
function LogExecutionTime() {
  return function (
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor
  ) {
    const original = descriptor.value;
 
    descriptor.value = function (...args: any[]) {
      const start = performance.now();
      const result = original.apply(this, args);
      const end = performance.now();
      console.log(`${propertyKey} 실행 시간: ${end - start}ms`);
      return result;
    };
  };
}
 
class DataProcessor {
  @LogExecutionTime()
  processLargeData(data: any[]) {
    // 데이터 처리 로직
  }
}