// assets/js/views/LoginView.js
// صفحه عمومی: فروشگاه + احراز هویت کامل (ورود / ثبت‌نام / فراموشی رمز)

export default class LoginView {

    constructor({ api, store, eventBus }) {
        this.api      = api;
        this.store    = store;
        this.eventBus = eventBus;
        this.root     = null;
        this._tab     = 'login';   // login | register | forgot
        this._page    = 1;
        this._catId   = '';
        this._search  = '';
        this._sort    = 'date';
        this._total   = 0;
        this._perPage = 12;
        this._searchTimer = null;
    }

    render(root) {
        this.root = root;
        root.innerHTML = this._skeleton();
        this._bindAuthTabs();
        this._bindAuthForms();
        this._loadProducts();
        this._loadCategories();
    }

    /* ═══════════════════════════════════════════
       HTML اصلی
    ═══════════════════════════════════════════ */
    _skeleton() {
        const siteUrl = window.ACC_CHAT_CFG?.api_base?.replace('/wp-json/acc/v1','') || window.location.origin;
        const appUrl  = siteUrl + '/app/';

        return `
        <div class="lp-wrap">

            <!-- ── هدر ── -->
            <header class="lp-header">
                <div class="lp-header__brand">
                    <span class="lp-header__logo">🏪</span>
                    <span class="lp-header__name">فروشگاه آنلاین</span>
                </div>
                <nav class="lp-header__nav">
                    <a href="${siteUrl}" class="lp-header__link">خانه</a>
                    <a href="${siteUrl}/shop" class="lp-header__link">فروشگاه</a>
                    <a href="${siteUrl}/contact" class="lp-header__link">تماس</a>
                </nav>
                <div class="lp-header__actions">
                    <button class="lp-portal-btn" id="lp-open-auth">ورود / ثبت‌نام</button>
                    <a href="${appUrl}" class="lp-portal-btn lp-portal-btn--outline">🔐 ورود به پورتال</a>
                </div>
            </header>

            <!-- ── محتوای اصلی: فروشگاه + پنل Auth ── -->
            <div class="lp-main">

                <!-- ── پنل احراز هویت (کناری) ── -->
                <aside class="lp-auth-panel" id="lp-auth-panel">
                    <div class="lp-auth-card">
                        <div class="lp-auth-tabs">
                            <button class="lp-auth-tab active" data-tab="login">ورود</button>
                            <button class="lp-auth-tab" data-tab="register">ثبت‌نام</button>
                            <button class="lp-auth-tab" data-tab="forgot">فراموشی رمز</button>
                        </div>

                        <!-- فرم ورود -->
                        <form class="lp-form" id="lp-form-login" autocomplete="on">
                            <div class="lp-form__title">ورود به حساب</div>
                            <div class="lp-field">
                                <label>نام کاربری یا ایمیل</label>
                                <input name="username" placeholder="username یا email" autocomplete="username">
                            </div>
                            <div class="lp-field">
                                <label>رمز عبور</label>
                                <div class="lp-pass-wrap">
                                    <input name="password" type="password" placeholder="••••••••" autocomplete="current-password" id="lp-pass-input">
                                    <button type="button" class="lp-pass-toggle" id="lp-pass-toggle">👁</button>
                                </div>
                            </div>
                            <div class="lp-form__row">
                                <label class="lp-checkbox"><input type="checkbox" name="remember"> مرا به خاطر بسپار</label>
                                <button type="button" class="lp-link" data-tab="forgot">فراموشی رمز؟</button>
                            </div>
                            <button type="submit" class="lp-btn">ورود</button>
                            <div class="lp-msg" id="lp-msg-login"></div>
                        </form>

                        <!-- فرم ثبت‌نام -->
                        <form class="lp-form lp-form--hidden" id="lp-form-register" autocomplete="on">
                            <div class="lp-form__title">ایجاد حساب جدید</div>
                            <div class="lp-field-row">
                                <div class="lp-field">
                                    <label>نام</label>
                                    <input name="firstname" placeholder="نام" autocomplete="given-name">
                                </div>
                                <div class="lp-field">
                                    <label>نام خانوادگی</label>
                                    <input name="lastname" placeholder="نام خانوادگی" autocomplete="family-name">
                                </div>
                            </div>
                            <div class="lp-field">
                                <label>نام کاربری <span class="lp-req">*</span></label>
                                <input name="username" placeholder="username" autocomplete="username" required>
                            </div>
                            <div class="lp-field">
                                <label>ایمیل <span class="lp-req">*</span></label>
                                <input name="email" type="email" placeholder="email@example.com" autocomplete="email" required>
                            </div>
                            <div class="lp-field">
                                <label>رمز عبور <span class="lp-req">*</span> (حداقل ۶ کاراکتر)</label>
                                <input name="password" type="password" placeholder="••••••••" autocomplete="new-password" required>
                            </div>
                            <div class="lp-field">
                                <label>تکرار رمز عبور <span class="lp-req">*</span></label>
                                <input name="password2" type="password" placeholder="••••••••" autocomplete="new-password" required>
                            </div>
                            <button type="submit" class="lp-btn">ایجاد حساب</button>
                            <div class="lp-msg" id="lp-msg-register"></div>
                        </form>

                        <!-- فرم فراموشی رمز -->
                        <form class="lp-form lp-form--hidden" id="lp-form-forgot">
                            <div class="lp-form__title">بازیابی رمز عبور</div>
                            <p class="lp-form__desc">ایمیل یا نام کاربری خود را وارد کنید. لینک بازیابی برای شما ارسال خواهد شد.</p>
                            <div class="lp-field">
                                <label>ایمیل یا نام کاربری</label>
                                <input name="login" placeholder="email یا username">
                            </div>
                            <button type="submit" class="lp-btn">ارسال لینک بازیابی</button>
                            <div class="lp-msg" id="lp-msg-forgot"></div>
                            <div class="lp-form__row" style="margin-top:12px;justify-content:center;">
                                <button type="button" class="lp-link" data-tab="login">← بازگشت به ورود</button>
                            </div>
                        </form>
                    </div>
                </aside>

                <!-- ── بخش فروشگاه ── -->
                <section class="lp-shop">

                    <!-- فیلتر -->
                    <div class="lp-shop-toolbar">
                        <div class="lp-shop-search">
                            <span class="lp-shop-search__icon">🔍</span>
                            <input id="lp-search" placeholder="جستجوی محصول..." class="lp-shop-search__input">
                        </div>
                        <select id="lp-cat-filter" class="lp-shop-select">
                            <option value="">همه دسته‌ها</option>
                        </select>
                        <select id="lp-sort" class="lp-shop-select">
                            <option value="date">جدیدترین</option>
                            <option value="price">ارزان‌ترین</option>
                            <option value="price-desc">گران‌ترین</option>
                            <option value="popularity">پرفروش‌ترین</option>
                            <option value="rating">بهترین امتیاز</option>
                        </select>
                        <span class="lp-shop-count" id="lp-count"></span>
                    </div>

                    <!-- محصولات -->
                    <div class="lp-products" id="lp-products">
                        ${this._skeletonCards()}
                    </div>

                    <!-- صفحه‌بندی -->
                    <div class="lp-pagination" id="lp-pagination"></div>
                </section>
            </div>

            <!-- ── فوتر ── -->
            <footer class="lp-footer">
                <div class="lp-footer__inner">
                    <span>© ۱۴۰۴ — همه حقوق محفوظ است</span>
                    <a href="${appUrl}" class="lp-footer__portal">🔐 پورتال مدیریت</a>
                </div>
            </footer>
        </div>`;
    }

