/**
 * GrowthAppView.js — پورتال رشدگاه ACC / شبکه سفیران (MVP)
 * Landing paints from this file alone; dashboards after login.
 */
const TOKEN_KEY = 'acc_token';
const REF_KEY = 'growth_ref';

// فقط نام کاربری برای پر کردن فرم — رمز هرگز در فرانت‌اند hardcode نمی‌شود
const DEMO_USERS = (typeof window !== 'undefined' && window.ACC_ENABLE_DEMO)
    ? [
        { u: 'ostadowner', label: 'مدیر (ostadowner)', role: 'admin' },
        { u: 'growth_admin', label: 'مدیر رشدگاه', role: 'admin' },
        { u: 'growth_ambassador', label: 'سفیر همسایه', role: 'ambassador' },
        { u: 'growth_referral', label: 'معرف دستگاه', role: 'referral' },
        { u: 'growth_customer', label: 'مشتری', role: 'customer' },
    ]
    : [];

/** Substance copy layered on API catalog (problem / deliverables / audience / price frame) */
const SERVICE_STORIES = {
    website: {
        tag: 'Digital Presence',
        problem: 'کسب‌وکار دیده نمی‌شود یا سایت قدیمی/نیمه‌کاره است و مشتری بالقوه اعتماد نمی‌کند.',
        deliverables: 'لندینگ یا سایت چندصفحه‌ای، فرم تماس، پنل ساده یا کاتالوگ سبک — تحویل واقعی، نه اسلاید وعده.',
        audience: 'فروشگاه محلی، کلینیک، برند تازه‌کار، و تیم‌هایی که به حضور آنلاین قابل‌اندازه‌گیری نیاز دارند.',
        priceHint: 'از ۱۸ میلیون ریال',
    },
    sales_partner: {
        tag: 'Sales Partnership',
        problem: 'محصول دارید اما کانال فروش محلی یا نیروی معرفی ندارید — یا برعکس، شبکه دارید و محصول استاندارد می‌خواهید.',
        deliverables: 'توافق مشارکت، بسته محصول/قیمت، پشتیبانی فروش، و ردیابی معرفی تا سفارش تأییدشده.',
        audience: 'توزیع‌کنندگان محلی، فروشندگان با اعتماد محله، و مالکانی که می‌خواهند فروش را بدون استخدام سنگین گسترش دهند.',
        priceHint: 'مذاکره · بدون پیش‌پرداخت اجباری',
    },
    accounting_workshop: {
        tag: 'Practical Finance',
        problem: 'صاحب کسب‌وکار از فاکتور، دفتر و تراز می‌ترسد یا گزارش‌ها را نمی‌فهمد — آموزش بلندمدت هم وقت‌گیر است.',
        deliverables: 'کارگاه ۳ساعته کاربردی (فاکتور/دفتر، ABC ساده، یا خواندن تراز) با نوبت ثبت‌شده و محتوای کوتاه قابل‌اجرا.',
        audience: 'مالکان خرد، حسابداران تازه‌کار، و سفیرانی که می‌خواهند ارزش خدمت را درست توضیح دهند.',
        priceHint: 'از ۲٫۵ میلیون ریال',
    },
    branding: {
        tag: 'Product Brand',
        problem: 'محصول خوب است اما نام، هویت و پیام پراکنده است — تبلیغات بدون قاب برند هدر می‌رود.',
        deliverables: 'نام و وعده برند، هویت بصری پایه، بسته محتوایی ۳۰روزه، یا لانچ کوتاه با لندینگ و کمپین.',
        audience: 'برندهای تازه‌وارد بازار، محصولات منطقه‌ای، و تیم‌هایی که می‌خواهند اثر برند را قابل‌اندازه‌گیری ببینند.',
        priceHint: 'از ۱۲ میلیون ریال',
    },
};

export default class GrowthAppView {
    constructor() {
        this.root = null;
        this.token = sessionStorage.getItem(TOKEN_KEY) || '';
        this.user = null;
        this.role = 'guest';
        this.screen = 'landing';
        this.meta = null;
        this.dashTab = 'customer';
        this.formService = null;
        this.ambPath = 'neighbor';
        this._refFromUrl();
    }

    _refFromUrl() {
        const q = new URLSearchParams(window.location.search);
        const ref = (q.get('ref') || '').trim().toUpperCase();
        if (ref) sessionStorage.setItem(REF_KEY, ref);
    }

    _refCode() {
        return sessionStorage.getItem(REF_KEY) || '';
    }

    async render(root) {
        this.root = root;
        if (this.token) {
            this.root.innerHTML = `<div class="growth-app ga-applied" dir="rtl"><div class="ga-boot">در حال بارگذاری…</div></div>`;
            try {
                await this._loadMe();
                this.screen = 'app';
            } catch {
                this.token = '';
                sessionStorage.removeItem(TOKEN_KEY);
                this.screen = 'landing';
            }
        }
        await this._paint();
    }

    _siteUrl() {
        const base = window.ACC_GROWTH_CFG?.baseUrl || '/acc-engine/';
        return base.endsWith('/') ? base : base + '/';
    }

    _apiBase() {
        return (window.ACC_GROWTH_CFG?.api || '/acc-engine/api.php/acc/v1').replace(/\/$/, '');
    }

    async _request(method, path, body) {
        const url = `${this._apiBase()}/${path.replace(/^\//, '')}`;
        const opts = {
            method,
            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        };
        if (this.token) opts.headers.Authorization = `Bearer ${this.token}`;
        if (body && method !== 'GET') opts.body = JSON.stringify(body);
        const r = await fetch(url, opts);
        const json = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(json.message || `HTTP ${r.status}`);
        return json;
    }

    async _loadMe() {
        const me = await this._request('GET', 'growth/me');
        this.user = {
            display_name: me.display || me.username || '',
            user_login: me.username || '',
            id: me.user_id,
        };
        this.role = me.role || 'customer';
        this.ambassador = me.ambassador || null;
        if (this.role === 'admin') this.dashTab = 'admin';
        else if (this.role === 'ambassador' || this.role === 'referral') this.dashTab = 'ambassador';
        else this.dashTab = 'customer';
    }

    async _ensureMeta() {
        if (this.meta) return this.meta;
        this.meta = await this._request('GET', 'growth/meta');
        return this.meta;
    }

