// Traditional React - Hierarchical
function App() {
  return (
    <div className="container">           {/* Parent */}
      <Header>                            {/* Child of div */}
        <Logo />                          {/* Child of Header */}
        <Nav>                             {/* Child of Header */}
          <NavItem />                     {/* Child of Nav */}
          <NavItem />                     {/* Child of Nav */}
        </Nav>
      </Header>
      <Main>                              {/* Child of div */}
        <Sidebar />                       {/* Child of Main */}
        <Content />                       {/* Child of Main */}
      </Main>
    </div>
  )
}

// iR³ React - No Hierarchy
const Button = new iR3Component({
  foundation: iR3Foundation,  // Own Series/DHT/BT
  render: (state) => ({
    type: 'button',
    text: state.label,
    bounds: { x: 0, y: 0, width: 100, height: 40 }  // Initial guess
  })
})

const Text = new iR3Component({
  foundation: iR3Foundation,  // Own Series/DHT/BT
  render: (state) => ({
    type: 'text',
    content: state.text,
    bounds: { x: 0, y: 50, width: 200, height: 20 }  // Initial guess
  })
})

const Input = new iR3Component({
  foundation: iR3Foundation,  // Own Series/DHT/BT  
  render: (state) => ({
    type: 'input',
    placeholder: state.hint,
    bounds: { x: 0, y: 100, width: 150, height: 30 }  // Initial guess
  })
})

// NO parent-child relationships!
// Components are PEERS in flat network
// They coordinate layout via DHT

class iR3Component {
  constructor({ foundation, render }) {
    // Each component IS an iR³ node
    this.series = foundation.series     // Own event log
    this.dht = foundation.dht           // Broadcast intents
    this.bt = foundation.bt             // Share assets
    
    this.render = render
    this.id = crypto.randomUUID()
    
    // Register DHT handlers
    this._setupP2P()
  }
  
  _setupP2P() {
    // Handle layout coordination intents
    this.dht.on_intent(intent => {
      if (intent.type === 'check_spacing') {
        this._respondWithBounds(intent)
      }
      if (intent.type === 'adjust_position') {
        this._adjustLayout(intent)
      }
    })
  }
  
  _respondWithBounds(intent) {
    // Tell other component our requirements
    this.dht.respond_p2p(intent.from, {
      component: this.id,
      bounds: this.current_bounds,
      required_spacing: this.spacing_requirements,
      flexible: this.can_move
    })
  }
  
  mount() {
    // Step 1: Render with initial position
    const initial = this.render(this._getState())
    this.current_bounds = initial.bounds
    
    // Step 2: Broadcast existence via DHT
    this.dht.push_intent({
      type: 'component_mounted',
      component: this.id,
      bounds: initial.bounds,
      type_: initial.type
    })
    
    // Step 3: Check for conflicts (from Post 760)
    this._checkNeighbors()
    
    // Returns immediately (pure flux)
  }
  
  _checkNeighbors() {
    // Post 760: Check each neighbor's N(P)
    this.dht.push_intent({
      type: 'check_spacing',
      from: this.id,
      my_bounds: this.current_bounds,
      my_spacing_needs: this.spacing_requirements
    })
    
    // Responses flow in via P2P
    // Will adjust if conflicts detected
  }
}

class iR3Component {
  async _coordinateLayout() {
    /**
     * From Post 760: Layout is a game
     * Each element = agent with local N(P)
     * Must check from each perspective
     */
    
    // Step 1: Broadcast "who's nearby?"
    this.dht.push_intent({
      type: 'find_neighbors',
      component: this.id,
      my_bounds: this.current_bounds
    })
    
    // Wait for P2P responses (async)
    await this._wait_for_responses(2000)  // 2s timeout
    
    // Step 2: Check each neighbor's perspective
    const conflicts = []
    for (const neighbor of this.neighbors) {
      // From Post 760: Switch to their POV
      const distance = this._calculateDistance(
        this.current_bounds,
        neighbor.bounds
      )
      
      const my_needs = this.spacing_requirements
      const their_needs = neighbor.spacing_requirements
      const required = Math.max(my_needs, their_needs)
      
      if (distance < required) {
        // CONFLICT!
        conflicts.push({
          neighbor: neighbor.id,
          distance: distance,
          required: required,
          deficit: required - distance
        })
      }
    }
    
    // Step 3: If conflicts, negotiate adjustment
    if (conflicts.length > 0) {
      this._negotiatePositions(conflicts)
    }
  }
  
  _negotiatePositions(conflicts) {
    // Negotiate with each conflicting neighbor
    for (const conflict of conflicts) {
      this.dht.push_intent({
        type: 'spacing_conflict',
        from: this.id,
        to: conflict.neighbor,
        deficit: conflict.deficit,
        my_flexibility: this.can_move,
        proposed_adjustment: this._suggestMove(conflict)
      })
    }
    
    // Responses come via P2P
    // Each neighbor decides if they can move
    // Emergent coordination without central authority
  }
}

