Blueprints

/**
 * Blueprint Examples - from public/showcase/blueprints.
 */
export function mount(root) {
    const blueprints = {
        contact: {
            name: { type: 'string', required: true, minLength: 2, label: 'Full Name', placeholder: 'Enter your full name' },
            email: { type: 'email', required: true, label: 'Email Address', placeholder: 'you@example.com' },
            message: { type: 'textarea', required: true, minLength: 10, rows: 4, label: 'Message', placeholder: 'Your message here...' }
        },
        registration: {
            email: { type: 'email', required: true, label: 'Email Address' },
            password: {
                type: 'password',
                required: true,
                minLength: 8,
                label: 'Password',
                help: 'At least 8 characters',
                validate: (value) => {
                    if (!/[A-Z]/.test(value)) return 'Need uppercase letter';
                    if (!/[0-9]/.test(value)) return 'Need a number';
                    return true;
                }
            },
            confirmPassword: {
                type: 'password',
                required: true,
                label: 'Confirm Password',
                validate: (value, data) => {
                    return value === data.password || 'Passwords do not match';
                }
            },
            agreeToTerms: {
                type: 'boolean',
                required: true,
                label: 'I agree to the Terms of Service',
                validate: (value) => value || 'You must accept the terms'
            }
        },
        settings: {
            notifications: { type: 'boolean', default: true, label: 'Email Notifications' },
            theme: { type: 'select', options: ['light', 'dark', 'auto'], default: 'auto', label: 'Theme' },
            language: {
                type: 'radio',
                options: [
                    { value: 'en', label: 'English' },
                    { value: 'es', label: 'Español' },
                    { value: 'fr', label: 'Français' }
                ],
                default: 'en',
                label: 'Language'
            }
        },
        product: {
            name: {
                type: 'string',
                required: true,
                maxLength: 100,
                label: 'Product Name',
                formConfig: {
                    span: 2,  // Span 2 columns in grid layout
                    tooltip: 'The display name of your product'
                }
            },
            sku: {
                type: 'string',
                required: true,
                pattern: /^[A-Z0-9-]+$/,
                label: 'SKU',
                formConfig: {
                    placeholder: 'e.g. PROD-001',
                    tooltip: 'Stock Keeping Unit - unique product identifier'
                }
            },
            price: {
                type: 'number',
                required: true,
                min: 0,
                step: 0.01,
                label: 'Price (£)',
                formConfig: {
                    placeholder: '0.00',
                    tooltip: 'Product price in GBP'
                }
            },
            category: {
                type: 'select',
                required: true,
                options: ['Electronics', 'Clothing', 'Home'],
                label: 'Category',
                formConfig: {
                    tooltip: 'Product category for organisation'
                }
            },
            stock: {
                type: 'number',
                required: true,
                min: 0,
                label: 'Stock Quantity',
                formConfig: {
                    placeholder: '0',
                    tooltip: 'Current available inventory'
                }
            },
            description: {
                type: 'textarea',
                required: true,
                maxLength: 1000,
                rows: 5,
                label: 'Description',
                formConfig: {
                    span: 2,  // Full width in 2-column grid
                    placeholder: 'Product description...',
                    helperText: 'Maximum 1000 characters',
                    tooltip: 'Detailed product description for customers'
                }
            },
            inStock: {
                type: 'boolean',
                default: true,
                label: 'In Stock',
                formConfig: { span: 2 }  // Full width
            }
        },
        userProfile: {
            firstName: {
                type: 'string',
                required: true,
                minLength: 2,
                label: 'First Name',
                formConfig: { placeholder: 'Enter first name' }
            },
            lastName: {
                type: 'string',
                required: true,
                minLength: 2,
                label: 'Last Name',
                formConfig: { placeholder: 'Enter last name' }
            },
            email: {
                type: 'email',
                required: true,
                label: 'Email Address',
                formConfig: {
                    placeholder: 'you@example.com',
                    helperText: 'We will never share your email'
                }
            },
            phone: {
                type: 'tel',
                label: 'Phone Number',
                formConfig: { placeholder: '+44 20 1234 5678' }
            },
            bio: {
                type: 'textarea',
                rows: 4,
                maxLength: 500,
                label: 'Biography',
                formConfig: {
                    span: 2,  // Full width
                    placeholder: 'Tell us about yourself...',
                    helperText: 'Maximum 500 characters'
                }
            },
            website: {
                type: 'url',
                label: 'Website',
                formConfig: {
                    placeholder: 'https://example.com',
                    hint: '(optional)'
                }
            },
            role: {
                type: 'select',
                required: true,
                options: ['Developer', 'Designer', 'Manager', 'Other'],
                label: 'Role',
                default: 'Developer'
            },
            newsletter: {
                type: 'boolean',
                label: 'Subscribe to newsletter',
                default: false,
                formConfig: { span: 2 }
            }
        }
    };
    // Initialize blueprint tabs - CREATE HTML FIRST!
    const tabItems = [
        { label: 'Contact', value: 'contact' },
        { label: 'Registration', value: 'registration' },
        { label: 'Settings', value: 'settings' },
        { label: 'Product (Grid)', value: 'product' },
        { label: 'User Profile (Grid)', value: 'userProfile' }
    ];
    // Build tabs HTML structure
    let tabsHTML = '<div class="tabs"><div class="tab-list" role="tablist">';
    tabItems.forEach((item, index) => {
        tabsHTML += `<button type="button" class="tab-item${index === 0 ? ' active' : ''}" role="tab" data-tab="${item.value}">${item.label}</button>`;
    });
    tabsHTML += '</div><div class="tabs-content">';
    tabItems.forEach((item, index) => {
        tabsHTML += `<div class="tab-panel${index === 0 ? ' active' : ''}" role="tabpanel" data-panel="${item.value}" id="tab-${item.value}"></div>`;
    });
    tabsHTML += '</div></div>';
    // Sanitize and insert HTML
    $(root).find('#blueprint-tabs').html(tabsHTML);
    // NOW initialize the tabs component
    const tabsInstance = E.tabs($(root).find('#blueprint-tabs .tabs').get(0), {
        animation: true,
        onChange: (e) => {
            const exampleKey = tabItems[e.index].value;
            showBlueprintExample(exampleKey);
        }
    });
    function showBlueprintExample(key) {
        const blueprint = blueprints[key];
        const container = $(root).find(`#tab-${key}`);

        // Escape JSON for safe HTML insertion
        const blueprintCode = JSON.stringify(blueprint, null, 2)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');

        const html = `
            <div class="grid grid-cols-1 grid-cols-md-2 gap-4">
                <div>
                    <h4 class="font-semibold mb-2">Blueprint Code</h4>
                    <pre class="blueprint-code">${blueprintCode}</pre>
                </div>
                <div>
                    <h4 class="font-semibold mb-2">Generated Form</h4>
                    <div class="result-pane" id="form-${key}"></div>
                </div>
            </div>
        `;

        container.html(html);

        // Generate and render form - ONE-STEP API
        // Use grid layout for product and userProfile examples
        const formLayout = (key === 'product' || key === 'userProfile') ? 'grid' : 'stacked';
        const formColumns = 2;

        F.render(`#form-${key}`, blueprint, {}, {
            layout: formLayout,
            columns: formColumns,
            submitText: 'Submit',
            onSubmit: (data) => {
                E.toast('Form submitted successfully!', { type: 'success' });
                console.log('Submitted:', data);
            },
            onValidationError: (errors) => {
                E.toast('Please fix validation errors', { type: 'error' });
                console.error('Validation errors:', errors);
            }
        });
    }
    // Show first example
    showBlueprintExample('contact');
    return () => tabsInstance.destroy();
}

