// order-state.ts -- 注文の状態管理
 
// ============================
// State インターフェース
// ============================
interface OrderState {
  readonly name: string;
  pay(context: OrderContext): void;
  ship(context: OrderContext): void;
  deliver(context: OrderContext): void;
  cancel(context: OrderContext): void;
}
 
// ============================
// Context: 注文
// ============================
class OrderContext {
  private state: OrderState;
  private history: { state: string; timestamp: Date; action: string }[] = [];
 
  constructor(
    public readonly orderId: string,
    initialState: OrderState = new PendingState()
  ) {
    this.state = initialState;
    this.recordTransition('init');
  }
 
  setState(state: OrderState, action: string = 'transition'): void {
    const from = this.state.name;
    this.state = state;
    this.recordTransition(action);
    console.log(`[${this.orderId}] ${from} → ${state.name} (${action})`);
  }
 
  getStateName(): string {
    return this.state.name;
  }
 
  getHistory(): Array<{ state: string; timestamp: Date; action: string }> {
    return [...this.history];
  }
 
  private recordTransition(action: string): void {
    this.history.push({
      state: this.state.name,
      timestamp: new Date(),
      action,
    });
  }
 
  // 操作を状態に委譲
  pay(): void { this.state.pay(this); }
  ship(): void { this.state.ship(this); }
  deliver(): void { this.state.deliver(this); }
  cancel(): void { this.state.cancel(this); }
}
 
// ============================
// Concrete State: Pending（未決済）
// ============================
class PendingState implements OrderState {
  readonly name = 'pending';
 
  pay(context: OrderContext): void {
    console.log('決済処理を実行...');
    context.setState(new PaidState(), 'pay');
  }
 
  ship(_context: OrderContext): void {
    throw new Error('未決済の注文は発送できません');
  }
 
  deliver(_context: OrderContext): void {
    throw new Error('未決済の注文は配達完了にできません');
  }
 
  cancel(context: OrderContext): void {
    console.log('注文をキャンセルしました');
    context.setState(new CancelledState(), 'cancel');
  }
}
 
// ============================
// Concrete State: Paid（決済済み）
// ============================
class PaidState implements OrderState {
  readonly name = 'paid';
 
  pay(_context: OrderContext): void {
    throw new Error('すでに決済済みです');
  }
 
  ship(context: OrderContext): void {
    console.log('発送処理を実行...');
    context.setState(new ShippedState(), 'ship');
  }
 
  deliver(_context: OrderContext): void {
    throw new Error('発送前に配達完了にはできません');
  }
 
  cancel(context: OrderContext): void {
    console.log('返金処理を実行...');
    context.setState(new CancelledState(), 'cancel');
  }
}
 
// ============================
// Concrete State: Shipped（発送済み）
// ============================
class ShippedState implements OrderState {
  readonly name = 'shipped';
 
  pay(_context: OrderContext): void {
    throw new Error('発送済みの注文に決済はできません');
  }
 
  ship(_context: OrderContext): void {
    throw new Error('すでに発送済みです');
  }
 
  deliver(context: OrderContext): void {
    console.log('配達完了を記録...');
    context.setState(new DeliveredState(), 'deliver');
  }
 
  cancel(_context: OrderContext): void {
    throw new Error('発送済みの注文はキャンセルできません（返品手続きをご利用ください）');
  }
}
 
// ============================
// Concrete State: Delivered（配達完了） -- 終端状態
// ============================
class DeliveredState implements OrderState {
  readonly name = 'delivered';
 
  pay(): void { throw new Error('配達済みの注文に決済はできません'); }
  ship(): void { throw new Error('配達済みの注文は発送できません'); }
  deliver(): void { throw new Error('すでに配達済みです'); }
  cancel(): void { throw new Error('配達済みの注文はキャンセルできません'); }
}
 
// ============================
// Concrete State: Cancelled（キャンセル済み） -- 終端状態
// ============================
class CancelledState implements OrderState {
  readonly name = 'cancelled';
 
  pay(): void { throw new Error('キャンセル済みの注文に決済はできません'); }
  ship(): void { throw new Error('キャンセル済みの注文は発送できません'); }
  deliver(): void { throw new Error('キャンセル済みの注文は配達完了にできません'); }
  cancel(): void { throw new Error('すでにキャンセル済みです'); }
}
 
