const pros = {
  simplicity: "Minimal boilerplate",
  performance: "Faster than observables",
  composability: "Infinite feature composition",
  typeScript: "Excellent type inference",
  learning: "Easy to learn",
  migration: "Easy from Component Store",
  modern: "Uses latest Angular features",
  functional: "Functional programming FTW",
  noAsyncPipes: "Direct template access",
  autoTracking: "Automatic change detection"
};

// Developer happiness: 📈📈📈

const cons = {
  devTools: "No Redux DevTools (yet)",
  timeTravel: "No time-travel debugging",
  ecosystem: "Smaller ecosystem than NgRx Store",
  migration: "Can't migrate from NgRx Store easily",
  documentation: "Still growing",
  community: "Smaller than NgRx Store",
  maturity: "Relatively new (2024)",
  breaking: "API might change"
};

// Reality check: Nothing is perfect

function chooseStateManagement(project: Project): Solution {
  // Massive enterprise app with complex state
  if (project.size === 'massive' && project.needsTimeTravel) {
    return 'NgRx Store (Redux)';
    // You need DevTools, time-travel, the whole shebang
  }

  // Medium to large app
  if (project.size >= 'medium' && project.developers > 3) {
    return 'NgRx Signal Store';
    // Perfect balance of power and simplicity
  }

  // Small app, simple state
  if (project.size === 'small' && project.developers <= 2) {
    return 'Pure Signals or Signal Store';
    // Keep it simple
  }

  // Legacy app, already using Component Store
  if (project.isLegacy && project.uses === 'ComponentStore') {
    return 'Gradually migrate to Signal Store';
    // Easy migration path
  }

  // Tiny app
  if (project.size === 'tiny') {
    return 'Just use Signals';
    // Don't over-engineer
  }
}

// BEFORE: Component Store
@Injectable()
export class UserStore extends ComponentStore<UserState> {
  readonly users$ = this.select(state => state.users);

  readonly addUser = this.updater((state, user: User) => ({
    ...state,
    users: [...state.users, user]
  }));

  readonly loadUsers = this.effect((trigger$: Observable<void>) =>
    trigger$.pipe(
      switchMap(() => this.userService.getUsers()),
      tap(users => this.patchState({ users }))
    )
  );
}

// AFTER: Signal Store (straightforward conversion)
export const UserStore = signalStore(
  withState<UserState>({ users: [] }),

  withComputed((store) => ({
    // users are already signals, no need for selector
  })),

  withMethods((store, userService = inject(UserService)) => ({
    addUser(user: User) {
      store.update(state => ({
        users: [...state.users, user]
      }));
    },

    loadUsers: rxMethod<void>(
      pipe(
        switchMap(() => userService.getUsers()),
        tap(users => store.update({ users }))
      )
    )
  }))
);

// Migration time: ~30 minutes per store
// Breaking changes: Minimal

// You have:
// - actions/
// - reducers/
// - effects/
// - selectors/

// You need to:
// 1. Understand current state structure
// 2. Rewrite everything in Signal Store
// 3. Update all components
// 4. Remove old files

// Time: Days to weeks
// Pain level: High
// Worth it?: Maybe (depends on app size)

// Recommendation: Do it gradually, feature by feature

// Create reusable feature
export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false }),
    withMethods((store) => ({
      setLoading(loading: boolean) {
        store.update({ loading });
      }
    }))
  );
}

// Use in multiple stores
export const UserStore = signalStore(
  withState({ users: [] }),
  withLoading(),  // Reusable!
  withMethods(/* ... */)
);

export const ProductStore = signalStore(
  withState({ products: [] }),
  withLoading(),  // Same feature!
  withMethods(/* ... */)
);

// DRY principle achieved! 🎉

import { withEntities, setEntity, updateEntity } from '@ngrx/signals/entities';

export const ProductStore = signalStore(
  withEntities<Product>(),  // Magic entity features!

  withComputed((store) => ({
    // Auto-generated selectors
    selectedProduct: computed(() =>
      store.entities().find(p => p.id === store.selectedId())
    )
  })),

  withMethods((store) => ({
    // Entity helpers
    addProduct: (product: Product) =>
      store.setEntity(product),

    updateProduct: (id: number, changes: Partial<Product>) =>
      store.updateEntity(id, changes),

    // Built-in entity management!
  }))
);

// Local + Global stores working together
export const GlobalAuthStore = signalStore(
  { providedIn: 'root' },
  withState({ user: null, token: null })
);

export const LocalCartStore = signalStore(
  withState({ items: [] }),
  withMethods((store, auth = inject(GlobalAuthStore)) => ({
    checkout() {
      const user = auth.user();  // Access global store!
      const items = store.items();
      // Process checkout
    }
  }))
);

// ❌ Don't use Signal Store for this
@Component({
  template: `<button (click)="toggle()">{{ isOpen }}</button>`
})
class SimpleToggle {
  isOpen = signal(false);  // Just use signal!

  toggle() {
    this.isOpen.update(v => !v);
  }
}

// Over-engineering alert! 🚨

Week 1: "Let's migrate to Signal Store!"
Week 2: "This is taking longer than expected..."
Week 3: "Why did we start this?!"
Week 4: "Ok, it's starting to work..."
Week 5: "Actually this is nice..."
Week 6: "I love Signal Store!" ❤️

Lesson: Plan migration carefully, do it gradually

// Junior developer's first Signal Store
export const Store = signalStore(
  withState({ data: [] }),
  withMethods((store) => ({
    // ❌ Mutation! (bad)
    addItem(item) {
      store.data().push(item);  // NOPE!
    },

    // ✅ Immutable update (good)
    addItemCorrect(item) {
      store.update(state => ({
        data: [...state.data, item]
      }));
    }
  }))
);

// Lesson: Train team on immutability principles

const verdict = {
  for: {
    smallApps: "Perfect",
    mediumApps: "Perfect",
    largeApps: "Very good",
    massiveApps: "Consider NgRx Store first"
  },

  benefits: [
    "90% less boilerplate",
    "Better performance",
    "Easier to learn",
    "Modern Angular idioms",
    "Great developer experience"
  ],

  tradeoffs: [
    "No Redux DevTools (yet)",
    "Smaller ecosystem",
    "Relatively new"
  ],

  conclusion: "The benefits far outweigh the tradeoffs for most projects"
};

console.log("Signal Store: The messiah we were waiting for? YES!");

Phase 1: New features
  → Use Signal Store immediately
  → No migration needed
  → Build experience

Phase 2: Refactoring
  → Convert Component Store to Signal Store
  → Easy migration
  → Gradual process

Phase 3: Legacy code
  → Consider NgRx Store migration
  → Only if really needed
  → Might not be worth it

Phase 4: Profit
  → Less code to maintain
  → Happier developers
  → Better performance
  → 🎉

Developer: "I need state management"
*looks at options*
Developer: "NgRx Store? 5 files per feature..."
Developer: "Component Store? Better but still RxJS..."
Developer: "Pure Signals? Too simple..."
Developer: *sadness*

Developer: "I need state management"
*uses Signal Store*
Developer: "One file, minimal boilerplate, signals everywhere"
Developer: "THIS IS PERFECT!" ✨

if (you.are === 'Angular developer') {
  learn(SignalStore);
  embrace(Signals);
  reduce(Boilerplate);
  increase(Happiness);
}

// The messiah has arrived. Will you follow?