/**
 * Blueprint → Form Generation - from public/showcase/blueprints.
 */
export function mount(root) {
    // Contact Form Example - ONE-STEP API
    const contactBlueprint = {
        name: {
            type: 'string',
            required: true,
            minLength: 2,
            label: 'Full Name',
            formConfig: {
                tooltip: 'Enter your first and last name'
            }
        },
        email: {
            type: 'email',
            required: true,
            label: 'Email',
            formConfig: {
                tooltip: 'We\'ll never share your email with anyone'
            }
        },
        message: {
            type: 'textarea',
            required: true,
            minLength: 10,
            rows: 4,
            label: 'Message',
            formConfig: {
                tooltip: 'Let us know how we can help you'
            }
        }
    };
    F.render('#contact-form', contactBlueprint, {}, {
        layout: 'stacked',
        submitText: 'Send Message',
        onSubmit: (data) => {
            E.toast('Message sent!', { type: 'success' });
            console.log('Form submitted:', data);
        },
        onValidationError: (errors) => {
            E.toast('Please fix validation errors', { type: 'error' });
            console.error('Validation errors:', errors);
        }
    });
}

/**
 * Blueprint → Reactive Model - from public/showcase/blueprints.
 */
export function mount(root) {
    // Reactive Model Demo
    const userBlueprint = {
        name: { type: 'string', required: true, minLength: 2 },
        email: { type: 'email', required: true },
        age: { type: 'number', min: 0, max: 120 }
    };
    const userModel = M.create(userBlueprint, {
        name: 'Alice',
        email: 'alice@example.com',
        age: 30
    });
    let changeLog = [];
    // Update state display
    function updateModelState() {
        $(root).find('#model-state-display').text(JSON.stringify(userModel.toJSON(), null, 2));
    }
    // Manual binding - M.bind() doesn't work with standard HTML inputs
    $(root).find('#model-name').on('input', function() {
        try {
            userModel.set('name', $(this).val());
        } catch (error) {
            console.warn('Validation error (name):', error.message);
        }
    });
    $(root).find('#model-email').on('input', function() {
        try {
            userModel.set('email', $(this).val());
        } catch (error) {
            console.warn('Validation error (email):', error.message);
        }
    });
    $(root).find('#model-age').on('input', function() {
        try {
            const value = $(this).val();
            userModel.set('age', value === '' ? null : parseInt(value, 10));
        } catch (error) {
            console.warn('Validation error (age):', error.message);
        }
    });
    // Listen for changes
    userModel.onChange((event) => {
        changeLog.push(`${event.field}: ${event.oldValue} → ${event.newValue}`);
        $(root).find('#model-change-log').text(changeLog.join('\n'));
        updateModelState();

        // Update input if changed programmatically
        if (event.field === 'name') $(root).find('#model-name').val(event.newValue);
        if (event.field === 'email') $(root).find('#model-email').val(event.newValue);
        if (event.field === 'age') $(root).find('#model-age').val(event.newValue);
    });
    updateModelState();
    // Validate button
    $(root).find('#validate-model').on('click', () => {
        const errors = userModel.validate();

        // Display validation result
        if (errors && errors.length > 0) {
            $(root).find('#validation-display').text(JSON.stringify(errors, null, 2));
            $(root).find('#validation-result').show();
            E.toast('Validation errors found', { type: 'error' });
        } else {
            $(root).find('#validation-display').text('✓ All fields are valid');
            $(root).find('#validation-result').show();
            E.toast('All fields valid!', { type: 'success' });
        }
    });
    // Reset button
    $(root).find('#reset-model').on('click', () => {
        userModel.reset();
        changeLog = [];
        $(root).find('#model-change-log').text('No changes yet');
        $(root).find('#validation-result').hide();
        updateModelState();
    });
}