// ============================
// 使用例
// ============================
const order = new OrderContext('ORD-001');
console.log(order.getStateName()); // "pending"
 
order.pay();
// 決済処理を実行...
// [ORD-001] pending → paid (pay)
 
order.ship();
// 発送処理を実行...
// [ORD-001] paid → shipped (ship)
 
order.deliver();
// 配達完了を記録...
// [ORD-001] shipped → delivered (deliver)
 
try {
  order.cancel(); // 配達済みなのでエラー
} catch (e) {
  console.log(e.message); // "配達済みの注文はキャンセルできません"
}
 
console.log(order.getHistory());
// [
//   { state: 'pending', action: 'init', ... },
//   { state: 'paid', action: 'pay', ... },
//   { state: 'shipped', action: 'ship', ... },
//   { state: 'delivered', action: 'deliver', ... },
// ]

// typed-fsm.ts -- 型で遷移を制約する FSM
 
// ============================
// 状態とイベントの型定義
// ============================
type OrderStatus = 'pending' | 'paid' | 'shipped' | 'delivered' | 'cancelled';
type OrderEvent = 'PAY' | 'SHIP' | 'DELIVER' | 'CANCEL';
 
// ============================
// 許可される遷移を型レベルで定義
// ============================
type TransitionMap = {
  pending:   { PAY: 'paid'; CANCEL: 'cancelled' };
  paid:      { SHIP: 'shipped'; CANCEL: 'cancelled' };
  shipped:   { DELIVER: 'delivered' };
  delivered: {};  // 終端状態: 遷移先なし
  cancelled: {};  // 終端状態: 遷移先なし
};
 
// ============================
// 型安全な遷移関数の型
// ============================
// これにより、存在しない遷移はコンパイル時にエラーになる
type ValidEvent<S extends OrderStatus> = keyof TransitionMap[S];
type NextState<S extends OrderStatus, E extends ValidEvent<S>> =
  TransitionMap[S][E];
 
// ============================
// FSM クラス（型安全版）
// ============================
const STATE_TRANSITIONS: Record<
  OrderStatus,
  Partial<Record<OrderEvent, OrderStatus>>
> = {
  pending:   { PAY: 'paid', CANCEL: 'cancelled' },
  paid:      { SHIP: 'shipped', CANCEL: 'cancelled' },
  shipped:   { DELIVER: 'delivered' },
  delivered: {},
  cancelled: {},
};
 
class TypedStateMachine<S extends OrderStatus> {
  constructor(private currentState: S) {}
 
  getState(): S {
    return this.currentState;
  }
 
  /**
   * 型安全な遷移
   * - 許可されたイベントのみ引数に取れる
   * - 戻り値の型が次の状態に正しく推論される
   */
  transition<E extends ValidEvent<S>>(
    event: E
  ): TypedStateMachine<NextState<S, E> & OrderStatus> {
    const transitions = STATE_TRANSITIONS[this.currentState];
    const nextState = transitions[event as string as OrderEvent];
 
    if (!nextState) {
      throw new Error(
        `Invalid transition: ${this.currentState} + ${String(event)}`
      );
    }
 
    return new TypedStateMachine(
      nextState as NextState<S, E> & OrderStatus
    );
  }
}
 
// ============================
// 使用例: コンパイル時に不正な遷移を検出
// ============================
const machine = new TypedStateMachine('pending' as const);
 
const paid = machine.transition('PAY');       // OK: pending → paid
const shipped = paid.transition('SHIP');      // OK: paid → shipped
const delivered = shipped.transition('DELIVER'); // OK: shipped → delivered
 
// 以下はコンパイルエラー!
// machine.transition('SHIP');    // Error: 'SHIP' は pending で許可されていない
// machine.transition('DELIVER'); // Error: 'DELIVER' は pending で許可されていない
// paid.transition('DELIVER');    // Error: 'DELIVER' は paid で許可されていない
// delivered.transition('PAY');   // Error: delivered は終端状態（遷移先なし）
 
