/**
 * File Path: assets/js/wizard/wizard-steps.js
 *
 * MBS Setup Wizard -- Step1 through Step5 + Confetti.
 * Reads BrowserMock, BookPreview, CatalogPreview, Footer from window.MBSWizardParts.
 * Attaches Step1-5 and Confetti to window.MBSWizardParts.
 *
 * @package MyBookShowroom
 * @since   1.2.0
 */

(function( wp, Wizard ) {
    'use strict';
    var __ = wp.i18n.__;
    var sprintf = wp.i18n.sprintf;

    if ( ! wp || ! wp.element ) {
        return;
    }

    var h        = wp.element.createElement;
    var Fragment = wp.element.Fragment;
    var P        = window.MBSWizardParts = window.MBSWizardParts || {};
    var layouts  = Wizard.layouts || [];

    /* =========================================================
       Step 1 -- Welcome
    ========================================================= */

    function Step1( props ) {
        return h( 'div', { className: 'mbs-wizard-main mbs-wizard-main--full', style: { display: 'flex', flexDirection: 'column' } },
            h( 'div', { className: 'mbs-wizard-form', style: { flex: 1 } },
                h( 'div', { className: 'mbs-wizard-badge', style: { marginBottom: '20px' } }, __( '2-MINUTE SETUP', 'my-book-showroom' ) ),
                h( 'h2', { style: { fontFamily: 'Georgia,serif', fontSize: '26px', fontWeight: 400, color: '#2C3E6B', margin: '0 0 18px' } },
                    __( 'Your books deserve a proper stage.', 'my-book-showroom' )
                ),
                h( 'p', { style: { lineHeight: 1.6, marginBottom: '32px', fontSize: '14px' } },
                    __( "Welcome to My Book Showroom. We'll help you add your first book, pick a layout, and place a shortcode anywhere on your site \u2014 in about two minutes.", 'my-book-showroom' )
                ),
                h( 'button', {
                    className: 'mbs-wizard-btn mbs-wizard-btn--text',
                    style: { padding: 0, fontSize: '12px' },
                    onClick: props.onSkip,
                }, __( 'Already a power user? Skip the wizard', 'my-book-showroom' ) + ' \u2192' )
            ),
            h( P.Footer, { onNext: props.onNext, nextLabel: __( 'Continue', 'my-book-showroom' ) + ' \u2192' } )
        );
    }

    /* =========================================================
       Step 2 -- First book
    ========================================================= */

    function Step2( props ) {
        var book    = props.book;
        var setBook = props.setBook;
        var loading = props.loading;

        function setField( key ) {
            return function( e ) {
                setBook( Object.assign( {}, book, { [ key ]: e.target.value } ) );
            };
        }

        function pickCover() {
            if ( P.openMediaPicker ) {
                P.openMediaPicker( function( att ) {
                    setBook( Object.assign( {}, book, { cover: att } ) );
                });
            }
        }

        function removeCover() {
            setBook( Object.assign( {}, book, { cover: null } ) );
        }

        return h( 'div', { className: 'mbs-wizard-main mbs-wizard-main--split', style: { display: 'flex', flexDirection: 'column' } },
            h( 'div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', flex: 1, overflow: 'hidden' } },
                // Form pane
                h( 'div', { className: 'mbs-wizard-form' },
                    h( 'h2', { style: { fontFamily: 'Georgia,serif', fontSize: '22px', fontWeight: 400, color: '#2C3E6B', margin: '0 0 6px' } },
                        __( 'Add your first book', 'my-book-showroom' )
                    ),
                    h( 'p', { style: { fontSize: '12px', color: '#9AABBA', marginBottom: '28px', marginTop: 0 } },
                        __( 'Just the basics \u2014 formats, ISBNs, and series details come later.', 'my-book-showroom' )
                    ),
                    h( 'label', { className: 'mbs-wizard-label', htmlFor: 'mbs-wiz-title' }, __( 'Book title', 'my-book-showroom' ) ),
                    h( 'input', {
                        id: 'mbs-wiz-title',
                        className: 'mbs-wizard-input',
                        style: { marginBottom: '18px' },
                        type: 'text',
                        value: book.title,
                        onChange: setField( 'title' ),
                        placeholder: __( 'e.g. The Midnight Archive', 'my-book-showroom' ),
                    }),
                    h( 'label', { className: 'mbs-wizard-label', htmlFor: 'mbs-wiz-author' }, __( 'Author', 'my-book-showroom' ) ),
                    h( 'input', {
                        id: 'mbs-wiz-author',
                        className: 'mbs-wizard-input',
                        style: { marginBottom: '18px' },
                        type: 'text',
                        value: book.author,
                        onChange: setField( 'author' ),
                        placeholder: __( 'e.g. Anna Poe', 'my-book-showroom' ),
                    }),
                    h( 'label', { className: 'mbs-wizard-label' }, __( 'Cover', 'my-book-showroom' ) ),
                    h( 'div', { className: 'mbs-wizard-dropzone' },
                        h( 'div', { className: 'mbs-wizard-dropzone__thumb' },
                            book.cover
                                ? h( 'img', { src: book.cover.url, alt: '' } )
                                : null
                        ),
                        h( 'div', null,
                            book.cover
                                ? h( Fragment, null,
                                    h( 'div', { style: { fontSize: '11px', color: '#5A6472', marginBottom: '6px' } },
                                        sprintf( __( '%1$s \u00b7 %2$s KB', 'my-book-showroom' ), book.cover.name, book.cover.sizeKb )
                                    ),
                                    h( 'button', { type: 'button', className: 'mbs-wizard-btn mbs-wizard-btn--ghost', style: { fontSize: '11px', padding: '5px 10px', marginRight: '6px' }, onClick: pickCover }, __( 'Change', 'my-book-showroom' ) ),
                                    h( 'button', { type: 'button', className: 'mbs-wizard-btn mbs-wizard-btn--text', style: { fontSize: '11px', padding: '5px 10px' }, onClick: removeCover }, __( 'Remove', 'my-book-showroom' ) )
                                )
                                : h( Fragment, null,
                                    h( 'div', { style: { fontSize: '12px', color: '#9AABBA', marginBottom: '8px' } }, __( 'Drag an image here, or\u2026', 'my-book-showroom' ) ),
                                    h( 'button', { type: 'button', className: 'mbs-wizard-btn mbs-wizard-btn--ghost', style: { fontSize: '12px', padding: '7px 14px' }, onClick: pickCover }, __( 'Choose from Media Library', 'my-book-showroom' ) )
                                )
                        )
                    ),
                    h( 'div', { style: { fontSize: '11px', color: '#9AABBA', marginTop: '6px' } }, __( '2:3 portrait recommended \u00b7 JPG, PNG, or WebP', 'my-book-showroom' ) )
                ),
                // Preview pane
                h( 'div', { className: 'mbs-wizard-preview' },
                    h( 'div', { className: 'mbs-wizard-preview__label' }, __( 'LIVE PREVIEW', 'my-book-showroom' ) ),
                    h( P.BrowserMock, null, h( P.BookPreview, { book: book } ) ),
                    h( 'div', { className: 'mbs-wizard-preview__caption' }, __( 'How this book will appear on its own page.', 'my-book-showroom' ) )
                )
            ),
            h( P.Footer, {
                onBack: props.onBack,
                onNext: props.onNext,
                loading: loading,
                nextLabel: __( 'Continue', 'my-book-showroom' ) + ' \u2192',
            })
        );
    }

    /* =========================================================
       Step 3 -- Layout
    ========================================================= */

    function Step3( props ) {
        var layout    = props.layout;
        var setLayout = props.setLayout;
        var loading   = props.loading;

        return h( 'div', { className: 'mbs-wizard-main mbs-wizard-main--split', style: { display: 'flex', flexDirection: 'column' } },
            h( 'div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', flex: 1, overflow: 'hidden' } },
                // Layout picker
                h( 'div', { className: 'mbs-wizard-form' },
                    h( 'h2', { style: { fontFamily: 'Georgia,serif', fontSize: '22px', fontWeight: 400, color: '#2C3E6B', margin: '0 0 6px' } },
                        __( 'Choose a layout', 'my-book-showroom' )
                    ),
                    h( 'p', { style: { fontSize: '12px', color: '#9AABBA', marginBottom: '20px', marginTop: 0 } },
                        __( 'Watch the preview update as you click. You can change this anytime.', 'my-book-showroom' )
                    ),
                    h( 'ul', { className: 'mbs-wizard-layout-list' },
                        layouts.map( function( opt ) {
                            var isSelected = layout === opt.slug;
                            return h( 'li', { key: opt.slug },
                                h( 'button', {
                                    type: 'button',
                                    className: 'mbs-wizard-layout-option' + ( isSelected ? ' is-selected' : '' ),
                                    onClick: function() { setLayout( opt.slug ); },
                                },
                                    h( 'span', { className: 'mbs-wizard-layout-option__radio' } ),
                                    h( 'div', null,
                                        h( 'div', { style: { fontWeight: 700, fontSize: '13px', color: isSelected ? '#2C3E6B' : '#5A6472' } }, opt.name ),
                                        h( 'div', { style: { fontSize: '11px', color: '#9AABBA', marginTop: '2px' } }, opt.desc )
                                    )
                                )
                            );
                        })
                    )
                ),
                // Preview pane
                h( 'div', { className: 'mbs-wizard-preview' },
                    h( 'div', { className: 'mbs-wizard-preview__label' }, __( 'LIVE PREVIEW', 'my-book-showroom' ) ),
                    h( P.BrowserMock, null, h( P.CatalogPreview, { layout: layout } ) ),
                    h( 'div', { className: 'mbs-wizard-preview__caption' }, __( 'How your catalog will appear on the page.', 'my-book-showroom' ) )
                )
            ),
            h( P.Footer, {
                onBack: props.onBack,
                onNext: props.onNext,
                loading: loading,
                nextLabel: __( 'Continue', 'my-book-showroom' ) + ' \u2192',
            })
        );
    }

    /* =========================================================
       Step 4 -- Finish (shortcode + registration, optional)
    ========================================================= */

    function Step4( props ) {
        var license       = props.license;
        var setLicense    = props.setLicense;
        var licenseActive = props.licenseActive;
        var licenseError  = props.licenseError;
        var loading       = props.loading;
        var copied        = props.copied;
        var setCopied     = props.setCopied;
        var telemetry     = props.telemetry;
        var setTelemetry  = props.setTelemetry;

        var cardStyle = {
            background: '#fff', border: '1px solid #E0D8C8', borderRadius: '8px',
            padding: '24px', marginBottom: '16px',
        };

        function copyShortcode() {
            var text = '[mbs_books]';
            if ( navigator.clipboard ) {
                navigator.clipboard.writeText( text );
            }
            setCopied( true );
            setTimeout( function() { setCopied( false ); }, 1500 );
        }

        return h( 'div', { className: 'mbs-wizard-main mbs-wizard-main--full', style: { display: 'flex', flexDirection: 'column' } },
            h( 'div', { className: 'mbs-wizard-form', style: { flex: 1 } },
                h( 'h2', { style: { fontFamily: 'Georgia,serif', fontSize: '22px', fontWeight: 400, color: '#2C3E6B', margin: '0 0 6px' } },
                    __( 'One last step.', 'my-book-showroom' )
                ),
                h( 'p', { style: { fontSize: '12px', color: '#9AABBA', marginBottom: '24px', marginTop: 0 } },
                    __( "Paste your shortcode where you'd like the catalog to appear. Registration is free, optional, and takes 30 seconds.", 'my-book-showroom' )
                ),
                // Shortcode card
                h( 'div', { style: cardStyle },
                    h( 'div', { style: { fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#9AABBA', marginBottom: '12px' } }, __( 'Your shortcode', 'my-book-showroom' ) ),
                    h( 'div', { style: { display: 'flex', alignItems: 'center', gap: '10px' } },
                        h( 'code', { style: {
                            fontFamily: 'Courier New,monospace', fontSize: '14px',
                            background: '#F4F0E8', padding: '8px 14px', borderRadius: '4px',
                            color: '#2C3E6B', fontWeight: 700, letterSpacing: '0.02em',
                            flex: 1,
                        }}, '[mbs_books]' ),
                        h( 'button', {
                            type: 'button',
                            className: 'mbs-wizard-btn mbs-wizard-btn--ghost',
                            style: { padding: '8px 16px', fontSize: '12px' },
                            onClick: copyShortcode,
                        }, copied ? __( 'Copied \u2713', 'my-book-showroom' ) : __( 'Copy', 'my-book-showroom' ) )
                    )
                ),
                // License card
                h( 'div', { style: cardStyle },
                    h( 'div', { style: { display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '12px' } },
                        h( 'div', { style: { fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', color: '#9AABBA' } }, __( 'Register your plugin (optional)', 'my-book-showroom' ) ),
                        h( 'span', { className: 'mbs-wizard-badge' }, __( 'FREE \u2014 no tricks', 'my-book-showroom' ) )
                    ),
                    licenseActive
                        ? h( 'div', { style: { color: '#1A5A63', fontWeight: 700, fontSize: '13px' } }, __( '\u2713 Active \u2014 connected to updates', 'my-book-showroom' ) )
                        : h( Fragment, null,
                            h( 'div', { style: { display: 'flex', gap: '8px', marginBottom: '8px' } },
                                h( 'input', {
                                    className: 'mbs-wizard-input',
                                    type: 'text',
                                    value: license,
                                    onChange: function( e ) { setLicense( e.target.value ); },
                                    placeholder: 'MBS-XXXX-XXXX-XXXX',
                                    style: { flex: 1 },
                                    disabled: loading,
                                }),
                                h( 'button', {
                                    type: 'button',
                                    className: 'mbs-wizard-btn mbs-wizard-btn--primary',
                                    style: { whiteSpace: 'nowrap' },
                                    onClick: props.onActivate,
                                    disabled: loading || ! license.trim(),
                                }, loading ? __( 'Checking\u2026', 'my-book-showroom' ) : __( 'Activate', 'my-book-showroom' ) )
                            ),
                            licenseError
                                ? h( 'div', { style: { color: '#c0392b', fontSize: '12px', marginBottom: '6px' } }, licenseError )
                                : null,
                            h( 'div', { style: { display: 'flex', gap: '12px', alignItems: 'center' } },
                                h( 'a', {
                                    href: Wizard.licenseTabUrl || '#',
                                    style: { fontSize: '12px', color: '#4AABB8' },
                                }, __( 'Get a free key', 'my-book-showroom' ) + ' \u2192' )
                            )
                        ),
                    h( 'div', { style: { marginTop: '16px', paddingTop: '14px', borderTop: '1px solid #E0D8C8' } },
                        h( 'label', { style: { display: 'flex', alignItems: 'flex-start', gap: '8px', cursor: 'pointer', fontSize: '12px', color: '#5A6472' } },
                            h( 'input', {
                                type: 'checkbox',
                                checked: telemetry,
                                onChange: function( e ) { setTelemetry( e.target.checked ); },
                                style: { marginTop: '2px', flexShrink: 0 },
                            }),
                            h( 'span', null,
                                __( 'Share anonymous usage data to help improve My Book Showroom.', 'my-book-showroom' ),
                                ' ',
                                h( 'a', {
                                    href: Wizard.privacyUrl || 'https://www.dmrstech.com/privacy',
                                    target: '_blank',
                                    rel: 'noopener noreferrer',
                                    style: { color: '#4AABB8' },
                                }, __( 'Privacy policy', 'my-book-showroom' ) )
                            )
                        )
                    )
                )
            ),
            h( 'p', { style: { textAlign: 'center', marginTop: '4px' } },
                h( 'a', {
                    href: '#',
                    style: { fontSize: '12px', color: '#9AABBA' },
                    onClick: function( e ) { e.preventDefault(); props.onFinish(); },
                }, __( 'Skip for now', 'my-book-showroom' ) + ' \u2192' )
            ),
            h( P.Footer, {
                onBack: props.onBack,
                onNext: props.onFinish,
                loading: loading,
                nextLabel: __( 'Finish setup', 'my-book-showroom' ),
            })
        );
    }

    /* =========================================================
       Step 5 -- All set (confetti)
    ========================================================= */

    var CONFETTI_COLORS = [ '#C8B4D4', '#4AABB8', '#2C3E6B', '#F4F0E8', '#9AABBA', '#E0D8C8' ];

    function Confetti() {
        var pieces = [];
        for ( var i = 0; i < 24; i++ ) {
            pieces.push( h( 'div', {
                key: i,
                style: {
                    position: 'absolute',
                    left: ( Math.random() * 100 ) + '%',
                    top: ( Math.random() * -60 ) + 'px',
                    width: ( 6 + Math.random() * 8 ) + 'px',
                    height: ( 6 + Math.random() * 8 ) + 'px',
                    background: CONFETTI_COLORS[ i % CONFETTI_COLORS.length ],
                    borderRadius: Math.random() > 0.5 ? '50%' : '2px',
                    animation: 'mbsFall ' + ( 1.5 + Math.random() * 2 ) + 's ease-in ' + ( Math.random() * 0.8 ) + 's forwards',
                    opacity: 0,
                },
            }));
        }
        return h( 'div', { style: { position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' } },
            pieces
        );
    }

    function Step5( props ) {
        var catalogUrl = Wizard.returnTo || '#';

        return h( 'div', { className: 'mbs-wizard-main mbs-wizard-main--full', style: { position: 'relative' } },
            h( Confetti ),
            h( 'div', { className: 'mbs-wizard-form', style: { position: 'relative', zIndex: 1, justifyContent: 'center', textAlign: 'center' } },
                h( 'div', { style: { fontSize: '52px', marginBottom: '16px', animation: 'mbsPop 500ms cubic-bezier(.34,1.56,.64,1)' } }, '\uD83C\uDF89' ),
                h( 'h2', { style: { fontFamily: 'Georgia,serif', fontSize: '28px', fontWeight: 400, color: '#2C3E6B', margin: '0 0 16px' } },
                    __( "You're all set.", 'my-book-showroom' )
                ),
                h( 'p', { style: { lineHeight: 1.6, marginBottom: '32px', fontSize: '14px', maxWidth: '460px', margin: '0 auto 32px' } },
                    __( 'Your first book is in the catalog and the shortcode is ready to paste. Authors who set up well sell better \u2014 go make this page yours.', 'my-book-showroom' )
                ),
                h( 'div', { style: { display: 'flex', justifyContent: 'center', gap: '12px', flexWrap: 'wrap', marginBottom: '12px' } },
                    h( 'a', {
                        href: Wizard.dashboardUrl || 'admin.php?page=my-book-showroom',
                        className: 'mbs-wizard-btn mbs-wizard-btn--primary',
                    }, __( 'Go to Dashboard', 'my-book-showroom' ) ),
                    h( 'a', {
                        href: catalogUrl,
                        className: 'mbs-wizard-btn mbs-wizard-btn--ghost',
                    }, __( 'View my catalog', 'my-book-showroom' ) + ' \u2192' ),
                    h( 'a', {
                        href: 'post-new.php?post_type=mbs_book',
                        className: 'mbs-wizard-btn mbs-wizard-btn--ghost',
                    }, __( 'Add another book', 'my-book-showroom' ) )
                ),
                h( 'div', { style: { marginTop: '28px' } },
                    h( 'a', {
                        href: Wizard.faqUrl,
                        target: '_blank',
                        rel: 'noopener noreferrer',
                        style: { fontSize: '12px', color: '#9AABBA' },
                    }, __( 'Need a hand? Visit the MBS FAQ', 'my-book-showroom' ) )
                ),
                h( 'div', { style: { marginTop: '10px' } },
                    h( 'span', { style: { fontSize: '12px', color: '#9AABBA' } },
                        __( 'Want per-book SEO titles? Install ', 'my-book-showroom' ),
                        h( 'a', { href: 'https://yoast.com/wordpress/plugins/seo/', target: '_blank', rel: 'noopener noreferrer', style: { color: '#9AABBA' } }, 'Yoast SEO' ),
                        __( ' or ', 'my-book-showroom' ),
                        h( 'a', { href: 'https://rankmath.com/', target: '_blank', rel: 'noopener noreferrer', style: { color: '#9AABBA' } }, 'RankMath' ),
                        __( ' \u2014 they auto-discover your book catalog.', 'my-book-showroom' )
                    )
                )
            )
        );
    }

    P.Step1    = Step1;
    P.Step2    = Step2;
    P.Step3    = Step3;
    P.Step4    = Step4;
    P.Step5    = Step5;
    P.Confetti = Confetti;

})( window.wp, window.MBSWizard || {} );
