export default class RatingStars extends LightningElement {

  handleStarClick(event) {
    this.dispatchEvent(new CustomEvent('ratingchange'));
  }
}
// 'ratingchange' is the event NAME — entirely your choice, with rules (Concept naming)
// This fires the event, but carries no actual data yet — Concept 3 fixes that

// ✅ Valid event names — lowercase, no special characters
new CustomEvent('ratingchange');
new CustomEvent('orderselected');
new CustomEvent('save');

// ❌ Invalid — LWC enforces lowercase, alphanumeric only (no camelCase, no dashes, no underscores)
new CustomEvent('ratingChange');   // camelCase not allowed
new CustomEvent('rating-change'); // dashes not allowed
new CustomEvent('rating_change'); // underscores not allowed

export default class RatingStars extends LightningElement {
  @api value = 0;

  handleStarClick(event) {
    const newRating = parseInt(event.target.dataset.rating, 10);

    this.dispatchEvent(
      new CustomEvent('ratingchange', {
        detail: { rating: newRating, previousRating: this.value }
      })
    );
  }
}
// detail can be ANY JavaScript value — a primitive, an object, even an array
// Here we send an object with two pieces of information at once

<!-- parentComponent.html -->
<template>
  <c-rating-stars
    value={currentRating}
    onratingchange={handleRatingChange}>
  </c-rating-stars>
</template>

// parentComponent.js
export default class ParentComponent extends LightningElement {
  currentRating = 3;

  handleRatingChange(event) {
    console.log(event.detail.rating);          // the new rating
    console.log(event.detail.previousRating);  // the old rating
    this.currentRating = event.detail.rating;
  }
}
// Notice: event name "ratingchange" becomes attribute "onratingchange" — always lowercase, "on" + name

this.dispatchEvent(new CustomEvent('ratingchange', {
  detail: { rating: newRating }
  // bubbles: false (default) — only the DIRECT parent can hear this
  // composed: false (default) — does not cross shadow DOM boundary
}));

this.dispatchEvent(new CustomEvent('ratingchange', {
  detail: { rating: newRating },
  bubbles: true,    // now travels up through ALL ancestor elements, not just direct parent
  composed: true    // now crosses shadow DOM boundaries too
}));
// Even with bubbles+composed, a GRANDPARENT must still explicitly listen
// for the event somewhere along that bubble path — it's not automatic "magic"

handleStarClick(event) {
  const newRating = parseInt(event.target.dataset.rating, 10);
  const previousRating = this.value;

  // (if rating-stars manages its OWN local copy, update it first)
  // then notify the parent with both values:
  this.dispatchEvent(
    new CustomEvent('ratingchange', {
      detail: { rating: newRating, previousRating }
    })
  );
}

export default class SearchBox extends LightningElement {
  searchTimeout;

  handleKeyUp(event) {
    const searchValue = event.target.value;

    clearTimeout(this.searchTimeout);  // cancel any pending dispatch
    this.searchTimeout = setTimeout(() => {
      this.dispatchEvent(
        new CustomEvent('search', { detail: { searchTerm: searchValue } })
      );
    }, 300);  // only fires 300ms after the user stops typing
  }

  disconnectedCallback() {
    clearTimeout(this.searchTimeout);  // recall Module 2's cleanup gotcha!
  }
}

// Overkill — firing an event just to report a STATIC value that never changes
connectedCallback() {
  this.dispatchEvent(
    new CustomEvent('componentready', { detail: { componentName: 'rating-stars' } })
  );
}
// If the parent always knows this value anyway, this event adds complexity for no benefit

// Grandchild needs to tell Grandparent something, forced through an uninvolved Parent:
// Grandchild fires event → Parent listens ONLY to re-fire the same event upward →
// Grandparent finally listens. The middle "Parent" does nothing but relay.
// This is a sign you may want Lightning Message Service instead (Module 7)

// Good use cases for custom events:
new CustomEvent('ratingchange', {...});   // user took an action
new CustomEvent('recordsaved', {...});    // meaningful state change completed
new CustomEvent('validationerror', {...}); // something the parent genuinely needs to react to