// 型推論の確認
type PaidMachine = typeof paid;    // TypedStateMachine<'paid'>
type ShippedMachine = typeof shipped; // TypedStateMachine<'shipped'>

// declarative-fsm.ts -- 設定ベースの FSM
 
// ============================
// FSM の設定型
// ============================
interface TransitionConfig<TContext> {
  target: string;
  guard?: (context: TContext) => boolean;
  action?: (context: TContext) => void;
}
 
interface StateConfig<TContext> {
  on?: Record<string, TransitionConfig<TContext>>;
  entry?: (context: TContext) => void;
  exit?: (context: TContext) => void;
}
 
interface MachineConfig<TContext> {
  id: string;
  initial: string;
  context: TContext;
  states: Record<string, StateConfig<TContext>>;
}
 
// ============================
// FSM エンジン
// ============================
type FSMEvent =
  | { type: 'transition'; from: string; to: string; event: string }
  | { type: 'guard-blocked'; from: string; event: string };
 
class FSM<TContext> {
  private currentState: string;
  private context: TContext;
  private config: MachineConfig<TContext>;
  private listeners: Array<(event: FSMEvent) => void> = [];
 
  constructor(config: MachineConfig<TContext>) {
    this.config = config;
    this.currentState = config.initial;
    this.context = { ...config.context };
 
    // 初期状態の entry アクションを実行
    this.config.states[this.currentState]?.entry?.(this.context);
  }
 
  /** イベントを送信して遷移を試みる */
  send(event: string): boolean {
    const stateConfig = this.config.states[this.currentState];
    const transition = stateConfig?.on?.[event];
 
    if (!transition) {
      console.warn(
        `No transition for event "${event}" in state "${this.currentState}"`
      );
      return false;
    }
 
    // ガード条件のチェック
    if (transition.guard && !transition.guard(this.context)) {
      this.notify({
        type: 'guard-blocked',
        from: this.currentState,
        event,
      });
      return false;
    }
 
    const from = this.currentState;
 
    // exit → action → entry の順序で実行
    stateConfig?.exit?.(this.context);
    transition.action?.(this.context);
 
    this.currentState = transition.target;
    this.config.states[this.currentState]?.entry?.(this.context);
 
    this.notify({ type: 'transition', from, to: this.currentState, event });
    return true;
  }
 
  getState(): string {
    return this.currentState;
  }
 
  getContext(): TContext {
    return { ...this.context };
  }
 
  /** 現在の状態で許可されるイベントの一覧 */
  allowedEvents(): string[] {
    const stateConfig = this.config.states[this.currentState];
    return stateConfig?.on ? Object.keys(stateConfig.on) : [];
  }
 
  subscribe(listener: (event: FSMEvent) => void): () => void {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }
 
  private notify(event: FSMEvent): void {
    for (const listener of this.listeners) {
      listener(event);
    }
  }
}
 
// ============================
// 使用例: 信号機
// ============================
const trafficLight = new FSM({
  id: 'traffic-light',
  initial: 'red',
  context: { cycleCount: 0 },
  states: {
    red: {
      entry: (ctx) => console.log(`赤信号 (サイクル: ${ctx.cycleCount})`),
      on: {
        TIMER: {
          target: 'green',
          action: (ctx) => { ctx.cycleCount++; },
        },
      },
    },
    green: {
      entry: () => console.log('青信号'),
      on: {
        TIMER: { target: 'yellow' },
      },
    },
    yellow: {
      entry: () => console.log('黄信号'),
      on: {
        TIMER: { target: 'red' },
      },
    },
  },
});
 
trafficLight.send('TIMER'); // 赤信号 (サイクル: 0) → 青信号
trafficLight.send('TIMER'); // 青信号 → 黄信号
trafficLight.send('TIMER'); // 黄信号 → 赤信号 (サイクル: 1)
console.log(trafficLight.getContext()); // { cycleCount: 1 }

// form-state.ts -- フォームの状態管理
 
// ============================
// フォームコンテキスト
// ============================
interface FormContext {
  data: Record<string, string>;
  errors: Record<string, string>;
  submitCount: number;
  lastSubmitAt: Date | null;
}
 
