// assets/js/views/HomeView.js
// Holding landing — ACC Engine brand-first (ink/cyan). No shop marketing copy.

export default class HomeView {

    constructor({ api, store, eventBus }) {
        this.api      = api;
        this.store    = store;
        this.eventBus = eventBus;
        this.root     = null;
        this._tab     = 'login';
    }

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

    _skeleton() {
        const base    = window.ACC_APP_BOOT?.restBase?.replace('/api.php/', '') || '/acc-engine/';
        const siteUrl = base.endsWith('/') ? base : base + '/';
        const portals = [
            { href: siteUrl + 'melk.php',      tag: 'Melk',      title: 'اقتصاد ملک',     desc: 'شبکه بنگاه و مشارکت شیراز',      cls: 'hl-portal--melk' },
            { href: siteUrl + 'wholesale.php', tag: 'Wholesale', title: 'عمده‌فروشی قشم', desc: 'B2B · قیمت پلکانی · MOQ',         cls: 'hl-portal--ws' },
            { href: siteUrl + 'service.php',   tag: 'Service',   title: 'خدمات HVAC',    desc: 'سفارش، تکنسین، حسابداری فعالیت', cls: 'hl-portal--svc' },
            { href: siteUrl + 'education.php', tag: 'Campus',    title: 'آموزش',         desc: 'جلسه، کلاس، گراف هزینه آموزشی',  cls: 'hl-portal--edu' },
            { href: siteUrl + 'growth.php',    tag: 'Growth',    title: 'رشدگاه / سفیران', desc: 'خدمات مالک · ارجاع · کمیسیون',   cls: 'hl-portal--growth' },
            { href: siteUrl + 'election.php',  tag: 'Civic',     title: 'انتخابات',      desc: 'کمپین، هوادار، حسابداری ستاد',   cls: 'hl-portal--el' },
            { href: siteUrl + 'shop.php',      tag: 'Shop',      title: 'فروشگاه',       desc: 'خرده‌فروشی و حسابداری فروش',     cls: 'hl-portal--shop' },
            { href: siteUrl + 'dev.php',       tag: 'Dev',       title: 'پشتیبان‌گیری و مستندات', desc: 'بک‌آپ کد و دیتابیس + handoff توسعه‌دهنده', cls: 'hl-portal--dev' },
        ];

        const portalCards = portals.map(p => `
            <a href="${p.href}" class="hl-portal ${p.cls}">
                <span class="hl-portal__tag">${p.tag}</span>
                <strong>${p.title}</strong>
                <small>${p.desc}</small>
                <span class="hl-portal__go">ورود ←</span>
            </a>`).join('');

        return `
        <div class="hl-wrap" dir="rtl">
            <div class="hl-util">
                <a href="${siteUrl}">ACC Engine</a>
                <a href="${siteUrl}melk.php">املاک</a>
                <a href="${siteUrl}wholesale.php">عمده</a>
                <a href="${siteUrl}service.php">خدمات</a>
                <a href="${siteUrl}education.php">آموزش</a>
                <a href="${siteUrl}growth.php">رشدگاه</a>
                <a href="${siteUrl}election.php">انتخابات</a>
                <a href="${siteUrl}shop.php">فروشگاه</a>
                <a href="${siteUrl}dev.php">پشتیبان</a>
            </div>

            <header class="hl-header" id="hl-header">
                <a href="${siteUrl}" class="hl-brand">
                    <span class="hl-brand__mark">A</span>
                    <span class="hl-brand__text">
                        <span class="hl-brand__name">ACC <em>Engine</em></span>
                        <span class="hl-brand__sub">Holding Operations Platform</span>
                    </span>
                </a>
                <nav class="hl-nav">
                    <a href="#hl-portals">پورتال‌ها</a>
                    <a href="#hl-erp">ERP</a>
                    <button type="button" id="lp-open-auth">ورود / ثبت‌نام</button>
                </nav>
                <button type="button" class="hl-header__cta" id="lp-hero-auth">ورود به ERP</button>
            </header>

            <div class="hl-main">
                <section class="hl-hero">
                    <div class="hl-hero__media" aria-hidden="true"></div>
                    <div class="hl-hero__grain" aria-hidden="true"></div>
                    <div class="hl-hero__content">
                        <p class="hl-hero__brand">ACC <span>Engine</span></p>
                        <h1>سامانه یکپارچه<br><em>عملیات هلدینگ</em></h1>
                        <p class="hl-hero__lead">از نقشه و حسابداری تا املاک، خدمات، آموزش و انتخابات — یک هویت، یک ورود، ماژول‌های هماهنگ.</p>
                        <div class="hl-hero__actions">
                            <button type="button" class="hl-btn hl-btn--cyan" id="hl-cta-erp">ورود به ERP</button>
                            <a href="#hl-portals" class="hl-btn hl-btn--ghost">کشف پورتال‌ها</a>
                        </div>
                    </div>
                </section>

                <aside class="lp-auth-panel hl-auth" 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">ورود به پورتال ERP</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">ورود به ERP</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>
            </div>

            <section class="hl-section" id="hl-erp">
                <div class="hl-section__head hl-reveal">
                    <span class="hl-kicker">ERP Core</span>
                    <h2>ماژول‌های عملیاتی هلدینگ</h2>
                    <p>نقشه، حسابداری، انبار، فروش، CRM و ده‌ها ماژول — پس از ورود در یک workspace یکپارچه.</p>
                </div>
                <div class="hl-reveal" style="text-align:center">
                    <button type="button" class="hl-btn hl-btn--dark" id="hl-open-erp">باز کردن پورتال ERP ←</button>
                </div>
            </section>

            <section class="hl-section hl-section--mist" id="hl-portals">
                <div class="hl-section__head hl-reveal">
                    <span class="hl-kicker">Portals</span>
                    <h2>پورتال‌های تخصصی</h2>
                    <p>هر کسب‌وکار هویت بصری و فضای کاری خود را دارد — متصل به همان موتور ACC.</p>
                </div>
                <div class="hl-portals hl-reveal">${portalCards}</div>
            </section>

            <footer class="hl-footer">
                <span>© ACC Engine — Holding Operations</span>
                <span>
                    <a href="${siteUrl}melk.php">املاک</a> ·
                    <a href="${siteUrl}growth.php">رشدگاه</a> ·
                    <a href="${siteUrl}service.php">خدمات</a> ·
                    <a href="${siteUrl}shop.php">فروشگاه</a> ·
                    <a href="${siteUrl}dev.php">پشتیبان</a>
                </span>
            </footer>
        </div>`;
    }

