import { LightningElement, api } from 'lwc';

export default class LifecycleDemo extends LightningElement {

    /**
     * constructor()
     * - First hook called when component instance is created
     * - Called BEFORE the component is inserted into DOM
     * - Never access this.template here (DOM not ready)
     * - Always call super() first
     * - Use: initialize primitive properties
     */
    constructor() {
        super();
        // OK: set primitive defaults
        this.title = 'Initial value';
        // NOT OK: this.template.querySelector(...) — DOM not ready yet
    }

    /**
     * connectedCallback()
     * - Called when component is INSERTED into the DOM
     * - this.template is accessible
     * - Use: fetch data, add event listeners, subscribe to message channels
     * - Fires for every re-insertion (navigation, conditional rendering)
     */
    connectedCallback() {
        this.loadInitialData();
        window.addEventListener('resize', this.handleResize.bind(this));
    }

    /**
     * render()
     * - Called to determine which template to render
     * - Must return a template reference (imported HTML file)
     * - Use: conditional template switching (e.g. edit vs read mode)
     * - RARE — most components don't need this hook
     */
    render() {
        return this.isEditMode ? editTemplate : viewTemplate;
    }

    /**
     * renderedCallback()
     * - Called AFTER every render (first render + re-renders)
     * - DOM is fully painted — safe to use this.template.querySelector()
     * - Use: third-party JS lib init, DOM measurements, canvas operations
     * - IMPORTANT: guard with a flag to avoid infinite loops
     */
    renderedCallback() {
        if (this.hasRendered) return; // prevent re-run on every re-render
        this.hasRendered = true;
        // Safe to access DOM now
        const input = this.template.querySelector('input');
        if (input) input.focus();
    }

    /**
     * disconnectedCallback()
     * - Called when component is REMOVED from the DOM
     * - Use: clean up event listeners, unsubscribe from channels
     * - Prevents memory leaks
     */
    disconnectedCallback() {
        window.removeEventListener('resize', this.handleResize);
        // unsubscribe from MessageChannel if subscribed
    }

    /**
     * errorCallback(error, stack)
     * - Called when a child component throws an error
     * - ONLY works on PARENT components — acts as an error boundary
     * - Use: graceful error UI, logging
     */
    errorCallback(error, stack) {
        console.error('Child error:', error);
        console.error('Stack:', stack);
        this.errorMessage = error.message;
    }
}

import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {

    // Simple @api property — parent passes value via HTML attribute
    @api title = 'Default Title';
    @api recordId;
    @api isReadOnly = false;

    // @api with getter/setter — intercept changes from parent
    _items = [];
    @api
    get items() {
        return this._items;
    }
    set items(value) {
        // Transform data as it arrives from parent
        this._items = value ? [...value].sort((a, b) => a.name.localeCompare(b.name)) : [];
    }

    // @api method — parent can call this directly via template ref
    @api
    resetForm() {
        this.template.querySelectorAll('lightning-input')
            .forEach(input => input.reset());
    }

    // WRONG: Never mutate @api props inside the child — read-only from child
    // this.recordId = 'newId'; // ← this throws an error in LWC
}

// Parent HTML usage:
<c-child-component
    title="My Title"
    record-id={currentRecordId}
    items={accountList}
></c-child-component>

// Parent JS — calling @api method via template ref:
// this.template.querySelector('c-child-component').resetForm();

import { LightningElement, track } from 'lwc';

export default class TrackDemo extends LightningElement {

    // Since API v39+, primitive reassignment is reactive WITHOUT @track
    count = 0;           // reactive — this.count++ triggers re-render
    name = '';            // reactive — this.name = 'x' triggers re-render
    isOpen = false;       // reactive — this.isOpen = true triggers re-render

    // Object REASSIGNMENT is reactive WITHOUT @track
    user = { name: 'Alice', age: 30 };
    replaceUser() {
        // Reassigning the whole object — reactive, no @track needed
        this.user = { name: 'Bob', age: 25 };
    }

    // Deep MUTATION of nested object/array — needs @track
    @track config = {
        filters: { status: 'Active', type: 'Customer' },
        pagination: { page: 1, pageSize: 10 }
    };

    updateFilter() {
        // Mutating a nested property — ONLY reactive because of @track
        this.config.filters.status = 'Inactive'; // re-renders
        this.config.pagination.page = 2;         // re-renders
    }

    // @track on arrays — needed for push/splice/sort mutations
    @track rows = [];
    addRow() {
        // .push() mutates in place — needs @track to be reactive
        this.rows.push({ id: Date.now(), value: 'New' });
    }
}