// ============================
// フォーム FSM
// ============================
const formMachine = new FSM<FormContext>({
  id: 'form',
  initial: 'idle',
  context: {
    data: {},
    errors: {},
    submitCount: 0,
    lastSubmitAt: null,
  },
  states: {
    idle: {
      entry: () => console.log('[Form] Idle - 入力待ち'),
      on: {
        CHANGE: {
          target: 'editing',
          action: () => console.log('[Form] 入力開始'),
        },
      },
    },
    editing: {
      on: {
        CHANGE: {
          target: 'editing',
        },
        SUBMIT: {
          target: 'validating',
          action: (ctx) => { ctx.submitCount++; },
        },
        RESET: {
          target: 'idle',
          action: (ctx) => {
            ctx.data = {};
            ctx.errors = {};
          },
        },
      },
    },
    validating: {
      entry: (ctx) => {
        console.log('[Form] バリデーション実行中...');
        ctx.errors = {};
        // バリデーションルールの適用
        if (!ctx.data.email?.includes('@')) {
          ctx.errors.email = 'メールアドレスの形式が不正です';
        }
        if (!ctx.data.name || ctx.data.name.length < 2) {
          ctx.errors.name = '名前は2文字以上で入力してください';
        }
      },
      on: {
        VALID: {
          target: 'submitting',
          guard: (ctx) => Object.keys(ctx.errors).length === 0,
        },
        INVALID: {
          target: 'editing',
        },
      },
    },
    submitting: {
      entry: () => console.log('[Form] 送信中...'),
      on: {
        SUCCESS: {
          target: 'success',
          action: (ctx) => { ctx.lastSubmitAt = new Date(); },
        },
        FAILURE: {
          target: 'error',
        },
      },
    },
    success: {
      entry: () => console.log('[Form] 送信成功!'),
      on: {
        RESET: {
          target: 'idle',
          action: (ctx) => {
            ctx.data = {};
            ctx.errors = {};
          },
        },
      },
    },
    error: {
      entry: () => console.log('[Form] 送信エラー'),
      on: {
        RETRY: {
          target: 'submitting',
          guard: (ctx) => ctx.submitCount < 3,
        },
        RESET: {
          target: 'idle',
          action: (ctx) => {
            ctx.data = {};
            ctx.errors = {};
          },
        },
      },
    },
  },
});
 
// 使用例
formMachine.send('CHANGE');      // idle → editing
formMachine.send('SUBMIT');      // editing → validating
// バリデーションエラーがある場合:
formMachine.send('INVALID');     // validating → editing

# state_python.py -- Python での State パターン実装
from __future__ import annotations
from abc import ABC, abstractmethod
from dataclasses import dataclass, field
from enum import Enum, auto
from typing import Callable
 
 
# ============================
# 自動販売機の State パターン
# ============================
 
class VendingState(ABC):
    """自動販売機の状態インターフェース"""
 
    @abstractmethod
    def insert_coin(self, machine: VendingMachine, amount: int) -> None: ...
 
    @abstractmethod
    def select_product(self, machine: VendingMachine, product: str) -> None: ...
 
    @abstractmethod
    def dispense(self, machine: VendingMachine) -> None: ...
 
    @abstractmethod
    def cancel(self, machine: VendingMachine) -> None: ...
 
    @property
    @abstractmethod
    def name(self) -> str: ...
 
 
class IdleState(VendingState):
    """待機状態: コイン投入待ち"""
 
    @property
    def name(self) -> str:
        return "idle"
 
    def insert_coin(self, machine: VendingMachine, amount: int) -> None:
        machine.balance += amount
        print(f"投入: {amount}円 (残高: {machine.balance}円)")
        machine.set_state(HasMoneyState())
 
    def select_product(self, machine: VendingMachine, product: str) -> None:
        print("先にコインを投入してください")
 
    def dispense(self, machine: VendingMachine) -> None:
        print("先にコインを投入し、商品を選択してください")
 
    def cancel(self, machine: VendingMachine) -> None:
        print("キャンセルする操作がありません")
 
 
