/**
 * ServiceMarketerWorkspace — داشبورد بازاریاب / همکاری در فروش
 */
const STATUS_LABELS = {
    introduced: 'معرفی‌شده',
    request_created: 'درخواست ثبت شد',
    converted: 'تبدیل به فروش',
    lost: 'از دست رفته',
    contacted: 'تماس گرفته شد',
};

const EVENT_LABELS = {
    lead_introduced: 'پاداش معرفی',
    request_created: 'کمیسیون درخواست',
    job_completed: 'کمیسیون فاکتور',
};

const TIER_COLORS = {
    starter: '#94a3b8', pro: '#3b82f6', elite: '#8b5cf6', partner: '#f59e0b',
};

export default class ServiceMarketerWorkspace {
    constructor({ root, request, dashboard, siteUrl, onRefresh }) {
        this.root = root;
        this.request = request;
        this.data = dashboard || {};
        this.siteUrl = siteUrl || '/acc-engine/';
        this.onRefresh = onRefresh || (async () => this.data);
        this._tab = 'dashboard';
    }

    $(n) { return this.root.querySelector(`[data-ref="${n}"]`); }
    esc(t) { return String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;'); }
    fmt(n) { return Number(n || 0).toLocaleString('fa-IR'); }

    _toast(msg, err = false) {
        let el = this.root.querySelector('.svc-toast');
        if (!el) {
            el = document.createElement('div');
            el.className = 'svc-toast';
            this.root.appendChild(el);
        }
        el.textContent = msg;
        el.className = 'svc-toast' + (err ? ' svc-toast--err' : ' svc-toast--ok');
        el.style.display = 'block';
        clearTimeout(this._toastT);
        this._toastT = setTimeout(() => { el.style.display = 'none'; }, 3500);
    }

    async init() {
        this.root.innerHTML = this._shellHtml();
        this._bindEvents();
        this._renderTab();
    }

    _account() { return this.data?.account || {}; }

    _shellHtml() {
        const acc = this._account();
        const tierColor = this.data?.tier_color || TIER_COLORS[acc.tier] || '#6366f1';
        return `<div class="svc-ws svc-mkt" dir="rtl">
            <div class="svc-ws-hero svc-mkt-hero">
                <div class="svc-ws-hero__main">
                    <span class="svc-ws-hero__icon">📣</span>
                    <div>
                        <div class="svc-ws-hero__name">${this.esc(acc.display_name || 'بازاریاب')}</div>
                        <div class="svc-ws-hero__sub">همکار فروش · کد ${this.esc(acc.marketer_code || '')}</div>
                    </div>
                </div>
                <div class="svc-ws-kpis">
                    <div class="svc-ws-kpi">
                        <div class="svc-ws-kpi__val" data-ref="kPending">${this.fmt(acc.balance_pending)}</div>
                        <div class="svc-ws-kpi__lbl">قابل تسویه (تومان)</div>
                    </div>
                    <div class="svc-ws-kpi">
                        <div class="svc-ws-kpi__val" data-ref="kEarned">${this.fmt(acc.total_earned)}</div>
                        <div class="svc-ws-kpi__lbl">کل درآمد</div>
                    </div>
                    <div class="svc-ws-kpi">
                        <div class="svc-ws-kpi__val svc-tier-chip" style="background:${tierColor}">${this.esc(this.data?.tier_label || acc.tier)}</div>
                        <div class="svc-ws-kpi__lbl">سطح بازاریاب</div>
                    </div>
                    <div class="svc-ws-kpi">
                        <div class="svc-ws-kpi__val" data-ref="kConv">${this.fmt(acc.converted_leads)}</div>
                        <div class="svc-ws-kpi__lbl">فروش موفق</div>
                    </div>
                </div>
            </div>
            <div class="svc-ws-tabs" data-ref="tabs">
                <button class="svc-ws-tab svc-ws-tab--active" data-tab="dashboard">📊 داشبورد</button>
                <button class="svc-ws-tab" data-tab="introduce">➕ معرفی مشتری</button>
                <button class="svc-ws-tab" data-tab="leads">👥 مشتریان</button>
                <button class="svc-ws-tab" data-tab="commissions">💰 کمیسیون‌ها</button>
                <button class="svc-ws-tab" data-tab="share">🔗 لینک معرفی</button>
                <button class="svc-ws-tab" data-tab="payout">🏦 تسویه</button>
                <button class="svc-ws-tab" data-tab="tiers">⭐ سطوح</button>
            </div>
            <div class="svc-ws-panel" data-ref="panel"></div>
        </div>`;
    }

    _bindEvents() {
        this.$('tabs')?.querySelectorAll('[data-tab]').forEach(btn => {
            btn.addEventListener('click', () => {
                this._tab = btn.dataset.tab;
                this.$('tabs')?.querySelectorAll('[data-tab]').forEach(b =>
                    b.classList.toggle('svc-ws-tab--active', b.dataset.tab === this._tab));
                this._renderTab();
            });
        });
    }

    _renderTab() {
        const panel = this.$('panel');
        if (!panel) return;
        switch (this._tab) {
            case 'introduce': return this._renderIntroduce(panel);
            case 'leads':     return this._renderLeads(panel);
            case 'commissions': return this._renderCommissions(panel);
            case 'share':     return this._renderShare(panel);
            case 'payout':    return this._renderPayout(panel);
            case 'tiers':     return this._renderTiers(panel);
            default:          return this._renderDashboard(panel);
        }
    }

    _renderDashboard(panel) {
        const f = this.data?.funnel || {};
        const rates = this.data?.tier_rates || {};
        const next = this.data?.next_tier;
        panel.innerHTML = `
        <div class="svc-mkt-dash">
            <div class="svc-mkt-funnel">
                <div class="svc-mkt-funnel__item"><span>${this.fmt(f.introduced || 0)}</span><small>معرفی</small></div>
                <div class="svc-mkt-funnel__arrow">→</div>
                <div class="svc-mkt-funnel__item"><span>${this.fmt(f.request_created || 0)}</span><small>درخواست</small></div>
                <div class="svc-mkt-funnel__arrow">→</div>
                <div class="svc-mkt-funnel__item svc-mkt-funnel__item--ok"><span>${this.fmt(f.converted || 0)}</span><small>فروش</small></div>
            </div>
            <div class="svc-mkt-cards">
                <div class="svc-mkt-card">
                    <h4>نرخ کمیسیون شما</h4>
                    <ul class="svc-mkt-rates">
                        <li>پاداش معرفی: <strong>${this.fmt(rates.lead_bonus)} ت</strong></li>
                        <li>ثبت درخواست: <strong>${((rates.request_pct || 0) * 100).toFixed(1)}٪</strong></li>
                        <li>تکمیل فاکتور: <strong>${((rates.job_pct || 0) * 100).toFixed(1)}٪</strong></li>
                    </ul>
                </div>
                <div class="svc-mkt-card">
                    <h4>رتبه شما</h4>
                    <p class="svc-mkt-rank">#${this.fmt(this.data?.rank_position || 1)} در بین بازاریابان</p>
                    ${next ? `<p class="svc-mkt-next">تا سطح «${this.esc(next.label)}»: ${this.fmt(next.need)} فروش دیگر</p>` : '<p class="svc-mkt-next">🎉 بالاترین سطح!</p>'}
                </div>
            </div>
            <div class="svc-mkt-card">
                <h4>آخرین کمیسیون‌ها</h4>
                ${this._commissionRows((this.data?.commissions || []).slice(0, 5))}
            </div>
        </div>`;
    }

    _renderIntroduce(panel) {
        const types = this.data?.service_types || {};
        panel.innerHTML = `
        <div class="svc-mkt-form-wrap">
            <h3>معرفی مشتری جدید</h3>
            <p class="svc-mkt-hint">مشتری را معرفی کنید — پس از ثبت درخواست یا تکمیل فاکتور، کمیسیون شما محاسبه می‌شود.</p>
            <form id="svc-mkt-lead-form" class="svc-mkt-form">
                <label>نام مشتری *</label>
                <input name="customer_name" class="svc-inp" required placeholder="نام و نام خانوادگی">
                <label>موبایل مشتری *</label>
                <input name="customer_phone" class="svc-inp" required dir="ltr" placeholder="0912...">
                <label>شهر</label>
                <input name="customer_city" class="svc-inp" placeholder="تهران">
                <label>نوع خدمت مورد نیاز</label>
                <select name="service_interest" class="svc-inp">
                    ${Object.entries(types).map(([k, v]) => `<option value="${k}">${this.esc(v)}</option>`).join('')}
                </select>
                <label>یادداشت</label>
                <textarea name="notes" class="svc-inp" rows="2" placeholder="توضیحات اختیاری"></textarea>
                <button type="submit" class="svc-btn svc-btn--primary">ثبت معرفی</button>
            </form>
        </div>`;
        panel.querySelector('#svc-mkt-lead-form')?.addEventListener('submit', e => this._submitLead(e));
    }

    async _submitLead(e) {
        e.preventDefault();
        const fd = new FormData(e.target);
        try {
            const res = await this.request('POST', 'service/marketer/leads', Object.fromEntries(fd));
            this.data = res?.data || this.data;
            this._toast(res?.message || 'مشتری با موفقیت معرفی شد');
            this._tab = 'leads';
            this.$('tabs')?.querySelectorAll('[data-tab]').forEach(b =>
                b.classList.toggle('svc-ws-tab--active', b.dataset.tab === 'leads'));
            this._updateKpis();
            this._renderTab();
        } catch (err) {
            this._toast(err.message, true);
        }
    }

    _renderLeads(panel) {
        const leads = this.data?.leads || [];
        if (!leads.length) {
            panel.innerHTML = '<div class="acc-empty">هنوز مشتری معرفی نکرده‌اید — از تب «معرفی مشتری» شروع کنید.</div>';
            return;
        }
        panel.innerHTML = `<div class="svc-mkt-table-wrap"><table class="svc-mkt-table">
            <thead><tr><th>مشتری</th><th>موبایل</th><th>خدمت</th><th>وضعیت</th><th>تاریخ</th></tr></thead>
            <tbody>${leads.map(l => `<tr>
                <td>${this.esc(l.customer_name)}</td>
                <td dir="ltr">${this.esc(l.customer_phone)}</td>
                <td>${this.esc((this.data?.service_types || {})[l.service_interest] || l.service_interest)}</td>
                <td><span class="svc-mkt-badge svc-mkt-badge--${this.esc(l.status)}">${this.esc(STATUS_LABELS[l.status] || l.status)}</span></td>
                <td>${this.esc((l.introduced_at || '').slice(0, 10))}</td>
            </tr>`).join('')}</tbody>
        </table></div>`;
    }

    _commissionRows(rows) {
        if (!rows.length) return '<div class="acc-empty">هنوز کمیسیونی ثبت نشده</div>';
        return `<div class="svc-mkt-comm-list">${rows.map(c => `
            <div class="svc-mkt-comm-row">
                <div>
                    <strong>${this.esc(EVENT_LABELS[c.event_type] || c.event_type)}</strong>
                    <small>${this.esc(c.note || '')} · ${this.esc((c.created_at || '').slice(0, 10))}</small>
                </div>
                <div class="svc-mkt-comm-amt">
                    <strong>+${this.fmt(c.commission_amount)} ت</strong>
                    <span class="svc-mkt-badge svc-mkt-badge--${this.esc(c.status)}">${this.esc(c.status)}</span>
                </div>
            </div>`).join('')}</div>`;
    }

    _renderCommissions(panel) {
        panel.innerHTML = `<h3>تاریخچه کمیسیون‌ها</h3>${this._commissionRows(this.data?.commissions || [])}`;
    }

    _renderShare(panel) {
        const url = this.data?.share_url || '';
        const code = this.data?.share_code || '';
        const days = this.data?.attribution_days || 30;
        panel.innerHTML = `
        <div class="svc-mkt-share">
            <h3>لینک و کد معرفی شما</h3>
            <p>این لینک را برای مشتریان بفرستید — تا <strong>${days} روز</strong> نسبت داده می‌شود.</p>
            <div class="svc-mkt-share-box">
                <label>کد بازاریاب</label>
                <div class="svc-mkt-copy-row">
                    <input class="svc-inp" readonly value="${this.esc(code)}" id="mkt-code">
                    <button type="button" class="svc-btn svc-btn--sm" data-copy="mkt-code">کپی</button>
                </div>
                <label>لینک اختصاصی</label>
                <div class="svc-mkt-copy-row">
                    <input class="svc-inp" readonly value="${this.esc(url)}" id="mkt-url">
                    <button type="button" class="svc-btn svc-btn--sm" data-copy="mkt-url">کپی</button>
                </div>
            </div>
            <div class="svc-mkt-share-tips">
                <h4>راهنمای فروش</h4>
                <ul>
                    <li>لینک را در واتساپ، اینستاگرام یا پیامک بفرستید</li>
                    <li>مشتری با این لینک وارد شود و درخواست ثبت کند</li>
                    <li>پس از صدور فاکتور نهایی، کمیسیون شما تأیید می‌شود</li>
                    <li>می‌توانید مشتری را دستی هم در تب «معرفی مشتری» ثبت کنید</li>
                </ul>
            </div>
        </div>`;
        panel.querySelectorAll('[data-copy]').forEach(btn => {
            btn.addEventListener('click', () => {
                const el = panel.querySelector('#' + btn.dataset.copy);
                if (!el) return;
                navigator.clipboard?.writeText(el.value).then(() => this._toast('کپی شد'));
            });
        });
    }

    _renderPayout(panel) {
        const acc = this._account();
        const min = this.data?.min_payout || 200000;
        const payouts = this.data?.payouts || [];
        let bank = {};
        try { bank = JSON.parse(acc.bank_info || '{}'); } catch {}
        panel.innerHTML = `
        <div class="svc-mkt-payout">
            <div class="svc-mkt-payout-bal">
                <span>موجودی قابل تسویه</span>
                <strong>${this.fmt(acc.balance_pending)} تومان</strong>
                <small>حداقل تسویه: ${this.fmt(min)} تومان</small>
            </div>
            <form id="svc-mkt-payout-form" class="svc-mkt-form">
                <h4>اطلاعات بانکی</h4>
                <label>نام صاحب حساب</label>
                <input name="holder" class="svc-inp" value="${this.esc(bank.holder || acc.display_name || '')}">
                <label>شماره شبا</label>
                <input name="iban" class="svc-inp" dir="ltr" value="${this.esc(bank.iban || '')}" placeholder="IR...">
                <label>نام بانک</label>
                <input name="bank" class="svc-inp" value="${this.esc(bank.bank || '')}">
                <label>شماره کارت (اختیاری)</label>
                <input name="card" class="svc-inp" dir="ltr" value="${this.esc(bank.card || '')}">
                <button type="submit" class="svc-btn svc-btn--primary" ${acc.balance_pending < min ? 'disabled' : ''}>درخواست تسویه</button>
            </form>
            ${payouts.length ? `<h4>درخواست‌های قبلی</h4>
            <div class="svc-mkt-comm-list">${payouts.map(p => `
                <div class="svc-mkt-comm-row">
                    <div><strong>${this.fmt(p.amount)} تومان</strong><small>${this.esc((p.created_at || '').slice(0, 10))}</small></div>
                    <span class="svc-mkt-badge">${this.esc(p.status)}</span>
                </div>`).join('')}</div>` : ''}
        </div>`;
        panel.querySelector('#svc-mkt-payout-form')?.addEventListener('submit', e => this._submitPayout(e));
    }

    async _submitPayout(e) {
        e.preventDefault();
        const fd = new FormData(e.target);
        try {
            const res = await this.request('POST', 'service/marketer/payout', Object.fromEntries(fd));
            this.data = res?.data || this.data;
            this._toast('درخواست تسویه ثبت شد — ظرف ۳ روز کاری واریز می‌شود');
            this._updateKpis();
            this._renderTab();
        } catch (err) {
            this._toast(err.message, true);
        }
    }

    _renderTiers(panel) {
        const tiers = this.data?.all_tiers || {};
        const cur = this._account().tier;
        panel.innerHTML = `<div class="svc-mkt-tiers">
            <h3>سطوح بازاریابی</h3>
            <p>با افزایش فروش موفق، نرخ کمیسیون شما بالاتر می‌رود.</p>
            <div class="svc-mkt-tier-grid">${Object.entries(tiers).map(([k, t]) => `
                <div class="svc-mkt-tier-card ${k === cur ? 'svc-mkt-tier-card--on' : ''}" style="border-color:${t.color}">
                    <div class="svc-mkt-tier-card__head" style="background:${t.color}">${this.esc(t.label)}</div>
                    <ul>
                        <li>از <strong>${this.fmt(t.min_conv)}</strong> فروش</li>
                        <li>معرفی: <strong>${this.fmt(t.lead_bonus)} ت</strong></li>
                        <li>درخواست: <strong>${(t.request_pct * 100).toFixed(1)}٪</strong></li>
                        <li>فاکتور: <strong>${(t.job_pct * 100).toFixed(1)}٪</strong></li>
                    </ul>
                    ${k === cur ? '<span class="svc-mkt-tier-you">سطح فعلی شما</span>' : ''}
                </div>`).join('')}</div>
        </div>`;
    }

    _updateKpis() {
        const acc = this._account();
        const kP = this.$('kPending'); if (kP) kP.textContent = this.fmt(acc.balance_pending);
        const kE = this.$('kEarned'); if (kE) kE.textContent = this.fmt(acc.total_earned);
        const kC = this.$('kConv'); if (kC) kC.textContent = this.fmt(acc.converted_leads);
    }

    async refresh() {
        try {
            const res = await this.request('GET', 'service/marketer/me');
            this.data = res?.data || res;
            this._updateKpis();
            this._renderTab();
        } catch {}
    }
}
