/**
 * AragShopMarketerView — داشبورد بازاریاب فروشگاه
 * ثبت‌نام → تایید مدیر → ثبت مغازه → فروش → پیگیری سفارش/پورسانت/اعتبار
 */
const TOKEN_KEY = 'acc_token';

const ORDER_STATUS = {
    pending: 'در انتظار',
    processing: 'در حال آماده‌سازی',
    shipped: 'ارسال‌شده',
    completed: 'تکمیل',
    cancelled: 'لغو',
    'on-hold': 'معلق',
    failed: 'ناموفق',
};

const PAY_STATUS = {
    pending: 'منتظر پرداخت',
    paid: 'پرداخت‌شده',
    cod: 'پس‌کرایه',
    awaiting_transfer: 'منتظر کارت‌به‌کارت',
    cancelled: 'لغو',
    failed: 'ناموفق',
    marketer_credit: 'اعتباری',
};

const COMM_STATUS = {
    pending: 'منتظر وصول وجه',
    earned: 'قابل تسویه',
    paid: 'پرداخت‌شده',
};

export default class AragShopMarketerView {
    constructor() {
        this.root = null;
        this.token = sessionStorage.getItem(TOKEN_KEY) || localStorage.getItem(TOKEN_KEY) || '';
        this.mode = 'login'; // login | register | app
        this.tab = 'dashboard';
        this.account = null;
        this.dash = null;
        this.products = [];
        this.cart = []; // {package_id, label, price, qty}
        this.otpStep = 1;
        this.otpPhone = '';
        this.demoCode = '';
        this._busy = false;
    }

    render(root) {
        this.root = root;
        this._paint();
        if (this.token) this._boot();
    }

    _api() {
        return (window.ACC_SHOP_CFG?.api || '/acc-engine/api.php/acc/v1').replace(/\/$/, '');
    }
    _site() {
        const b = window.ACC_SHOP_CFG?.baseUrl || '/acc-engine/';
        return b.endsWith('/') ? b : b + '/';
    }
    esc(t) {
        return String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
    }
    fmt(n) {
        return Number(n || 0).toLocaleString('fa-IR');
    }

    _toast(msg, err = false) {
        let el = this.root.querySelector('.mk-toast');
        if (!el) {
            el = document.createElement('div');
            el.className = 'mk-toast';
            this.root.appendChild(el);
        }
        el.textContent = msg;
        el.className = 'mk-toast mk-toast--show' + (err ? ' mk-toast--err' : '');
        clearTimeout(this._tt);
        this._tt = setTimeout(() => { el.classList.remove('mk-toast--show'); }, 3500);
    }

    async _req(path, opts = {}) {
        const headers = { 'Content-Type': 'application/json', ...(opts.headers || {}) };
        if (this.token) headers.Authorization = 'Bearer ' + this.token;
        const res = await fetch(this._api() + path, { ...opts, headers });
        const data = await res.json().catch(() => ({}));
        if (!res.ok) {
            const err = new Error(data.message || data.error || ('HTTP ' + res.status));
            err.status = res.status;
            err.data = data;
            throw err;
        }
        return data;
    }

    async _boot() {
        try {
            const me = await this._req('/public/arag/marketer/me');
            this.account = me.account;
            this.mode = 'app';
            if (this.account?.status === 'active') {
                await this._loadDash();
            }
            this._paint();
        } catch (e) {
            if (e.status === 403 && e.data?.account) {
                this.account = e.data.account;
                this.mode = 'app';
                this._paint();
                return;
            }
            this.token = '';
            sessionStorage.removeItem(TOKEN_KEY);
            this.mode = 'login';
            this._paint();
        }
    }

    async _loadDash() {
        const d = await this._req('/public/arag/marketer/dashboard');
        this.dash = d.data || null;
        this.account = this.dash?.account || this.account;
        if (this.tab === 'sell' && !this.products.length) {
            const p = await this._req('/public/arag/marketer/products');
            this.products = p.data || [];
        }
    }

