/**
 * MyAccountView — حساب کاربری عرقیات
 * طراحی مدرن، رنگارنگ، کارتی
 */
const TOKEN_KEY = 'acc_token';
const CART_KEY  = 'acc_arag_cart';

const STATUS_MAP = {
    pending:    { label: 'در انتظار',       cls: 'acc-badge--amber' },
    processing: { label: 'در حال پردازش', cls: 'acc-badge--blue'  },
    completed:  { label: '✓ تکمیل',        cls: 'acc-badge--green' },
    cancelled:  { label: 'لغو شد',         cls: 'acc-badge--red'   },
    failed:     { label: 'ناموفق',          cls: 'acc-badge--red'   },
    'on-hold':  { label: 'معلق',           cls: 'acc-badge--gray'  },
};
const PAY_MAP = {
    zarinpal: 'زرین‌پال',
    demo:     'آزمایشی',
    cod:      'پرداخت در محل',
    bank:     'کارت به کارت',
};
const PAY_STATUS = {
    paid:              { label: '✓ پرداخت‌شده', cls: 'acc-badge--green' },
    cod:               { label: 'پرداخت در محل', cls: 'acc-badge--blue' },
    pending:           { label: 'در انتظار پرداخت', cls: 'acc-badge--amber' },
    awaiting_transfer: { label: 'منتظر واریز', cls: 'acc-badge--amber' },
    failed:            { label: 'ناموفق', cls: 'acc-badge--red' },
    cancelled:         { label: 'لغو', cls: 'acc-badge--red' },
};

export default class MyAccountView {
    constructor() {
        this.root   = null;
        this.token  = sessionStorage.getItem(TOKEN_KEY) || localStorage.getItem(TOKEN_KEY) || '';
        this.tab    = 'dashboard';
        this.user   = null;
        this.orders = [];
        this.stats  = null;
        this.recent = [];
    }

    async render(root) {
        this.root = root;
        document.body.classList.add('sp-body', 'acc-body');
        if (!this.token) { this._paintLogin(); return; }
        this._paintLoading();
        try {
            await this._loadDashboard();
            this._paintApp();
        } catch {
            sessionStorage.removeItem(TOKEN_KEY);
            localStorage.removeItem(TOKEN_KEY);
            this.token = '';
            this._paintLogin('نشست منقضی شده — دوباره وارد شوید.');
        }
    }

    _siteUrl() {
        const b = window.ACC_SHOP_CFG?.baseUrl || '/acc-engine/';
        return b.endsWith('/') ? b : b + '/';
    }
    _api() {
        return (window.ACC_SHOP_CFG?.api || '/acc-engine/api.php/acc/v1').replace(/\/$/, '');
    }

    /* ── Loading ──────────────────────────────────────────── */
    _paintLoading() {
        this.root.innerHTML = `
        <div class="acc-loading">
            <div class="acc-loading__spinner"></div>
            <p>در حال بارگذاری…</p>
        </div>`;
    }

    /* ── Login ────────────────────────────────────────────── */
    _paintLogin(notice = '') {
        const site = this._siteUrl();
        this.root.innerHTML = `
        <div class="acc-login-wrap">
            <div class="acc-login-box">
                <div class="acc-login-box__head">
                    <div class="acc-login-box__logo">🌿</div>
                    <h2>حساب کاربری</h2>
                    <p>عرقیات · ورود با شماره موبایل</p>
                </div>
                <div class="acc-login-box__body">
                    ${notice ? `<div class="acc-alert acc-alert--err">${this._esc(notice)}</div>` : ''}
                    <div class="acc-form">
                        <div class="acc-field">
                            <label>📱 شماره موبایل</label>
                            <input class="acc-input" id="acc-phone" type="tel" placeholder="09123456789" dir="ltr" maxlength="11" inputmode="tel" autocomplete="tel">
                        </div>
                        <button class="acc-btn acc-btn--primary acc-btn--block" id="acc-send-otp" type="button">دریافت کد تأیید</button>
                        <div id="acc-otp-block" hidden style="margin-top:12px;display:flex;flex-direction:column;gap:12px">
                            <div class="acc-field">
                                <label>🔑 کد ۶ رقمی</label>
                                <input class="acc-input" id="acc-code" type="text" dir="ltr" maxlength="6" inputmode="numeric" autocomplete="one-time-code" placeholder="• • • • • •">
                            </div>
                            <p class="acc-demo-hint" id="acc-demo-hint"></p>
                            <button class="acc-btn acc-btn--success acc-btn--block" id="acc-verify-otp" type="button">ورود به حساب</button>
                        </div>
                        <div class="acc-msg" id="acc-otp-msg" hidden></div>
                    </div>
                    <div class="acc-login-box__links">
                        <a href="${site}shop.php">← بازگشت به فروشگاه</a>
                    </div>
                </div>
            </div>
        </div>`;
        this.root.querySelector('#acc-send-otp')?.addEventListener('click',   () => this._sendOtp());
        this.root.querySelector('#acc-verify-otp')?.addEventListener('click', () => this._verifyOtp());
    }

