/*
 * We forge a custom event using the CustomEvent constructor.
 * This allows us to define a unique event type and attach specific data.
 *
 * For a more robust solution, encapsulate event creation in a factory function
 * or a dedicated module to ensure consistency and prevent naming conflicts.
 */

// --- Step 1: Define a descriptive event name ---
// Conventionally, custom event names are lowercase and hyphen-separated (kebab-case).
// This prevents clashes with standard DOM events.
const MY_CUSTOM_EVENT_TYPE = 'app-data-updated';

// --- Step 2: Create the CustomEvent instance ---
// The CustomEvent constructor takes two arguments:
// 1. A string representing the event's name.
// 2. An optional options object, which can include:
//    - 'detail': Any data you wish to pass with the event (e.g., objects, strings, numbers).
//    - 'bubbles': A boolean indicating if the event should bubble up the DOM tree (default: false).
//    - 'cancelable': A boolean indicating if the event can be cancelled (default: false).

function createDataUpdatedEvent(dataPayload) {
  return new CustomEvent(MY_CUSTOM_EVENT_TYPE, {
    detail: dataPayload,
    bubbles: true, // Set to true if this event should propagate up the DOM
    cancelable: false // Set to true if event listeners can prevent default action
  });
}

// --- Example Usage of event creation ---
const updatePayload = { userId: '123', status: 'active', timestamp: Date.now() };
const dataUpdateEvent = createDataUpdatedEvent(updatePayload);

console.log(`Event Type: ${dataUpdateEvent.type}`); // Outputs: Event Type: app-data-updated
console.log(`Event Detail:`, dataUpdateEvent.detail); // Outputs: Event Detail: { userId: '123', status: 'active', timestamp: ... }

/*
 * Best Practice:
 * For complex applications, manage custom event types in a central constant file
 * to avoid typos and ensure all components refer to the same event name.
 */
export const AppEvents = {
  DATA_UPDATED: 'app-data-updated',
  USER_LOGGED_IN: 'user-logged-in',
  ITEM_DELETED: 'item-deleted'
};

// Then, create events using:
// new CustomEvent(AppEvents.DATA_UPDATED, { detail: {...} });

/*
 * We dispatch custom events using the dispatchEvent method on an EventTarget.
 * This method initiates the event flow, allowing listeners to react.
 *
 * We use a simple scenario: a 'data-source' component dispatches an event
 * when its internal data changes.
 */

// --- Step 1: Identify the EventTarget ---
// Any element in the DOM (e.g., a div, a button) is an EventTarget.
// For application-wide events not tied to a specific UI element,
// the 'document' object or a dedicated 'EventBus' (a custom EventTarget instance)
// are ideal candidates.

// Let's create a simple data source component representation.
// For simplicity, we'll use a plain div element as our event dispatcher.
const dataSourceElement = document.createElement('div');
dataSourceElement.id = 'data-source-component';
document.body.appendChild(dataSourceElement);

// Alternatively, for a global event bus not tied to DOM:
// const eventBus = new EventTarget();

const MY_CUSTOM_EVENT_TYPE = 'app-data-updated';

// --- Step 2: Define the event creation function (from previous step) ---
function createDataUpdatedEvent(dataPayload) {
  return new CustomEvent(MY_CUSTOM_EVENT_TYPE, {
    detail: dataPayload,
    bubbles: true,
    cancelable: false
  });
}

// --- Step 3: Implement the dispatch logic ---
// This function simulates a data update and dispatches the event.
function simulateDataUpdate(newData) {
  console.log('--- Data Source Component ---');
  console.log('Simulating data update with:', newData);

  const eventToDispatch = createDataUpdatedEvent(newData);

  // dispatchEvent(event) method triggers the event.
  // It must be called on an EventTarget instance.
  dataSourceElement.dispatchEvent(eventToDispatch);

  console.log(`Event '${MY_CUSTOM_EVENT_TYPE}' dispatched from #${dataSourceElement.id}.`);
}

// --- Example Usage: Dispatching the event ---
setTimeout(() => {
  simulateDataUpdate({ items: ['apple', 'banana', 'cherry'], count: 3 });
}, 1000);

setTimeout(() => {
  simulateDataUpdate({ items: ['grape', 'lemon'], count: 2, version: '2.0' });
}, 3000);