    _paint() {
        if (this.mode !== 'app') {
            this.root.innerHTML = `<div class="mk-app">${this._authHtml()}</div>`;
            this._bindAuth();
            return;
        }
        const acc = this.account || {};
        const st = acc.status || 'pending';
        const chipCls = st === 'active' ? 'mk-chip--ok' : (st === 'pending' ? 'mk-chip--warn' : 'mk-chip--bad');
        const stLabel = ({ active: 'فعال', pending: 'منتظر تایید', suspended: 'تعلیق', rejected: 'ردشده' })[st] || st;

        this.root.innerHTML = `<div class="mk-app">
            <header class="mk-top">
                <a class="mk-brand" href="${this._site()}shop-marketer.php">
                    <span class="mk-brand__kicker">Arag Shop · Marketer</span>
                    <span class="mk-brand__title">پنل بازاریاب</span>
                </a>
                <div class="mk-top__meta">
                    <span class="mk-chip ${chipCls}">${this.esc(stLabel)}</span>
                    ${acc.marketer_code ? `<span class="mk-chip">کد ${this.esc(acc.marketer_code)}</span>` : ''}
                    <span class="mk-chip">${this.esc(acc.display_name || '')}</span>
                    <a class="mk-btn mk-btn--ghost" href="${this._site()}shop.php">فروشگاه</a>
                    <button type="button" class="mk-btn mk-btn--ghost" data-act="logout">خروج</button>
                </div>
            </header>
            <div class="mk-shell">
                ${st !== 'active' ? this._pendingHtml(acc) : this._appHtml()}
            </div>
            <div class="mk-toast"></div>
        </div>`;
        this._bindApp();
    }

    _pendingHtml(acc) {
        return `<div class="mk-auth" style="max-width:560px">
            <h1>درخواست شما ثبت شد</h1>
            <p>پس از تایید مدیر سیستم فروشگاه، دسترسی فروش، ثبت مغازه و داشبورد کامل فعال می‌شود.</p>
            <div class="mk-kpis" style="grid-template-columns:1fr 1fr">
                <div class="mk-kpi"><div class="mk-kpi__val">${this.esc(acc.display_name)}</div><div class="mk-kpi__lbl">نام</div></div>
                <div class="mk-kpi"><div class="mk-kpi__val" style="font-size:1.1rem">${this.esc(acc.phone)}</div><div class="mk-kpi__lbl">موبایل</div></div>
                <div class="mk-kpi"><div class="mk-kpi__val" style="font-size:1.1rem">${this.esc(acc.marketer_code)}</div><div class="mk-kpi__lbl">کد بازاریاب</div></div>
                <div class="mk-kpi"><div class="mk-kpi__val" style="font-size:1.1rem">${this.esc(acc.city || '—')}</div><div class="mk-kpi__lbl">شهر</div></div>
            </div>
            <p style="margin-top:18px;font-size:.85rem;color:var(--mk-muted)">پورسانت فروش: ۷٪ شما + ۳٪ توسعه سایت · خرید مستقیم مغازه بدون بازاریاب: ۱۰٪ توسعه سایت</p>
            <button type="button" class="mk-btn" style="margin-top:16px" data-act="refresh">بررسی مجدد وضعیت</button>
        </div>`;
    }