    async _sendOtp() {
        const phone = this.root.querySelector('#acc-phone')?.value?.trim();
        const msg   = this.root.querySelector('#acc-otp-msg');
        const btn   = this.root.querySelector('#acc-send-otp');
        btn.disabled = true; btn.textContent = 'در حال ارسال…';
        try {
            const res = await this._post('/public/arag/auth/send-otp', { phone });
            this.root.querySelector('#acc-otp-block').hidden = false;
            const hint = this.root.querySelector('#acc-demo-hint');
            if (hint && res.demo_code) hint.textContent = `🔑 کد تست: ${res.demo_code}`;
            if (msg) { msg.hidden = false; msg.className = 'acc-msg acc-msg--ok'; msg.textContent = res.message || 'کد ارسال شد ✓'; }
        } catch (e) {
            if (msg) { msg.hidden = false; msg.className = 'acc-msg acc-msg--err'; msg.textContent = e.message; }
        } finally { btn.disabled = false; btn.textContent = 'دریافت کد تأیید'; }
    }

    async _verifyOtp() {
        const phone = this.root.querySelector('#acc-phone')?.value?.trim();
        const code  = this.root.querySelector('#acc-code')?.value?.trim();
        const msg   = this.root.querySelector('#acc-otp-msg');
        const btn   = this.root.querySelector('#acc-verify-otp');
        btn.disabled = true; btn.textContent = 'در حال بررسی…';
        try {
            const res = await this._post('/public/arag/auth/verify-otp', { phone, code });
            this.token = res.token;
            sessionStorage.setItem(TOKEN_KEY, res.token);
            localStorage.setItem(TOKEN_KEY, res.token);
            this.user = res.user;
            this._paintLoading();
            await this._loadDashboard();
            this._paintApp();
        } catch (e) {
            if (msg) { msg.hidden = false; msg.className = 'acc-msg acc-msg--err'; msg.textContent = e.message; }
            btn.disabled = false; btn.textContent = 'ورود به حساب';
        }
    }

    /* ── Data ─────────────────────────────────────────────── */
    async _loadDashboard() {
        const res = await this._get('/public/arag/account/dashboard');
        this.user   = res.user;
        this.stats  = res.stats;
        this.recent = res.recent_orders || [];
    }
    async _loadOrders() {
        const res = await this._get('/public/arag/account/orders');
        this.orders = res.data || [];
    }