// React - Hierarchical rendering
function App() {
  return (
    <Flex direction="column" gap={20}>  {/* Parent controls layout */}
      <Button label="Click" />           {/* Child obeys */}
      <Text content="Hello" />           {/* Child obeys */}
      <Input placeholder="Type" />       {/* Child obeys */}
    </Flex>
  )
}

// Rendering:
// 1. App renders Flex
// 2. Flex calculates layout (top-down)
// 3. Button/Text/Input receive positions
// 4. Children render at assigned positions
// 5. Reconciliation diffs entire tree

// Problems:
// - Flex is single point of failure
// - Children can't negotiate spacing
// - Rigid structure (hard to reorganize)
// - All or nothing (entire tree re-renders)

// iR³ React - Flat network
const button = new iR3Component({ 
  type: 'button',
  label: 'Click',
  spacing: 10
})

const text = new iR3Component({
  type: 'text', 
  content: 'Hello',
  spacing: 5
})

const input = new iR3Component({
  type: 'input',
  placeholder: 'Type',
  spacing: 10
})

// Rendering:
// 1. Each component mounts independently (parallel)
// 2. Each broadcasts existence via DHT
// 3. Each discovers neighbors via P2P
// 4. Each checks spacing conflicts (Post 760)
// 5. Negotiate adjustments via DHT intents
// 6. Emergent layout without central control

// Advantages:
// - No single point of failure (all peers)
// - Components negotiate spacing (game theory)
// - Flexible structure (just add/remove nodes)
// - Independent updates (no tree reconciliation)

// Traditional React
function LoginForm() {
  return (
    <form>
      <Stack spacing={20}>              {/* Parent controls spacing */}
        <Input 
          type="email" 
          placeholder="Email"
        />
        <Input 
          type="password"
          placeholder="Password"  
        />
        <Button type="submit">
          Login
        </Button>
      </Stack>
    </form>
  )
}

// Rendering:
// Stack calculates positions
// Children placed at calculated positions
// Children can't negotiate

// iR³ React
const emailInput = new iR3Component({
  type: 'input',
  inputType: 'email',
  placeholder: 'Email',
  spacing_requirements: {
    below: 15,  // Needs 15px below
    above: 5    // Needs 5px above
  },
  can_move: true
})

const passwordInput = new iR3Component({
  type: 'input',
  inputType: 'password',
  placeholder: 'Password',
  spacing_requirements: {
    below: 15,
    above: 15  // More space above (from email)
  },
  can_move: true
})

const loginButton = new iR3Component({
  type: 'button',
  label: 'Login',
  spacing_requirements: {
    below: 10,
    above: 20  // More space above (from password)
  },
  can_move: false  // Button prefers bottom position
})

// Mount all (parallel)
await Promise.all([
  emailInput.mount(),
  passwordInput.mount(),
  loginButton.mount()
])

// Coordination happens automatically:
// 1. Email broadcasts: "I'm at y=100"
// 2. Password responds: "I need 15px spacing"
// 3. Email adjusts: "Moving to y=85"
// 4. Password broadcasts: "I'm at y=120"
// 5. Button responds: "I need 20px spacing"
// 6. Password adjusts: "Moving to y=100"
// 7. Button settles: "I'm at y=140"
// 
// Final layout emerges from negotiation
// No central Stack component needed!

// React - Parent manages state
function App() {
  const [count, setCount] = useState(0)
  
  return (
    <>
      <Button onClick={() => setCount(count + 1)} />  {/* Event up */}
      <Display value={count} />                       {/* Prop down */}
    </>
  )
}

// State lives in parent
// Children are stateless
// Must pass handlers down

// iR³ React - Each component owns state
const button = new iR3Component({
  type: 'button',
  label: 'Increment',
  
  onClick() {
    // Push intent to DHT
    this.dht.push_intent({
      type: 'increment',
      from: this.id
    })
    
    // Append to own Series
    this.series.append({
      event: 'button_clicked',
      timestamp: Date.now()
    })
  }
})

const display = new iR3Component({
  type: 'text',
  
  constructor() {
    // Subscribe to increment intents
    this.dht.on_intent(intent => {
      if (intent.type === 'increment') {
        this.series.append({
          event: 'increment_received',
          from: intent.from
        })
        
        // Derive new count from Series
        const count = this._deriveCount()
        this.update({ count })
      }
    })
  },
  
  _deriveCount() {
    // Reduce Series to get count
    return this.series
      .filter(e => e.event === 'increment_received')
      .length
  }
})

// No parent!
// State coordination via DHT
// Each component has own Series