class HasMoneyState(VendingState):
    """コイン投入済み: 商品選択待ち"""
 
    @property
    def name(self) -> str:
        return "has_money"
 
    def insert_coin(self, machine: VendingMachine, amount: int) -> None:
        machine.balance += amount
        print(f"追加投入: {amount}円 (残高: {machine.balance}円)")
 
    def select_product(self, machine: VendingMachine, product: str) -> None:
        price = machine.get_price(product)
        if price is None:
            print(f"商品 '{product}' は存在しません")
            return
        if machine.balance < price:
            print(f"残高不足: {machine.balance}円 < {price}円")
            return
        if not machine.has_stock(product):
            print(f"'{product}' は在庫切れです")
            return
 
        machine.selected_product = product
        machine.balance -= price
        print(f"'{product}' を選択 (価格: {price}円, 残高: {machine.balance}円)")
        machine.set_state(DispensingState())
 
    def dispense(self, machine: VendingMachine) -> None:
        print("先に商品を選択してください")
 
    def cancel(self, machine: VendingMachine) -> None:
        print(f"返金: {machine.balance}円")
        machine.balance = 0
        machine.set_state(IdleState())
 
 
class DispensingState(VendingState):
    """商品排出中"""
 
    @property
    def name(self) -> str:
        return "dispensing"
 
    def insert_coin(self, machine: VendingMachine, amount: int) -> None:
        print("商品排出中です。しばらくお待ちください")
 
    def select_product(self, machine: VendingMachine, product: str) -> None:
        print("商品排出中です。しばらくお待ちください")
 
    def dispense(self, machine: VendingMachine) -> None:
        product = machine.selected_product
        machine.reduce_stock(product)
        print(f"'{product}' を排出しました")
        machine.selected_product = None
 
        if machine.balance > 0:
            machine.set_state(HasMoneyState())
        else:
            machine.set_state(IdleState())
 
    def cancel(self, machine: VendingMachine) -> None:
        print("商品排出中はキャンセルできません")
 
 
# ============================
# Context: 自動販売機
# ============================
@dataclass
class VendingMachine:
    products: dict[str, dict] = field(default_factory=lambda: {
        "コーラ": {"price": 120, "stock": 5},
        "お茶": {"price": 100, "stock": 3},
        "コーヒー": {"price": 150, "stock": 0},  # 在庫切れ
    })
    balance: int = 0
    selected_product: str | None = None
    _state: VendingState = field(default_factory=IdleState)
    _history: list[str] = field(default_factory=list)
 
    def set_state(self, state: VendingState) -> None:
        old = self._state.name
        self._state = state
        self._history.append(f"{old} → {state.name}")
 
    def get_price(self, product: str) -> int | None:
        info = self.products.get(product)
        return info["price"] if info else None
 
    def has_stock(self, product: str) -> bool:
        info = self.products.get(product)
        return info is not None and info["stock"] > 0
 
    def reduce_stock(self, product: str) -> None:
        if product in self.products:
            self.products[product]["stock"] -= 1
 
    # 操作を状態に委譲
    def insert_coin(self, amount: int) -> None:
        self._state.insert_coin(self, amount)
 
    def select_product(self, product: str) -> None:
        self._state.select_product(self, product)
 
    def dispense(self) -> None:
        self._state.dispense(self)
 
    def cancel(self) -> None:
        self._state.cancel(self)
 
 
# ============================
# 使用例
# ============================
if __name__ == "__main__":
    vm = VendingMachine()
 
    vm.insert_coin(100)    # 投入: 100円
    vm.insert_coin(50)     # 追加投入: 50円 (残高: 150円)
    vm.select_product("コーラ")  # 'コーラ' を選択 (価格: 120円, 残高: 30円)
    vm.dispense()          # 'コーラ' を排出しました
 
    print(f"State: {vm._state.name}")  # idle (残高0) or has_money (残高あり)
    print(f"残高: {vm.balance}円")     # 30円
 
    vm.select_product("お茶")  # 先にコインを投入してください... wait
    # 実は has_money 状態のはず (残高30円)
 
    print(f"遷移履歴: {vm._history}")

// hierarchical-state.ts -- 階層状態マシン
 
// ============================
// HSM の構造
// ============================
// 階層状態マシンでは、状態を親子関係で整理できる
// 子状態で処理できないイベントは親状態に委譲される
 