    _appHtml() {
        const acc = this.account || {};
        const pipe = this.dash?.pipeline || {};
        const tabs = [
            ['dashboard', 'داشبورد'],
            ['shops', 'مغازه‌ها'],
            ['sell', 'فروش'],
            ['orders', 'سفارش‌ها'],
            ['commissions', 'پورسانت'],
            ['credit', 'اعتبار'],
            ['payout', 'تسویه'],
        ];
        return `
        <section class="mk-hero">
            <div class="mk-hero__main">
                <h1 class="mk-hero__hello">${this.esc(acc.display_name || 'بازاریاب')}</h1>
                <p class="mk-hero__sub">محصولات را بفروشید، مغازه را با موبایل مشخص کنید، و تا وصول وجه مشتری پورسانت را پیگیری کنید.</p>
                <div class="mk-hero__actions">
                    <button type="button" class="mk-btn" data-go="sell">شروع فروش</button>
                    <button type="button" class="mk-btn mk-btn--ghost" data-go="shops">ثبت مغازه جدید</button>
                </div>
            </div>
            <div class="mk-kpis">
                <div class="mk-kpi"><div class="mk-kpi__val">${this.fmt(acc.balance_payable)}</div><div class="mk-kpi__lbl">قابل تسویه (تومان)</div></div>
                <div class="mk-kpi"><div class="mk-kpi__val">${this.fmt(acc.total_earned)}</div><div class="mk-kpi__lbl">کل پورسانت</div></div>
                <div class="mk-kpi"><div class="mk-kpi__val">${this.fmt(acc.credit_balance)}</div><div class="mk-kpi__lbl">اعتبار / سقف ${this.fmt(acc.credit_limit)}</div></div>
                <div class="mk-kpi"><div class="mk-kpi__val">${this.fmt(acc.shops_count)}</div><div class="mk-kpi__lbl">مغازه تحت پوشش</div></div>
            </div>
        </section>
        <nav class="mk-tabs">
            ${tabs.map(([k, l]) => `<button type="button" class="mk-tab ${this.tab === k ? 'mk-tab--on' : ''}" data-tab="${k}">${l}</button>`).join('')}
        </nav>
        <div class="mk-panel">
            ${this.tab === 'dashboard' ? this._dashPanel(pipe) : ''}
            ${this.tab === 'shops' ? this._shopsPanel() : ''}
            ${this.tab === 'sell' ? this._sellPanel() : ''}
            ${this.tab === 'orders' ? this._ordersPanel() : ''}
            ${this.tab === 'commissions' ? this._commsPanel() : ''}
            ${this.tab === 'credit' ? this._creditPanel() : ''}
            ${this.tab === 'payout' ? this._payoutPanel() : ''}
        </div>`;
    }

    _dashPanel(pipe) {
        const orders = (this.dash?.orders || []).slice(0, 8);
        return `
        <div class="mk-pipeline">
            ${[['pending','ثبت‌شده'],['processing','آماده‌سازی'],['shipped','ارسال'],['completed','تحویل'],['cancelled','لغو']].map(([k,l]) => `
                <div class="mk-pipe"><div class="mk-pipe__n">${this.fmt(pipe[k] || 0)}</div><div class="mk-pipe__l">${l}</div></div>
            `).join('')}
        </div>
        <div class="mk-card">
            <h3 class="mk-card__title">آخرین سفارش‌ها</h3>
            ${this._ordersTable(orders)}
        </div>`;
    }

    _shopsPanel() {
        const shops = this.dash?.shops || [];
        return `<div class="mk-grid-2">
            <div class="mk-card">
                <h3 class="mk-card__title">ثبت فروشگاه</h3>
                <p style="font-size:.85rem;color:var(--mk-muted);margin:0 0 14px">با موبایل فروشنده مشخص می‌شود این مغازه تحت بازاریابی شماست — حتی خرید بعدی با همان موبایل هم ۷٪ برای شماست.</p>
                <form class="mk-form" data-form="shop">
                    <div class="mk-field"><label>موبایل فروشگاه *</label><input name="shop_phone" required placeholder="09xxxxxxxxx" dir="ltr"></div>
                    <div class="mk-field"><label>نام مغازه *</label><input name="shop_name" required></div>
                    <div class="mk-field"><label>نام مالک</label><input name="owner_name"></div>
                    <div class="mk-field"><label>شهر</label><input name="city"></div>
                    <div class="mk-field"><label>آدرس کامل</label><textarea name="address"></textarea></div>
                    <div class="mk-field"><label>یادداشت</label><textarea name="notes"></textarea></div>
                    <button class="mk-btn" type="submit">ذخیره مغازه</button>
                </form>
            </div>
            <div class="mk-card">
                <h3 class="mk-card__title">مغازه‌های من (${this.fmt(shops.length)})</h3>
                ${shops.length ? `<div class="mk-table-wrap"><table class="mk-table">
                    <thead><tr><th>مغازه</th><th>موبایل</th><th>شهر</th><th>فروش</th><th>سفارش</th></tr></thead>
                    <tbody>${shops.map(s => `<tr>
                        <td>${this.esc(s.shop_name)}</td>
                        <td dir="ltr">${this.esc(s.shop_phone)}</td>
                        <td>${this.esc(s.city || '—')}</td>
                        <td>${this.fmt(s.total_sales)}</td>
                        <td>${this.fmt(s.total_orders)}</td>
                    </tr>`).join('')}</tbody>
                </table></div>` : '<div class="mk-empty">هنوز مغازه‌ای ثبت نشده</div>'}
            </div>
        </div>`;
    }

