/**
 * ServiceAppView — پورتال یکپارچه خدمات HVAC
 * عملیات میدانی + پاداش + ویجت چت
 */
import ServiceWorkspace from './service/ServiceWorkspace.js';
import ServiceTalentFlow from './service/ServiceTalentFlow.js';
import acl from '../core/AclService.js';
const TOKEN_KEY = 'acc_token';
const REWARD_SESSION_KEY = 'svc_reward_session';
const REWARD_ACCOUNT_KEY = 'svc_reward_account_id';
const ACTOR_KEY = 'svc_reward_actor';
const MARKETER_SESSION_KEY = 'svc_marketer_session';
const MKT_REF_KEY = 'svc_mkt_ref';
export default class ServiceAppView {
    constructor() {
        this.root = null;
        this.screen = 'landing';
        this.actorType = sessionStorage.getItem(ACTOR_KEY) || 'customer';
        this.token = sessionStorage.getItem(TOKEN_KEY) || '';
        this.rewardSession = sessionStorage.getItem(REWARD_SESSION_KEY) || '';
        this.accountId = +(sessionStorage.getItem(REWARD_ACCOUNT_KEY) || 0);
        this.dashboard = null;
        this.workspace = null;
        this.user = null;
        this.canOperations = false;
        this.serviceRole = '';
        this.talentFlow = null;
        this.marketerSession = sessionStorage.getItem(MARKETER_SESSION_KEY) || '';
    }
    async render(root) {
        this.root = root;
        this._captureMktRef();
        if (this.actorType === 'marketer' && this.marketerSession) {
            try {
                await this._loadMarketerDashboard();
                this.screen = 'app';
            } catch {
                this._clearMarketerSession();
                this.screen = 'landing';
            }
        } else if (this.actorType === 'customer' && this.rewardSession) {
            try {
                await this._loadCustomerDashboard();
                this.screen = 'app';
            } catch {
                this._clearSession();
                this.screen = 'landing';
            }
        } else if (!['customer', 'marketer'].includes(this.actorType) && this.token) {
            try {
                await this._loadStaffContext();
                this.screen = 'app';
            } catch {
                this.token = '';
                sessionStorage.removeItem(TOKEN_KEY);
                this.screen = 'landing';
            }
        }
        await this._paint();
    }
    _siteUrl() {
        const base = window.ACC_SERVICE_CFG?.baseUrl || '/acc-engine/';
        return base.endsWith('/') ? base : base + '/';
    }
    _apiBase() {
        return (window.ACC_SERVICE_CFG?.api || '/acc-engine/api.php/acc/v1').replace(/\/$/, '');
    }
    _makeApi() {
        return {
            get: (path, q) => this._request('GET', path + (q ? '?' + new URLSearchParams(q) : '')),
            post: (path, body) => this._request('POST', path, body),
            put: (path, body) => this._request('PUT', path, body),
            delete: (path) => this._request('DELETE', path),
        };
    }
    async _request(method, path, body, extraHeaders = {}) {
        const url = `${this._apiBase()}/${path.replace(/^\//, '')}`;
        const opts = {
            method,
            headers: { 'Content-Type': 'application/json', Accept: 'application/json', ...extraHeaders },
        };
        if (this.token) opts.headers.Authorization = `Bearer ${this.token}`;
        if (this.rewardSession) opts.headers['X-Reward-Session'] = this.rewardSession;
        if (this.marketerSession) opts.headers['X-Marketer-Session'] = this.marketerSession;
        if (body && method !== 'GET' && method !== 'HEAD') opts.body = JSON.stringify(body);
        const r = await fetch(url, opts);
        const json = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(json.message || `HTTP ${r.status}`);
        return json;
    }
    _clearSession() {
        this.rewardSession = '';
        this.accountId = 0;
        sessionStorage.removeItem(REWARD_SESSION_KEY);
        sessionStorage.removeItem(REWARD_ACCOUNT_KEY);
    }
    _clearMarketerSession() {
        this.marketerSession = '';
        sessionStorage.removeItem(MARKETER_SESSION_KEY);
    }
    _captureMktRef() {
        const params = new URLSearchParams(window.location.search);
        const mkt = params.get('mkt') || params.get('ref');
        if (mkt) sessionStorage.setItem(MKT_REF_KEY, mkt.toUpperCase());
    }
    async _loadMarketerDashboard() {
        const res = await this._request('GET', 'service/marketer/me');
        this.dashboard = res?.data ?? res;
        this.canOperations = false;
    }
    async _loadCustomerDashboard() {
        const res = await this._request('GET', 'service/rewards/me');
        this.dashboard = res?.data ?? res;
        this.canOperations = false;
    }
    async _loadStaffContext() {
        const api = this._makeApi();
        try {
            await acl.load(api);
            this.canOperations = acl.can('service.view') || acl.can('service.accounting');
        } catch {
            this.canOperations = false;
        }
        if (this.canOperations) {
            try {
                const roleRes = await this._request('GET', 'service/me/role');
                const d = roleRes?.data ?? {};
                if (d.is_admin) this.serviceRole = 'admin';
                else if (d.is_accountant) this.serviceRole = 'accountant';
                else if (d.is_senior) this.serviceRole = 'senior';
                else if (d.is_technician) this.serviceRole = 'technician';
                else if (d.is_supplier) this.serviceRole = 'supplier';
                else this.serviceRole = d.role || 'admin';
            } catch {
                this.serviceRole = '';
            }
        }
        try {
            const rewardActor = this.actorType === 'supplier' ? 'supplier' : 'technician';
            const res = await this._request('POST', 'service/rewards/staff/login', { actor_type: rewardActor });
            this.dashboard = res?.data ?? res;
            this.accountId = res?.account_id ?? res?.data?.account?.id ?? 0;
            if (this.accountId) sessionStorage.setItem(REWARD_ACCOUNT_KEY, String(this.accountId));
        } catch {
            this.dashboard = null;
        }
        if (this.canOperations) {
            const me = await this._request('GET', 'acl/me');
            const u = me?.user || me?.data?.user;
            if (u) this.user = { display_name: u.display_name || u.user_login || '' };
        }
    }
    async _paint() {
        if (this.screen === 'app') {
            await this._renderApp();
            return;
        }
        if (this.screen === 'marketer_login') {
            this.root.innerHTML = this._marketerLoginHtml();
            this._bindMarketerLogin();
            return;
        }
        if (this.screen === 'customer_login') {
            this.root.innerHTML = this._customerLoginHtml();
            this._bindCustomerLogin();
            return;
        }
        if (this.screen === 'staff_login') {
            this.root.innerHTML = this._staffLoginHtml();
            this._bindStaffLogin();
            return;
        }
        if (this.screen === 'talent') {
            this.talentFlow?.destroy?.();
            this.talentFlow = new ServiceTalentFlow({
                root: this.root,
                request: (m, p, b) => this._request(m, p, b),
                siteUrl: this._siteUrl(),
                onBack: () => { this.screen = 'landing'; this._paint(); },
            });
            await this.talentFlow.init();
            return;
        }
        this.root.innerHTML = this._landingHtml();
        this._bindLanding();
    }
    _landingHtml() {
        const site = this._siteUrl();
        return `
        <div class="svc-app lp-wrap ha-applied" dir="rtl">
            <div class="ha-util">
                <a href="${site}">ACC Engine</a>
                <a href="${site}shop.php">فروشگاه</a>
                <a href="${site}melk.php">اقتصاد ملک</a>
                <a href="#ha-iq" class="ha-util__eco">پایداری عملیاتی</a>
            </div>

            <header class="ha-header" id="ha-header">
                <a href="${site}service.php" class="ha-brand">
                    <span class="ha-brand__mark">HA</span>
                    <span class="ha-brand__text">
                        <span class="ha-brand__name">HVAC <em>Applied</em></span>
                        <span class="ha-brand__sub">Field Service Platform</span>
                    </span>
                </a>
                <nav class="ha-nav">
                    <a href="#ha-demos">سناریوهای دمو</a>
                    <a href="#ha-portals">ورود به پورتال</a>
                    <a href="#ha-iq">هوش عملیاتی</a>
                    <a href="#ha-case">نمونه اجرا</a>
                </nav>
                <button type="button" class="ha-header__cta" data-role="customer">درخواست سرویس</button>
            </header>

            <section class="ha-hero">
                <div class="ha-hero__content">
                    <p class="ha-hero__brand">HVAC <span>Applied</span></p>
                    <h1>کیفیت هوای صنعتی<br><em>از میدان شروع می‌شود</em></h1>
                    <p class="ha-hero__lead">پلتفرم یکپارچه خدمات میدانی چیلر، سردخانه و تأسیسات — از درخواست تا دیسپاچ، گزارش و پاداش.</p>
                    <div class="ha-hero__actions">
                        <button type="button" class="ha-btn ha-btn--primary" data-role="customer">ثبت درخواست سرویس</button>
                        <a href="#ha-portals" class="ha-btn ha-btn--ghost">ورود نقش‌ها</a>
                    </div>
                </div>
                <div class="ha-hero__media" role="img" aria-label="کارشناس خدمات میدانی HVAC"></div>
            </section>

            <section class="ha-section" id="ha-solutions">
                <div class="ha-section__head ha-reveal">
                    <span class="ha-kicker">Solutions</span>
                    <h2>خدمات کاربردی برای ساختمان‌های حیاتی</h2>
                    <p>طراحی‌شده برای تیم‌های عملیاتی که به دقت، سرعت و شفافیت در نگهداری تجهیزات HVAC نیاز دارند.</p>
                </div>
                <div class="ha-solutions ha-reveal">
                    <article class="ha-sol">
                        <div class="ha-sol__icon" aria-hidden="true">
                            <svg viewBox="0 0 48 48" fill="none"><path d="M24 8v32M12 18c4 0 6-4 12-4s8 4 12 4M12 30c4 0 6 4 12 4s8-4 12-4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
                        </div>
                        <h3>چیلر و تهویه مرکزی</h3>
                        <p>عیب‌یابی، راه‌اندازی و بهینه‌سازی ظرفیت برای سیستم‌های تجاری و صنعتی.</p>
                    </article>
                    <article class="ha-sol">
                        <div class="ha-sol__icon" aria-hidden="true">
                            <svg viewBox="0 0 48 48" fill="none"><rect x="10" y="12" width="28" height="24" rx="3" stroke="currentColor" stroke-width="2.2"/><path d="M16 20h16M16 26h10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
                        </div>
                        <h3>سردخانه و زنجیره سرد</h3>
                        <p>نگهداری دما، هشدار نشتی و مداخله سریع برای جلوگیری از توقف خط.</p>
                    </article>
                    <article class="ha-sol">
                        <div class="ha-sol__icon" aria-hidden="true">
                            <svg viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="14" stroke="currentColor" stroke-width="2.2"/><path d="M24 14v10l7 4" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
                        </div>
                        <h3>نگهداری پیشگیرانه</h3>
                        <p>برنامه PM، چک‌لیست دیجیتال و زمان‌بندی دوره‌ای برای کاهش خرابی ناگهانی.</p>
                    </article>
                    <article class="ha-sol">
                        <div class="ha-sol__icon" aria-hidden="true">
                            <svg viewBox="0 0 48 48" fill="none"><path d="M24 10l14 24H10L24 10z" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round"/><path d="M24 22v6M24 32h.01" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>
                        </div>
                        <h3>اورژانس ۲۴/۷</h3>
                        <p>دیسپاچ فوری کارشناس، پیگیری زنده و پشتیبانی آنلاین بدون توقف عملیات.</p>
                    </article>
                </div>
            </section>

            <section class="ha-section ha-section--ink" id="ha-iq">
                <div class="ha-iq">
                    <div class="ha-iq__copy ha-reveal">
                        <span class="ha-kicker">Operational Intelligence</span>
                        <h2>هوش میدانی برای مدیریت دارایی HVAC</h2>
                        <p>از صف اعزام تا گزارش تکنسین، قطعات، حسابداری و سیستم پاداش — همه در یک پورتال یکپارچه برای مدیران تأسیسات و تیم‌های اجرایی.</p>
                        <div class="ha-iq__stats">
                            <div class="ha-iq__stat"><strong>یکپارچه</strong><span>ERP · Dispatch · PM</span></div>
                            <div class="ha-iq__stat"><strong>شفاف</strong><span>تایم‌لاین پرونده</span></div>
                            <div class="ha-iq__stat"><strong>پاداش</strong><span>HVAC Credit</span></div>
                            <div class="ha-iq__stat"><strong>شبکه</strong><span>جذب و ارزیابی کارشناس</span></div>
                        </div>
                    </div>
                    <div class="ha-iq__visual ha-reveal" role="img" aria-label="عملیات میدانی تأسیسات"></div>
                </div>
            </section>

            <section class="ha-section ha-section--mist" id="ha-demos">
                <div class="ha-section__head ha-reveal">
                    <span class="ha-kicker">Live Demo</span>
                    <h2>سناریوهای آزمایشی آماده</h2>
                    <p>هفت پرونده واقعی در دیتابیس — با یک کلیک وارد شوید و جریان کامل را ببینید. موبایل دمو: <strong dir="ltr">09123001000</strong></p>
                </div>
                <div class="ha-demos ha-reveal" id="ha-demos-grid">
                    <div class="ha-demos__loading">در حال بارگذاری سناریوها…</div>
                </div>
                <div class="ha-assistant ha-reveal" id="ha-assistant">
                    <div class="ha-assistant__head">
                        <span class="ha-kicker">HVAC Assistant</span>
                        <h3>دستیار تشخیص خدمت</h3>
                        <p>مشکل را آزاد بنویسید تا نوع خدمت، سوالات تکمیلی و تخمین هزینه پیشنهاد شود.</p>
                    </div>
                    <div class="ha-assistant__body">
                        <textarea id="ha-assist-text" class="ha-assist-input" rows="3" placeholder="مثلاً: کمپرسور چیلر اسکرو Carrier هر ۱۵ دقیقه با High Condensing Pressure قطع می‌شود…"></textarea>
                        <button type="button" class="ha-btn ha-btn--primary" id="ha-assist-run">تحلیل دستیار</button>
                        <div class="ha-assist-out" id="ha-assist-out" hidden></div>
                    </div>
                </div>
                <p class="ha-demos__hint ha-reveal">Seed: <code>C:\\xampp\\php\\php.exe run-service-hvac-demo-seed.php</code> · ارشد: <code>svc_senior_demo / Demo@2026</code> · اسکرو: <code>svc_tech_screw / Demo@2026</code></p>
            </section>

            <section class="ha-section ha-section--mist" id="ha-portals">
                <div class="ha-section__head ha-reveal">
                    <span class="ha-kicker">Access</span>
                    <h2>ورود به پورتال نقش شما</h2>
                    <p>هر نقش فضای کاری اختصاصی دارد — مشتری، کارشناس، مدیریت، تأمین‌کننده، بازاریاب یا پیوستن به شبکه.</p>
                </div>
                <div class="ha-portals ha-reveal">
                    <button type="button" class="ha-portal" data-role="customer">
                        <span class="ha-portal__tag">Customer</span>
                        <strong>مشتری / مدیر تأسیسات</strong>
                        <small>ثبت درخواست، پیگیری پرونده، امتیاز و پاداش</small>
                        <span class="ha-portal__go">ورود مشتری ←</span>
                    </button>
                    <button type="button" class="ha-portal" data-role="technician">
                        <span class="ha-portal__tag">Field Tech</span>
                        <strong>کارشناس میدانی</strong>
                        <small>صف کار، گزارش بازدید، قطعات و پاداش عملکرد</small>
                        <span class="ha-portal__go">ورود کارشناس ←</span>
                    </button>
                    <button type="button" class="ha-portal" data-role="manager">
                        <span class="ha-portal__tag">Operations</span>
                        <strong>مدیریت / ارشد</strong>
                        <small>داشبورد، دیسپاچ، PM و کنترل عملیات</small>
                        <span class="ha-portal__go">ورود مدیریت ←</span>
                    </button>
                    <button type="button" class="ha-portal" data-role="supplier">
                        <span class="ha-portal__tag">Parts</span>
                        <strong>تأمین‌کننده قطعات</strong>
                        <small>کاتالوگ قطعات، سفارش و کیفیت تأمین</small>
                        <span class="ha-portal__go">ورود تأمین‌کننده ←</span>
                    </button>
                    <button type="button" class="ha-portal ha-portal--marketer" data-role="marketer">
                        <span class="ha-portal__tag">Partner</span>
                        <strong>بازاریاب / همکار فروش</strong>
                        <small>معرفی مشتری، کمیسیون چندلایه و تسویه</small>
                        <span class="ha-portal__go">ورود بازاریاب ←</span>
                    </button>
                    <button type="button" class="ha-portal ha-portal--talent" data-role="talent">
                        <span class="ha-portal__tag">Careers</span>
                        <strong>پیوستن به شبکه</strong>
                        <small>ثبت‌نام کارشناس، ارزیابی آنلاین و هویت حرفه‌ای</small>
                        <span class="ha-portal__go">شروع ثبت‌نام ←</span>
                    </button>
                </div>
            </section>

            <section class="ha-section" id="ha-case">
                <div class="ha-case ha-reveal">
                    <div class="ha-case__media" role="img" aria-label="پروژه تأسیسات تجاری"></div>
                    <div class="ha-case__body">
                        <span class="ha-kicker">Case Study</span>
                        <h3>کاهش توقف سردخانه با دیسپاچ هوشمند و گزارش دیجیتال</h3>
                        <p>با یکپارچه‌سازی درخواست، اعزام کارشناس و تایم‌لاین پرونده، تیم عملیات در کمتر از یک شیفت وضعیت بحرانی را پایدار کرد و برنامه PM را فعال نگه داشت.</p>
                        <button type="button" class="ha-btn ha-btn--dark" data-role="customer">شروع با درخواست سرویس</button>
                    </div>
                </div>
            </section>

            <section class="ha-help" id="ha-help">
                <div class="ha-help__inner">
                    <div>
                        <h2>چطور کمک کنیم؟</h2>
                        <p>سرویس، قطعات، شبکه کارشناسان یا پشتیبانی آنلاین — مسیر درست را انتخاب کنید.</p>
                    </div>
                    <div class="ha-help__actions">
                        <button type="button" class="ha-btn ha-btn--solid" data-role="customer">درخواست سرویس</button>
                        <button type="button" class="ha-btn" data-role="supplier">قطعات</button>
                        <button type="button" class="ha-btn" data-role="technician">کارشناس میدانی</button>
                        <button type="button" class="ha-btn" data-role="talent">پیوستن به شبکه</button>
                    </div>
                </div>
            </section>

            <footer class="ha-footer">
                <span>© HVAC Applied — پورتال خدمات میدانی</span>
                <span>
                    <a href="${site}">ACC Engine</a> ·
                    بدون ورود هم از پشتیبانی آنلاین پایین صفحه می‌توانید درخواست ثبت کنید
                </span>
            </footer>
        </div>`;
    }
    _customerLoginHtml() {
        return `
        <div class="svc-app" dir="rtl">
            <header class="svc-header"><span class="svc-brand">HVAC Applied — ورود مشتری</span>
                <button class="svc-header__btn svc-header__btn--ghost" id="svc-back">بازگشت</button></header>
            <div class="svc-auth-card">
                <h3>ورود با موبایل</h3>
                <p>امتیاز، پاداش و پرونده‌های شما با شماره موبایل بازیابی می‌شود.</p>
                <form id="svc-customer-form">
                    <label>نام</label><input name="name" class="svc-inp" placeholder="نام شما" value="مشتری دمو HVAC">
                    <label>موبایل *</label><input name="phone" class="svc-inp" required placeholder="0912..." value="09123001000" dir="ltr">
                    <label>کد معرف (اختیاری)</label><input name="referral_code" class="svc-inp" placeholder="ABC12345">
                    <button type="submit" class="svc-btn svc-btn--primary">ورود به پورتال</button>
                    <div class="svc-msg" id="svc-msg"></div>
                    <p class="svc-demo-hint">دمو: موبایل <b dir="ltr">09123001000</b> — پس از seed همه سناریوها در «پرونده من» دیده می‌شوند.</p>
                </form>
            </div>
        </div>`;
    }
    _marketerLoginHtml() {
        return `
        <div class="svc-app" dir="rtl">
            <header class="svc-header"><span class="svc-brand">📣 ورود بازاریاب</span>
                <button class="svc-header__btn svc-header__btn--ghost" id="svc-back">بازگشت</button></header>
            <div class="svc-auth-card svc-auth-card--marketer">
                <h3>ثبت‌نام / ورود بازاریاب</h3>
                <p>مشتری معرفی کنید و از هر فروش موفق کمیسیون بگیرید.</p>
                <form id="svc-marketer-form">
                    <label>نام و نام خانوادگی *</label><input name="display_name" class="svc-inp" required placeholder="مثلاً علی رضایی">
                    <label>موبایل *</label><input name="phone" class="svc-inp" required dir="ltr" placeholder="0912...">
                    <label>شهر</label><input name="city" class="svc-inp" placeholder="تهران">
                    <label>ایمیل (اختیاری)</label><input name="email" class="svc-inp" type="email" dir="ltr" placeholder="email@example.com">
                    <button type="submit" class="svc-btn svc-btn--primary">ورود به پنل بازاریابی</button>
                    <div class="svc-msg" id="svc-msg"></div>
                </form>
                <div class="svc-mkt-login-perks">
                    <span>✓ پاداش معرفی مشتری</span>
                    <span>✓ کمیسیون درخواست و فاکتور</span>
                    <span>✓ لینک اختصاصی معرفی</span>
                    <span>✓ ۴ سطح درآمدی</span>
                </div>
            </div>
        </div>`;
    }
    _staffLoginHtml() {
        const labels = {
            technician: 'کارشناس میدانی',
            manager: 'مدیریت / کارشناس ارشد',
            supplier: 'تأمین‌کننده',
        };
        const roleLabel = labels[this.actorType] || 'پرسنل';
        return `
        <div class="svc-app" dir="rtl">
            <header class="svc-header"><span class="svc-brand">🔧 ورود ${roleLabel}</span>
                <button class="svc-header__btn svc-header__btn--ghost" id="svc-back">بازگشت</button></header>
            <div class="svc-auth-card">
                <h3>ورود حساب ERP</h3>
                <p>داشبورد عملیات میدانی و پاداش در یک پورتال.</p>
                <form id="svc-staff-form">
                    <label>نام کاربری</label><input name="username" class="svc-inp" required placeholder="svc_senior_demo" value="svc_senior_demo">
                    <label>رمز عبور</label><input name="password" type="password" class="svc-inp" required value="Demo@2026">
                    <button type="submit" class="svc-btn svc-btn--primary">ورود</button>
                    <div class="svc-msg" id="svc-msg"></div>
                    <p class="svc-demo-hint">دمو: <code>svc_senior_demo</code> / <code>svc_tech_screw</code> — رمز <code>Demo@2026</code></p>
                </form>
            </div>
        </div>`;
    }
    async _renderApp() {
        const site = this._siteUrl();
        const name = this.user?.display_name
            || this.dashboard?.account?.display_name
            || 'کاربر';
        const roleBadge = this.serviceRole
            ? `<span class="svc-header__role">${this._esc(this.serviceRole)}</span>`
            : '';
        this.root.innerHTML = `
        <div class="svc-app svc-app--workspace" dir="rtl">
            <header class="svc-header svc-header--app">
                <a href="${site}service.php" class="svc-brand">HVAC Applied</a>
                <span class="svc-header__user">${this._esc(name)} ${roleBadge}</span>
                <button class="svc-header__btn svc-header__btn--ghost" id="svc-logout">خروج</button>
            </header>
            <main class="svc-main" id="svc-workspace-root"></main>
        </div>`;
        this.root.querySelector('#svc-logout')?.addEventListener('click', () => {
            this._clearSession();
            this._clearMarketerSession();
            this.token = '';
            sessionStorage.removeItem(TOKEN_KEY);
            acl._loaded = false;
            acl.permissions?.clear?.();
            this.workspace?.destroy?.();
            this.screen = 'landing';
            this._paint();
        });
        const wsRoot = this.root.querySelector('#svc-workspace-root');
        const initialTab = this.actorType === 'marketer' ? 'marketer'
            : (this.canOperations ? 'operations'
            : (this.actorType === 'supplier' ? 'supplier' : 'profile'));
        const rewardActor = this.actorType === 'manager' ? 'technician' : this.actorType;
        this.workspace = new ServiceWorkspace({
            root: wsRoot,
            request: (m, p, b) => this._request(m, p, b),
            dashboard: this.dashboard,
            actorType: this.actorType === 'customer' ? 'customer'
                : (this.actorType === 'marketer' ? 'marketer' : rewardActor),
            customerPhone: this.dashboard?.account?.phone || '',
            siteUrl: site,
            apiBase: this._apiBase(),
            canOperations: this.canOperations,
            serviceRole: this.serviceRole,
            isSupplier: this.actorType === 'supplier',
            isMarketer: this.actorType === 'marketer',
            initialTab,
            onRefresh: async () => {
                if (this.actorType === 'marketer') await this._loadMarketerDashboard();
                else if (this.actorType === 'customer') await this._loadCustomerDashboard();
                else await this._loadStaffContext();
                return this.dashboard;
            },
        });
        await this.workspace.init();
    }
    _bindLanding() {
        const header = this.root.querySelector('#ha-header');
        if (header) {
            const onScroll = () => header.classList.toggle('ha-header--scrolled', window.scrollY > 12);
            onScroll();
            window.addEventListener('scroll', onScroll, { passive: true });
        }
        this.root.querySelectorAll('.ha-reveal').forEach((el, i) => {
            el.style.transitionDelay = `${Math.min(i * 0.06, 0.3)}s`;
        });
        if ('IntersectionObserver' in window) {
            const io = new IntersectionObserver((entries) => {
                entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('is-in'); });
            }, { threshold: 0.12 });
            this.root.querySelectorAll('.ha-reveal').forEach((el) => io.observe(el));
        } else {
            this.root.querySelectorAll('.ha-reveal').forEach((el) => el.classList.add('is-in'));
        }
        this.root.querySelectorAll('a[href^="#"]').forEach((a) => {
            a.addEventListener('click', (ev) => {
                const id = a.getAttribute('href');
                const target = id && this.root.querySelector(id);
                if (target) {
                    ev.preventDefault();
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
        this.root.querySelectorAll('[data-role]').forEach(btn => {
            btn.addEventListener('click', () => {
                const role = btn.dataset.role;
                if (role === 'talent') {
                    this.screen = 'talent';
                    this._paint();
                    return;
                }
                this.actorType = role === 'manager' ? 'manager' : role;
                sessionStorage.setItem(ACTOR_KEY, this.actorType);
                if (role === 'marketer') this.screen = 'marketer_login';
                else this.screen = role === 'customer' ? 'customer_login' : 'staff_login';
                this._paint();
            });
        });
        this._loadDemoScenarios();
        this._bindAssistant();
        if (window.location.hash === '#ha-demos') {
            setTimeout(() => this.root.querySelector('#ha-demos')?.scrollIntoView({ behavior: 'smooth' }), 80);
        }
    }
    async _loadDemoScenarios() {
        const grid = this.root.querySelector('#ha-demos-grid');
        if (!grid) return;
        const fallback = [
            { key: 'consult', icon: '📞', title: 'مشاوره فنی — Carrier 30GX', ui_hint: 'ورود مشتری → پرونده' },
            { key: 'repair', icon: '🛠', title: 'تعمیرات — بیمارستان', ui_hint: 'تکنسین اسکرو' },
            { key: 'pm', icon: '📅', title: 'PM — کارخانه سیمان', ui_hint: 'قراردادهای PM' },
            { key: 'parts', icon: '🔩', title: 'قطعات — ZR190KCE', ui_hint: '۵ تأمین‌کننده' },
            { key: 'equipment', icon: '🏭', title: 'خرید تجهیز — کارخانه', ui_hint: '۳ پیشنهاد COP' },
            { key: 'survey', icon: '🔍', title: 'بازدید — مرکز خرید', ui_hint: 'گزارش PDF' },
            { key: 'contract', icon: '📋', title: 'قرارداد — پتروشیمی', ui_hint: 'نیرو رایگان' },
        ];
        let cases = fallback;
        let phone = '09123001000';
        try {
            const r = await fetch(`${this._siteUrl()}docs/service/hvac-demo-scenarios.json?_=${Date.now()}`);
            if (r.ok) {
                const j = await r.json();
                phone = j?.summary?.customer_phone || phone;
                if (Array.isArray(j?.summary?.cases) && j.summary.cases.length) {
                    cases = j.summary.cases;
                }
            }
        } catch { /* fallback */ }
        grid.innerHTML = cases.map((c) => `
            <article class="ha-demo-card">
                <span class="ha-demo-card__icon">${this._esc(c.icon || '🔧')}</span>
                <strong>${this._esc(c.title || c.key)}</strong>
                <small>${this._esc(c.ui_hint || c.service_type || '')}</small>
                ${c.tracking_code ? `<code class="ha-demo-card__code" dir="ltr">${this._esc(c.tracking_code)}</code>` : ''}
                <div class="ha-demo-card__actions">
                    <button type="button" class="ha-btn ha-btn--primary ha-btn--sm" data-demo-login="${this._esc(phone)}" data-demo-code="${this._esc(c.tracking_code || '')}">ورود و مشاهده</button>
                    ${c.public_url ? `<a class="ha-btn ha-btn--ghost ha-btn--sm" href="${this._esc(c.public_url)}" target="_blank" rel="noopener">گزارش</a>` : ''}
                </div>
            </article>`).join('');
        grid.querySelectorAll('[data-demo-login]').forEach((btn) => {
            btn.addEventListener('click', async () => {
                const p = btn.getAttribute('data-demo-login');
                const code = btn.getAttribute('data-demo-code') || '';
                btn.disabled = true;
                btn.textContent = '…';
                try {
                    await this._enterDemoCustomer(p, code);
                } catch (err) {
                    alert(err.message || 'ورود دمو ناموفق');
                    btn.disabled = false;
                    btn.textContent = 'ورود و مشاهده';
                }
            });
        });
    }
    async _enterDemoCustomer(phone, trackingCode) {
        const res = await this._request('POST', 'service/rewards/customer/login', {
            phone,
            name: 'مشتری دمو HVAC',
        });
        this.rewardSession = res.session;
        this.accountId = res.account_id;
        sessionStorage.setItem(REWARD_SESSION_KEY, this.rewardSession);
        sessionStorage.setItem(REWARD_ACCOUNT_KEY, String(this.accountId));
        sessionStorage.setItem(ACTOR_KEY, 'customer');
        if (trackingCode) sessionStorage.setItem('svc_demo_focus_code', trackingCode);
        this.actorType = 'customer';
        this.dashboard = res.data;
        this.screen = 'app';
        await this._paint();
    }
    _bindAssistant() {
        const run = this.root.querySelector('#ha-assist-run');
        const out = this.root.querySelector('#ha-assist-out');
        const ta = this.root.querySelector('#ha-assist-text');
        if (!run || !out || !ta) return;
        run.addEventListener('click', async () => {
            const text = ta.value.trim();
            if (!text) { out.hidden = false; out.innerHTML = '<p class="ha-assist-err">متن مشکل را بنویسید.</p>'; return; }
            run.disabled = true;
            run.textContent = '…';
            try {
                const res = await this._request('POST', 'service/visitor/assist', { text });
                const d = res?.data || {};
                const probs = (d.analysis?.probabilities || []).map((p) =>
                    `<li><b>${this._esc(p.pct)}٪</b> ${this._esc(p.cause)}</li>`).join('');
                const qs = (d.follow_up_questions || []).map((q) => `<li>${this._esc(q)}</li>`).join('');
                out.hidden = false;
                out.innerHTML = `
                    <div class="ha-assist-result">
                        <p><strong>مسیر پیشنهادی:</strong> ${this._esc(d.service_label || d.service_type)}
                            <span class="ha-assist-conf">${this._esc(d.confidence)}٪</span></p>
                        ${d.cost_estimate ? `<p>تخمین: ${Number(d.cost_estimate).toLocaleString('fa-IR')} تومان</p>` : ''}
                        ${d.suggest_technician ? `<p>پیشنهاد تکنسین: تخصص ${this._esc(d.tech_specialty || 'HVAC')}</p>` : ''}
                        ${qs ? `<p>سوالات تکمیلی:</p><ul>${qs}</ul>` : ''}
                        ${probs ? `<p>احتمالات علت:</p><ul>${probs}</ul>` : ''}
                        <p class="ha-assist-hint">${this._esc(d.register_hint || '')}</p>
                        <button type="button" class="ha-btn ha-btn--dark ha-btn--sm" data-role="customer">ثبت از پورتال مشتری</button>
                    </div>`;
                out.querySelector('[data-role="customer"]')?.addEventListener('click', () => {
                    this.actorType = 'customer';
                    sessionStorage.setItem(ACTOR_KEY, 'customer');
                    this.screen = 'customer_login';
                    this._paint();
                });
            } catch (err) {
                out.hidden = false;
                out.innerHTML = `<p class="ha-assist-err">${this._esc(err.message)}</p>`;
            } finally {
                run.disabled = false;
                run.textContent = 'تحلیل دستیار';
            }
        });
    }
    _bindMarketerLogin() {
        this.root.querySelector('#svc-back')?.addEventListener('click', () => { this.screen = 'landing'; this._paint(); });
        this.root.querySelector('#svc-marketer-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = this.root.querySelector('#svc-msg');
            const fd = new FormData(e.target);
            try {
                const res = await this._request('POST', 'service/marketer/register', {
                    phone: fd.get('phone'),
                    display_name: fd.get('display_name'),
                    city: fd.get('city'),
                    email: fd.get('email'),
                });
                this.marketerSession = res.session;
                sessionStorage.setItem(MARKETER_SESSION_KEY, this.marketerSession);
                this.dashboard = res.data;
                this.screen = 'app';
                await this._paint();
            } catch (err) {
                msg.textContent = err.message;
                msg.className = 'svc-msg svc-msg--err';
            }
        });
    }
    _bindCustomerLogin() {
        this.root.querySelector('#svc-back')?.addEventListener('click', () => { this.screen = 'landing'; this._paint(); });
        this.root.querySelector('#svc-customer-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = this.root.querySelector('#svc-msg');
            const fd = new FormData(e.target);
            try {
                const res = await this._request('POST', 'service/rewards/customer/login', {
                    phone: fd.get('phone'), name: fd.get('name'), referral_code: fd.get('referral_code'),
                });
                this.rewardSession = res.session;
                this.accountId = res.account_id;
                sessionStorage.setItem(REWARD_SESSION_KEY, this.rewardSession);
                sessionStorage.setItem(REWARD_ACCOUNT_KEY, String(this.accountId));
                this.dashboard = res.data;
                this.screen = 'app';
                await this._paint();
            } catch (err) {
                msg.textContent = err.message;
                msg.className = 'svc-msg svc-msg--err';
            }
        });
    }
    _bindStaffLogin() {
        this.root.querySelector('#svc-back')?.addEventListener('click', () => { this.screen = 'landing'; this._paint(); });
        this.root.querySelector('#svc-staff-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = this.root.querySelector('#svc-msg');
            const fd = new FormData(e.target);
            try {
                const res = await this._request('POST', 'public/auth/login', {
                    username: fd.get('username'), password: fd.get('password'),
                });
                if (!res.token) throw new Error(res.message || 'ورود ناموفق');
                this.token = res.token;
                sessionStorage.setItem(TOKEN_KEY, res.token);
                await this._loadStaffContext();
                if (!this.canOperations && !this.dashboard) {
                    throw new Error('دسترسی به پورتال خدمات ندارید');
                }
                this.screen = 'app';
                await this._paint();
            } catch (err) {
                msg.textContent = err.message;
                msg.className = 'svc-msg svc-msg--err';
            }
        });
    }
    _esc(t) {
        return String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;');
    }
}