public with sharing class AccountController {

    /**
     * @AuraEnabled(cacheable=true) — required for @wire
     * cacheable=true: result is cached, read-only SOQL only
     * cacheable=false: for DML operations, used imperatively
     */
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts(String searchKey) {
        String key = '%' + searchKey + '%';
        return [
            SELECT Id, Name, Industry, AnnualRevenue, Phone
            FROM Account
            WHERE Name LIKE :key
            ORDER BY Name
            LIMIT 50
        ];
    }

    // NOT cacheable — used imperatively for DML
    @AuraEnabled
    public static Account saveAccount(Account accountRecord) {
        try {
            upsert accountRecord;
            return accountRecord;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }

    @AuraEnabled(cacheable=true)
    public static Account getAccountById(Id recordId) {
        return [
            SELECT Id, Name, Industry, Phone, BillingCity
            FROM Account
            WHERE Id = :recordId
            LIMIT 1
        ];
    }
}

import { LightningElement, api, wire, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';
import getAccountById from '@salesforce/apex/AccountController.getAccountById';
import saveAccount from '@salesforce/apex/AccountController.saveAccount';

export default class AccountList extends LightningElement {

    @api recordId;
    searchKey = '';
    isLoading = false;
    wiredAccountsResult; // store wire result for refreshApex

    // ─── PATTERN 1: @wire with function handler ──────────────────
    // Best when you need to handle data AND error separately
    accounts = [];
    error;

    @wire(getAccounts, { searchKey: '$searchKey' })
    wiredAccounts(result) {
        this.wiredAccountsResult = result; // store for refreshApex
        const { data, error } = result;
        if (data) {
            this.accounts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = [];
        }
    }

    // ─── PATTERN 2: @wire directly to property ───────────────────
    // Simpler — good when you just display data
    @wire(getAccountById, { recordId: '$recordId' })
    account;
    // Template: {account.data.Name}, {account.error}

    // ─── PATTERN 3: Imperative Apex call (async/await) ───────────
    // Use for: DML, user-triggered actions, conditional calling
    async handleSave(event) {
        const accountToSave = {
            Id: this.recordId,
            Name: event.detail.name,
            Phone: event.detail.phone
        };

        this.isLoading = true;
        try {
            await saveAccount({ accountRecord: accountToSave });
            this.dispatchEvent(new ShowToastEvent({
                title: 'Success', message: 'Account saved', variant: 'success'
            }));
            // Refresh @wire cache after DML
            await refreshApex(this.wiredAccountsResult);
        } catch (error) {
            this.dispatchEvent(new ShowToastEvent({
                title: 'Error',
                message: error.body?.message || 'Unknown error',
                variant: 'error'
            }));
        } finally {
            this.isLoading = false;
        }
    }

    handleSearchChange(event) {
        this.searchKey = event.target.value; // $ prefix makes @wire re-fire
    }
}

// ─── childComponent.js ──────────────────────────────────────
import { LightningElement, api } from 'lwc';

export default class ChildComponent extends LightningElement {

    @api label = 'Submit';

    handleClick() {
        // Create custom event with detail payload
        const evt = new CustomEvent('recordselect', {
            detail: {
                recordId: '001xx000003GYkl',
                recordName: 'Acme Corp'
            },
            bubbles: true,    // event bubbles up through DOM tree
            composed: false   // false = stays inside shadow boundary
        });
        this.dispatchEvent(evt);
    }
}

// childComponent.html
<template>
    <lightning-button label={label} onclick={handleClick}></lightning-button>
</template>

// ─── parentComponent.js ──────────────────────────────────────
import { LightningElement } from 'lwc';

export default class ParentComponent extends LightningElement {

    selectedRecord = {};

    handleRecordSelect(event) {
        // Access the detail payload from child event
        const { recordId, recordName } = event.detail;
        this.selectedRecord = { recordId, recordName };
        console.log('Selected:', recordName);
    }
}

// parentComponent.html
<template>
    <!-- Event name becomes: on + eventname = onrecordselect -->
    <c-child-component
        label="Pick Account"
        onrecordselect={handleRecordSelect}
    ></c-child-component>
    <p>Selected: {selectedRecord.recordName}</p>
</template>

// ─── accountMessageChannel.messageChannel-meta.xml ──────────
<?xml version="1.0" encoding="UTF-8"?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>AccountMessageChannel</masterLabel>
    <isExposed>true</isExposed>
    <fields>
        <fieldName>recordId</fieldName>
        <description>The selected record Id</description>
    </fields>
    <fields>
        <fieldName>action</fieldName>
        <description>Action type: select, update, delete</description>
    </fields>
</LightningMessageChannel>

// ─── Publisher component JS ──────────────────────────────────
import { LightningElement, wire } from 'lwc';
import { MessageContext, publish } from 'lightning/messageService';
import ACCOUNT_MC from '@salesforce/messageChannel/AccountMessageChannel__c';

export default class PublisherComponent extends LightningElement {

    @wire(MessageContext) messageContext;

    handleRowSelect(event) {
        const payload = {
            recordId: event.detail.row.Id,
            action: 'select'
        };
        publish(this.messageContext, ACCOUNT_MC, payload);
    }
}

// ─── Subscriber component JS ─────────────────────────────────
import { LightningElement, wire } from 'lwc';
import { MessageContext, subscribe, unsubscribe } from 'lightning/messageService';
import ACCOUNT_MC from '@salesforce/messageChannel/AccountMessageChannel__c';

export default class SubscriberComponent extends LightningElement {

    @wire(MessageContext) messageContext;
    subscription = null;
    selectedId;

    connectedCallback() {
        this.subscription = subscribe(
            this.messageContext,
            ACCOUNT_MC,
            (message) => this.handleMessage(message)
        );
    }

    handleMessage(message) {
        this.selectedId = message.recordId;
    }

    disconnectedCallback() {
        unsubscribe(this.subscription);
        this.subscription = null;
    }
}

export default class GetterDemo extends LightningElement {

    accounts = [];
    searchKey = '';
    sortField = 'Name';

    // Getter — no @track needed, auto-recomputes when dependencies change
    get filteredAccounts() {
        return this.accounts
            .filter(a => a.Name.toLowerCase().includes(this.searchKey.toLowerCase()))
            .sort((a, b) => a[this.sortField].localeCompare(b[this.sortField]));
    }

    get hasAccounts() {
        return this.filteredAccounts.length > 0;
    }

    get accountCount() {
        return `Showing ${this.filteredAccounts.length} of ${this.accounts.length} accounts`;
    }

    get isButtonDisabled() {
        return !this.searchKey || this.isLoading;
    }
}

// Template usage — clean, no manual state management:
// <template lwc:if={hasAccounts}>
//   <p>{accountCount}</p>
//   <template for:each={filteredAccounts} for:item="acc">
//     <p key={acc.Id}>{acc.Name}</p>
//   </template>
// </template>