interface HierarchicalState {
  readonly name: string;
  readonly parent?: HierarchicalState;
  handle(event: string, context: any): HierarchicalState | null;
  entry?(context: any): void;
  exit?(context: any): void;
}
 
class HSMEngine {
  private currentState: HierarchicalState;
 
  constructor(
    private initialState: HierarchicalState,
    private context: any
  ) {
    this.currentState = initialState;
    this.enterState(initialState);
  }
 
  send(event: string): void {
    let state: HierarchicalState | undefined = this.currentState;
 
    // 現在の状態から親に向かって、ハンドラを探す
    while (state) {
      const nextState = state.handle(event, this.context);
      if (nextState !== null) {
        this.transitionTo(nextState);
        return;
      }
      state = state.parent;
    }
 
    console.warn(`Unhandled event "${event}" in state "${this.currentState.name}"`);
  }
 
  private transitionTo(target: HierarchicalState): void {
    // 共通祖先を見つけて、exit/entry を正しい順序で実行
    const exitStates = this.getAncestors(this.currentState);
    const enterStates = this.getAncestors(target);
 
    // 共通祖先より上はスキップ
    const common = this.findCommonAncestor(exitStates, enterStates);
 
    // exit: 現在の状態から共通祖先まで
    for (const s of exitStates) {
      if (s === common) break;
      s.exit?.(this.context);
    }
 
    // entry: 共通祖先からターゲットまで
    const toEnter = [];
    for (const s of enterStates) {
      if (s === common) break;
      toEnter.unshift(s);
    }
    for (const s of toEnter) {
      this.enterState(s);
    }
 
    this.currentState = target;
  }
 
  private enterState(state: HierarchicalState): void {
    state.entry?.(this.context);
  }
 
  private getAncestors(state: HierarchicalState): HierarchicalState[] {
    const ancestors: HierarchicalState[] = [state];
    let current = state.parent;
    while (current) {
      ancestors.push(current);
      current = current.parent;
    }
    return ancestors;
  }
 
  private findCommonAncestor(
    a: HierarchicalState[],
    b: HierarchicalState[]
  ): HierarchicalState | undefined {
    const setB = new Set(b);
    return a.find(s => setB.has(s));
  }
 
  getState(): string {
    return this.currentState.name;
  }
}
 
// ============================
// 使用例: メディアプレーヤー
// ============================
// 階層構造:
//   Root
//   ├── Stopped
//   └── Playing (親状態)
//       ├── NormalSpeed
//       └── FastForward
 
const stoppedState: HierarchicalState = {
  name: 'stopped',
  handle(event) {
    if (event === 'PLAY') return normalSpeedState;
    return null;
  },
  entry() { console.log('[Stopped] 停止中'); },
};
 
const playingState: HierarchicalState = {
  name: 'playing',
  handle(event) {
    // 子状態で処理されないイベントをここで処理
    if (event === 'STOP') return stoppedState;
    return null;
  },
  entry() { console.log('[Playing] 再生開始'); },
  exit() { console.log('[Playing] 再生終了'); },
};
 
const normalSpeedState: HierarchicalState = {
  name: 'playing.normal',
  parent: playingState,
  handle(event) {
    if (event === 'FAST_FORWARD') return fastForwardState;
    return null; // 親 (playing) に委譲
  },
  entry() { console.log('[Normal] 通常速度'); },
};
 
const fastForwardState: HierarchicalState = {
  name: 'playing.fastForward',
  parent: playingState,
  handle(event) {
    if (event === 'NORMAL') return normalSpeedState;
    return null; // 親 (playing) に委譲
  },
  entry() { console.log('[FastForward] 早送り'); },
};
 
// 使用例
const player = new HSMEngine(stoppedState, {});
// [Stopped] 停止中
 
player.send('PLAY');
// [Playing] 再生開始
// [Normal] 通常速度
 
player.send('FAST_FORWARD');
// [FastForward] 早送り
 
player.send('STOP');
// ★ fastForward 自体は STOP を処理できないので、
//    親の playing に委譲 → stoppedState に遷移
// [Playing] 再生終了
// [Stopped] 停止中

// react-state-pattern.tsx -- React での State パターン活用
 
