/**
 * AragShopMizajView — تست مزاج‌شناسی + پیشنهاد عرقیات
 */
const SESS_KEY = 'acc_mizaj_session';
const RESULT_KEY = 'acc_mizaj_result';

export default class AragShopMizajView {
    constructor() {
        this.root = null;
        this.step = 'intro';
        this.questions = [];
        this.answers = {};
        this.qIndex = 0;
        this.result = null;
        this.sessionId = localStorage.getItem(SESS_KEY) || '';
        this.loading = false;
    }

    _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(s) {
        return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }
    _fmt(n) { return (+n).toLocaleString('fa-IR'); }

    async render(root) {
        this.root = root;
        const saved = localStorage.getItem(RESULT_KEY);
        if (saved) {
            try { this.result = JSON.parse(saved); this.step = 'result'; } catch {}
        }
        if (this.step === 'intro' && !this.questions.length) {
            await this._loadQuestions();
        }
        this._paint();
    }

    async _loadQuestions() {
        const r = await fetch(this._api() + '/public/arag/mizaj/questions');
        const j = await r.json();
        this.questions = j.data || [];
    }

    async _submit() {
        this.loading = true;
        this._paint();
        try {
            if (!this.sessionId) {
                this.sessionId = 'mz_' + Math.random().toString(36).slice(2) + Date.now().toString(36);
                localStorage.setItem(SESS_KEY, this.sessionId);
            }
            const r = await fetch(this._api() + '/public/arag/mizaj/submit', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ answers: this.answers, session_id: this.sessionId }),
            });
            const j = await r.json();
            if (!r.ok || !j.success) throw new Error(j.message || 'خطا');
            this.result = j.data;
            localStorage.setItem(RESULT_KEY, JSON.stringify(this.result));
            localStorage.setItem('acc_mizaj_type', this.result.type || '');
            this.step = 'result';
        } catch (e) {
            alert(e.message || 'خطا در ارسال');
        } finally {
            this.loading = false;
            this._paint();
        }
    }

    _paint() {
        const site = this._site();
        this.root.innerHTML = `
        <div class="mz-wrap">
            <header class="mz-header">
                <a href="${site}shop.php" class="mz-header__back">← فروشگاه</a>
                <span class="mz-header__brand sp-serif">مزاج‌شناسی</span>
                <a href="${site}shop-erp.php" class="mz-header__erp">ERP</a>
            </header>
            <main class="mz-main">
                ${this.step === 'intro' ? this._introHtml() : ''}
                ${this.step === 'quiz' ? this._quizHtml() : ''}
                ${this.step === 'result' ? this._resultHtml() : ''}
                ${this.loading ? '<div class="mz-loading">در حال تحلیل مزاج شما…</div>' : ''}
            </main>
        </div>`;
        this._bind();
    }

    _introHtml() {
        return `
        <section class="mz-hero">
            <div class="mz-hero__icon">🌿</div>
            <h1 class="mz-hero__title sp-serif">تست مزاج‌شناسی طب سنتی</h1>
            <p class="mz-hero__sub">در ۵ دقیقه مزاج خود را بشناسید و عرقیات مناسب دریافت کنید</p>
            <ul class="mz-hero__features">
                <li>✓ ۱۵ سؤال علمی بر پایه طب سنتی</li>
                <li>✓ راهکار اصلاح ۳۰ روزه</li>
                <li>✓ پیشنهاد محصول + کد تخفیف MAZAJ15</li>
                <li>✓ تقویم سلامتی فصلی</li>
            </ul>
            <button type="button" class="sp-btn mz-hero__cta" id="mz-start">شروع تست رایگان</button>
            <p class="mz-disclaimer">این تست آموزشی-سلامتی است و جایگزین تشخیص پزشک نیست.</p>
        </section>`;
    }

    _quizHtml() {
        const q = this.questions[this.qIndex];
        if (!q) return '';
        const pct = Math.round(((this.qIndex) / this.questions.length) * 100);
        const section = q.section || '';
        return `
        <section class="mz-quiz">
            <div class="mz-quiz__progress">
                <div class="mz-quiz__bar" style="width:${pct}%"></div>
            </div>
            <p class="mz-quiz__meta">سؤال ${this.qIndex + 1} از ${this.questions.length} · ${this._esc(section)}</p>
            <h2 class="mz-quiz__q">${this._esc(q.text)}</h2>
            <div class="mz-quiz__opts">
                ${(q.options || []).map(o => `
                <button type="button" class="mz-opt ${this.answers[q.id] === o.id ? 'mz-opt--on' : ''}" data-q="${this._esc(q.id)}" data-o="${this._esc(o.id)}">
                    ${this._esc(o.label)}
                </button>`).join('')}
            </div>
            <div class="mz-quiz__nav">
                ${this.qIndex > 0 ? '<button type="button" class="sp-btn sp-btn--ghost" id="mz-prev">قبلی</button>' : '<span></span>'}
                <button type="button" class="sp-btn" id="mz-next" ${!this.answers[q.id] ? 'disabled' : ''}>
                    ${this.qIndex >= this.questions.length - 1 ? 'مشاهده نتیجه' : 'بعدی'}
                </button>
            </div>
        </section>`;
    }

    _resultHtml() {
        const r = this.result;
        if (!r) return '';
        const site = this._site();
        const prof = r.profile || {};
        return `
        <section class="mz-result">
            <div class="mz-result__card" style="--mz-color:${r.color || '#1b4332'}">
                <div class="mz-result__icon">${r.icon || '🌿'}</div>
                <h1 class="mz-result__type sp-serif">${this._esc(r.label)}</h1>
                <p class="mz-result__intensity">شدت: ${this._esc(r.intensity)} · ${this._esc(r.axes?.temp)} و ${this._esc(r.axes?.moist)}</p>
                <p class="mz-result__summary">${this._esc(prof.summary)}</p>
            </div>

            <div class="mz-grid">
                <div class="mz-card">
                    <h3>✅ مناسب</h3>
                    <ul>${(prof.foods_ok || []).map(f => `<li>${this._esc(f)}</li>`).join('')}</ul>
                </div>
                <div class="mz-card">
                    <h3>⛔ کمتر مصرف کنید</h3>
                    <ul>${(prof.foods_no || []).map(f => `<li>${this._esc(f)}</li>`).join('')}</ul>
                </div>
                <div class="mz-card">
                    <h3>🧘 سبک زندگی</h3>
                    <ul>${(prof.lifestyle || []).map(f => `<li>${this._esc(f)}</li>`).join('')}</ul>
                </div>
                <div class="mz-card">
                    <h3>📅 فصل</h3>
                    <p>${this._esc(prof.season)}</p>
                </div>
            </div>

            <div class="mz-card mz-card--wide">
                <h3>📋 برنامه ۳۰ روزه اصلاح مزاج</h3>
                <ol class="mz-plan">${(r.plan_30 || []).map(p => `<li>${this._esc(p)}</li>`).join('')}</ol>
            </div>

            <div class="mz-products">
                <h2 class="sp-serif">عرقیات پیشنهادی برای شما</h2>
                <div class="mz-product-grid">
                    ${(r.products || []).map(p => `
                    <a class="mz-product" href="${this._esc(p.url)}">
                        ${p.image ? `<img src="${this._esc(p.image)}" alt="">` : '<div class="mz-product__ph">🌿</div>'}
                        <strong>${this._esc(p.name)}</strong>
                        <span>${this._esc(p.tagline)}</span>
                        <em>از ${this._fmt(p.price)} تومان</em>
                        <small>${this._esc(p.tip)}</small>
                    </a>`).join('')}
                </div>
            </div>

            <div class="mz-coupon">
                <p>کد تخفیف اختصاصی مزاج:</p>
                <div class="mz-coupon__code" id="mz-coupon-code">${this._esc(r.coupon)}</div>
                <p class="mz-coupon__desc">${this._esc(r.coupon_desc)}</p>
                <button type="button" class="sp-btn" id="mz-copy-coupon">کپی کد</button>
                <a href="${site}shop.php" class="sp-btn sp-btn--ghost" style="text-decoration:none;margin-right:8px">خرید با تخفیف</a>
            </div>

            <div class="mz-card mz-card--wide">
                <h3>🗓 تقویم سلامتی فصلی</h3>
                <div class="mz-season-grid">
                    ${(r.calendar || []).map(c => `
                    <div class="mz-season">
                        <strong>${this._esc(c.season)}</strong>
                        <p>${this._esc(c.tip)}</p>
                    </div>`).join('')}
                </div>
            </div>

            <div class="mz-subscribe">
                <h3>📦 اشتراک ماهانه عرقیات (بر اساس مزاج شما)</h3>
                <p>هر ماه بسته عرقیات متناسب با مزاجتان — تماس می‌گیریم</p>
                <form id="mz-sub-form" class="mz-sub-form">
                    <input type="text" name="name" placeholder="نام" required>
                    <input type="tel" name="phone" placeholder="09123456789" dir="ltr" required maxlength="11">
                    <button type="submit" class="sp-btn">ثبت درخواست اشتراک</button>
                </form>
                <div id="mz-sub-msg" hidden></div>
            </div>

            <div class="mz-share">
                <button type="button" class="sp-btn sp-btn--ghost" id="mz-share">🔗 اشتراک نتیجه</button>
                <button type="button" class="sp-btn sp-btn--ghost" id="mz-retake">تست مجدد</button>
            </div>
            <p class="mz-disclaimer">${this._esc(r.disclaimer)}</p>
        </section>`;
    }

    _bind() {
        this.root.querySelector('#mz-start')?.addEventListener('click', () => {
            this.step = 'quiz';
            this.qIndex = 0;
            this.answers = {};
            this._paint();
        });

        this.root.querySelectorAll('.mz-opt').forEach(btn => {
            btn.addEventListener('click', () => {
                this.answers[btn.dataset.q] = btn.dataset.o;
                this._paint();
            });
        });

        this.root.querySelector('#mz-prev')?.addEventListener('click', () => {
            if (this.qIndex > 0) { this.qIndex--; this._paint(); }
        });

        this.root.querySelector('#mz-next')?.addEventListener('click', async () => {
            if (this.qIndex < this.questions.length - 1) {
                this.qIndex++;
                this._paint();
            } else {
                await this._submit();
            }
        });

        this.root.querySelector('#mz-copy-coupon')?.addEventListener('click', () => {
            const code = this.result?.coupon || '';
            navigator.clipboard?.writeText(code);
            alert('کد ' + code + ' کپی شد');
            localStorage.setItem('acc_arag_coupon', code);
        });

        this.root.querySelector('#mz-retake')?.addEventListener('click', () => {
            localStorage.removeItem(RESULT_KEY);
            localStorage.removeItem('acc_mizaj_type');
            this.result = null;
            this.step = 'intro';
            this.answers = {};
            this.qIndex = 0;
            this._paint();
        });

        this.root.querySelector('#mz-share')?.addEventListener('click', () => {
            const text = `مزاج من: ${this.result?.label || ''} 🌿\nتست رایگان: ${location.origin}${this._site()}shop-mizaj.php`;
            if (navigator.share) {
                navigator.share({ title: 'تست مزاج', text, url: location.href }).catch(() => {});
            } else {
                navigator.clipboard?.writeText(text);
                alert('متن اشتراک کپی شد');
            }
        });

        this.root.querySelector('#mz-sub-form')?.addEventListener('submit', async e => {
            e.preventDefault();
            const fd = new FormData(e.target);
            const msg = this.root.querySelector('#mz-sub-msg');
            try {
                const r = await fetch(this._api() + '/public/arag/subscribe', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        name: fd.get('name'),
                        phone: fd.get('phone'),
                        mizaj_type: this.result?.type || '',
                        plan: 'monthly_mizaj',
                    }),
                });
                const j = await r.json();
                if (!r.ok) throw new Error(j.message);
                if (msg) { msg.hidden = false; msg.className = 'sp-msg sp-msg--ok'; msg.textContent = j.message; }
            } catch (err) {
                if (msg) { msg.hidden = false; msg.className = 'sp-msg sp-msg--err'; msg.textContent = err.message; }
            }
        });
    }
}
