Props, State ও কম্পোনেন্ট লাইফসাইকেল

class Component:
    """একটি কম্পোনেন্ট instance -- props (বাইরে থেকে) ও state (নিজস্ব) দুটোই রাখে"""

    def __init__(self, name, props):
        self.name = name
        self.props = dict(props)   # প্যারেন্ট থেকে পাওয়া, শুরুতে
        self.state = {}            # কম্পোনেন্টের নিজস্ব -- এখনো খালি
        self.is_mounted = False
        self.render_count = 0

    def render(self):
        """props ও state-এর বর্তমান মান অনুযায়ী আউটপুট 'তৈরি' করে"""
        self.render_count += 1
        print(f"  [render #{self.render_count}] {self.name} -> props={self.props}, state={self.state}")

    def mount(self):
        """লাইফসাইকেল ধাপ ১: প্রথমবার তৈরি হয়ে 'DOM'-এ বসে"""
        self.is_mounted = True
        print(f"[mount] {self.name} মাউন্ট হলো (props={self.props})")
        self.render()

    def update(self, new_props):
        """লাইফসাইকেল ধাপ ২: প্যারেন্ট থেকে নতুন props এলে আপডেট হয়"""
        if not self.is_mounted:
            print(f"[update] {self.name} এখনো মাউন্ট হয়নি -- আপডেট বাতিল")
            return
        old_props = self.props
        self.props = dict(new_props)
        print(f"[update] {self.name} props বদলেছে: {old_props} -> {self.props}")
        self.render()

    def set_state(self, updates):
        """কম্পোনেন্টের নিজস্ব state বদলায় -- এবং স্বয়ংক্রিয়ভাবে রিরেন্ডার ট্রিগার করে"""
        if not self.is_mounted:
            print(f"[set_state] {self.name} এখনো মাউন্ট হয়নি -- set_state বাতিল")
            return
        old_state = self.state
        self.state = {**self.state, **updates}
        print(f"[set_state] {self.name} state বদলেছে: {old_state} -> {self.state}")
        self.render()  # <-- এটাই key: state বদলালে স্বয়ংক্রিয় রিরেন্ডার

    def unmount(self):
        """লাইফসাইকেল ধাপ ৩: 'DOM' থেকে সরিয়ে ফেলা হচ্ছে"""
        self.is_mounted = False
        print(f"[unmount] {self.name} আনমাউন্ট হলো (মোট render হয়েছিল {self.render_count} বার)")


# --- সম্পূর্ণ লাইফসাইকেল ধারাক্রম ট্রেস করা ---
counter = Component("Counter", props={"initial_value": 0, "step": 1})

counter.mount()                          # ধাপ ১: মাউন্ট -- প্রথম render
counter.set_state({"count": 0})          # নিজস্ব state শুরু করা -- render #2
counter.set_state({"count": 1})          # ব্যবহারকারী ক্লিক করল -- render #3
counter.set_state({"count": 2})          # আবার ক্লিক -- render #4
counter.update({"initial_value": 0, "step": 5})  # প্যারেন্ট নতুন props পাঠাল -- render #5
counter.unmount()                        # ধাপ ৩: আনমাউন্ট, আর কোনো render নয়

print(f"\nচূড়ান্ত অবস্থা যাচাই -- is_mounted={counter.is_mounted}, মোট render={counter.render_count}, শেষ state={counter.state}")