/**
 * ChatSettingsSection.js — تنظیمات ویجت چت
 */
import SectionBase from "../../accounting/SectionBase.js";

export default class ChatSettingsSection extends SectionBase {

    async template() {
        return `
        <div class="acc-section-wrap" dir="rtl">
            <div class="acc-toolbar">
                <h2 class="acc-section-title">⚙️ تنظیمات ویجت چت</h2>
                <button class="acc-btn acc-btn--primary" data-ref="saveBtn">💾 ذخیره</button>
            </div>
            <div data-ref="wrap"><div class="acc-loading">⏳ بارگذاری...</div></div>
        </div>`;
    }

    async afterRender() {
        await this._loadSettings();
        this.on(this.ref("saveBtn"), "click", () => this._save());
    }

    async _loadSettings() {
        try {
            const res = await this.api.get("chat/settings");
            const s   = res?.data ?? {};
            this.ref("wrap").innerHTML = `
            <div style="max-width:520px;display:flex;flex-direction:column;gap:14px;padding:8px 0;">
                ${this._field("site_name",   "نام سایت / پشتیبانی", s.site_name,   "text",  "پشتیبانی آنلاین")}
                ${this._field("welcome_msg", "پیام خوش‌آمدگویی",   s.welcome_msg, "text",  "سلام! چطور می‌تونم کمکتون کنم؟")}
                ${this._field("phone",      "شماره تلفن",          s.phone,      "text",  "021xxxxxxxx")}
                ${this._field("whatsapp",   "شماره واتساپ",        s.whatsapp,   "text",  "989xxxxxxxxx")}
                ${this._field("telegram",   "آیدی تلگرام",         s.telegram,   "text",  "username")}
                ${this._field("instagram",  "آیدی اینستاگرام",     s.instagram,  "text",  "username")}
                <label style="display:flex;align-items:center;gap:8px;font-size:13px;">
                    <input type="checkbox" data-ref="enabled" ${s.enabled ? 'checked' : ''}>
                    فعال بودن ویجت چت
                </label>
                <div class="acc-alert acc-alert--info" style="font-size:12px;background:#eff6ff;border:1px solid #bfdbfe;padding:10px 12px;border-radius:8px;color:#1e40af;">
                    💡 ویجت چت به صورت خودکار در گوشه پایین‌راست همه صفحات سایت نمایش داده می‌شود.
                </div>
            </div>`;
            this._bindRefs();
        } catch (e) {
            this.ref("wrap").innerHTML = `<div class="acc-error">❌ ${this.escape(e.message)}</div>`;
        }
    }

    _field(ref, label, value, type, placeholder) {
        return `<label style="display:flex;flex-direction:column;gap:5px;font-size:13px;color:#475569;">
            ${label}
            <input class="acc-input" data-ref="${ref}" type="${type}" value="${this.escape(value ?? '')}" placeholder="${this.escape(placeholder)}">
        </label>`;
    }

    async _save() {
        const payload = {};
        ['site_name','welcome_msg','phone','whatsapp','telegram','instagram'].forEach(k => {
            const el = this.ref(k);
            if (el) payload[k] = el.value;
        });
        payload.enabled = this.ref("enabled")?.checked ? 1 : 0;
        try {
            await this.api.post("chat/settings", payload);
            alert("✅ تنظیمات ذخیره شد");
        } catch (e) { alert(e.message); }
    }

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