/**
 * B.extend() - Merge Blueprints - from public/showcase/blueprints.
 */
export function mount(root) {
    // Composition demos
    $(root).find('#extend-demo').on('click', () => {
        const base = { name: { type: 'string' }, email: { type: 'email' } };
        const extended = { email: { required: true }, age: { type: 'number' } };
        const result = B.extend(base, extended);
        $(root).find('#extend-result-code').text(JSON.stringify(result, null, 2));
        $(root).find('#extend-result').show();
    });
}

/**
 * B.pick() - Extract Fields - from public/showcase/blueprints.
 */
export function mount(root) {
    $(root).find('#pick-demo').on('click', () => {
        const full = {
            name: { type: 'string' },
            email: { type: 'email' },
            age: { type: 'number' },
            role: { type: 'string' }
        };
        const result = B.pick(full, ['name', 'email']);
        $(root).find('#pick-result-code').text(JSON.stringify(result, null, 2));
        $(root).find('#pick-result').show();
    });
}

/**
 * B.omit() - Remove Fields - from public/showcase/blueprints.
 */
export function mount(root) {
    $(root).find('#omit-demo').on('click', () => {
        const admin = {
            name: { type: 'string' },
            email: { type: 'email' },
            role: { type: 'string' },
            permissions: { type: 'array' }
        };
        const result = B.omit(admin, ['permissions']);
        $(root).find('#omit-result-code').text(JSON.stringify(result, null, 2));
        $(root).find('#omit-result').show();
    });
}