    _skeletonCards() {
        return Array(8).fill(0).map(() => `
            <div class="lp-card lp-card--skeleton">
                <div class="lp-card__img sk-anim"></div>
                <div class="lp-card__body">
                    <div class="lp-sk-line sk-anim" style="width:70%"></div>
                    <div class="lp-sk-line sk-anim" style="width:40%;margin-top:6px"></div>
                </div>
            </div>`).join('');
    }

    /* ═══════════════════════════════════════════
       Auth Tabs & Forms
    ═══════════════════════════════════════════ */
    _bindAuthTabs() {
        const panel = this.root.querySelector('#lp-auth-panel');

        // دکمه «ورود / ثبت‌نام» در هدر
        this.root.querySelector('#lp-open-auth')?.addEventListener('click', () => {
            panel.classList.toggle('lp-auth-panel--open');
        });

        // تب‌ها
        this.root.querySelectorAll('[data-tab]').forEach(el => {
            el.addEventListener('click', () => this._switchTab(el.dataset.tab));
        });

        // نمایش/پنهان رمز
        this.root.querySelector('#lp-pass-toggle')?.addEventListener('click', () => {
            const inp = this.root.querySelector('#lp-pass-input');
            inp.type = inp.type === 'password' ? 'text' : 'password';
        });
    }

    _switchTab(tab) {
        this._tab = tab;
        this.root.querySelectorAll('.lp-auth-tab').forEach(b =>
            b.classList.toggle('active', b.dataset.tab === tab));
        this.root.querySelectorAll('.lp-form').forEach(f =>
            f.classList.toggle('lp-form--hidden', f.id !== `lp-form-${tab}`));
    }

    _bindAuthForms() {
        this.root.querySelector('#lp-form-login')?.addEventListener('submit', e => {
            e.preventDefault(); this._doLogin(e.target);
        });
        this.root.querySelector('#lp-form-register')?.addEventListener('submit', e => {
            e.preventDefault(); this._doRegister(e.target);
        });
        this.root.querySelector('#lp-form-forgot')?.addEventListener('submit', e => {
            e.preventDefault(); this._doForgot(e.target);
        });
    }