// ============================
// UI の状態定義
// ============================
type ModalState =
  | { status: 'closed' }
  | { status: 'loading' }
  | { status: 'open'; data: any }
  | { status: 'error'; message: string; retryCount: number }
  | { status: 'confirming'; data: any; message: string };
 
type ModalAction =
  | { type: 'OPEN' }
  | { type: 'LOADED'; data: any }
  | { type: 'ERROR'; message: string }
  | { type: 'CONFIRM'; message: string }
  | { type: 'CONFIRM_YES' }
  | { type: 'CONFIRM_NO' }
  | { type: 'CLOSE' }
  | { type: 'RETRY' };
 
// ============================
// State パターンを Reducer で表現
// ============================
function modalReducer(state: ModalState, action: ModalAction): ModalState {
  switch (state.status) {
    case 'closed':
      switch (action.type) {
        case 'OPEN': return { status: 'loading' };
        default: return state;
      }
 
    case 'loading':
      switch (action.type) {
        case 'LOADED': return { status: 'open', data: action.data };
        case 'ERROR': return { status: 'error', message: action.message, retryCount: 0 };
        case 'CLOSE': return { status: 'closed' };
        default: return state;
      }
 
    case 'open':
      switch (action.type) {
        case 'CLOSE': return { status: 'closed' };
        case 'CONFIRM': return {
          status: 'confirming',
          data: state.data,
          message: action.message,
        };
        default: return state;
      }
 
    case 'error':
      switch (action.type) {
        case 'RETRY':
          if (state.retryCount >= 3) return state; // ガード条件
          return { status: 'loading' };
        case 'CLOSE': return { status: 'closed' };
        default: return state;
      }
 
    case 'confirming':
      switch (action.type) {
        case 'CONFIRM_YES': return { status: 'closed' }; // 確認後に閉じる
        case 'CONFIRM_NO': return { status: 'open', data: state.data };
        default: return state;
      }
 
    default:
      return state;
  }
}
 
// ============================
// React コンポーネントでの使用
// ============================
/*
function ModalComponent() {
  const [state, dispatch] = useReducer(modalReducer, { status: 'closed' });
 
  // 状態に応じた UI レンダリング
  switch (state.status) {
    case 'closed':
      return <button onClick={() => dispatch({ type: 'OPEN' })}>開く</button>;
 
    case 'loading':
      return <div>読み込み中...</div>;
 
    case 'open':
      return (
        <div>
          <pre>{JSON.stringify(state.data)}</pre>
          <button onClick={() => dispatch({ type: 'CLOSE' })}>閉じる</button>
          <button onClick={() => dispatch({
            type: 'CONFIRM',
            message: '本当に削除しますか？',
          })}>
            削除
          </button>
        </div>
      );
 
    case 'error':
      return (
        <div>
          <p>エラー: {state.message}</p>
          {state.retryCount < 3 && (
            <button onClick={() => dispatch({ type: 'RETRY' })}>
              リトライ ({state.retryCount}/3)
            </button>
          )}
          <button onClick={() => dispatch({ type: 'CLOSE' })}>閉じる</button>
        </div>
      );
 
    case 'confirming':
      return (
        <div>
          <p>{state.message}</p>
          <button onClick={() => dispatch({ type: 'CONFIRM_YES' })}>はい</button>
          <button onClick={() => dispatch({ type: 'CONFIRM_NO' })}>いいえ</button>
        </div>
      );
  }
}
*/

// ============================
// [NG] 状態ごとの分岐が全メソッドに散在
// ============================
class Order {
  status: string = 'pending';
 
  pay(): void {
    if (this.status === 'pending') {
      this.status = 'paid';
    } else if (this.status === 'paid') {
      throw new Error('Already paid');
    } else if (this.status === 'shipped') {
      throw new Error('Cannot pay after shipping');
    } else if (this.status === 'delivered') {
      throw new Error('Cannot pay after delivery');
    } else if (this.status === 'cancelled') {
      throw new Error('Order is cancelled');
    }
    // 新しい状態 "returned" を追加 → ここに分岐を追加
  }
 
  ship(): void {
    if (this.status === 'paid') { /* ... */ }
    else if (this.status === 'pending') { throw new Error('Must pay first'); }
    else if (this.status === 'shipped') { throw new Error('Already shipped'); }
    // ... 同じパターンの繰り返し
    // 新しい状態 "returned" を追加 → ここにも分岐を追加
  }
 
