import { __ } from '@wordpress/i18n'

/* Inline icon set (stroke), keeps the page asset-free. */
const Ico = ({ d, fill }) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" dangerouslySetInnerHTML={{ __html: d }} />
)
const I = {
    arrow: '<path d="M5 12h14"/><path d="m13 6 6 6-6 6"/>',
    widgets: '<path d="M12 2 3 7l9 5 9-5-9-5Z"/><path d="m3 12 9 5 9-5"/>',
    modules: '<circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3"/>',
    cart: '<path d="M3 4h2l2.4 12.2a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.8L21 7H6"/><circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/>',
    templates: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>',
    fonts: '<path d="M4 7V5h16v2"/><path d="M12 5v15M9 20h6"/>',
    docs: '<path d="M4 4h11a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2Z"/><path d="M9 8h5M9 12h5"/>',
    video: '<rect x="3" y="5" width="18" height="14" rx="3"/><path d="m10 9 5 3-5 3Z"/>',
    support: '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/>',
}

function Welcome() {
    const isPro = Boolean(storebuild?.is_pro_active)
    const elements = storebuild?.elements || {}
    const enabledCount = Object.values(elements).filter((e) => e && e.is_active).length
    const totalCount = Object.keys(elements).length
    const modules = (storebuild?.settings && storebuild.settings._storebuild_modules) || {}
    const activeModules = Object.values(modules).filter(Boolean).length
    const templateCount = Array.isArray(storebuild?.templates) ? storebuild.templates.length : 0

    const go = (hash) => (e) => { e.preventDefault(); window.location.hash = hash }
    const licenseUrl = 'admin.php?page=tp-license-storebuild-pro'

    return (
        <div className="strb-wel">
            {/* Hero */}
            <div className="strb-wel-hero">
                <div className="strb-wel-hero-row">
                    <div>
                        <span className="strb-eyebrow">{__('Store builder for WooCommerce', 'shopbuild')}</span>
                        <h1>{__("Welcome back — let's build your store.", 'shopbuild')}</h1>
                        <p>{__('Design every part of your shop with Elementor: product grids, filters, cart, checkout and account pages — all from one place.', 'shopbuild')}</p>
                        <div className="strb-wel-acts">
                            <a href="#widgets" className="strb-btn-white" onClick={go('#widgets')}>
                                <Ico d={I.arrow} />{__('Configure widgets', 'shopbuild')}
                            </a>
                            <a href="#woocommerce" className="strb-btn-line" onClick={go('#woocommerce')}>
                                {__('Store setup', 'shopbuild')}
                            </a>
                        </div>
                    </div>
                    <div className="strb-wel-status">
                        <div className="lbl">{__('License', 'shopbuild')}</div>
                        {isPro
                            ? <span className="pill on"><span className="dot" />{__('Active', 'shopbuild')}</span>
                            : <span className="pill off"><span className="dot" />{__('Inactive', 'shopbuild')}</span>}
                        <div className="meta">
                            <div><div className="k">{__('Edition', 'shopbuild')}</div><div className="v">{isPro ? 'Pro' : 'Free'}</div></div>
                            <div><div className="k">{__('Widgets', 'shopbuild')}</div><div className="v">{enabledCount}/{totalCount}</div></div>
                            <div><div className="k">{__('Modules', 'shopbuild')}</div><div className="v">{activeModules}</div></div>
                            <div><div className="k">{__('Templates', 'shopbuild')}</div><div className="v">{templateCount}</div></div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Stats */}
            <div className="strb-wel-stats">
                <div className="strb-wel-stat"><div className="ct"><Ico d={I.widgets} /></div><div><div className="num">{enabledCount}</div><div className="cap">{__('Widgets enabled', 'shopbuild')}</div></div></div>
                <div className="strb-wel-stat"><div className="ct"><Ico d={I.modules} /></div><div><div className="num">{activeModules}</div><div className="cap">{__('Active modules', 'shopbuild')}</div></div></div>
                <div className="strb-wel-stat"><div className="ct"><Ico d={I.templates} /></div><div><div className="num">{templateCount}</div><div className="cap">{__('Templates', 'shopbuild')}</div></div></div>
                <div className="strb-wel-stat"><div className="ct"><Ico d={I.fonts} /></div><div><div className="num">{isPro ? 'Pro' : 'Free'}</div><div className="cap">{__('Current edition', 'shopbuild')}</div></div></div>
            </div>

            {/* Getting started + Resources */}
            <div className="strb-wel-cols">
                <div className="strb-wel-blk">
                    <div className="bh"><h3>{__('Get started', 'shopbuild')}</h3><span className="badge">{isPro ? __('Pro active', 'shopbuild') : __('Free plan', 'shopbuild')}</span></div>
                    <p className="sub">{__('Finish setup to unlock the full StoreBuild experience.', 'shopbuild')}</p>
                    <div className="strb-steps">
                        <div className={'strb-step' + (isPro ? ' done' : '')}>
                            <div className="n" /><div className="stx"><h4>{__('Activate your license', 'shopbuild')}</h4><p>{__('Unlock premium widgets, modules and updates.', 'shopbuild')}</p></div>
                            <a className="go" href={licenseUrl}>{isPro ? __('Manage', 'shopbuild') : __('Activate', 'shopbuild')}</a>
                        </div>
                        <div className="strb-step">
                            <div className="n" /><div className="stx"><h4>{__('Assign WooCommerce pages', 'shopbuild')}</h4><p>{__('Shop, cart, checkout, thank-you and account pages.', 'shopbuild')}</p></div>
                            <a className="go" href="#woocommerce" onClick={go('#woocommerce')}>{__('Review', 'shopbuild')}</a>
                        </div>
                        <div className="strb-step">
                            <div className="n" /><div className="stx"><h4>{__('Enable the widgets you need', 'shopbuild')}</h4><p>{__('Turn store widgets on per template type.', 'shopbuild')}</p></div>
                            <a className="go" href="#widgets" onClick={go('#widgets')}>{__('Open', 'shopbuild')}</a>
                        </div>
                        <div className="strb-step">
                            <div className="n" /><div className="stx"><h4>{__('Configure store modules', 'shopbuild')}</h4><p>{__('Quick checkout, fly cart, wishlist, compare and more.', 'shopbuild')}</p></div>
                            <a className="go" href="#modules" onClick={go('#modules')}>{__('Open', 'shopbuild')}</a>
                        </div>
                    </div>
                </div>

                <div className="strb-wel-blk">
                    <div className="bh"><h3>{__('Resources', 'shopbuild')}</h3></div>
                    <p className="sub">{__('Guides, videos and support whenever you need them.', 'shopbuild')}</p>
                    <div className="strb-res">
                        <a className="strb-resitem" href="https://docs.themepure.net/storebuild/" target="_blank" rel="noreferrer"><div className="ct"><Ico d={I.docs} /></div><div><h4>{__('Documentation', 'shopbuild')}</h4><p>{__('Step-by-step setup & widget guides', 'shopbuild')}</p></div><span className="arr">→</span></a>
                        <a className="strb-resitem" href="https://www.youtube.com/@themepure" target="_blank" rel="noreferrer"><div className="ct"><Ico d={I.video} /></div><div><h4>{__('Video tutorials', 'shopbuild')}</h4><p>{__('Watch StoreBuild in action', 'shopbuild')}</p></div><span className="arr">→</span></a>
                        <a className="strb-resitem" href="https://help.themepure.net/" target="_blank" rel="noreferrer"><div className="ct"><Ico d={I.support} /></div><div><h4>{__('Get support', 'shopbuild')}</h4><p>{__('Talk to the ThemePure team', 'shopbuild')}</p></div><span className="arr">→</span></a>
                    </div>
                </div>
            </div>

            {/* Feature cards */}
            <div className="strb-features">
                <button type="button" className="strb-feat" onClick={go('#widgets')}><div className="ct"><Ico d={I.widgets} /></div><h4>{__('Widgets', 'shopbuild')}</h4><p>{__('Elementor widgets for shop, single, cart, checkout and account.', 'shopbuild')}</p><span className="more">{__('Manage widgets', 'shopbuild')} →</span></button>
                <button type="button" className="strb-feat" onClick={go('#modules')}><div className="ct"><Ico d={I.modules} /></div><h4>{__('Modules', 'shopbuild')}</h4><p>{__('Quick checkout, fly cart, pre-orders, wishlist, compare and more.', 'shopbuild')}</p><span className="more">{__('Configure', 'shopbuild')} →</span></button>
                <button type="button" className="strb-feat" onClick={go('#woocommerce')}><div className="ct"><Ico d={I.cart} /></div><h4>{__('WooCommerce', 'shopbuild')}</h4><p>{__('Map your store pages and tune catalog behavior in one screen.', 'shopbuild')}</p><span className="more">{__('Open setup', 'shopbuild')} →</span></button>
                <button type="button" className="strb-feat" onClick={go('#custom-fonts')}><div className="ct"><Ico d={I.fonts} /></div><h4>{__('Custom Fonts', 'shopbuild')}</h4><p>{__('Upload your brand typefaces and use them across the builder.', 'shopbuild')}</p><span className="more">{__('Add fonts', 'shopbuild')} →</span></button>
            </div>
        </div>
    )
}

export default Welcome