    async _paint() {
        if (this.screen === 'app') {
            await this._renderApp();
            return;
        }
        if (this.screen === 'login') {
            this.root.innerHTML = this._loginHtml();
            this._bindLogin();
            return;
        }
        if (this.screen === 'order') {
            await this._renderOrderForm();
            return;
        }
        if (this.screen === 'join') {
            this.root.innerHTML = this._joinHtml();
            this._bindJoin();
            return;
        }
        await this._ensureMeta().catch(() => { this.meta = { services: [] }; });
        this.root.innerHTML = this._landingHtml();
        this._bindLanding();
    }

    _esc(s) {
        return String(s ?? '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    _money(n) {
        const v = Number(n) || 0;
        if (!v) return '—';
        return new Intl.NumberFormat('fa-IR').format(v) + ' ریال';
    }

    _servicePriceFrame(svc) {
        const story = SERVICE_STORIES[svc.slug];
        if (story?.priceHint) return story.priceHint;
        const pkgs = svc.packages || [];
        if (!pkgs.length) return 'قیمت پس از بررسی';
        const min = Math.min(...pkgs.map(p => Number(p.price) || 0).filter(Boolean));
        if (!min) return 'قیمت پس از بررسی';
        return `از ${new Intl.NumberFormat('fa-IR').format(min)} ریال`;
    }

    _landingHtml() {
        const site = this._siteUrl();
        const services = this.meta?.services || [];
        const ref = this._refCode();
        const pct = this.meta?.commission?.pct ?? 10;

        const svcBlocks = services.map(s => {
            const story = SERVICE_STORIES[s.slug] || {};
            const pkgs = (s.packages || []).slice(0, 3).map(p => this._esc(p.title)).join(' · ');
            return `
            <article class="ga-svc-block ga-reveal" id="svc-${this._esc(s.slug)}">
                <div class="ga-svc-block__meta">
                    <span class="ga-svc-block__tag">${this._esc(story.tag || 'Service')}</span>
                    <h3>${this._esc(s.title)}</h3>
                    <p class="ga-svc-block__tagline">${this._esc(s.tagline || '')}</p>
                </div>
                <dl class="ga-svc-block__body">
                    <div><dt>مسئله</dt><dd>${this._esc(story.problem || s.tagline || '')}</dd></div>
                    <div><dt>چه دریافت می‌کنید</dt><dd>${this._esc(story.deliverables || '')}${pkgs ? ` — بسته‌ها: ${pkgs}` : ''}</dd></div>
                    <div><dt>برای چه کسانی</dt><dd>${this._esc(story.audience || '')}</dd></div>
                </dl>
                <div class="ga-svc-block__aside">
                    <div class="ga-svc-block__price">${this._esc(this._servicePriceFrame(s))}<small>شفاف · قابل سفارش</small></div>
                    <button type="button" class="ga-btn ga-btn--teal" data-service="${this._esc(s.slug)}">درخواست این خدمت</button>
                </div>
            </article>`;
        }).join('');

        return `
        <div class="growth-app ga-applied" dir="rtl">
            <div class="ga-util">
                <a href="${site}">ACC Engine</a>
                <a href="${site}shop.php">فروشگاه</a>
                <a href="${site}education.php">آموزش</a>
                <a href="${site}melk.php">اقتصاد ملک</a>
                <a href="#ga-join" class="ga-util__gold">سفیر شو</a>
            </div>
            <header class="ga-header" id="ga-header">
                <a href="${site}growth.php" class="ga-brand">
                    <span class="ga-brand__mark">ر</span>
                    <span class="ga-brand__text">
                        <span class="ga-brand__name">رشدگاه <em>ACC</em></span>
                        <span class="ga-brand__sub">Growth · Ambassadors</span>
                    </span>
                </a>
                <nav class="ga-nav">
                    <a href="#ga-value">ارزش</a>
                    <a href="#ga-services">خدمات</a>
                    <a href="#ga-join">سفیران</a>
                    <a href="#ga-how">مسیر کار</a>
                    <a href="#ga-trust">اعتماد</a>
                    <button type="button" data-go="login">ورود</button>
                </nav>
                <button type="button" class="ga-header__cta ga-header__cta--gold" data-go="order">سفارش خدمت</button>
            </header>

            <section class="ga-hero">
                <div class="ga-hero__media" aria-hidden="true"></div>
                <div class="ga-hero__grain" aria-hidden="true"></div>
                <div class="ga-hero__content">
                    <p class="ga-hero__brand">رشدگاه <span>ACC</span></p>
                    <h1>رشد کسب‌وکار با خدمات واقعی<br><em>شبکه سفیران شفاف — نه طرح هرمی</em></h1>
                    <p class="ga-hero__lead">ساخت سایت، مشارکت فروش، آموزش حسابداری ۳ساعته و برندینگ محصول — کمیسیون فقط روی فروش تأییدشدهٔ خدمت، تک‌سطح و قابل‌ردیابی.</p>
                    <div class="ga-hero__actions">
                        <button type="button" class="ga-btn ga-btn--gold" data-go="order">سفارش خدمت</button>
                        <a href="#ga-services" class="ga-btn ga-btn--ghost">مشاهده خدمات</a>
                        <button type="button" class="ga-btn ga-btn--ghost" data-go="join">پیوستن به سفیران</button>
                    </div>
                    ${ref ? `<p class="ga-hero__ref">کد ارجاع فعال: <strong>${this._esc(ref)}</strong> — در فرم سفارش ذخیره می‌شود.</p>` : ''}
                </div>
            </section>

            <section class="ga-section" id="ga-value">
                <div class="ga-section__head ga-reveal">
                    <span class="ga-kicker">Why Growth</span>
                    <h2>چرا رشدگاه برای مالک و سفیر معنا دارد</h2>
                    <p>این پورتال جای «وعده ثروت» نیست — جای تحویل خدمت، کمیسیون شفاف، و معرفی اخلاقی در محله یا مسیر مجاز معرف دستگاه.</p>
                </div>
                <div class="ga-values ga-reveal">
                    <article class="ga-value">
                        <span class="ga-value__num">۰۱</span>
                        <strong>شفافیت کمیسیون</strong>
                        <span>${pct}٪ تک‌سطح فقط بعد از تأیید فروش واقعی — بدون درخت زیرمجموعه و بدون درآمد از عضوگیری.</span>
                    </article>
                    <article class="ga-value">
                        <span class="ga-value__num">۰۲</span>
                        <strong>تحویل واقعی</strong>
                        <span>سایت، کارگاه، برندینگ یا مشارکت فروش با بسته‌های مشخص و کد پیگیری سفارش — نه اسلاید مفهومی.</span>
                    </article>
                    <article class="ga-value">
                        <span class="ga-value__num">۰۳</span>
                        <strong>آموزش کوتاه کاربردی</strong>
                        <span>کارگاه ۳ساعته حسابداری برای فهم فاکتور، دفتر و تراز — قابل‌اجرا در کسب‌وکار کوچک.</span>
                    </article>
                    <article class="ga-value">
                        <span class="ga-value__num">۰۴</span>
                        <strong>برندینگ قابل‌اندازه‌گیری</strong>
                        <span>از نام و وعده تا هویت و لانچ — خروجی قابل سفارش با محدوده قیمت شفاف.</span>
                    </article>
                </div>
            </section>

            <section class="ga-section ga-section--ink ga-reveal">
                <div class="ga-proof">
                    <div><strong>۴</strong><span>خط خدمت مالک</span></div>
                    <div><strong>${pct}٪</strong><span>کمیسیون تک‌سطح</span></div>
                    <div><strong>۰</strong><span>درآمد از عضوگیری</span></div>
                    <div><strong>۱</strong><span>منشور اخلاق الزامی</span></div>
                </div>
            </section>

            <section class="ga-section ga-section--mist" id="ga-services">
                <div class="ga-section__head ga-reveal">
                    <span class="ga-kicker">Services</span>
                    <h2>چهار خدمت — مسئله، خروجی، مخاطب، قیمت</h2>
                    <p>هر خط خدمت یک کار مشخص انجام می‌دهد. درخواست مستقیم به فرم سفارش همان خدمت وصل می‌شود.</p>
                </div>
                <div class="ga-svc-list">${svcBlocks || '<p class="ga-boot">کاتالوگ خدمت در دسترس نیست — نصب رشدگاه را اجرا کنید.</p>'}</div>
            </section>

            <section class="ga-section" id="ga-join">
                <div class="ga-section__head ga-reveal">
                    <span class="ga-kicker">Ambassadors</span>
                    <h2>سفیر همسایه در برابر معرف دستگاه</h2>
                    <p>دو مسیر اخلاقی با یک اصل مشترک: درآمد فقط از فروش تأییدشده. تفاوت در مخاطب و چارچوب انطباق است — نه در ساخت شبکه هرمی.</p>
                </div>
                <div class="ga-paths ga-reveal">
                    <article class="ga-path">
                        <span class="ga-path__badge">Neighbor Path</span>
                        <h3>سفیر همسایه</h3>
                        <p class="ga-path__lead">برای خانم‌ها و همسایگانی که اعتماد محلی دارند و می‌خواهند خدمات واقعی ACC را معرفی کنند — بدون فشار عضوگیری.</p>
                        <ul>
                            <li>ثبت‌نام رایگان + پذیرش منشور اخلاق</li>
                            <li>کد و لینک ارجاع شخصی</li>
                            <li>کمیسیون ${pct}٪ روی سفارش تأییدشده (تک‌سطح)</li>
                            <li>داشبورد لید و کمیسیون پس از ورود</li>
                        </ul>
                        <button type="button" class="ga-btn ga-btn--teal" data-join="neighbor">ثبت‌نام سفیر همسایه</button>
                    </article>
                    <article class="ga-path ga-path--device">
                        <span class="ga-path__badge">Device Referral</span>
                        <h3>معرف دستگاه اجرایی</h3>
                        <p class="ga-path__lead">برای کارکنان دستگاه که فعالیت جانبی شفاف و مجاز دارند — فقط ارجاع تک‌سطحی، بدون درخت و بدون استفاده از امکانات/لوگوی اداری.</p>
                        <ul>
                            <li>فقط Referral — بدون زیرمجموعه</li>
                            <li>خوداظهاری انطباق با مقررات محل خدمت الزامی</li>
                            <li>افشای کمیسیون در تبلیغات شخصی</li>
                            <li>ممنوعیت وعده ثروت تضمینی یا فشار عضویت</li>
                        </ul>
                        <button type="button" class="ga-btn ga-btn--dark" data-join="device_referral">مسیر معرف دستگاه</button>
                    </article>
                </div>
            </section>

            <section class="ga-section ga-section--deep" id="ga-how">
                <div class="ga-section__head ga-reveal">
                    <span class="ga-kicker">How it works</span>
                    <h2>مسیر کار — مشتری و سفیر</h2>
                    <p>از انتخاب خدمت تا تأیید فروش و کمیسیون؛ هر دو سمت می‌دانند قدم بعدی چیست.</p>
                </div>
                <div class="ga-how ga-reveal">
                    <div class="ga-how__col">
                        <h3>برای مشتری / مالک</h3>
                        <div class="ga-steps">
                            <div class="ga-step"><span class="ga-step__n">۱</span><div><strong>خدمت را انتخاب کنید</strong><span>یکی از چهار خط را ببینید و بسته یا نوبت مناسب را مشخص کنید.</span></div></div>
                            <div class="ga-step"><span class="ga-step__n">۲</span><div><strong>فرم سفارش را ثبت کنید</strong><span>نام، موبایل، شهر و در صورت وجود کد ارجاع سفیر — کد پیگیری می‌گیرید.</span></div></div>
                            <div class="ga-step"><span class="ga-step__n">۳</span><div><strong>پیگیری و تحویل</strong><span>تیم رشدگاه درخواست را بررسی و وضعیت را در پنل مشتری به‌روز می‌کند.</span></div></div>
                            <div class="ga-step"><span class="ga-step__n">۴</span><div><strong>تأیید فروش</strong><span>پس از تأیید، در صورت وجود سفیر، کمیسیون تک‌سطح ثبت می‌شود.</span></div></div>
                        </div>
                    </div>
                    <div class="ga-how__col">
                        <h3>برای سفیر / معرف</h3>
                        <div class="ga-steps">
                            <div class="ga-step"><span class="ga-step__n">۱</span><div><strong>مسیر را انتخاب کنید</strong><span>سفیر همسایه یا معرف دستگاه — منشور اخلاق را بپذیرید.</span></div></div>
                            <div class="ga-step"><span class="ga-step__n">۲</span><div><strong>کد ارجاع بگیرید</strong><span>لینک growth.php?ref=… را با دوستان و مشتریان بالقوه به اشتراک بگذارید.</span></div></div>
                            <div class="ga-step"><span class="ga-step__n">۳</span><div><strong>لید یا سفارش ثبت شود</strong><span>می‌توانید لید دستی هم در داشبورد وارد کنید؛ سفارش‌ها به شما نسبت داده می‌شوند.</span></div></div>
                            <div class="ga-step"><span class="ga-step__n">۴</span><div><strong>کمیسیون پس از تأیید</strong><span>فقط روی فروش تأییدشده — موجودی در انتظار پرداخت در داشبورد دیده می‌شود.</span></div></div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="ga-section" id="ga-trust">
                <div class="ga-story ga-reveal">
                    <div class="ga-story__media" role="img" aria-label="شبکه همکاری و رشد کسب‌وکار"></div>
                    <div class="ga-story__body">
                        <span class="ga-kicker">Trust Charter</span>
                        <h3>منشور اخلاق — درآمد از محصول، نه از عضو</h3>
                        <p>${this._esc(this.meta?.ethics || 'درآمد فقط از فروش تأییدشده خدمات واقعی است، نه از عضوگیری.')}</p>
                        <ul class="ga-ethics-list">
                            <li>ورود رایگان — هیچ خرید اجباری برای فعال‌سازی نیست</li>
                            <li>کمیسیون فقط پس از تأیید سفارش خدمت واقعی</li>
                            <li>ممنوعیت وعده ثروت تضمینی و فشار برای ثبت‌نام دیگران</li>
                            <li>افشای نقش معرفی‌کننده و کمیسیون در تبلیغات شخصی</li>
                        </ul>
                        <div style="margin-top:22px;display:flex;flex-wrap:wrap;gap:10px">
                            <button type="button" class="ga-btn ga-btn--teal" data-go="join">پذیرش و ثبت‌نام سفیر</button>
                            <button type="button" class="ga-btn ga-btn--outline" data-go="order">سفارش بدون سفیر هم ممکن است</button>
                        </div>
                    </div>
                </div>
            </section>

            <section class="ga-help">
                <div class="ga-help__inner">
                    <div>
                        <h2>از کجا شروع کنیم؟</h2>
                        <p>خدمت بخرید، سفیر شوید، یا وارد پنل شوید — مسیر درست را انتخاب کنید.</p>
                    </div>
                    <div class="ga-help__actions">
                        <button type="button" class="ga-btn ga-btn--gold" data-go="order">سفارش خدمت</button>
                        <button type="button" class="ga-btn ga-btn--ghost" data-join="neighbor">سفیر همسایه</button>
                        <button type="button" class="ga-btn ga-btn--ghost" data-join="device_referral">معرف دستگاه</button>
                        <button type="button" class="ga-btn ga-btn--ghost" data-go="login">ورود به پنل</button>
                    </div>
                </div>
            </section>

            <footer class="ga-footer">
                <span>© رشدگاه ACC — خدمات مالک و شبکه سفیران شفاف</span>
                <span>
                    <a href="${site}">ACC Engine</a> ·
                    <a href="${site}shop.php">فروشگاه</a> ·
                    <a href="${site}education.php">آموزش</a> ·
                    <button type="button" data-go="login">ورود آزمایشی</button>
                </span>
            </footer>
        </div>`;
    }

    _bindLanding() {
        this.root.querySelectorAll('[data-go]').forEach(el => {
            el.addEventListener('click', () => {
                const go = el.dataset.go;
                if (go === 'login') { this.screen = 'login'; this._paint(); }
                else if (go === 'order') { this.formService = null; this.screen = 'order'; this._paint(); }
                else if (go === 'join') { this.ambPath = 'neighbor'; this.screen = 'join'; this._paint(); }
            });
        });
        this.root.querySelectorAll('[data-service]').forEach(el => {
            el.addEventListener('click', () => {
                this.formService = el.dataset.service;
                this.screen = 'order';
                this._paint();
            });
        });
        this.root.querySelectorAll('[data-join]').forEach(el => {
            el.addEventListener('click', () => {
                this.ambPath = el.dataset.join || 'neighbor';
                this.screen = 'join';
                this._paint();
            });
        });
        const hdr = this.root.querySelector('#ga-header');
        const onScroll = () => hdr?.classList.toggle('ga-header--scrolled', window.scrollY > 12);
        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll();
        if ('IntersectionObserver' in window) {
            const io = new IntersectionObserver((entries) => {
                entries.forEach(en => { if (en.isIntersecting) en.target.classList.add('is-in'); });
            }, { threshold: 0.12 });
            this.root.querySelectorAll('.ga-reveal').forEach(el => io.observe(el));
        } else {
            this.root.querySelectorAll('.ga-reveal').forEach(el => el.classList.add('is-in'));
        }
    }

    async _renderOrderForm() {
        await this._ensureMeta().catch(() => {});
        const services = this.meta?.services || [];
        const svc = services.find(s => s.slug === this.formService) || services[0];
        if (!svc) {
            this.root.innerHTML = `<div class="ga-boot">سرویسی یافت نشد — ابتدا نصب را اجرا کنید.</div>`;
            return;
        }
        this.formService = svc.slug;
        const site = this._siteUrl();
        const sessions = this.meta?.sessions || [];
        let packagesHtml = '';
        if (svc.form === 'package' || svc.form === 'session') {
            packagesHtml = `<div class="ga-pkgs" id="ga-pkgs">` + (svc.packages || []).map((p, i) => `
                <label class="ga-pkg${i === 0 ? ' is-on' : ''}">
                    <input type="radio" name="package_code" value="${this._esc(p.code)}" ${i === 0 ? 'checked' : ''} hidden>
                    <span class="ga-pkg__info"><strong>${this._esc(p.title)}</strong><small>${this._esc(p.desc)}</small></span>
                    <span class="ga-pkg__price">${this._money(p.price)}</span>
                </label>`).join('') + `</div>`;
        }
        let sessionHtml = '';
        if (svc.form === 'session') {
            const opts = sessions.map(s =>
                `<option value="${s.id}">${this._esc(s.title)} — ${this._esc(s.starts_at)} (${s.seats_taken}/${s.seats_total})</option>`
            ).join('');
            sessionHtml = `<div class="ga-field"><label>نوبت کارگاه</label><select name="session_id">${opts || '<option value="">نوبتی موجود نیست</option>'}</select></div>`;
        }
        let partnerHtml = '';
        if (svc.form === 'partner') {
            partnerHtml = `
                <div class="ga-field"><label>نام کسب‌وکار / برند</label><input name="business_name" required></div>
                <div class="ga-field"><label>علاقه مشارکت</label><textarea name="partner_interest" placeholder="چه محصولی می‌فروشید؟ بازار هدف؟"></textarea></div>`;
        }

        const svcOpts = services.map(s =>
            `<option value="${s.slug}" ${s.slug === svc.slug ? 'selected' : ''}>${this._esc(s.title)}</option>`
        ).join('');

        this.root.innerHTML = `
        <div class="growth-app ga-applied" dir="rtl">
            <header class="ga-header">
                <a href="${site}growth.php" class="ga-brand" id="ga-back-home">
                    <span class="ga-brand__mark">ر</span>
                    <span class="ga-brand__text">
                        <span class="ga-brand__name">رشدگاه <em>ACC</em></span>
                        <span class="ga-brand__sub">سفارش خدمت</span>
                    </span>
                </a>
                <button type="button" class="ga-btn ga-btn--outline ga-btn--sm" data-back>بازگشت</button>
            </header>
            <section class="ga-form-shell">
                <div class="ga-panel">
                    <h2>سفارش خدمت</h2>
                    <p class="ga-panel__lead">${this._esc(svc.tagline)}${SERVICE_STORIES[svc.slug]?.problem ? ` — ${this._esc(SERVICE_STORIES[svc.slug].problem)}` : ''}</p>
                    <form id="ga-order-form">
                        <div class="ga-field"><label>خدمت</label>
                            <select name="service_slug" id="ga-svc-select">${svcOpts}</select>
                        </div>
                        ${packagesHtml}
                        ${sessionHtml}
                        ${partnerHtml}
                        <div class="ga-field"><label>نام</label><input name="customer_name" required></div>
                        <div class="ga-field"><label>موبایل</label><input name="customer_phone" required placeholder="09…"></div>
                        <div class="ga-field"><label>ایمیل (اختیاری)</label><input name="customer_email" type="email"></div>
                        <div class="ga-field"><label>شهر</label><input name="city" value="شیراز"></div>
                        <div class="ga-field"><label>کد ارجاع سفیر</label><input name="referral_code" value="${this._esc(this._refCode())}" placeholder="SF…"></div>
                        <div class="ga-field"><label>توضیحات</label><textarea name="notes"></textarea></div>
                        <button type="submit" class="ga-btn ga-btn--teal ga-btn--block">ثبت درخواست</button>
                        <div class="ga-msg" id="ga-order-msg"></div>
                    </form>
                </div>
            </section>
        </div>`;

        this.root.querySelector('[data-back]')?.addEventListener('click', () => {
            this.screen = 'landing'; this._paint();
        });
        this.root.querySelector('#ga-back-home')?.addEventListener('click', (e) => {
            e.preventDefault(); this.screen = 'landing'; this._paint();
        });
        this.root.querySelector('#ga-svc-select')?.addEventListener('change', (e) => {
            this.formService = e.target.value;
            this._paint();
        });
        this.root.querySelectorAll('.ga-pkg').forEach(lab => {
            lab.addEventListener('click', () => {
                this.root.querySelectorAll('.ga-pkg').forEach(x => x.classList.remove('is-on'));
                lab.classList.add('is-on');
                lab.querySelector('input').checked = true;
            });
        });
        this.root.querySelector('#ga-order-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = this.root.querySelector('#ga-order-msg');
            const fd = new FormData(e.target);
            const body = Object.fromEntries(fd.entries());
            if (body.session_id) body.session_id = parseInt(body.session_id, 10) || 0;
            msg.textContent = 'در حال ثبت…';
            msg.className = 'ga-msg';
            try {
                const res = await this._request('POST', 'growth/orders', body);
                if (!res.success) throw new Error(res.message || 'خطا');
                if (body.referral_code) sessionStorage.setItem(REF_KEY, String(body.referral_code).toUpperCase());
                msg.className = 'ga-msg ga-msg--ok';
                msg.textContent = `ثبت شد — کد پیگیری: ${res.order_code}` + (res.amount ? ` · مبلغ: ${this._money(res.amount)}` : '');
                e.target.reset();
            } catch (err) {
                msg.className = 'ga-msg ga-msg--err';
                msg.textContent = err.message || 'خطا در ثبت';
            }
        });
    }

