Modal

/**
 * Simplest Modal - from public/showcase/elements/modal.
 */
export function mount(root) {
    const quickStartModal = E.modal(root.querySelector('#quick-start-modal'));
    $(root).find('#quick-start-btn').on('click', () => {
            quickStartModal.open();
        });
        // Auto-wire all modal-close-btn buttons
    $('.modal-close-btn').each(function () {
            $(this).on('click', function () {
                const modal = $(this).closest('.modal').get(0);
                if (modal && modal.id) {
                    // Find and close the corresponding modal instance
                    const instances = [quickStartModal, tutorialModal, smallModal, largeModal,
                        noBackdropModal, successModal, scrollModal, parentModal, childModal];
                    instances.forEach(inst => {
                        if (inst && inst.el && inst.el.id === modal.id) {
                            inst.close();
                        }
                    });
                }
            });
        });
}

/**
 * Step 6: Complete Working Demo - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Tutorial
    const tutorialModal = E.modal(root.querySelector('#tutorial-modal'), {
            backdrop: true,
            backdropClose: true,
            keyboard: true,
            onOpen: () => console.log('Tutorial modal opened'),
            onClosed: () => console.log('Tutorial modal closed')
        });
    $(root).find('#tutorial-delete-btn').on('click', () => {
            tutorialModal.open();
        });
    $(root).find('#tutorial-confirm').on('click', () => {
          $(root).find('#tutorial-result').removeClass('hidden').html('<span class="text-success">✓ Item deleted successfully at ' + D().format('HH:mm:ss') + '</span>');
            tutorialModal.close();
        });
}

/**
 * Example 1: Small Modal - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Examples
    const smallModal = E.modal(root.querySelector('#small-modal'));
    $(root).find('#open-small').on('click', () => smallModal.open());
}

/**
 * Example 2: Large Modal with Form - from public/showcase/elements/modal.
 */
export function mount(root) {
    const largeModal = E.modal(root.querySelector('#large-modal'));
    $(root).find('#open-large').on('click', () => largeModal.open());
}

/**
 * Example 3: No Backdrop Close - from public/showcase/elements/modal.
 */
export function mount(root) {
    const noBackdropModal = E.modal(root.querySelector('#no-backdrop-modal'), {
            backdropClose: false,
            keyboard: false
        });
    $(root).find('#open-no-backdrop').on('click', () => noBackdropModal.open());
}

/**
 * Example 4: Success Message - from public/showcase/elements/modal.
 */
export function mount(root) {
    const successModal = E.modal(root.querySelector('#success-modal'));
    $(root).find('#open-success').on('click', () => successModal.open());
}

/**
 * Example 5: Scrollable Content - from public/showcase/elements/modal.
 */
export function mount(root) {
    const scrollModal = E.modal(root.querySelector('#scroll-modal'));
    $(root).find('#open-scroll').on('click', () => scrollModal.open());
}