    async _doLogin(form) {
        const msg  = this.root.querySelector('#lp-msg-login');
        const data = Object.fromEntries(new FormData(form));
        this._setMsg(msg, '', '');
        this._setBusy(form, true);
        try {
            const res = await this._post('/public/auth/login', {
                username: data.username,
                password: data.password,
            });
            if (res.success && res.token) {
                sessionStorage.setItem('acc_token', res.token);
                const session = { user: res.user, token: res.token, isCustomLogin: true };
                this.store.set('session', session);
                this.eventBus.emit('auth:login:success', session);
            } else {
                this._setMsg(msg, res.message || 'ورود ناموفق بود.', 'error');
            }
        } catch (e) {
            this._setMsg(msg, e.message || 'خطا در ورود', 'error');
        } finally {
            this._setBusy(form, false);
        }
    }

    async _doRegister(form) {
        const msg  = this.root.querySelector('#lp-msg-register');
        const data = Object.fromEntries(new FormData(form));
        if (data.password !== data.password2) {
            return this._setMsg(msg, 'رمز عبور و تکرار آن یکسان نیستند.', 'error');
        }
        this._setMsg(msg, '', '');
        this._setBusy(form, true);
        try {
            const res = await this._post('/public/auth/register', {
                username: data.username,
                email: data.email,
                password: data.password,
                firstname: data.firstname,
                lastname: data.lastname,
            });
            if (res.success) {
                this._setMsg(msg, res.message, 'success');
                form.reset();
                setTimeout(() => this._switchTab('login'), 2000);
            } else {
                this._setMsg(msg, res.message || 'ثبت‌نام ناموفق بود.', 'error');
            }
        } catch (e) {
            this._setMsg(msg, e.message || 'خطا در ثبت‌نام', 'error');
        } finally {
            this._setBusy(form, false);
        }
    }

    async _doForgot(form) {
        const msg  = this.root.querySelector('#lp-msg-forgot');
        const data = Object.fromEntries(new FormData(form));
        this._setMsg(msg, '', '');
        this._setBusy(form, true);
        try {
            const res = await this._post('/public/auth/forgot-password', { login: data.login });
            this._setMsg(msg, res.message, res.success ? 'success' : 'error');
            if (res.success) form.reset();
        } catch (e) {
            this._setMsg(msg, e.message || 'خطا در ارسال ایمیل', 'error');
        } finally {
            this._setBusy(form, false);
        }
    }

    /* ═══════════════════════════════════════════
       Products
    ═══════════════════════════════════════════ */
    async _loadCategories() {
        try {
            const res = await this._get('/public/categories');
            const cats = res.data || [];
            const sel  = this.root.querySelector('#lp-cat-filter');
            cats.forEach(c => {
                const opt = document.createElement('option');
                opt.value = c.id;
                opt.textContent = `${c.name} (${c.count})`;
                sel.appendChild(opt);
            });
            sel.addEventListener('change', () => {
                this._catId = sel.value;
                this._page  = 1;
                this._loadProducts();
            });
        } catch {}
    }

    async _loadProducts() {
        const grid = this.root.querySelector('#lp-products');
        const countEl = this.root.querySelector('#lp-count');
        grid.innerHTML = this._skeletonCards();

        const [orderby, order] = this._sortParams();

        try {
            const res = await this._get(
                `/public/products?page=${this._page}&per_page=${this._perPage}` +
                `&search=${encodeURIComponent(this._search)}` +
                `&category=${this._catId}` +
                `&orderby=${orderby}&order=${order}`
            );
            const products = res.data || [];
            this._total = res.total || products.length;

            countEl.textContent = `${this._total} محصول`;

            if (!products.length) {
                grid.innerHTML = `<div class="lp-empty">😕 محصولی یافت نشد</div>`;
                this.root.querySelector('#lp-pagination').innerHTML = '';
                return;
            }

            grid.innerHTML = products.map(p => this._cardHtml(p)).join('');
            this._renderPagination(res.total_pages || 1);

            // کلیک روی کارت
            grid.querySelectorAll('.lp-card[data-url]').forEach(card => {
                card.addEventListener('click', () => window.open(card.dataset.url, '_blank'));
            });
        } catch (e) {
            grid.innerHTML = `<div class="lp-empty">❌ خطا در بارگذاری محصولات</div>`;
        }

        // جستجو
        const searchInp = this.root.querySelector('#lp-search');
        if (!searchInp._bound) {
            searchInp._bound = true;
            searchInp.addEventListener('input', () => {
                clearTimeout(this._searchTimer);
                this._searchTimer = setTimeout(() => {
                    this._search = searchInp.value.trim();
                    this._page   = 1;
                    this._loadProducts();
                }, 400);
            });
            this.root.querySelector('#lp-sort').addEventListener('change', e => {
                this._sort = e.target.value;
                this._page = 1;
                this._loadProducts();
            });
        }
    }