    _joinHtml() {
        const site = this._siteUrl();
        const isDevice = this.ambPath === 'device_referral';
        return `
        <div class="growth-app ga-applied" dir="rtl">
            <header class="ga-header">
                <a href="${site}growth.php" class="ga-brand" id="ga-back-home">
                    <span class="ga-brand__mark">ر</span>
                    <span class="ga-brand__text">
                        <span class="ga-brand__name">رشدگاه <em>ACC</em></span>
                        <span class="ga-brand__sub">${isDevice ? 'معرف دستگاه' : 'سفیر همسایه'}</span>
                    </span>
                </a>
                <button type="button" class="ga-btn ga-btn--outline ga-btn--sm" data-back>بازگشت</button>
            </header>
            <section class="ga-form-shell">
                <div class="ga-panel">
                    <h2>${isDevice ? 'ثبت‌نام معرف دستگاه' : 'ثبت‌نام سفیر همسایه'}</h2>
                    <p class="ga-panel__lead">${isDevice
                        ? 'مسیر ارجاع تک‌سطحی — بدون زیرمجموعه. فقط در صورت مجاز بودن فعالیت جانبی طبق مقررات محل خدمت. درآمد فقط از فروش تأییدشده.'
                        : 'ورود رایگان · کمیسیون روی فروش تأییدشده · پذیرش منشور اخلاق الزامی است. مناسب معرفی محلی خدمات واقعی — نه عضوگیری.'}</p>
                    <form id="ga-join-form">
                        <input type="hidden" name="path" value="${isDevice ? 'device_referral' : 'neighbor'}">
                        <div class="ga-field"><label>نام نمایشی</label><input name="display_name" required></div>
                        <div class="ga-field"><label>موبایل</label><input name="phone" required></div>
                        <div class="ga-field"><label>ایمیل</label><input name="email" type="email"></div>
                        <div class="ga-field"><label>شهر</label><input name="city" value="شیراز"></div>
                        <label class="ga-check">
                            <input type="checkbox" name="ethics_accepted" value="1" required>
                            <span>منشور اخلاق را خوانده و می‌پذیرم: درآمد فقط از فروش واقعی خدمات، نه عضوگیری؛ افشای کمیسیون در تبلیغات شخصی.</span>
                        </label>
                        ${isDevice ? `<label class="ga-check">
                            <input type="checkbox" name="compliance_ack" value="1" required>
                            <span>خوداظهاری: مقررات دستگاه متبوع من اجازه این فعالیت جانبی شفاف را می‌دهد و از امکانات/لوگوی اداری استفاده نمی‌کنم.</span>
                        </label>` : ''}
                        <button type="submit" class="ga-btn ga-btn--teal ga-btn--block">فعال‌سازی کد ارجاع</button>
                        <div class="ga-msg" id="ga-join-msg"></div>
                    </form>
                </div>
            </section>
        </div>`;
    }