    /* ── App shell ────────────────────────────────────────── */
    _paintApp() {
        const site   = this._siteUrl();
        const params = new URLSearchParams(window.location.search);
        const pay    = params.get('payment');
        const status = params.get('status');

        let notice = '';
        if (pay === 'success')   notice = `<div class="acc-notice acc-notice--ok">✅ پرداخت موفق — پیگیری: ${this._esc(params.get('ref') || '')}</div>`;
        if (pay === 'cancelled') notice = `<div class="acc-notice acc-notice--warn">⚠ پرداخت لغو شد.</div>`;
        if (pay === 'failed')    notice = `<div class="acc-notice acc-notice--err">❌ پرداخت ناموفق بود.</div>`;
        if (status === 'placed') notice = `<div class="acc-notice acc-notice--ok">✅ سفارش شما ثبت شد.</div>`;
        if (status === 'paid')   notice = `<div class="acc-notice acc-notice--ok">✅ پرداخت با موفقیت انجام شد — کد پیگیری: ${this._esc(params.get('ref') || '—')}</div>`;

        const fromCheckout = params.get('from') === 'checkout';
        if (fromCheckout && this._loadCart().length) this.tab = 'checkout';
        const hashTab = (location.hash || '').replace(/^#/, '');
        if (hashTab && ['dashboard', 'orders', 'checkout', 'profile', 'favorites'].includes(hashTab)) {
            this.tab = hashTab;
        }
        if (status === 'paid' || pay === 'success') this.tab = 'orders';

        this.root.innerHTML = `
        ${this._shellHeader(site)}
        ${notice}
        <div class="acc-layout">
            ${this._sidebar(site)}
            <main class="acc-main" id="acc-panel">
                <div class="acc-loading"><div class="acc-loading__spinner"></div><p>بارگذاری…</p></div>
            </main>
        </div>`;

        this._renderTab();
        this._bindSidebar();
        this.root.querySelector('#acc-logout')?.addEventListener('click', () => {
            sessionStorage.removeItem(TOKEN_KEY);
            localStorage.removeItem(TOKEN_KEY);
            this.token = '';
            this.render(this.root);
        });
    }

    _shellHeader(site) {
        return `
        <header class="acc-header">
            <div class="acc-header__brand">
                <a href="${site}shop.php" class="acc-header__logo">🌿</a>
                <div>
                    <div class="acc-header__title">فروشگاه عرقیات</div>
                    <div class="acc-header__sub">حساب کاربری</div>
                </div>
            </div>
            <div class="acc-header__actions">
                <a href="${site}shop.php" class="acc-header__btn">🛒 فروشگاه</a>
                <button class="acc-header__btn acc-header__btn--logout" id="acc-logout" type="button">خروج</button>
            </div>
        </header>`;
    }

    _sidebar(site) {
        const n = this._displayName();
        const p = this._userPhone();
        const ini = n.charAt(0) || 'ع';
        const cartN = this._loadCart().reduce((s, i) => s + i.qty, 0);
        const tabs = [
            { key: 'dashboard', label: 'پیشخوان',       icon: '📊', badge: '' },
            { key: 'orders',    label: 'سفارش‌ها',       icon: '📦', badge: this.stats?.orders_count ? String(this.stats.orders_count) : '' },
            { key: 'checkout',  label: 'تکمیل خرید',    icon: '💳', badge: cartN ? String(cartN) : '' },
            { key: 'profile',   label: 'جزئیات حساب',   icon: '👤', badge: '' },
        ];
        return `
        <aside class="acc-sidebar">
            <div class="acc-user-card">
                <div class="acc-user-card__avatar">${this._esc(ini)}</div>
                <div class="acc-user-card__info">
                    <strong>${this._esc(n)}</strong>
                    <span dir="ltr">${this._esc(p || 'حساب عرقیات')}</span>
                </div>
            </div>
            <nav class="acc-nav">
                ${tabs.map(t => `
                <button type="button" class="acc-nav__item ${this.tab === t.key ? 'acc-nav__item--on' : ''}" data-tab="${t.key}">
                    <span class="acc-nav__icon">${t.icon}</span>
                    <span class="acc-nav__label">${t.label}</span>
                    ${t.badge ? `<span class="acc-nav__badge">${t.badge}</span>` : ''}
                </button>`).join('')}
            </nav>
            <a href="${site}shop.php" class="acc-sidebar__back">← بازگشت به فروشگاه</a>
        </aside>`;
    }

    _bindSidebar() {
        this.root.querySelectorAll('[data-tab]').forEach(btn => {
            btn.addEventListener('click', async () => {
                this.tab = btn.dataset.tab;
                this.root.querySelectorAll('.acc-nav__item').forEach(b =>
                    b.classList.toggle('acc-nav__item--on', b.dataset.tab === this.tab));
                if (this.tab === 'orders') await this._loadOrders();
                this._renderTab();
            });
        });
    }

    _renderTab() {
        const el = this.root.querySelector('#acc-panel');
        if (!el) return;
        if (this.tab === 'checkout') {
            el.innerHTML = '<div class="acc-loading"><div class="acc-loading__spinner"></div><p>بارگذاری سبد…</p></div>';
            this._checkoutHtml().then(html => {
                el.innerHTML = html;
                el.querySelector('#acc-place-order')?.addEventListener('click', () => this._placeOrder());
            });
            return;
        }
        switch (this.tab) {
            case 'dashboard': el.innerHTML = this._dashboardHtml(); break;
            case 'orders':    el.innerHTML = this._ordersHtml(); break;
            case 'profile':   el.innerHTML = this._profileHtml(); break;
        }
        el.querySelector('#acc-save-profile')?.addEventListener('click', () => this._saveProfile());
        /* re-bind inner data-tab links */
        el.querySelectorAll('[data-tab]').forEach(btn => {
            btn.addEventListener('click', async () => {
                this.tab = btn.dataset.tab;
                this.root.querySelectorAll('.acc-nav__item').forEach(b =>
                    b.classList.toggle('acc-nav__item--on', b.dataset.tab === this.tab));
                if (this.tab === 'orders') await this._loadOrders();
                this._renderTab();
            });
        });
    }

    /* ── Dashboard ────────────────────────────────────────── */
    _dashboardHtml() {
        const site  = this._siteUrl();
        const cartN = this._loadCart().reduce((s, i) => s + i.qty, 0);
        const cards = [
            { val: (this.stats?.orders_count || 0).toLocaleString('fa-IR'), label: 'سفارش ثبت‌شده', icon: '📦', color: 'blue' },
            { val: cartN.toLocaleString('fa-IR'),                            label: 'قلم در سبد',    icon: '🛒', color: 'green' },
            { val: 'پس‌پرداخت',                                              label: 'روش پرداخت',    icon: '💳', color: 'amber' },
        ];

        const recentRows = this.recent.length
            ? this.recent.map(o => this._orderRowHtml(o)).join('')
            : `<tr><td colspan="4" class="acc-table__empty">هنوز سفارشی ندارید</td></tr>`;

        return `
        <div class="acc-welcome">
            <div>
                <h2>خوش آمدید، ${this._esc(this._displayName())} 👋</h2>
                <p>سفارش‌ها را پیگیری کنید، آدرس را ویرایش کنید و خرید را تکمیل نمایید.</p>
            </div>
            <a href="${site}shop.php" class="acc-btn acc-btn--white">🌿 مشاهده محصولات</a>
        </div>

        <div class="acc-stat-grid">
            ${cards.map(c => `
            <div class="acc-stat-card">
                <div class="acc-stat-card__icon acc-stat-card__icon--${c.color}">${c.icon}</div>
                <div>
                    <div class="acc-stat-card__val">${c.val}</div>
                    <div class="acc-stat-card__label">${c.label}</div>
                </div>
            </div>`).join('')}
        </div>

        <div class="acc-card">
            <div class="acc-card__header">
                <div class="acc-card__title">📋 سفارش‌های اخیر</div>
                ${this.recent.length ? `<button class="acc-btn acc-btn--sm" data-tab="orders">مشاهده همه</button>` : ''}
            </div>
            <div class="acc-table-wrap">
                <table class="acc-table">
                    <thead><tr><th>شماره</th><th>تاریخ</th><th>مبلغ</th><th>وضعیت</th></tr></thead>
                    <tbody>${recentRows}</tbody>
                </table>
            </div>
        </div>

        <div class="acc-quick-grid">
            <button class="acc-quick-card" type="button" data-tab="profile">
                <span class="acc-quick-card__icon">👤</span>
                <span class="acc-quick-card__label">ویرایش حساب</span>
                <span class="acc-quick-card__sub">آدرس و نام گیرنده</span>
                <span class="acc-quick-card__arrow">←</span>
            </button>
            <button class="acc-quick-card acc-quick-card--green" type="button" data-tab="checkout">
                <span class="acc-quick-card__icon">💳</span>
                <span class="acc-quick-card__label">تکمیل خرید</span>
                <span class="acc-quick-card__sub">${cartN ? `${cartN.toLocaleString('fa-IR')} قلم در انتظار` : 'سبد خالی است'}</span>
                <span class="acc-quick-card__arrow">←</span>
            </button>
            <a href="${site}shop.php" class="acc-quick-card acc-quick-card--dark">
                <span class="acc-quick-card__icon">🌿</span>
                <span class="acc-quick-card__label">فروشگاه</span>
                <span class="acc-quick-card__sub">گلاب · بیدمشک · کاسنی</span>
                <span class="acc-quick-card__arrow">←</span>
            </a>
        </div>`;
    }

    _orderRowHtml(o) {
        const s = STATUS_MAP[o.order_status] || { label: o.order_status, cls: 'acc-badge--gray' };
        return `
        <tr>
            <td><strong>${this._esc(o.order_number)}</strong></td>
            <td><span style="font-size:.75rem;color:#64748b">${this._esc((o.created_at || '').slice(0, 10))}</span></td>
            <td><strong style="color:#1b4332">${this._fmt(o.subtotal)}</strong></td>
            <td><span class="acc-badge ${s.cls}">${s.label}</span></td>
        </tr>`;
    }

    /* ── Orders ───────────────────────────────────────────── */
    _ordersHtml() {
        if (!this.orders.length) return `
        <div class="acc-page-head">
            <h2>📦 سفارش‌ها</h2>
            <p>تاریخچه خرید شما از فروشگاه عرقیات</p>
        </div>
        <div class="acc-empty">
            <span class="acc-empty__icon">📦</span>
            <p>سفارشی یافت نشد</p>
            <a href="${this._siteUrl()}shop.php" class="acc-btn acc-btn--primary">🌿 رفتن به فروشگاه</a>
        </div>`;

        return `
        <div class="acc-page-head">
            <h2>📦 سفارش‌ها</h2>
            <p>${this.orders.length.toLocaleString('fa-IR')} سفارش ثبت‌شده</p>
        </div>
        <div class="acc-card">
            <div class="acc-table-wrap">
                <table class="acc-table">
                    <thead><tr><th>شماره</th><th>تاریخ</th><th>روش پرداخت</th><th>ارسال</th><th>مبلغ</th><th>وضعیت سفارش</th><th>پرداخت</th></tr></thead>
                    <tbody>
                        ${this.orders.map(o => {
                            const s = STATUS_MAP[o.order_status] || { label: o.order_status, cls: 'acc-badge--gray' };
                            const p = PAY_STATUS[o.payment_status] || { label: o.payment_status || '—', cls: 'acc-badge--gray' };
                            const amt = o.total > 0 ? o.total : o.subtotal;
                            return `
                            <tr>
                                <td><strong>${this._esc(o.order_number)}</strong>${o.ref_id ? `<div style="font-size:.68rem;color:#64748b;direction:ltr">${this._esc(o.ref_id)}</div>` : ''}</td>
                                <td><span style="font-size:.75rem;color:#64748b">${this._esc((o.created_at || '').slice(0, 10))}</span></td>
                                <td>${this._esc(PAY_MAP[o.payment_method] || o.payment_method || '—')}</td>
                                <td>${o.shipping_method === 'tipax' ? '🚚 تیپاکس' : o.shipping_method === 'pickup' ? '🏪 حضوری' : '📮 پست'}</td>
                                <td><strong style="color:#1b4332">${this._fmt(amt)}</strong></td>
                                <td><span class="acc-badge ${s.cls}">${s.label}</span></td>
                                <td><span class="acc-badge ${p.cls}">${p.label}</span></td>
                            </tr>`;
                        }).join('')}
                    </tbody>
                </table>
            </div>
        </div>`;
    }

    /* ── Checkout ─────────────────────────────────────────── */
    async _checkoutHtml() {
        const cart = this._loadCart();
        const site = this._siteUrl();
        if (!cart.length) return `
        <div class="acc-page-head"><h2>💳 تکمیل خرید</h2></div>
        <div class="acc-empty">
            <span class="acc-empty__icon">🛒</span>
            <p>سبد خرید خالی است</p>
            <a href="${site}shop.php" class="acc-btn acc-btn--primary">🌿 بازگشت به فروشگاه</a>
        </div>`;

        const res   = await this._get('/public/arag/payment-methods');
        const ships = res.shipping || [];
        const pays  = res.data || [];
        const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
        const itemN = cart.reduce((s, i) => s + i.qty, 0);

        return `
        <div class="acc-page-head">
            <h2>💳 تکمیل خرید</h2>
            <p>${itemN.toLocaleString('fa-IR')} قلم · مبلغ: ${this._fmt(total)}</p>
        </div>
        <div class="acc-checkout-grid">
            <div class="acc-checkout-main">
                <div class="acc-card">
                    <div class="acc-card__header"><div class="acc-card__title">📍 اطلاعات ارسال</div></div>
                    <div style="padding:20px;display:grid;gap:12px">
                        <div class="acc-field">
                            <label>نام گیرنده</label>
                            <input class="acc-input" id="ck-name" type="text" value="${this._esc(this._displayName())}" placeholder="نام و نام خانوادگی">
                        </div>
                        <div class="acc-field">
                            <label>آدرس کامل</label>
                            <input class="acc-input" id="ck-address" type="text" value="${this._esc(this.user?.address || '')}" placeholder="خیابان، پلاک، واحد">
                        </div>
                        <div class="acc-field">
                            <label>شهر</label>
                            <input class="acc-input" id="ck-city" type="text" value="${this._esc(this.user?.city || '')}" placeholder="مثلاً تهران">
                        </div>
                    </div>
                </div>
                <div class="acc-card">
                    <div class="acc-card__header"><div class="acc-card__title">🚚 روش ارسال</div></div>
                    <div style="padding:16px 20px;display:grid;gap:10px">
                        ${ships.map((s, i) => `
                        <label class="acc-option">
                            <input type="radio" name="shipping" value="${s.id}" ${i === 0 ? 'checked' : ''}>
                            <div class="acc-option__box">
                                <span class="acc-option__title">${this._esc(s.title)}</span>
                                <span class="acc-option__desc">${this._esc(s.desc)}</span>
                            </div>
                        </label>`).join('')}
                    </div>
                </div>
                <div class="acc-card">
                    <div class="acc-card__header"><div class="acc-card__title">💳 روش پرداخت</div></div>
                    <div style="padding:16px 20px;display:grid;gap:10px">
                        ${pays.map((p, i) => `
                        <label class="acc-option">
                            <input type="radio" name="payment" value="${p.id}" ${i === 0 ? 'checked' : ''}>
                            <div class="acc-option__box">
                                <span class="acc-option__title">${this._esc(p.title)}</span>
                                ${p.desc ? `<span class="acc-option__desc">${this._esc(p.desc)}</span>` : ''}
                            </div>
                        </label>`).join('')}
                    </div>
                </div>
                <button class="acc-btn acc-btn--primary acc-btn--block acc-btn--lg" id="acc-place-order" type="button">
                    ✅ ثبت و پرداخت سفارش
                </button>
                <div class="acc-msg" id="acc-checkout-msg" hidden></div>
            </div>
            <aside class="acc-checkout-summary">
                <div class="acc-card acc-card--sticky">
                    <div class="acc-card__header"><div class="acc-card__title">🧾 خلاصه سفارش</div></div>
                    <ul style="list-style:none;margin:0;padding:16px 20px;display:flex;flex-direction:column;gap:10px">
                        ${cart.map(c => `
                        <li style="display:flex;justify-content:space-between;align-items:center;font-size:.82rem">
                            <div>
                                <div style="font-weight:600;color:#0f1f0e">${this._esc(c.label)}</div>
                                <div style="color:#64748b;font-size:.72rem">${c.qty.toLocaleString('fa-IR')} عدد</div>
                            </div>
                            <strong style="color:#1b4332">${this._fmt(c.price * c.qty)}</strong>
                        </li>`).join('')}
                    </ul>
                    <div style="padding:14px 20px;border-top:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center">
                        <span style="font-weight:600;font-size:.85rem">جمع کل</span>
                        <strong style="font-size:1.1rem;color:#1b4332">${this._fmt(total)}</strong>
                    </div>
                    <div style="padding:10px 20px 16px;font-size:.72rem;color:#64748b">
                        🚚 هزینه ارسال جداگانه · پس‌پرداخت درب منزل یا پست
                    </div>
                </div>
            </aside>
        </div>`;
    }

    /* ── Profile ──────────────────────────────────────────── */
    _profileHtml() {
        const phone   = this._userPhone();
        const phoneFmt = phone ? phone.replace(/(\d{4})(\d{3})(\d{4})/, '$1 $2 $3') : '—';
        const nameVal = (this.user?.name || '').trim();
        const showName = (nameVal && !/^مشتری\s*\d+$/i.test(nameVal)) ? nameVal : '';

        return `
        <div class="acc-page-head">
            <h2>👤 جزئیات حساب</h2>
            <p>اطلاعات تماس و آدرس ارسال</p>
        </div>
        <div class="acc-profile-grid">
            <div class="acc-profile-card">
                <div class="acc-profile-card__avatar">${this._esc(this._userInitial())}</div>
                <div class="acc-profile-card__name">${this._esc(this._displayName())}</div>
                <div class="acc-profile-card__phone" dir="ltr">${this._esc(phoneFmt)}</div>
                <div style="display:grid;gap:8px;margin-top:16px;width:100%">
                    <div class="acc-profile-fact"><span>وضعیت</span><span class="acc-badge acc-badge--green">✓ فعال</span></div>
                    <div class="acc-profile-fact"><span>سفارش‌ها</span><strong>${(this.stats?.orders_count || 0).toLocaleString('fa-IR')}</strong></div>
                    <div class="acc-profile-fact"><span>ارسال</span><strong>پس‌پرداخت</strong></div>
                </div>
                <p style="font-size:.72rem;color:#94a3b8;margin-top:14px;text-align:center">شماره موبایل برای ورود است و قابل تغییر نیست.</p>
            </div>
            <div class="acc-card">
                <div class="acc-card__header"><div class="acc-card__title">✏ ویرایش مشخصات</div></div>
                <div style="padding:20px;display:grid;gap:14px">
                    <div class="acc-field-row">
                        <div class="acc-field">
                            <label>نام گیرنده</label>
                            <input class="acc-input" id="pf-name" type="text" value="${this._esc(showName)}" placeholder="نام و نام خانوادگی">
                        </div>
                        <div class="acc-field">
                            <label>موبایل</label>
                            <input class="acc-input" type="text" value="${this._esc(phoneFmt)}" disabled dir="ltr" style="opacity:.55;cursor:default">
                        </div>
                    </div>
                    <div class="acc-field">
                        <label>آدرس پستی</label>
                        <input class="acc-input" id="pf-address" type="text" value="${this._esc(this.user?.address || '')}" placeholder="خیابان، کوچه، پلاک، واحد">
                    </div>
                    <div class="acc-field">
                        <label>شهر</label>
                        <input class="acc-input" id="pf-city" type="text" value="${this._esc(this.user?.city || '')}" placeholder="مثلاً تهران">
                    </div>
                    <div style="display:flex;align-items:center;gap:12px;padding-top:4px">
                        <button class="acc-btn acc-btn--primary" id="acc-save-profile" type="button">💾 ذخیره تغییرات</button>
                        <div class="acc-msg" id="acc-profile-msg" hidden></div>
                    </div>
                </div>
            </div>
        </div>`;
    }

    async _saveProfile() {
        const msg = this.root.querySelector('#acc-profile-msg');
        const btn = this.root.querySelector('#acc-save-profile');
        btn.disabled = true; btn.textContent = 'در حال ذخیره…';
        try {
            await this._put('/public/arag/account/profile', {
                name:    this.root.querySelector('#pf-name')?.value,
                address: this.root.querySelector('#pf-address')?.value,
                city:    this.root.querySelector('#pf-city')?.value,
            });
            await this._loadDashboard();
            if (msg) { msg.hidden = false; msg.className = 'acc-msg acc-msg--ok'; msg.textContent = '✅ ذخیره شد'; }
        } catch (e) {
            if (msg) { msg.hidden = false; msg.className = 'acc-msg acc-msg--err'; msg.textContent = e.message; }
        } finally { btn.disabled = false; btn.textContent = '💾 ذخیره تغییرات'; }
    }

    async _placeOrder() {
        const cart = this._loadCart();
        const msg  = this.root.querySelector('#acc-checkout-msg');
        const btn  = this.root.querySelector('#acc-place-order');
        if (!cart.length) return;
        btn.disabled = true; btn.textContent = '⏳ در حال ثبت…';
        try {
            const res = await this._post('/public/arag/orders/create', {
                items: cart.map(c => ({ package_id: c.package_id, qty: c.qty })),
                billing: {
                    name:    this.root.querySelector('#ck-name')?.value,
                    phone:   this.user?.phone,
                    address: this.root.querySelector('#ck-address')?.value,
                    city:    this.root.querySelector('#ck-city')?.value,
                },
                shipping_method: this.root.querySelector('input[name=shipping]:checked')?.value || 'post',
                payment_method:  this.root.querySelector('input[name=payment]:checked')?.value || 'demo',
                user_id: this.user?.id,
            }, true);
            const data = res.data || {};
            if (data.payment_url) {
                if (data.simulate_url && /localhost|127\.0\.0\.1/.test(location.hostname)) {
                    if (confirm('روی localhost پرداخت آزمایشی انجام شود؟')) {
                        window.location.href = data.simulate_url;
                        return;
                    }
                }
                window.location.href = data.payment_url;
                return;
            }
            localStorage.removeItem(CART_KEY);
            if (data.payment_status === 'paid') {
                window.location.href = this._siteUrl() + 'account.php?status=paid&ref=' + encodeURIComponent(data.ref_id || '');
            } else {
                window.location.href = this._siteUrl() + 'account.php?status=placed';
            }
        } catch (e) {
            if (msg) { msg.hidden = false; msg.className = 'acc-msg acc-msg--err'; msg.textContent = e.message; }
            btn.disabled = false; btn.textContent = '✅ ثبت و پرداخت سفارش';
        }
    }

    /* ── Helpers ──────────────────────────────────────────── */
    _displayName() {
        const n = (this.user?.name || '').trim();
        if (n && !/^مشتری\s*\d+$/i.test(n)) return n;
        const p = this._userPhone();
        return p ? p.replace(/(\d{4})(\d{3})(\d{4})/, '$1 $2 $3') : 'مهمان عزیز';
    }
    _userInitial() { return this._displayName().charAt(0) || 'ع'; }
    _userPhone() {
        if (this.user?.phone) return this.user.phone;
        const u = this.user?.username || '';
        return u.startsWith('m_') ? u.slice(2) : '';
    }
    _loadCart() {
        try { return JSON.parse(localStorage.getItem(CART_KEY) || '[]'); } catch { return []; }
    }
    _fmt(n) { return (+n || 0).toLocaleString('fa-IR') + ' تومان'; }
    _esc(s) {
        return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    async _get(path) {
        const r = await fetch(this._api() + path, { headers: { Authorization: `Bearer ${this.token}` } });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(j.message || 'خطا');
        return j;
    }
    async _post(path, data, auth = false) {
        const h = { 'Content-Type': 'application/json' };
        if (auth && this.token) h.Authorization = `Bearer ${this.token}`;
        const r = await fetch(this._api() + path, { method: 'POST', headers: h, body: JSON.stringify(data) });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(j.message || j.data?.message || 'خطا');
        return j;
    }
    async _put(path, data) {
        const r = await fetch(this._api() + path, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${this.token}` },
            body: JSON.stringify(data),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(j.message || 'خطا');
        return j;
    }
}