    _sellPanel() {
        const shops = this.dash?.shops || [];
        const packs = [];
        for (const f of this.products) {
            for (const v of (f.variants || [])) {
                for (const p of (v.packages || [])) {
                    packs.push({
                        package_id: p.id,
                        label: `${f.name} — ${v.name} — ${p.label}`,
                        price: Number(p.price || 0),
                    });
                }
            }
        }
        const cartTotal = this.cart.reduce((s, i) => s + i.price * i.qty, 0);
        return `<div class="mk-grid-2">
            <div class="mk-card">
                <h3 class="mk-card__title">کاتالوگ محصول</h3>
                ${packs.length ? `<div class="mk-products">${packs.map(p => `
                    <div class="mk-prod">
                        <div class="mk-prod__name">${this.esc(p.label)}</div>
                        <div class="mk-prod__price">${this.fmt(p.price)} تومان</div>
                        <div class="mk-prod__meta">پورسانت شما ≈ ${this.fmt(Math.round(p.price * 0.07))}</div>
                        <button type="button" class="mk-btn mk-btn--ghost" data-add="${p.package_id}" data-label="${this.esc(p.label)}" data-price="${p.price}">افزودن</button>
                    </div>`).join('')}</div>` : '<div class="mk-empty">در حال بارگذاری محصولات…</div>'}
            </div>
            <div class="mk-card">
                <h3 class="mk-card__title">ثبت فروش برای مغازه</h3>
                <form class="mk-form" data-form="sale">
                    <div class="mk-field"><label>مغازه *</label>
                        <select name="shop_phone" required>
                            <option value="">انتخاب کنید</option>
                            ${shops.map(s => `<option value="${this.esc(s.shop_phone)}">${this.esc(s.shop_name)} — ${this.esc(s.shop_phone)}</option>`).join('')}
                        </select>
                    </div>
                    <div class="mk-field"><label>روش ارسال</label>
                        <select name="shipping_method">
                            <option value="post">پست</option>
                            <option value="tipax">تیپاکس</option>
                            <option value="pickup">تحویل حضوری</option>
                        </select>
                    </div>
                    <div class="mk-field"><label>پرداخت</label>
                        <select name="payment_method">
                            <option value="cod">پس‌کرایه / در محل</option>
                            <option value="bank">کارت به کارت</option>
                            <option value="demo">آزمایشی (فوری)</option>
                            <option value="marketer_credit">از اعتبار من</option>
                        </select>
                    </div>
                    <div class="mk-field"><label>یادداشت</label><textarea name="note"></textarea></div>
                    <div class="mk-table-wrap">
                        <table class="mk-table"><thead><tr><th>قلم</th><th>تعداد</th><th>مبلغ</th><th></th></tr></thead>
                        <tbody>${this.cart.length ? this.cart.map((c, i) => `<tr>
                            <td>${this.esc(c.label)}</td>
                            <td><input type="number" min="1" value="${c.qty}" data-qty="${i}" style="width:64px"></td>
                            <td>${this.fmt(c.price * c.qty)}</td>
                            <td><button type="button" data-rm="${i}">×</button></td>
                        </tr>`).join('') : '<tr><td colspan="4">سبد خالی است — از کاتالوگ اضافه کنید</td></tr>'}</tbody></table>
                    </div>
                    <div class="mk-cart-bar">
                        <div>جمع: <strong>${this.fmt(cartTotal)}</strong> تومان · سهم شما ≈ ${this.fmt(Math.round(cartTotal * 0.07))}</div>
                        <button class="mk-btn mk-btn--sand" type="submit" ${!this.cart.length ? 'disabled' : ''}>ثبت سفارش</button>
                    </div>
                </form>
            </div>
        </div>`;
    }