class iR3Component {
  mount() {
    // Broadcast existence
    this.dht.push_intent({
      type: 'component_announce',
      component: this.id,
      component_type: this.type,
      bounds: this.current_bounds,
      provides: this.api  // What this component can do
    })
    
    // Listen for other components
    this.dht.on_intent(intent => {
      if (intent.type === 'component_announce') {
        // Found a peer!
        this.peers.set(intent.component, {
          type: intent.component_type,
          bounds: intent.bounds,
          api: intent.provides
        })
        
        // Check if we need to coordinate
        if (this._isNearby(intent.bounds)) {
          this._initiateCoordination(intent.component)
        }
      }
    })
  }
  
  _isNearby(other_bounds) {
    // Check if other component is in our N(P)
    const my_bounds = this.current_bounds
    const margin = 50  // pixels
    
    return (
      Math.abs(my_bounds.x - other_bounds.x) < margin ||
      Math.abs(my_bounds.y - other_bounds.y) < margin
    )
  }
}

class iR3Renderer {
  /**
   * Renderer collects component outputs
   * and composites to screen
   */
  constructor() {
    this.components = new Map()
    this.dht = new iR3DHT()
    
    // Listen for component renders
    this.dht.on_intent(intent => {
      if (intent.type === 'render_output') {
        this.components.set(intent.component, {
          bounds: intent.bounds,
          output: intent.render_output,
          z_index: intent.z_index || 0
        })
        
        // Composite to screen
        this._composite()
      }
    })
  }
  
  _composite() {
    // Sort by z-index
    const sorted = Array.from(this.components.values())
      .sort((a, b) => a.z_index - b.z_index)
    
    // Draw each component
    const canvas = this.screen_canvas
    const ctx = canvas.getContext('2d')
    
    for (const comp of sorted) {
      this._drawComponent(ctx, comp)
    }
  }
  
  _drawComponent(ctx, component) {
    // Draw at component's bounds
    const { x, y, width, height } = component.bounds
    
    // Component provides own rendering
    component.output.draw(ctx, x, y, width, height)
  }
}

// Each component renders independently
// Renderer just composites outputs
// No central render loop
// Each component decides when to re-render

// Pure flux enables this:
component.render()  // Returns immediately
component.layout()  // Returns immediately  
component.update()  // Returns immediately

// No blocking anywhere!
// Massive parallelism by default
// Components coordinate asynchronously

// === REACT VERSION ===
function TodoList() {
  const [todos, setTodos] = useState([])
  
  return (
    <div>
      <h1>Todos</h1>
      <input 
        onSubmit={text => setTodos([...todos, text])}
      />
      {todos.map(todo => (
        <Todo 
          key={todo.id}
          text={todo.text}
          onDelete={() => setTodos(todos.filter(t => t.id !== todo.id))}
        />
      ))}
    </div>
  )
}

// Hierarchical (parent controls children)
// Centralized state (in parent)
// Props drilling (handlers passed down)
// Re-render entire list on change

// === iR³ REACT VERSION ===
const title = new iR3Component({
  type: 'text',
  content: 'Todos'
})

const input = new iR3Component({
  type: 'input',
  
  onSubmit(text) {
    // Broadcast new todo via DHT
    this.dht.push_intent({
      type: 'todo_created',
      text: text,
      id: crypto.randomUUID()
    })
  }
})

// Todo components listen for creation
class TodoComponent extends iR3Component {
  constructor(id, text) {
    super({ type: 'todo' })
    this.todo_id = id
    this.text = text
    
    // Listen for deletion
    this.dht.on_intent(intent => {
      if (intent.type === 'todo_delete' && intent.id === this.todo_id) {
        this.unmount()
      }
    })
  }
  
  onDelete() {
    this.dht.push_intent({
      type: 'todo_delete',
      id: this.todo_id
    })
  }
}

// Listen for new todos
dht.on_intent(intent => {
  if (intent.type === 'todo_created') {
    const todo = new TodoComponent(intent.id, intent.text)
    todo.mount()  // Self-positions via game theory
  }
})

// Flat network (no parent)
// Distributed state (each component has Series)
// No props (DHT intents)
// Each todo updates independently

// Mount 1000 components in parallel
const components = Array(1000).fill(0).map(() => 
  new iR3Component({ type: 'item' })
)

await Promise.all(components.map(c => c.mount()))

// React: Must render tree sequentially
// iR³: All components mount simultaneously

// One component crashes
component_5.crash()

// React: Entire tree might break
// iR³: Other components continue (peer network)

// Update one component
component.update({ text: 'New text' })

// React: May trigger parent re-render
// iR³: Only this component updates

// Component removed
component_3.unmount()

// React: Parent must recalculate layout
// iR³: Neighbors detect absence, adjust spacing automatically

// React: Diff VDOM tree (expensive)
// iR³: No tree, no diff, just P2P updates