/**
 * Example 6: Nested Modals - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Nested modals
    const parentModal = E.modal(root.querySelector('#parent-modal'));
    const childModal = E.modal(root.querySelector('#child-modal'));
    $(root).find('#open-parent').on('click', () => parentModal.open());
    $(root).find('#open-child').on('click', () => childModal.open());
}

/**
 * Example 1: Basic Factory Modal - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Factory Mode Examples
    $(root).find('#demo-factory-basic').on('click', () => {
          const modal = E.createModal({
            title: 'Welcome',
            content: '<p>This modal was created programmatically using <code>createModal()</code>!</p><p>No pre-existing HTML required.</p>',
            size: 'medium',
            buttons: [
              {id: 'close', text: 'Close', variant: 'primary'}
            ]
          });
          modal.open();
        });
}

/**
 * Example 2: Size Variants - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Size variants
    $(root).find('#demo-factory-small').on('click', () => {
          E.createModal({
            title: 'Small Modal',
            content: '<p>This is a small modal (400px max-width).</p>',
            size: 'small'
          }).open();
        });
    $(root).find('#demo-factory-medium').on('click', () => {
          E.createModal({
            title: 'Medium Modal',
            content: '<p>This is a medium modal (600px max-width).</p>',
            size: 'medium'
          }).open();
        });
    $(root).find('#demo-factory-large').on('click', () => {
          E.createModal({
            title: 'Large Modal',
            content: '<p>This is a large modal (800px max-width).</p>',
            size: 'large'
          }).open();
        });
    $(root).find('#demo-factory-xl').on('click', () => {
          E.createModal({
            title: 'Extra Large Modal',
            content: '<p>This is an extra large modal (1000px max-width).</p>',
            size: 'xl'
          }).open();
        });
}

/**
 * Example 3: Custom Buttons with Actions - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Custom buttons with actions
    $(root).find('#demo-factory-actions').on('click', () => {
          E.createModal({
            title: 'Custom Actions',
            content: '<p>Choose an action to perform:</p>',
            buttons: [
              {id: 'cancel', text: 'Cancel', variant: 'secondary'},
              {id: 'save', text: 'Save', variant: 'primary'},
              {id: 'delete', text: 'Delete', variant: 'danger'}
            ],
            onButtonClick: (buttonId, modal) => {
              console.log('Button clicked:', buttonId);
              if (buttonId === 'save') {
                E.toast('Saved successfully!', {type: 'success'});
              } else if (buttonId === 'delete') {
                E.toast('Deleted!', {type: 'error'});
              }
            }
          }).open();
        });
}

/**
 * Example 4: Dynamic Content Loading - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Dynamic content loading
    $(root).find('#demo-factory-dynamic').on('click', async () => {
          const modal = E.createModal({
            title: 'User Profile',
            content: '<div class="text-center"><p>Loading user data...</p></div>',
            size: 'large'
          });

          modal.open();

          // Simulate async data fetch
          await new Promise(resolve => setTimeout(resolve, 1000));

          const userData = {
            name: 'John Doe',
            email: 'john.doe@example.com',
            role: 'Administrator',
            lastLogin: D().format('DD/MM/YYYY')
          };

          // Update modal content
          const content = `
                <div class="grid grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Name</label>
                        <p class="mb-0">${userData.name}</p>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <p class="mb-0">${userData.email}</p>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Role</label>
                        <p class="mb-0">${userData.role}</p>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Last Login</label>
                        <p class="mb-0">${userData.lastLogin}</p>
                    </div>
                </div>
            `;

          $(modal.element).find('.dm-dialog-body').html(content);
        });
}

/**
 * Example 5: Scrollable Content - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Scrollable content
    $(root).find('#demo-factory-scroll').on('click', () => {
          const longContent = Array(15).fill(null).map((_, i) => `
                <h6 class="mb-2">Section ${i + 1}</h6>
                <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            `).join('');

          E.createModal({
            title: 'Privacy Policy',
            content: longContent,
            size: 'large',
            scrollable: true,
            buttons: [
              {id: 'decline', text: 'Decline', variant: 'secondary'},
              {id: 'accept', text: 'Accept', variant: 'primary'}
            ],
            onButtonClick: (buttonId) => {
              if (buttonId === 'accept') {
                E.toast('Privacy policy accepted', {type: 'success'});
              }
            }
          }).open();
        });
}

/**
 * Example 1: Confirmation Dialog - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Promise Mode Examples
    $(root).find('#demo-promise-confirm').on('click', async () => {
          const result = await E.showModal({
            title: 'Confirm Deletion',
            content: '<p>Are you sure you want to delete this item?</p><p class="text-sm text-danger">This action cannot be undone.</p>',
            buttons: [
              {id: 'cancel', text: 'Cancel', variant: 'secondary'},
              {id: 'delete', text: 'Delete', variant: 'danger'}
            ]
          });

          const resultDiv = $(root).find('#promise-result-1');
          if (result === 'delete') {
            resultDiv.html('<span class="text-danger">✓ Item deleted at ' + D().format('HH:mm:ss') + '</span>');
            E.toast('Item deleted successfully', {type: 'success'});
          } else {
            resultDiv.html('<span class="text-secondary">Deletion cancelled</span>');
          }
        });
}

/**
 * Example 2: Multiple Choice Selection - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Multiple choice - the chosen size is an observable the result line binds to
    const size = M.observable('');
    const sizeLabel = M.computed(() => size.value.toUpperCase());
    const handle = M.applyBindings({size, sizeLabel}, root.querySelector('#promise-result-2'));
    $(root).find('#demo-promise-choice').on('click', async () => {
          const choice = await E.showModal({
            title: 'Select Size',
            content: '<p>Choose your preferred size:</p>',
            buttons: [
              {id: 'small', text: 'Small'},
              {id: 'medium', text: 'Medium'},
              {id: 'large', text: 'Large'},
              {id: 'xl', text: 'Extra Large'}
            ]
          });

          size.value = choice;
          console.log('Selected size:', choice);
        });
    return () => handle.dispose();
}

/**
 * Example 3: Form Submission with Promise - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Form submission with promise
    // The result line binds to these observables (data-if / data-bind-text in demo.html)
    const outcome = M.observable('');
    const user = M.observable({name: '', email: ''});
    const handle = M.applyBindings({outcome, user}, root.querySelector('#promise-result-3'));
    $(root).find('#demo-promise-form').on('click', async () => {
          // The answer is a promise: Save resolves it with the form's data; Cancel, the close
          // button or the backdrop all go through close(), which resolves it with null.
          // Whichever happens first wins. F.modal builds the fields from a blueprint, with
          // validation, so Save only fires with a name and a valid email.
          const userData = await new Promise((resolve) => {
            const modal = F.modal({
              name: {type: 'string', label: 'Name', required: true, formConfig: {placeholder: 'Ada Lovelace'}},
              email: {type: 'email', label: 'Email', required: true, formConfig: {placeholder: 'ada@example.com'}}
            }, {}, {
              title: 'Enter Details',
              saveText: 'Submit',
              onSave: (data) => resolve(data)
            });
            const close = modal.close.bind(modal);
            modal.close = () => { resolve(null); close(); };
            modal.open();
          });

          if (userData && userData.name && userData.email) {
            user.value = userData;
            outcome.value = 'submitted';
          } else {
            outcome.value = 'cancelled';
          }
        });
    return () => handle.dispose();
}

/**
 * Example 4: Chained Confirmations - from public/showcase/elements/modal.
 */