    _ordersPanel() {
        return `<div class="mk-card"><h3 class="mk-card__title">همه سفارش‌های منتسب</h3>${this._ordersTable(this.dash?.orders || [])}</div>`;
    }

    _ordersTable(orders) {
        if (!orders.length) return '<div class="mk-empty">سفارشی نیست</div>';
        return `<div class="mk-table-wrap"><table class="mk-table">
            <thead><tr><th>شماره</th><th>مشتری</th><th>موبایل</th><th>مبلغ</th><th>پرداخت</th><th>وضعیت</th><th>پورسانت</th><th>تاریخ</th></tr></thead>
            <tbody>${orders.map(o => `<tr>
                <td>${this.esc(o.order_number || o.id)}</td>
                <td>${this.esc(o.billing_name)}</td>
                <td dir="ltr">${this.esc(o.billing_phone)}</td>
                <td>${this.fmt(o.total || o.subtotal)}</td>
                <td><span class="mk-status">${this.esc(PAY_STATUS[o.payment_status] || o.payment_status)}</span></td>
                <td><span class="mk-status mk-status--${this.esc(o.order_status)}">${this.esc(ORDER_STATUS[o.order_status] || o.order_status)}</span></td>
                <td>${this.fmt(o.marketer_commission_amt)}</td>
                <td>${this.esc((o.created_at || '').slice(0, 16))}</td>
            </tr>`).join('')}</tbody>
        </table></div>`;
    }

    _commsPanel() {
        const rows = this.dash?.commissions || [];
        return `<div class="mk-card">
            <h3 class="mk-card__title">پورسانت‌ها</h3>
            <p style="font-size:.85rem;color:var(--mk-muted);margin:0 0 12px">سهم شما پس از «وصول وجه از مشتری» قابل تسویه می‌شود.</p>
            ${rows.length ? `<div class="mk-table-wrap"><table class="mk-table">
                <thead><tr><th>سفارش</th><th>مغازه</th><th>فروش</th><th>٪ شما</th><th>مبلغ شما</th><th>٪ سایت</th><th>وضعیت</th></tr></thead>
                <tbody>${rows.map(c => `<tr>
                    <td>${this.esc(c.order_number || c.order_id)}</td>
                    <td>${this.esc(c.shop_name || c.billing_name || '—')}</td>
                    <td>${this.fmt(c.order_total)}</td>
                    <td>${this.fmt(c.marketer_pct)}٪</td>
                    <td>${this.fmt(c.marketer_amount)}</td>
                    <td>${this.fmt(c.site_pct)}٪</td>
                    <td><span class="mk-status mk-status--${this.esc(c.status)}">${this.esc(COMM_STATUS[c.status] || c.status)}</span></td>
                </tr>`).join('')}</tbody>
            </table></div>` : '<div class="mk-empty">هنوز پورسانتی ثبت نشده</div>'}
        </div>`;
    }

    _creditPanel() {
        const acc = this.account || {};
        const ledger = this.dash?.credit_ledger || [];
        return `<div class="mk-grid-2">
            <div class="mk-card">
                <h3 class="mk-card__title">اعتبار فروش</h3>
                <div class="mk-kpis" style="grid-template-columns:1fr 1fr;margin-bottom:12px">
                    <div class="mk-kpi"><div class="mk-kpi__val">${this.fmt(acc.credit_balance)}</div><div class="mk-kpi__lbl">موجودی</div></div>
                    <div class="mk-kpi"><div class="mk-kpi__val">${this.fmt(acc.credit_limit)}</div><div class="mk-kpi__lbl">سقف</div></div>
                </div>
                <p style="font-size:.85rem;color:var(--mk-muted)">با خرید اعتبار از سایت (شارژ توسط مدیر) می‌توانید فروش اعتباری تا سقف تعیین‌شده انجام دهید. درخواست شارژ را با مدیر فروشگاه هماهنگ کنید.</p>
            </div>
            <div class="mk-card">
                <h3 class="mk-card__title">گردش اعتبار</h3>
                ${ledger.length ? `<div class="mk-table-wrap"><table class="mk-table">
                    <thead><tr><th>نوع</th><th>مبلغ</th><th>مانده</th><th>توضیح</th><th>تاریخ</th></tr></thead>
                    <tbody>${ledger.map(l => `<tr>
                        <td>${this.esc(l.entry_type)}</td>
                        <td>${this.fmt(l.amount)}</td>
                        <td>${this.fmt(l.balance_after)}</td>
                        <td>${this.esc(l.note || '')}</td>
                        <td>${this.esc((l.created_at || '').slice(0, 16))}</td>
                    </tr>`).join('')}</tbody>
                </table></div>` : '<div class="mk-empty">گردشی ثبت نشده</div>'}
            </div>
        </div>`;
    }

