Learn the
foundation
first.

// Step 1: Define a class that extends HTMLElement
class HelloWorld extends HTMLElement {

  // connectedCallback runs when the element
  // is inserted into the DOM
  connectedCallback() {
    this.innerHTML = '<p>Hello, Web Component!</p>'
  }
}

// Step 2: Register your custom tag name
// Tag names MUST contain a hyphen (-)
customElements.define('hello-world', HelloWorld)

// Step 3: Use it in HTML like any normal tag
// <hello-world></hello-world>

class ShadowCard extends HTMLElement {
  constructor() {
    super()

    // attachShadow creates the private DOM tree
    // mode: "open" means JS outside can still query it
    this.attachShadow({ mode: "open" })

    // Styles here ONLY affect this component
    // They will never leak to the outside page
    this.shadowRoot.innerHTML = `
      <style>
        p { color: red; font-size: 24px; }
      </style>
      <p>I am red and large</p>
    `
  }
}

customElements.define('shadow-card', ShadowCard)

// Any <p> tags outside this component
// are completely unaffected by the style above

// ✗ IMPURE — depends on external variable
// If TAX_RATE changes, this function changes too
const TAX_RATE = 0.1
const calculateTaxImpure = (price) => price * TAX_RATE


// ✓ PURE — all inputs come through parameters
// Same input → same output, always
const calculateTax = (price, rate) => price * rate


// ✗ IMPURE — modifies the original array (mutation)
const addItemImpure = (cart, item) => {
  cart.push(item)   // ← changes the outside world
  return cart
}


// ✓ PURE — returns a new array, original untouched
const addItem = (cart, item) => [...cart, item]


// ✓ PURE REDUCER — the heart of Flow-Arch
// Takes current state + action, returns NEW state
// Never modifies state directly
const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 }
    default:
      return state
  }
}

const numbers = [1, 2, 3, 4, 5, 6]


// ✗ IMPERATIVE — tells the computer HOW to do it
// You manage the loop, the index, the result array
const evensImperative = []
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evensImperative.push(numbers[i])
  }
}


// ✓ DECLARATIVE — tells the computer WHAT you want
// No index, no mutation, reads like a sentence
const evensDeclarative = numbers.filter(n => n % 2 === 0)


// ✓ DECLARATIVE VIEW — the Flow-Arch way
// Describe what the UI should look like
// given the current state. Nothing more.
const view = (state) => `
  <div class="count">${state.count}</div>
  <button data-action="INCREMENT">+</button>
`
// view() does not DO anything.
// It just DESCRIBES what to show.

// ─── STATE ────────────────────────────────────────────
// Plain object. Single source of truth.
// Never modified directly.
const createInitialState = () => ({ count: 0 })


// ─── REDUCER (Pure Function) ──────────────────────────
// Old state + action → new state
// This is where ALL logic lives.
const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT": return { ...state, count: state.count + 1 }
    case "DECREMENT": return { ...state, count: state.count - 1 }
    default:         return state
  }
}


// ─── VIEW (Pure Function) ─────────────────────────────
// State in → HTML string out.
// No logic. No side effects. Just a description.
const view = (state) => `
  <div class="count">${state.count}</div>
  <button data-action="DECREMENT">−</button>
  <button data-action="INCREMENT">+</button>
`


// ─── WEB COMPONENT (Side-effect boundary) ────────────
// The only place where DOM and events live.
// Connects the pure world to the real browser.
class FlowCounter extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: "open" })
    this.state = createInitialState()

    // dispatch = the only way to change state
    this.dispatch = (action) => {
      this.state = reducer(this.state, action)
      this.render()
    }
  }

  connectedCallback() {
    this.render()
    this.shadowRoot.addEventListener("click", (e) => {
      const type = e.target.dataset.action
      if (type) this.dispatch({ type })
    })
  }

  render() {
    this.shadowRoot.innerHTML = view(this.state)
  }
}

customElements.define("flow-counter", FlowCounter)