    _bindReveal() {
        const hdr = this.root.querySelector('#hl-header');
        const onScroll = () => hdr?.classList.toggle('hl-header--scrolled', window.scrollY > 12);
        window.addEventListener('scroll', onScroll, { passive: true });
        onScroll();
        if ('IntersectionObserver' in window) {
            const io = new IntersectionObserver((entries) => {
                entries.forEach(en => { if (en.isIntersecting) en.target.classList.add('is-in'); });
            }, { threshold: 0.12 });
            this.root.querySelectorAll('.hl-reveal').forEach(el => io.observe(el));
        } else {
            this.root.querySelectorAll('.hl-reveal').forEach(el => el.classList.add('is-in'));
        }
    }

    _bindAuthTabs() {
        const panel = this.root.querySelector('#lp-auth-panel');
        const openAuth = () => {
            panel?.classList.add('lp-auth-panel--open');
            this._switchTab('login');
            panel?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        };

        this.root.querySelector('#lp-open-auth')?.addEventListener('click', () => {
            panel?.classList.toggle('lp-auth-panel--open');
        });
        this.root.querySelector('#lp-hero-auth')?.addEventListener('click', openAuth);
        this.root.querySelector('#hl-cta-erp')?.addEventListener('click', openAuth);
        this.root.querySelector('#hl-open-erp')?.addEventListener('click', openAuth);

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

        this.root.querySelector('#lp-pass-toggle')?.addEventListener('click', () => {
            const input = this.root.querySelector('#lp-pass-input');
            if (!input) return;
            input.type = input.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 pendingTab = new URLSearchParams(window.location.search).get('tab')
                    || sessionStorage.getItem('acc_pending_tab');
                if (pendingTab) sessionStorage.setItem('acc_pending_tab', pendingTab);
                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', data);
            if (res.success) {
                this._setMsg(msg, res.message || 'حساب ایجاد شد. اکنون وارد شوید.', 'ok');
                this._switchTab('login');
            } 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', data);
            this._setMsg(msg, res.message || 'در صورت وجود حساب، لینک ارسال می‌شود.', 'ok');
        } catch (e) {
            this._setMsg(msg, e.message || 'خطا', 'error');
        } finally {
            this._setBusy(form, false);
        }
    }

    async _post(path, body) {
        if (this.api?.post) return this.api.post(path.replace(/^\//, ''), body);
        const base = (window.ACC_CONFIG?.api || '/acc-engine/api.php/acc/v1').replace(/\/$/, '');
        const r = await fetch(`${base}/${path.replace(/^\//, '')}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
            body: JSON.stringify(body),
        });
        const j = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(j.message || `HTTP ${r.status}`);
        return j;
    }

    _setMsg(el, text, type) {
        if (!el) return;
        el.textContent = text || '';
        el.className = 'lp-msg' + (type === 'error' ? ' lp-msg--error' : type === 'ok' ? ' lp-msg--ok' : '');
    }

    _setBusy(form, on) {
        const btn = form?.querySelector('[type="submit"]');
        if (btn) btn.disabled = !!on;
    }
}