    _payoutPanel() {
        const acc = this.account || {};
        const payouts = this.dash?.payouts || [];
        return `<div class="mk-grid-2">
            <div class="mk-card">
                <h3 class="mk-card__title">درخواست تسویه</h3>
                <p style="font-size:.85rem;color:var(--mk-muted)">موجودی قابل تسویه: <strong>${this.fmt(acc.balance_payable)}</strong> تومان</p>
                <form class="mk-form" data-form="payout" style="margin-top:12px">
                    <div class="mk-field"><label>مبلغ (خالی = کل موجودی)</label><input name="amount" type="number" min="0" placeholder="${acc.balance_payable || 0}"></div>
                    <button class="mk-btn" type="submit" ${!(+acc.balance_payable) ? 'disabled' : ''}>ثبت درخواست</button>
                </form>
            </div>
            <div class="mk-card">
                <h3 class="mk-card__title">تاریخچه تسویه</h3>
                ${payouts.length ? `<div class="mk-table-wrap"><table class="mk-table">
                    <thead><tr><th>مبلغ</th><th>وضعیت</th><th>تاریخ</th></tr></thead>
                    <tbody>${payouts.map(p => `<tr>
                        <td>${this.fmt(p.amount)}</td>
                        <td><span class="mk-status mk-status--${this.esc(p.status)}">${this.esc(p.status)}</span></td>
                        <td>${this.esc((p.created_at || '').slice(0, 16))}</td>
                    </tr>`).join('')}</tbody>
                </table></div>` : '<div class="mk-empty">درخواستی نیست</div>'}
            </div>
        </div>`;
    }

    _authHtml() {
        if (this.mode === 'register') {
            return `<div class="mk-auth">
                <h1>ثبت‌نام بازاریاب</h1>
                <p>پس از ثبت، مدیر فروشگاه درخواست را بررسی و تایید می‌کند.</p>
                <form class="mk-form" data-form="register">
                    <div class="mk-field"><label>نام و نام خانوادگی *</label><input name="display_name" required></div>
                    <div class="mk-field"><label>موبایل *</label><input name="phone" required dir="ltr" placeholder="09xxxxxxxxx"></div>
                    <div class="mk-field"><label>کد ملی</label><input name="national_id" dir="ltr"></div>
                    <div class="mk-field"><label>شهر</label><input name="city"></div>
                    <div class="mk-field"><label>آدرس</label><textarea name="address"></textarea></div>
                    <div class="mk-field"><label>شبا</label><input name="bank_sheba" dir="ltr" placeholder="IR..."></div>
                    <div class="mk-field"><label>شماره کارت</label><input name="bank_card" dir="ltr"></div>
                    <div class="mk-field"><label>نام بانک</label><input name="bank_name"></div>
                    <button class="mk-btn" type="submit">ثبت درخواست</button>
                </form>
                <div class="mk-auth__switch">حساب دارید؟ <button type="button" data-mode="login">ورود با OTP</button></div>
            </div>`;
        }
        return `<div class="mk-auth">
            <h1>ورود بازاریاب</h1>
            <p>با شماره موبایلی که ثبت‌نام کرده‌اید وارد شوید. کد ورود یک عدد ۶ رقمی پیامکی است — نه کد بازاریاب (مثل AM-…).</p>
            <form class="mk-form" data-form="otp">
                <div class="mk-field"><label>موبایل</label><input name="phone" required dir="ltr" placeholder="09xxxxxxxxx" value="${this.esc(this.otpPhone)}" ${this.otpStep === 2 ? 'readonly' : ''}></div>
                ${this.otpStep === 2 ? `
                ${this.demoCode ? `<div class="mk-chip mk-chip--ok" style="display:block;padding:12px 14px;margin-bottom:4px">
                    حالت تست — کد تأیید شما: <strong dir="ltr" style="font-size:1.25rem;letter-spacing:.12em">${this.esc(this.demoCode)}</strong>
                </div>` : ''}
                <div class="mk-field"><label>کد تأیید ۶ رقمی</label><input name="code" required dir="ltr" maxlength="6" inputmode="numeric" pattern="[0-9]*" placeholder="مثلاً 123456" value="${this.esc(this.demoCode)}"></div>
                ` : ''}
                <button class="mk-btn" type="submit">${this.otpStep === 1 ? 'دریافت کد' : 'ورود'}</button>
            </form>
            <div class="mk-auth__switch">بازاریاب جدید هستید؟ <button type="button" data-mode="register">ثبت‌نام</button>
            ${this.otpStep === 2 ? ' · <button type="button" data-act="otp-reset">تغییر شماره</button>' : ''}</div>
            <p style="margin-top:18px;font-size:.8rem"><a href="${this._site()}shop.php">بازگشت به فروشگاه</a></p>
        </div>`;
    }