/*
 * Insider Tip:
 * When deciding where to dispatch an event, consider the scope of the communication.
 * - Component-specific events: Dispatch from the component's root element.
 * - Application-wide events: Dispatch from 'document' or a custom EventTarget/EventBus instance.
 * This decision impacts event propagation and where listeners should be attached.
 */

/*
 * We activate reactive listeners using addEventListener to consume custom events.
 * This allows components to react to events dispatched by other parts of the application.
 *
 * We continue with our 'data-source' component dispatching 'app-data-updated' events.
 * Now, we'll create a 'data-display' component to listen and react.
 */

// --- Step 1: Ensure the dispatcher element exists (from previous step) ---
const dataSourceElement = document.getElementById('data-source-component');
if (!dataSourceElement) {
  console.error('Data source component not found. Ensure dispatching code runs first.');
  // For this example, we'll create it if it doesn't exist for self-containment.
  const tempDataSource = document.createElement('div');
  tempDataSource.id = 'data-source-component';
  document.body.appendChild(tempDataSource);
  dataSourceElement = tempDataSource;
}

// --- Step 2: Create a listener component (e.g., a display div) ---
const dataDisplayElement = document.createElement('div');
dataDisplayElement.id = 'data-display-component';
dataDisplayElement.innerHTML = '<h2>Data Display</h2><p>Waiting for data updates...</p>';
document.body.appendChild(dataDisplayElement);

// --- Step 3: Define the custom event type (must match the dispatched event) ---
const MY_CUSTOM_EVENT_TYPE = 'app-data-updated';

// --- Step 4: Attach an event listener ---
// We attach the listener to an EventTarget that is an ancestor of the dispatcher
// or the dispatcher itself, considering event bubbling.
// Since 'app-data-updated' was set to 'bubbles: true', we can listen on 'document.body'
// or even 'document' to catch it, or directly on 'dataSourceElement'.

// Listener on the document body to catch bubbling events
document.body.addEventListener(MY_CUSTOM_EVENT_TYPE, (event) => {
  // Type guard for CustomEvent to access 'detail'
  if (event instanceof CustomEvent) {
    console.log('--- Data Display Component ---');
    console.log(`Received '${event.type}' event on document.body.`);
    console.log('Event Data (detail):', event.detail);

    // Update the display with received data
    dataDisplayElement.innerHTML = `
      <h2>Data Display</h2>
      <p>Last Update: <strong>${JSON.stringify(event.detail)}</strong></p>
      <p>Timestamp: ${new Date(event.detail.timestamp || Date.now()).toLocaleTimeString()}</p>
    `;
  }
});

console.log(`Listener activated for '${MY_CUSTOM_EVENT_TYPE}' on document.body.`);

// --- Step 5: (Re-running dispatching code to see the listener in action) ---
// To make this example fully runnable, we'll include the dispatching logic here.
// In a real app, these would be in separate modules/components.

function createDataUpdatedEvent(dataPayload) {
  return new CustomEvent(MY_CUSTOM_EVENT_TYPE, {
    detail: dataPayload,
    bubbles: true,
    cancelable: false
  });
}

function simulateDataUpdate(newData) {
  console.log('\n--- Data Source Component (Dispatching) ---');
  console.log('Simulating data update with:', newData);
  const eventToDispatch = createDataUpdatedEvent(newData);
  dataSourceElement.dispatchEvent(eventToDispatch);
  console.log(`Event '${MY_CUSTOM_EVENT_TYPE}' dispatched.`);
}

setTimeout(() => {
  simulateDataUpdate({ items: ['apple', 'banana', 'cherry'], count: 3, timestamp: Date.now() });
}, 1000);

setTimeout(() => {
  simulateDataUpdate({ items: ['grape', 'lemon'], count: 2, version: '2.0', timestamp: Date.now() });
}, 3000);

/*
 * Important Best Practice:
 * Always pair addEventListener with removeEventListener, especially for components
 * that might be dynamically added/removed or for long-lived listeners.
 * This prevents memory leaks.
 *
 * Example for cleanup:
 * function setupListener() {
 *   document.body.addEventListener(MY_CUSTOM_EVENT_TYPE, handleEvent);
 * }
 *
 * function removeListener() {
 *   document.body.removeEventListener(MY_CUSTOM_EVENT_TYPE, handleEvent);
 * }
 *
 * // When component mounts: setupListener()
 * // When component unmounts: removeListener()
 */