    _bindJoin() {
        this.root.querySelector('[data-back]')?.addEventListener('click', () => {
            this.screen = 'landing'; this._paint();
        });
        this.root.querySelector('#ga-back-home')?.addEventListener('click', (e) => {
            e.preventDefault(); this.screen = 'landing'; this._paint();
        });
        this.root.querySelector('#ga-join-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = this.root.querySelector('#ga-join-msg');
            const fd = new FormData(e.target);
            const body = {
                path: fd.get('path'),
                display_name: fd.get('display_name'),
                phone: fd.get('phone'),
                email: fd.get('email'),
                city: fd.get('city'),
                ethics_accepted: fd.get('ethics_accepted') ? 1 : 0,
                compliance_ack: fd.get('compliance_ack') ? 1 : 0,
            };
            msg.textContent = 'در حال ثبت…';
            try {
                const res = await this._request('POST', 'growth/ambassador/signup', body);
                if (!res.success) throw new Error(res.message || 'خطا');
                const code = res.ambassador?.referral_code || '';
                if (code) sessionStorage.setItem(REF_KEY, code);
                msg.className = 'ga-msg ga-msg--ok';
                msg.innerHTML = `فعال شد — کد شما: <strong>${this._esc(code)}</strong><br>لینک اشتراک: <code>${this._esc(this._siteUrl())}growth.php?ref=${this._esc(code)}</code>`;
            } catch (err) {
                msg.className = 'ga-msg ga-msg--err';
                msg.textContent = err.message || 'خطا';
            }
        });
    }

    _loginHtml() {
        const site = this._siteUrl();
        const demos = DEMO_USERS.map(d => `
            <button type="button" class="ga-btn ga-btn--outline ga-btn--sm" style="margin:4px" data-demo-u="${d.u}">${this._esc(d.label)}</button>
        `).join('');
        return `
        <div class="growth-app ga-applied" dir="rtl">
            <div class="ga-login">
                <div class="ga-login__card">
                    <p class="ga-login__brand">رشدگاه <em>ACC</em></p>
                    <h3>ورود به پورتال</h3>
                    <p class="ga-login__hint">همان حساب ERP / JWT — توکن مشترک با سایر پورتال‌ها. پس از ورود به سفارش‌ها، داشبورد سفیر یا مدیریت دسترسی دارید.</p>
                    <form id="ga-login-form">
                        <div class="ga-field"><label>نام کاربری</label><input name="username" required autocomplete="username"></div>
                        <div class="ga-field"><label>رمز عبور</label><input name="password" type="password" required autocomplete="current-password"></div>
                        <button type="submit" class="ga-btn ga-btn--dark ga-btn--block">ورود</button>
                        <div class="ga-msg" id="ga-login-msg"></div>
                    </form>
                    ${demos ? `<div class="ga-demo-note">
                        <div>ورود آزمایشی (فقط لوکال) — رمز را جداگانه وارد کنید</div>
                        <div class="ga-demo-btns">${demos}</div>
                    </div>` : ''}
                    <button type="button" class="ga-btn ga-btn--outline ga-btn--sm ga-btn--block" style="margin-top:14px" data-back>بازگشت به لندینگ</button>
                    <p style="margin-top:10px;font-size:.75rem;color:var(--ga-muted);text-align:center">
                        <a href="${site}">ACC Engine</a>
                    </p>
                </div>
            </div>
        </div>`;
    }

    _bindLogin() {
        this.root.querySelector('[data-back]')?.addEventListener('click', () => {
            this.screen = 'landing'; this._paint();
        });
        this.root.querySelectorAll('[data-demo-u]').forEach(btn => {
            btn.addEventListener('click', () => {
                const form = this.root.querySelector('#ga-login-form');
                if (!form) return;
                const u = form.querySelector('[name="username"]');
                const p = form.querySelector('[name="password"]');
                if (u) u.value = btn.dataset.demoU || '';
                if (p) { p.value = ''; p.focus(); }
            });
        });
        this.root.querySelector('#ga-login-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const fd = new FormData(e.target);
            await this._doLogin(fd.get('username'), fd.get('password'));
        });
    }

    async _doLogin(username, password) {
        const msg = this.root.querySelector('#ga-login-msg');
        if (msg) { msg.textContent = '…'; msg.className = 'ga-msg'; }
        try {
            const res = await this._request('POST', 'public/auth/login', { username, password });
            if (!res.success || !res.token) throw new Error(res.message || 'ورود ناموفق');
            this.token = res.token;
            sessionStorage.setItem(TOKEN_KEY, res.token);
            if (res.user) {
                this.user = {
                    display_name: res.user.name || res.user.display_name || res.user.username,
                    user_login: res.user.username || '',
                    id: res.user.id,
                };
            }
            await this._loadMe();
            this.screen = 'app';
            await this._paint();
        } catch (err) {
            if (msg) {
                msg.className = 'ga-msg ga-msg--err';
                msg.textContent = err.message || 'خطا';
            }
        }
    }

    async _renderApp() {
        const site = this._siteUrl();
        const name = this.user?.display_name || this.user?.user_login || 'کاربر';
        const roleLabel = { admin: 'مدیر', ambassador: 'سفیر', referral: 'معرف دستگاه', customer: 'مشتری' }[this.role] || this.role;

        this.root.innerHTML = `
        <div class="growth-app ga-applied" dir="rtl">
            <header class="ga-ws-header">
                <a href="${site}growth.php" class="ga-brand">
                    <span class="ga-brand__mark">ر</span>
                    <span class="ga-brand__text">
                        <span class="ga-brand__name">رشدگاه <em>ACC</em></span>
                        <span class="ga-brand__sub">Workspace</span>
                    </span>
                </a>
                <span class="ga-ws-user">${this._esc(name)} · ${this._esc(roleLabel)}</span>
                <nav class="ga-ws-nav" id="ga-ws-nav">
                    <button type="button" data-tab="customer" class="${this.dashTab === 'customer' ? 'is-on' : ''}">سفارش‌های من</button>
                    ${(this.role === 'ambassador' || this.role === 'referral' || this.role === 'admin')
                        ? `<button type="button" data-tab="ambassador" class="${this.dashTab === 'ambassador' ? 'is-on' : ''}">داشبورد سفیر</button>` : ''}
                    ${this.role === 'admin'
                        ? `<button type="button" data-tab="admin" class="${this.dashTab === 'admin' ? 'is-on' : ''}">مدیریت</button>` : ''}
                    <button type="button" data-go="order">سفارش جدید</button>
                    <button type="button" id="ga-logout">خروج</button>
                </nav>
            </header>
            <main class="ga-ws-main" id="ga-ws-main"><div class="ga-boot">بارگذاری داشبورد…</div></main>
        </div>`;

        this.root.querySelector('#ga-logout')?.addEventListener('click', () => {
            this.token = '';
            sessionStorage.removeItem(TOKEN_KEY);
            this.screen = 'landing';
            this._paint();
        });
        this.root.querySelectorAll('[data-tab]').forEach(btn => {
            btn.addEventListener('click', () => {
                this.dashTab = btn.dataset.tab;
                this._renderDash();
            });
        });
        this.root.querySelector('[data-go="order"]')?.addEventListener('click', () => {
            this.screen = 'order';
            this._paint();
        });
        await this._renderDash();
    }

    async _renderDash() {
        const main = this.root.querySelector('#ga-ws-main');
        if (!main) return;
        this.root.querySelectorAll('[data-tab]').forEach(b => {
            b.classList.toggle('is-on', b.dataset.tab === this.dashTab);
        });
        main.innerHTML = `<div class="ga-boot">…</div>`;
        try {
            if (this.dashTab === 'admin') {
                const data = await this._request('GET', 'growth/dashboard/admin');
                main.innerHTML = this._adminHtml(data);
                this._bindAdmin(main);
            } else if (this.dashTab === 'ambassador') {
                const data = await this._request('GET', 'growth/dashboard/ambassador');
                main.innerHTML = this._ambassadorHtml(data);
                this._bindAmbassador(main);
            } else {
                const data = await this._request('GET', 'growth/dashboard/customer');
                main.innerHTML = this._customerHtml(data);
            }
        } catch (err) {
            main.innerHTML = `<div class="ga-msg ga-msg--err">${this._esc(err.message)}</div>
                ${this.dashTab === 'ambassador' ? `<p style="margin-top:12px"><button type="button" class="ga-btn ga-btn--teal" id="ga-goto-join">ثبت‌نام سفیر</button></p>` : ''}`;
            main.querySelector('#ga-goto-join')?.addEventListener('click', () => {
                this.screen = 'join'; this._paint();
            });
        }
    }

    _customerHtml(data) {
        const orders = data.orders || [];
        const rows = orders.map(o => `
            <tr>
                <td><code>${this._esc(o.order_code)}</code></td>
                <td>${this._esc(o.service_slug)} / ${this._esc(o.package_code)}</td>
                <td>${this._money(o.amount)}</td>
                <td><span class="ga-badge ${o.status === 'confirmed' ? 'ga-badge--ok' : 'ga-badge--wait'}">${this._esc(o.status)}</span></td>
                <td><span class="ga-badge">${this._esc(o.invoice_status || 'stub')}</span></td>
                <td>${this._esc(o.created_at)}</td>
            </tr>`).join('') || `<tr><td colspan="6">هنوز سفارشی ندارید.</td></tr>`;
        return `
            <h2 class="ga-ws-title">سفارش‌های من</h2>
            <p class="ga-ws-lead">پیگیری وضعیت درخواست‌های خدمت و فاکتور stub.</p>
            <div class="ga-table-wrap"><table class="ga-table">
                <thead><tr><th>کد</th><th>خدمت</th><th>مبلغ</th><th>وضعیت</th><th>فاکتور</th><th>تاریخ</th></tr></thead>
                <tbody>${rows}</tbody>
            </table></div>`;
    }

    _ambassadorHtml(data) {
        const a = data.ambassador || {};
        const isDevice = a.path === 'device_referral';
        const leads = (data.leads || []).map(l => `
            <tr>
                <td>${this._esc(l.customer_name)}</td>
                <td>${this._esc(l.customer_phone)}</td>
                <td>${this._esc(l.service_interest)}</td>
                <td><span class="ga-badge">${this._esc(l.status)}</span></td>
                <td>${this._esc(l.created_at)}</td>
            </tr>`).join('') || `<tr><td colspan="5">لیدی نیست</td></tr>`;
        const comms = (data.commissions || []).map(c => `
            <tr>
                <td>#${c.order_id}</td>
                <td>${this._money(c.order_amount)}</td>
                <td>${c.commission_pct}٪</td>
                <td>${this._money(c.commission_amount)}</td>
                <td><span class="ga-badge ga-badge--ok">${this._esc(c.status)}</span></td>
            </tr>`).join('') || `<tr><td colspan="5">کمیسیونی نیست</td></tr>`;

        return `
            <h2 class="ga-ws-title">${isDevice ? 'داشبورد معرف دستگاه' : 'داشبورد سفیر'}</h2>
            <p class="ga-ws-lead">${isDevice ? 'فقط ارجاع تک‌سطحی — بدون UI زیرمجموعه.' : 'کمیسیون تک‌سطح روی سفارش‌های تأییدشده.'}</p>
            <div class="ga-stats">
                <div class="ga-stat"><strong>${this._esc(a.referral_code)}</strong><span>کد ارجاع</span></div>
                <div class="ga-stat"><strong>${a.total_leads ?? 0}</strong><span>لید</span></div>
                <div class="ga-stat"><strong>${a.converted_leads ?? 0}</strong><span>تبدیل‌شده</span></div>
                <div class="ga-stat"><strong>${this._money(a.balance_pending)}</strong><span>در انتظار پرداخت</span></div>
            </div>
            <p style="font-size:.85rem;margin-bottom:20px">لینک اشتراک:
                <code>${this._esc(this._siteUrl())}growth.php?ref=${this._esc(a.referral_code)}</code>
            </p>
            <div class="ga-panel" style="margin-bottom:24px;box-shadow:none;max-width:none">
                <h3 style="margin:0 0 12px;font-size:1rem;font-family:var(--ga-display)">ثبت لید دستی</h3>
                <form id="ga-lead-form" style="display:grid;gap:8px;grid-template-columns:1fr 1fr">
                    <div class="ga-field" style="margin:0"><label>نام مشتری</label><input name="customer_name" required></div>
                    <div class="ga-field" style="margin:0"><label>موبایل</label><input name="customer_phone" required></div>
                    <div class="ga-field" style="margin:0"><label>علاقه</label>
                        <select name="service_interest">
                            <option value="website">ساخت سایت</option>
                            <option value="sales_partner">مشارکت فروش</option>
                            <option value="accounting_workshop">آموزش</option>
                            <option value="branding">برندینگ</option>
                        </select>
                    </div>
                    <div class="ga-field" style="margin:0"><label>یادداشت</label><input name="notes"></div>
                    <button type="submit" class="ga-btn ga-btn--teal" style="grid-column:1/-1">ثبت لید</button>
                    <div class="ga-msg" id="ga-lead-msg" style="grid-column:1/-1"></div>
                </form>
            </div>
            <h3 style="font-size:.95rem">لیدها</h3>
            <div class="ga-table-wrap"><table class="ga-table">
                <thead><tr><th>نام</th><th>موبایل</th><th>خدمت</th><th>وضعیت</th><th>تاریخ</th></tr></thead>
                <tbody>${leads}</tbody>
            </table></div>
            <h3 style="font-size:.95rem;margin-top:24px">کمیسیون‌ها</h3>
            <div class="ga-table-wrap"><table class="ga-table">
                <thead><tr><th>سفارش</th><th>مبلغ</th><th>٪</th><th>کمیسیون</th><th>وضعیت</th></tr></thead>
                <tbody>${comms}</tbody>
            </table></div>`;
    }

    _bindAmbassador(main) {
        main.querySelector('#ga-lead-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = main.querySelector('#ga-lead-msg');
            const fd = new FormData(e.target);
            try {
                const res = await this._request('POST', 'growth/leads', Object.fromEntries(fd.entries()));
                if (!res.success) throw new Error(res.message || 'خطا');
                msg.className = 'ga-msg ga-msg--ok';
                msg.textContent = 'لید ثبت شد';
                this._renderDash();
            } catch (err) {
                msg.className = 'ga-msg ga-msg--err';
                msg.textContent = err.message;
            }
        });
    }

    _adminHtml(data) {
        const st = data.stats || {};
        const orders = (data.orders || []).map(o => `
            <tr>
                <td><code>${this._esc(o.order_code)}</code></td>
                <td>${this._esc(o.customer_name)}</td>
                <td>${this._esc(o.service_slug)}</td>
                <td>${this._money(o.amount)}</td>
                <td><span class="ga-badge">${this._esc(o.status)}</span></td>
                <td>${this._esc(o.referral_code || '—')}</td>
                <td>${o.status !== 'confirmed'
                    ? `<button type="button" class="ga-btn ga-btn--sm ga-btn--teal" data-confirm="${o.id}">تأیید</button>`
                    : '✓'}</td>
            </tr>`).join('') || `<tr><td colspan="7">سفارشی نیست</td></tr>`;
        const ambs = (data.ambassadors || []).map(a => `
            <tr>
                <td>${this._esc(a.display_name)}</td>
                <td><code>${this._esc(a.referral_code)}</code></td>
                <td>${this._esc(a.path)}</td>
                <td>${a.total_leads}</td>
                <td>${this._money(a.total_earned)}</td>
            </tr>`).join('');

        return `
            <h2 class="ga-ws-title">مدیریت رشدگاه</h2>
            <p class="ga-ws-lead">تأیید سفارش‌ها، وضعیت سفیران و جمع کمیسیون‌ها.</p>
            <div class="ga-stats">
                <div class="ga-stat"><strong>${st.orders_total ?? 0}</strong><span>سفارش</span></div>
                <div class="ga-stat"><strong>${st.orders_confirmed ?? 0}</strong><span>تأییدشده</span></div>
                <div class="ga-stat"><strong>${st.ambassadors_active ?? 0}</strong><span>سفیر فعال</span></div>
                <div class="ga-stat"><strong>${this._money(st.commission_sum)}</strong><span>جمع کمیسیون</span></div>
            </div>
            <h3 style="font-size:.95rem">سفارش‌ها</h3>
            <div class="ga-table-wrap"><table class="ga-table">
                <thead><tr><th>کد</th><th>مشتری</th><th>خدمت</th><th>مبلغ</th><th>وضعیت</th><th>ارجاع</th><th></th></tr></thead>
                <tbody>${orders}</tbody>
            </table></div>
            <h3 style="font-size:.95rem;margin-top:24px">سفیران</h3>
            <div class="ga-table-wrap"><table class="ga-table">
                <thead><tr><th>نام</th><th>کد</th><th>مسیر</th><th>لید</th><th>درآمد</th></tr></thead>
                <tbody>${ambs}</tbody>
            </table></div>`;
    }

    _bindAdmin(main) {
        main.querySelectorAll('[data-confirm]').forEach(btn => {
            btn.addEventListener('click', async () => {
                btn.disabled = true;
                btn.textContent = '…';
                try {
                    await this._request('POST', `growth/orders/${btn.dataset.confirm}/confirm`, {});
                    this._renderDash();
                } catch (err) {
                    btn.disabled = false;
                    btn.textContent = 'خطا';
                    alert(err.message);
                }
            });
        });
    }
}