    _bindAuth() {
        this.root.querySelectorAll('[data-mode]').forEach(btn => {
            btn.addEventListener('click', () => {
                this.mode = btn.getAttribute('data-mode');
                this.otpStep = 1;
                this.demoCode = '';
                this._paint();
            });
        });
        this.root.querySelector('[data-act="otp-reset"]')?.addEventListener('click', () => {
            this.otpStep = 1;
            this.demoCode = '';
            this._paint();
        });
        const reg = this.root.querySelector('[data-form="register"]');
        if (reg) {
            reg.addEventListener('submit', async (e) => {
                e.preventDefault();
                const fd = new FormData(reg);
                try {
                    const r = await this._req('/public/arag/marketer/register', {
                        method: 'POST',
                        body: JSON.stringify(Object.fromEntries(fd.entries())),
                    });
                    this._toast(r.message || 'ثبت شد');
                    this.mode = 'login';
                    this.otpPhone = String(fd.get('phone') || '');
                    this._paint();
                } catch (err) {
                    this._toast(err.message, true);
                }
            });
        }
        const otp = this.root.querySelector('[data-form="otp"]');
        if (otp) {
            otp.addEventListener('submit', async (e) => {
                e.preventDefault();
                const fd = Object.fromEntries(new FormData(otp).entries());
                try {
                    if (this.otpStep === 1) {
                        const r = await this._req('/public/arag/marketer/auth/send-otp', {
                            method: 'POST',
                            body: JSON.stringify({ phone: fd.phone }),
                        });
                        this.otpPhone = fd.phone;
                        this.otpStep = 2;
                        this.demoCode = r.demo_code ? String(r.demo_code) : '';
                        this._toast(this.demoCode ? ('کد تست: ' + this.demoCode) : 'کد ارسال شد');
                        this._paint();
                        return;
                    }
                    const r = await this._req('/public/arag/marketer/auth/verify-otp', {
                        method: 'POST',
                        body: JSON.stringify({ phone: fd.phone || this.otpPhone, code: fd.code }),
                    });
                    const token = r.token || r.data?.token;
                    if (!token) throw new Error('توکن دریافت نشد');
                    this.token = token;
                    sessionStorage.setItem(TOKEN_KEY, token);
                    localStorage.setItem(TOKEN_KEY, token);
                    this.account = r.marketer || r.data?.marketer || null;
                    this.demoCode = '';
                    this.otpStep = 1;
                    if (!this.account) {
                        await this._boot();
                    } else {
                        this.mode = 'app';
                        if (this.account.status === 'active') await this._loadDash();
                        this._paint();
                    }
                } catch (err) {
                    this._toast(err.message, true);
                }
            });
        }
    }