/*
 * We engineer decoupled architectures by applying best practices for custom events.
 * This enhances modularity, reusability, and testability of components.
 *
 * This section focuses on a more structured approach using an Event Bus pattern.
 * An Event Bus is a dedicated EventTarget that centralizes event dispatching and listening,
 * particularly useful for application-wide communications not tied to a specific DOM element.
 */

// --- Step 1: Create a global Event Bus ---
// By extending EventTarget, we create a custom object that can dispatch and listen for events.
class EventBus extends EventTarget {
  constructor() {
    super();
    console.log('EventBus activated.');
  }

  // Helper method to dispatch a custom event consistently
  publish(eventType, detailPayload) {
    const event = new CustomEvent(eventType, { detail: detailPayload, bubbles: false, cancelable: false });
    this.dispatchEvent(event);
    console.log(`EventBus: Dispatched '${eventType}' with detail:`, detailPayload);
  }

  // Helper method to subscribe to events
  subscribe(eventType, callback) {
    this.addEventListener(eventType, callback);
    console.log(`EventBus: Subscribed to '${eventType}'.`);
  }

  // Helper method to unsubscribe from events
  unsubscribe(eventType, callback) {
    this.removeEventListener(eventType, callback);
    console.log(`EventBus: Unsubscribed from '${eventType}'.`);
  }
}

// Instantiate a single global EventBus (Singleton pattern)
const appEventBus = new EventBus();

// --- Step 2: Define event types (centralized) ---
const AppEvents = {
  USER_LOGIN: 'user-login',
  PRODUCT_VIEWED: 'product-viewed',
  SETTINGS_SAVED: 'settings-saved'
};

// --- Step 3: Implement a Publisher Component ---
class AuthComponent {
  constructor(bus) {
    this.bus = bus;
  }

  login(username) {
    console.log(`AuthComponent: User '${username}' attempting login.`);
    // Simulate API call or login logic
    setTimeout(() => {
      const userData = { username, role: 'admin', lastLogin: Date.now() };
      this.bus.publish(AppEvents.USER_LOGIN, userData);
      console.log(`AuthComponent: User '${username}' logged in.`);
    }, 500);
  }
}

// --- Step 4: Implement a Subscriber Component ---
class AnalyticsComponent {
  constructor(bus) {
    this.bus = bus;
    this.bus.subscribe(AppEvents.USER_LOGIN, this.handleUserLogin.bind(this));
  }

  handleUserLogin(event) {
    if (event instanceof CustomEvent) {
      console.log(`AnalyticsComponent: Tracking user login for:`, event.detail.username);
      // Send data to analytics service, update UI, etc.
    }
  }

  // Essential: Cleanup when component is destroyed/unmounted
  destroy() {
    this.bus.unsubscribe(AppEvents.USER_LOGIN, this.handleUserLogin.bind(this));
    console.log('AnalyticsComponent: Listener removed.');
  }
}

class NotificationComponent {
  constructor(bus) {
    this.bus = bus;
    this.bus.subscribe(AppEvents.USER_LOGIN, this.showWelcomeNotification.bind(this));
  }

  showWelcomeNotification(event) {
    if (event instanceof CustomEvent) {
      console.log(`NotificationComponent: Displaying welcome for: ${event.detail.username}`);
      // Display a toast or modal notification
    }
  }

  destroy() {
    this.bus.unsubscribe(AppEvents.USER_LOGIN, this.showWelcomeNotification.bind(this));
    console.log('NotificationComponent: Listener removed.');
  }
}

// --- Step 5: Orchestrate components ---
const authService = new AuthComponent(appEventBus);
const analyticsService = new AnalyticsComponent(appEventBus);
const notificationService = new NotificationComponent(appEventBus);

// Simulate user login
setTimeout(() => {
  authService.login('johndoe');
}, 1000);

// Simulate component destruction after a while
setTimeout(() => {
  analyticsService.destroy();
  notificationService.destroy();
  console.log('\n--- Components Cleaned Up ---');
}, 4000);