export function mount(root) {
        // Chained confirmations
    $(root).find('#demo-promise-chain').on('click', async () => {
          // First confirmation
          const firstConfirm = await E.showModal({
            title: 'Warning',
            content: '<p class="mb-2">This will permanently delete all data.</p><p class="text-warning"><strong>Are you sure you want to continue?</strong></p>',
            buttons: [
              {id: 'cancel', text: 'Cancel', variant: 'secondary'},
              {id: 'continue', text: 'Continue', variant: 'warning'}
            ]
          });

          if (firstConfirm !== 'continue') {
            $(root).find('#promise-result-4').html('<span class="text-secondary">Operation cancelled at step 1</span>');
            return;
          }

          // Second confirmation
          const secondConfirm = await E.showModal({
            title: 'Final Confirmation',
            content: '<p class="text-danger"><strong>Are you absolutely sure?</strong></p><p class="text-sm">This action cannot be undone!</p>',
            buttons: [
              {id: 'no', text: 'No, Go Back', variant: 'secondary'},
              {id: 'yes', text: 'Yes, Delete Everything', variant: 'danger'}
            ]
          });

          const resultDiv = $(root).find('#promise-result-4');
          if (secondConfirm === 'yes') {
            resultDiv.html('<span class="text-danger">✓ All data deleted at ' + D().format('HH:mm:ss') + '</span>');
            E.toast('All data deleted', {type: 'error'});
          } else {
            resultDiv.html('<span class="text-secondary">Operation cancelled at step 2</span>');
          }
        });
}