    _sortParams() {
        switch (this._sort) {
            case 'price':      return ['price', 'ASC'];
            case 'price-desc': return ['price', 'DESC'];
            case 'popularity': return ['popularity', 'DESC'];
            case 'rating':     return ['rating', 'DESC'];
            default:           return ['date', 'DESC'];
        }
    }

    _cardHtml(p) {
        const img    = p.image ? `<img src="${p.image}" alt="${this._esc(p.name)}" loading="lazy" class="lp-card__img">` : `<div class="lp-card__img lp-card__img--none">🛍️</div>`;
        const price  = p.sale_price
            ? `<span class="lp-price lp-price--sale">${this._fmt(p.sale_price)}</span> <s class="lp-price--old">${this._fmt(p.regular_price)}</s>`
            : (p.price ? `<span class="lp-price">${this._fmt(p.price)}</span>` : `<span class="lp-price lp-price--contact">تماس بگیرید</span>`);
        const badge  = p.on_sale ? `<span class="lp-badge">تخفیف</span>` : '';
        return `
        <div class="lp-card" data-url="${p.permalink || '#'}">
            <div class="lp-card__img-wrap">${img}${badge}</div>
            <div class="lp-card__body">
                <div class="lp-card__name">${this._esc(p.name)}</div>
                <div class="lp-card__price">${price}</div>
                <button class="lp-card__btn" type="button">مشاهده محصول ←</button>
            </div>
        </div>`;
    }

    _renderPagination(totalPages) {
        const pg  = this.root.querySelector('#lp-pagination');
        const cur = this._page;
        if (totalPages <= 1) { pg.innerHTML = ''; return; }
        let html = '';
        if (cur > 1) html += `<button class="lp-pg-btn" data-p="${cur - 1}">‹ قبلی</button>`;
        for (let i = 1; i <= totalPages; i++) {
            if (i === 1 || i === totalPages || Math.abs(i - cur) <= 2) {
                html += `<button class="lp-pg-btn ${i === cur ? 'active' : ''}" data-p="${i}">${i}</button>`;
            } else if (Math.abs(i - cur) === 3) {
                html += `<span class="lp-pg-dots">…</span>`;
            }
        }
        if (cur < totalPages) html += `<button class="lp-pg-btn" data-p="${cur + 1}">بعدی ›</button>`;
        pg.innerHTML = html;
        pg.querySelectorAll('.lp-pg-btn').forEach(b => {
            b.addEventListener('click', () => {
                this._page = +b.dataset.p;
                this._loadProducts();
                this.root.querySelector('.lp-shop').scrollIntoView({ behavior: 'smooth' });
            });
        });
    }

    /* ═══════════════════════════════════════════
       Helpers
    ═══════════════════════════════════════════ */
    _apiBase() {
        // SPA: ACC_APP_BOOT.restBase → chat.local/wp-json/
        // Fallback به ACC_CHAT_CFG یا مسیر ثابت
        const restBase = window.ACC_APP_BOOT?.restBase || window.ACC_CHAT_CFG?.api_base?.replace('/acc/v1','') || '';
        return restBase.replace(/\/$/, '') + '/acc/v1';
    }

    _nonce() {
        return window.ACC_APP_BOOT?.nonce || window.ACC_CHAT_CFG?.nonce || '';
    }

    async _get(path) {
        const r = await fetch(this._apiBase() + path, {
            headers: { 'X-WP-Nonce': this._nonce() }
        });
        if (!r.ok) {
            const err = await r.json().catch(() => ({}));
            throw new Error(err.message || `HTTP ${r.status}`);
        }
        return r.json();
    }

    async _post(path, data) {
        const r = await fetch(this._apiBase() + path, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': this._nonce()
            },
            body: JSON.stringify(data),
        });
        const json = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(json.message || `HTTP ${r.status}`);
        return json;
    }

    _setMsg(el, msg, type) {
        if (!el) return;
        el.textContent  = msg;
        el.className    = `lp-msg${type ? ' lp-msg--' + type : ''}`;
    }

    _setBusy(form, busy) {
        const btn = form.querySelector('button[type=submit]');
        if (btn) { btn.disabled = busy; btn.textContent = busy ? 'لطفاً صبر کنید...' : btn.dataset.label || btn.textContent; }
    }

    _fmt(price) {
        const n = parseFloat(price);
        if (isNaN(n)) return price;
        return n.toLocaleString('fa-IR') + ' تومان';
    }

    _esc(str) {
        return String(str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
}