  // deliver(), cancel() も同様...
  // 5状態 x 4メソッド = 20箇所の条件分岐!!
}
 
// ============================
// [OK] State パターンで状態ごとのクラスに分離
// ============================
// → 各状態の振る舞いが1クラスにまとまり、保守性が向上
// → 新しい状態の追加は新クラスの追加のみ
// → 既存コードの修正不要（OCP 準拠）
// (実装は上記コード例 1 を参照)

// ============================
// [NG] 遷移の副作用が State 内に隠れている
// ============================
class PaidStateNG implements OrderState {
  readonly name = 'paid';
 
  ship(context: OrderContext): void {
    // ★ 遷移のたびに大量の副作用が暗黙的に実行される
    sendEmail(context.orderId, 'Your order has been shipped!');
    updateInventory(context.orderId);
    notifyWarehouse(context.orderId);
    logToAnalytics('order_shipped', context.orderId);
    context.setState(new ShippedState(), 'ship');
    // どの副作用が実行されるか、外から全く見えない
  }
  // ...
}
 
// ============================
// [OK] 副作用を遷移アクション/ミドルウェアとして明示
// ============================
// 方法1: FSM の action として宣言的に定義
const orderFSM = new FSM<OrderContext>({
  id: 'order',
  initial: 'pending',
  context: { orderId: '', items: [] },
  states: {
    paid: {
      on: {
        SHIP: {
          target: 'shipped',
          action: (ctx) => {
            // 副作用が明示的に定義されている
            emailService.send(ctx.orderId, 'shipped');
            inventoryService.update(ctx.orderId);
            warehouseService.notify(ctx.orderId);
          },
        },
      },
    },
    // ...
  },
});
 
// 方法2: Observer パターンと組合せ
// State の遷移をイベントとして通知し、
// 副作用はリスナー側で処理する
class OrderContextWithEvents extends OrderContext {
  private listeners: Array<(event: { from: string; to: string }) => void> = [];
 
  override setState(state: OrderState, action: string): void {
    const from = this.getStateName();
    super.setState(state, action);
    // 遷移後にイベント通知
    for (const listener of this.listeners) {
      listener({ from, to: state.name });
    }
  }
 
  onTransition(listener: (event: { from: string; to: string }) => void): void {
    this.listeners.push(listener);
  }
}
 
// 副作用をリスナーとして登録（テスト時はモックに差し替え可能）
const order2 = new OrderContextWithEvents('ORD-002');
order2.onTransition(({ from, to }) => {
  if (from === 'paid' && to === 'shipped') {
    emailService.send(order2.orderId, 'shipped');
    inventoryService.update(order2.orderId);
  }
});

// ============================
// [NG] フラグの組み合わせで「状態」を表現
// ============================
class FormNG {
  isSubmitting: boolean = false;
  isValidating: boolean = false;
  hasError: boolean = false;
  isSuccess: boolean = false;
 
  submit(): void {
    if (this.isSubmitting) return;
    if (this.isValidating) return;
    // isSubmitting && hasError はどういう状態？
    // フラグの組み合わせ: 2^4 = 16 通り
    // 実際に有効な状態はその一部だが、不正な組み合わせを防げない
  }
}
 
// ============================
// [OK] Discriminated Union で有効な状態のみを表現
// ============================
type FormState =
  | { status: 'idle' }
  | { status: 'editing'; data: Record<string, string> }
  | { status: 'validating'; data: Record<string, string> }
  | { status: 'submitting'; data: Record<string, string> }
  | { status: 'success'; submittedAt: Date }
  | { status: 'error'; message: string; retryCount: number };
 
// 不正な状態の組み合わせが型レベルで存在しない
// status === 'idle' のときに data にアクセス → 型エラー
function handleForm(state: FormState): void {
  switch (state.status) {
    case 'error':
      console.log(state.message);      // OK: error 状態にのみ message がある
      console.log(state.retryCount);   // OK
      break;
    case 'idle':
      // console.log(state.message);   // 型エラー! idle に message はない
      break;
  }
}