/**
 * ServiceRewardWorkspace — داشبورد پاداش HVAC
 */
const BADGE_LABELS = {
    first_case: 'اولین درخواست',
    pm_member: 'عضو PM',
    referrer: 'معرف',
    field_hero: 'قهرمان میدانی',
    five_star: 'رضایت ۵ ستاره',
    reliable_supplier: 'تأمین‌کننده قابل اعتماد',
};

const TIER_COLORS = {
    normal: '#94a3b8', silver: '#cbd5e1', gold: '#fbbf24', vip: '#a855f7',
    bronze: '#cd7f32', platinum: '#e2e8f0', diamond: '#38bdf8',
    regular: '#94a3b8', selected: '#60a5fa', premium: '#f59e0b', strategic: '#10b981',
};

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

    $(name) {
        return this.root.querySelector(`[data-ref="${name}"]`);
    }

    esc(t) {
        return String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    _fmt(n) {
        return Number(n || 0).toLocaleString('fa-IR');
    }

    _toast(msg, isErr = 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' + (isErr ? ' 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();
        await this._loadLeaderboard();
        this._renderTab();
    }

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

    _shellHtml() {
        const acc = this._account();
        const tier = this.data?.tier_label || acc.tier || '—';
        const tierColor = TIER_COLORS[acc.tier] || '#6366f1';
        const actorLabel = { customer: 'مشتری', technician: 'تکنسین', supplier: 'تأمین‌کننده' }[this.actorType] || '';

        return `<div class="svc-ws" dir="rtl">
            <div class="svc-ws-hero">
                <div class="svc-ws-hero__main">
                    <span class="svc-ws-hero__icon">${this.actorType === 'customer' ? '👤' : this.actorType === 'technician' ? '🔧' : '📦'}</span>
                    <div>
                        <div class="svc-ws-hero__name">${this.esc(acc.display_name || 'کاربر')}</div>
                        <div class="svc-ws-hero__sub">${actorLabel} · ${this.esc(this.data?.credit_label || 'HVAC Credit')}</div>
                    </div>
                </div>
                <div class="svc-ws-kpis">
                    <div class="svc-ws-kpi">
                        <div class="svc-ws-kpi__val" data-ref="kPoints">—</div>
                        <div class="svc-ws-kpi__lbl">امتیاز قابل استفاده</div>
                    </div>
                    <div class="svc-ws-kpi">
                        <div class="svc-ws-kpi__val" data-ref="kCredits">—</div>
                        <div class="svc-ws-kpi__lbl">اعتبار HVAC</div>
                    </div>
                    <div class="svc-ws-kpi">
                        <div class="svc-ws-kpi__val svc-tier-chip" data-ref="kTier" style="background:${tierColor}">${this.esc(tier)}</div>
                        <div class="svc-ws-kpi__lbl">سطح</div>
                    </div>
                    <div class="svc-ws-kpi">
                        <div class="svc-ws-kpi__val" data-ref="kLifetime">—</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="ledger">📜 تاریخچه</button>
                <button class="svc-ws-tab" data-tab="redeem">🎁 جوایز</button>
                <button class="svc-ws-tab" data-tab="referral">🔗 معرفی</button>
                <button class="svc-ws-tab" data-tab="leaderboard">🏆 رتبه‌بندی</button>
                <button class="svc-ws-tab" data-tab="activities">⚡ فعالیت‌ها</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();
            });
        });
    }

    _updateKpis() {
        const acc = this._account();
        const kP = this.$('kPoints');
        const kC = this.$('kCredits');
        const kL = this.$('kLifetime');
        if (kP) kP.textContent = this._fmt(acc.points_available);
        if (kC) kC.textContent = this._fmt(acc.hvac_credits);
        if (kL) kL.textContent = this._fmt(acc.lifetime_earned);
    }

    async _loadLeaderboard() {
        try {
            const res = await this.request('GET', `service/rewards/leaderboard?actor_type=${this.actorType}`);
            this._leaderboard = res?.data ?? [];
        } catch {
            this._leaderboard = [];
        }
    }

    _renderTab() {
        this._updateKpis();
        const panel = this.$('panel');
        if (!panel) return;

        if (this._tab === 'dashboard') panel.innerHTML = this._dashboardHtml();
        else if (this._tab === 'ledger') panel.innerHTML = this._ledgerHtml();
        else if (this._tab === 'redeem') {
            panel.innerHTML = this._redeemHtml();
            this._bindRedeem();
        }
        else if (this._tab === 'referral') panel.innerHTML = this._referralHtml();
        else if (this._tab === 'leaderboard') panel.innerHTML = this._leaderboardHtml();
        else if (this._tab === 'activities') panel.innerHTML = this._activitiesHtml();
    }

    _dashboardHtml() {
        const acc = this._account();
        const next = this.data?.next_tier;
        const rank = this.data?.rank_position;
        const progress = next
            ? Math.min(100, Math.round(((acc.lifetime_earned || 0) / ((acc.lifetime_earned || 0) + next.need)) * 100))
            : 100;

        const tips = (this.data?.ai_suggestions || []).map(t => `<li>${this.esc(t)}</li>`).join('')
            || '<li>با فعالیت بیشتر امتیاز جمع کنید.</li>';

        const badges = (this.data?.badges || []).map(b => `
            <span class="svc-badge-chip" title="${this.esc(b.earned_at)}">
                🏅 ${this.esc(BADGE_LABELS[b.badge_key] || b.badge_key)}
            </span>`).join('') || '<span class="svc-muted">هنوز نشانی دریافت نکرده‌اید</span>';

        return `
        <div class="svc-dash-grid">
            <div class="svc-card">
                <h3>پیشرفت سطح</h3>
                ${next ? `
                    <p>تا <strong>${this.esc(next.label)}</strong> — ${this._fmt(next.need)} امتیاز دیگر</p>
                    <div class="svc-progress"><div class="svc-progress__bar" style="width:${progress}%"></div></div>
                ` : '<p class="svc-muted">بالاترین سطح را دارید 🎉</p>'}
            </div>
            ${rank ? `<div class="svc-card"><h3>رتبه تکنسین</h3><div class="svc-rank-big">#${this._fmt(rank)}</div></div>` : ''}
            <div class="svc-card svc-card--wide">
                <h3>نشان‌ها (Badges)</h3>
                <div class="svc-badges">${badges}</div>
            </div>
            <div class="svc-card svc-card--wide">
                <h3>کد معرف شما</h3>
                <div class="svc-ref-code" dir="ltr">${this.esc(acc.referral_code || '—')}</div>
                <p class="svc-muted">با اشتراک این کد، هم شما و هم دوستتان امتیاز می‌گیرید.</p>
            </div>
            <div class="svc-card svc-card--wide">
                <h3>هوش مصنوعی — پیشنهادهای تشویقی</h3>
                <ul class="svc-ai-tips">${tips}</ul>
            </div>
        </div>`;
    }

    _ledgerHtml() {
        const rows = this.data?.ledger || [];
        if (!rows.length) return '<div class="svc-empty">هنوز تراکنشی ثبت نشده</div>';

        const acts = this.data?.activities || {};
        const body = rows.map(r => {
            const dir = r.direction === 'earn' ? '+' : '−';
            const cls = r.direction === 'earn' ? 'svc-ledger--earn' : 'svc-ledger--redeem';
            const label = acts[r.event_key]?.label || r.note || r.event_key;
            return `<tr class="${cls}">
                <td>${this.esc(label)}</td>
                <td dir="ltr">${dir}${this._fmt(Math.abs(r.points))}</td>
                <td>${this.esc((r.created_at || '').slice(0, 16))}</td>
            </tr>`;
        }).join('');

        return `<div class="svc-table-wrap">
            <table class="svc-table">
                <thead><tr><th>فعالیت</th><th>امتیاز</th><th>تاریخ</th></tr></thead>
                <tbody>${body}</tbody>
            </table>
        </div>`;
    }

    _redeemHtml() {
        const items = this.data?.redeem_catalog || [];
        if (!items.length) return '<div class="svc-empty">جایزه‌ای برای نقش شما تعریف نشده</div>';

        const acc = this._account();
        return `<div class="svc-redeem-grid">${items.map(it => {
            const can = (acc.points_available || 0) >= it.cost;
            return `<div class="svc-redeem-card ${can ? '' : 'svc-redeem-card--locked'}">
                <h4>${this.esc(it.label)}</h4>
                <div class="svc-redeem-cost">${this._fmt(it.cost)} امتیاز</div>
                <button class="svc-btn svc-btn--primary svc-redeem-btn" data-key="${this.esc(it.key)}" ${can ? '' : 'disabled'}>
                    ${can ? 'دریافت جایزه' : 'امتیاز کافی نیست'}
                </button>
            </div>`;
        }).join('')}</div>`;
    }

    _bindRedeem() {
        this.root.querySelectorAll('.svc-redeem-btn').forEach(btn => {
            btn.addEventListener('click', async () => {
                const key = btn.dataset.key;
                btn.disabled = true;
                try {
                    const res = await this.request('POST', 'service/rewards/redeem', { redeem_key: key });
                    this.data = res?.data ?? res;
                    this._toast(`جایزه «${res?.label || key}» فعال شد`);
                    this._renderTab();
                    this._updateKpis();
                } catch (e) {
                    this._toast(e.message, true);
                    btn.disabled = false;
                }
            });
        });
    }

    _referralHtml() {
        const acc = this._account();
        return `<div class="svc-card svc-card--wide">
            <h3>سیستم معرفی (Referral)</h3>
            <p>کد معرف خود را به دوستان، همکاران یا مشتریان بدهید:</p>
            <div class="svc-ref-code svc-ref-code--lg" dir="ltr">${this.esc(acc.referral_code || '—')}</div>
            <button class="svc-btn" id="svc-copy-ref">📋 کپی کد</button>
            <hr class="svc-hr">
            <h4>ثبت کد معرف دیگران</h4>
            <div class="svc-ref-form">
                <input class="svc-inp" id="svc-ref-input" placeholder="کد ۸ رقمی" dir="ltr">
                <button class="svc-btn svc-btn--primary" id="svc-ref-submit">ثبت</button>
            </div>
            <p class="svc-msg" id="svc-ref-msg"></p>
        </div>`;

        // bind after paint - use setTimeout
        setTimeout(() => {
            this.root.querySelector('#svc-copy-ref')?.addEventListener('click', () => {
                navigator.clipboard?.writeText(acc.referral_code || '');
                this._toast('کد معرف کپی شد');
            });
            this.root.querySelector('#svc-ref-submit')?.addEventListener('click', async () => {
                const code = this.root.querySelector('#svc-ref-input')?.value?.trim();
                const msg = this.root.querySelector('#svc-ref-msg');
                try {
                    const res = await this.request('POST', 'service/rewards/referral', { referral_code: code });
                    this.data = res?.data ?? res;
                    if (msg) { msg.textContent = 'کد معرف ثبت شد'; msg.className = 'svc-msg svc-msg--ok'; }
                    this._updateKpis();
                } catch (e) {
                    if (msg) { msg.textContent = e.message; msg.className = 'svc-msg svc-msg--err'; }
                }
            });
        }, 0);
    }

    _leaderboardHtml() {
        if (!this._leaderboard.length) return '<div class="svc-empty">هنوز رتبه‌بندی ثبت نشده</div>';
        const rows = this._leaderboard.map((r, i) => `
            <tr class="${r.id === this._account().id ? 'svc-lb--me' : ''}">
                <td>${this._fmt(i + 1)}</td>
                <td>${this.esc(r.display_name)}</td>
                <td>${this.esc(r.tier)}</td>
                <td>${this._fmt(r.rank_score)}</td>
            </tr>`).join('');
        return `<div class="svc-table-wrap">
            <table class="svc-table">
                <thead><tr><th>رتبه</th><th>نام</th><th>سطح</th><th>امتیاز</th></tr></thead>
                <tbody>${rows}</tbody>
            </table>
        </div>`;
    }

    _activitiesHtml() {
        const acts = this.data?.activities || {};
        const entries = Object.entries(acts);
        if (!entries.length) return '<div class="svc-empty">فعالیتی تعریف نشده</div>';

        const rows = entries.map(([key, cfg]) => {
            const pts = cfg.type === 'percent'
                ? `${(cfg.base * 100).toFixed(0)}٪ ارزش`
                : this._fmt(cfg.base);
            return `<tr><td>${this.esc(cfg.label)}</td><td>${pts}</td><td class="svc-muted">${key}</td></tr>`;
        }).join('');

        return `<div class="svc-card svc-card--wide">
            <h3>فعالیت‌های امتیازآور</h3>
            <p class="svc-muted">فرمول: امتیاز = پایه × ضریب سطح × ضریب ارزش سفارش × ضریب کیفیت</p>
            <div class="svc-table-wrap">
                <table class="svc-table">
                    <thead><tr><th>فعالیت</th><th>امتیاز پایه</th><th>کلید</th></tr></thead>
                    <tbody>${rows}</tbody>
                </table>
            </div>
        </div>`;
    }
}