    _bindApp() {
        this.root.querySelector('[data-act="logout"]')?.addEventListener('click', () => {
            this.token = '';
            sessionStorage.removeItem(TOKEN_KEY);
            localStorage.removeItem(TOKEN_KEY);
            this.mode = 'login';
            this.account = null;
            this.dash = null;
            this._paint();
        });
        this.root.querySelector('[data-act="refresh"]')?.addEventListener('click', () => this._boot());
        this.root.querySelectorAll('[data-tab]').forEach(btn => {
            btn.addEventListener('click', async () => {
                this.tab = btn.getAttribute('data-tab');
                if (this.tab === 'sell' && !this.products.length) {
                    try {
                        const p = await this._req('/public/arag/marketer/products');
                        this.products = p.data || [];
                    } catch (e) { this._toast(e.message, true); }
                }
                this._paint();
            });
        });
        this.root.querySelectorAll('[data-go]').forEach(btn => {
            btn.addEventListener('click', async () => {
                this.tab = btn.getAttribute('data-go');
                if (this.tab === 'sell' && !this.products.length) {
                    const p = await this._req('/public/arag/marketer/products');
                    this.products = p.data || [];
                }
                this._paint();
            });
        });

        const shopForm = this.root.querySelector('[data-form="shop"]');
        shopForm?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const body = Object.fromEntries(new FormData(shopForm).entries());
            try {
                const r = await this._req('/public/arag/marketer/shops', { method: 'POST', body: JSON.stringify(body) });
                this._toast(r.is_new ? 'مغازه ثبت شد' : 'مغازه به‌روز شد');
                await this._loadDash();
                this._paint();
            } catch (err) { this._toast(err.message, true); }
        });

        this.root.querySelectorAll('[data-add]').forEach(btn => {
            btn.addEventListener('click', () => {
                const id = +btn.getAttribute('data-add');
                const ex = this.cart.find(c => c.package_id === id);
                if (ex) ex.qty += 1;
                else this.cart.push({
                    package_id: id,
                    label: btn.getAttribute('data-label'),
                    price: +btn.getAttribute('data-price'),
                    qty: 1,
                });
                this._paint();
            });
        });
        this.root.querySelectorAll('[data-rm]').forEach(btn => {
            btn.addEventListener('click', () => {
                this.cart.splice(+btn.getAttribute('data-rm'), 1);
                this._paint();
            });
        });
        this.root.querySelectorAll('[data-qty]').forEach(inp => {
            inp.addEventListener('change', () => {
                const i = +inp.getAttribute('data-qty');
                this.cart[i].qty = Math.max(1, +inp.value || 1);
                this._paint();
            });
        });

        const saleForm = this.root.querySelector('[data-form="sale"]');
        saleForm?.addEventListener('submit', async (e) => {
            e.preventDefault();
            if (!this.cart.length) return;
            const fd = Object.fromEntries(new FormData(saleForm).entries());
            try {
                const r = await this._req('/public/arag/marketer/orders/create', {
                    method: 'POST',
                    body: JSON.stringify({
                        shop_phone: fd.shop_phone,
                        shipping_method: fd.shipping_method,
                        payment_method: fd.payment_method,
                        note: fd.note,
                        items: this.cart.map(c => ({ package_id: c.package_id, qty: c.qty })),
                    }),
                });
                this._toast('سفارش ' + (r.data?.order_number || '') + ' ثبت شد');
                this.cart = [];
                await this._loadDash();
                this.tab = 'orders';
                this._paint();
            } catch (err) { this._toast(err.message, true); }
        });

        const payForm = this.root.querySelector('[data-form="payout"]');
        payForm?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const amount = +(new FormData(payForm).get('amount') || 0);
            try {
                await this._req('/public/arag/marketer/payout/request', {
                    method: 'POST',
                    body: JSON.stringify(amount > 0 ? { amount } : {}),
                });
                this._toast('درخواست تسویه ثبت شد');
                await this._loadDash();
                this._paint();
            } catch (err) { this._toast(err.message, true); }
        });
    }
}
