/**
 * ServiceTalentFlow — جذب کارشناس: ثبت‌نام → هویت مجازی → معرفی → ارزیابی آنلاین
 */
const TALENT_TOKEN_KEY = 'svc_talent_token';

const STEPS = [
    { id: 1, key: 'register',   icon: '📝', title: 'ثبت‌نام',           sub: 'اطلاعات تماس' },
    { id: 2, key: 'identity',   icon: '🌐', title: 'هویت دیجیتال',      sub: 'فضای مجازی' },
    { id: 3, key: 'profile',    icon: '👤', title: 'معرفی حرفه‌ای',     sub: 'مهارت و تجربه' },
    { id: 4, key: 'assessment', icon: '📋', title: 'ارزیابی آنلاین',    sub: 'تست تخصصی' },
    { id: 5, key: 'result',     icon: '🎯', title: 'نتیجه',             sub: 'گام بعدی' },
];

export default class ServiceTalentFlow {
    constructor({ root, request, siteUrl, onBack }) {
        this.root = root;
        this.request = request;
        this.siteUrl = siteUrl || '/acc-engine/';
        this.onBack = onBack || (() => {});
        this.step = 1;
        this.token = sessionStorage.getItem(TALENT_TOKEN_KEY) || '';
        this.meta = null;
        this.app = null;
        this.assessment = null;
        this.answers = {};
        this.timerId = null;
        this.remainingSec = 0;
    }

    async init() {
        try {
            const res = await this.request('GET', 'service/talent/meta');
            this.meta = res?.data ?? res;
        } catch {
            this.meta = { specialties: {}, platforms: {}, pass_threshold: 70, time_limit_min: 30 };
        }

        if (this.token) {
            try {
                const res = await this.request('GET', `service/talent/apply/${this.token}`);
                this.app = res?.data ?? res;
                this.step = Math.min(5, Math.max(1, (this.app?.stage_step || 1)));
                if (this.app?.status === 'pending_review' || this.app?.status === 'approved' || this.app?.status === 'rejected' || this.app?.status === 'assessed') {
                    this.step = 5;
                }
            } catch {
                this.token = '';
                sessionStorage.removeItem(TALENT_TOKEN_KEY);
            }
        }

        await this._paint();
    }

    destroy() {
        if (this.timerId) clearInterval(this.timerId);
    }

    async _paint() {
        this.root.innerHTML = `
        <div class="svc-app svc-talent" dir="rtl">
            <header class="svc-header">
                <button class="svc-header__btn svc-header__btn--ghost" id="talent-back">← بازگشت</button>
                <span class="svc-brand">🌐 شبکه کارشناسان HVAC</span>
                <span class="svc-talent-ref">${this.app?.applicant_no ? this._esc(this.app.applicant_no) : ''}</span>
            </header>
            <div class="svc-talent-hero">
                <h1>پیوستن به شبکه کارشناسان میدانی</h1>
                <p>شناسایی از فضای مجازی · ارزیابی آنلاین · استاندارد بین‌المللی ATS</p>
            </div>
            ${this._stepsHtml()}
            <main class="svc-talent-main" id="talent-panel"></main>
        </div>`;

        this.root.querySelector('#talent-back')?.addEventListener('click', () => {
            this.destroy();
            this.onBack();
        });

        const panel = this.root.querySelector('#talent-panel');
        if (this.step === 1) await this._renderRegister(panel);
        else if (this.step === 2) await this._renderIdentity(panel);
        else if (this.step === 3) await this._renderProfile(panel);
        else if (this.step === 4) await this._renderAssessment(panel);
        else await this._renderResult(panel);
    }

    _stepsHtml() {
        return `<nav class="svc-talent-steps" aria-label="مراحل جذب">
            ${STEPS.map(s => `
                <div class="svc-talent-step ${this.step === s.id ? 'svc-talent-step--active' : ''} ${this.step > s.id ? 'svc-talent-step--done' : ''}">
                    <span class="svc-talent-step__icon">${s.icon}</span>
                    <span class="svc-talent-step__title">${s.title}</span>
                    <span class="svc-talent-step__sub">${s.sub}</span>
                </div>
            `).join('')}
        </nav>`;
    }

    async _renderRegister(panel) {
        const a = this.app || {};
        panel.innerHTML = `
        <div class="svc-talent-card">
            <h2>ثبت‌نام اولیه</h2>
            <p class="svc-talent-lead">برای شروع فرایند جذب، اطلاعات تماس خود را وارد کنید. کد پیگیری برای ادامه در مراحل بعد ذخیره می‌شود.</p>
            <form id="talent-reg-form" class="svc-talent-form">
                <div class="svc-talent-grid">
                    <label>نام و نام خانوادگی *
                        <input name="full_name" class="svc-inp" required value="${this._esc(a.full_name || '')}" placeholder="مثال: علی رضایی">
                    </label>
                    <label>موبایل *
                        <input name="phone" class="svc-inp" required value="${this._esc(a.phone || '')}" placeholder="0912...">
                    </label>
                    <label>ایمیل
                        <input name="email" type="email" class="svc-inp" value="${this._esc(a.email || '')}" placeholder="name@email.com">
                    </label>
                    <label>شهر
                        <input name="city" class="svc-inp" value="${this._esc(a.city || '')}">
                    </label>
                    <label>استان
                        <input name="province" class="svc-inp" value="${this._esc(a.province || '')}">
                    </label>
                    <label>کانال آشنایی
                        <select name="source_channel" class="svc-inp">
                            ${this._opts({ linkedin: 'LinkedIn', instagram: 'اینستاگرام', telegram: 'تلگرام', website: 'وب‌سایت', referral: 'معرف', job_board: 'آگهی شغلی', other: 'سایر' }, a.source_channel || 'website')}
                        </select>
                    </label>
                    <label>کد معرف (اختیاری)
                        <input name="referral_code" class="svc-inp" value="${this._esc(a.referral_code || '')}">
                    </label>
                </div>
                <button type="submit" class="svc-btn svc-btn--primary">ادامه → هویت دیجیتال</button>
                <div class="svc-msg" id="talent-msg"></div>
            </form>
        </div>`;

        panel.querySelector('#talent-reg-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = panel.querySelector('#talent-msg');
            const fd = new FormData(e.target);
            const body = Object.fromEntries(fd.entries());
            try {
                let res;
                if (this.token) {
                    res = await this.request('PUT', `service/talent/apply/${this.token}/profile`, body);
                } else {
                    res = await this.request('POST', 'service/talent/apply', body);
                }
                this.app = res?.data ?? res;
                this.token = this.app.access_token;
                sessionStorage.setItem(TALENT_TOKEN_KEY, this.token);
                this.step = 2;
                await this._paint();
            } catch (err) {
                msg.textContent = err.message;
                msg.className = 'svc-msg svc-msg--err';
            }
        });
    }

    async _renderIdentity(panel) {
        const a = this.app || {};
        const identities = a.identities?.length ? a.identities : [{ platform: 'linkedin', profile_url: '', username: '' }];
        const certs = a.certificates?.length ? a.certificates : [{ title: '', issuer: '', cert_url: '', year: '' }];

        panel.innerHTML = `
        <div class="svc-talent-card">
            <h2>شناسایی از فضای مجازی</h2>
            <p class="svc-talent-lead">پروفایل‌های حرفه‌ای، شبکه‌های اجتماعی و گواهینامه‌های آنلاین شما برای اعتبارسنجی دیجیتال (Digital Presence Score) استفاده می‌شود.</p>
            <div class="svc-talent-score" id="talent-digital-preview">
                <span>امتیاز حضور دیجیتال</span>
                <strong>${a.digital_presence_score || 0}</strong><small>/ 100</small>
            </div>
            <form id="talent-id-form" class="svc-talent-form">
                <h3>پروفایل‌های آنلاین</h3>
                <div id="talent-identities">${identities.map((id, i) => this._identityRow(id, i)).join('')}</div>
                <button type="button" class="svc-btn svc-btn--ghost" id="talent-add-id">+ افزودن پروفایل</button>

                <h3>ویدیو معرفی (اختیاری)</h3>
                <label>لینک ویدیو — YouTube / آپارات / LinkedIn
                    <input name="video_intro_url" class="svc-inp" value="${this._esc(a.video_intro_url || '')}" placeholder="https://...">
                </label>

                <h3>گواهینامه‌ها و مدارک</h3>
                <div id="talent-certs">${certs.map((c, i) => this._certRow(c, i)).join('')}</div>
                <button type="button" class="svc-btn svc-btn--ghost" id="talent-add-cert">+ افزودن گواهینامه</button>

                <div class="svc-talent-actions">
                    <button type="button" class="svc-btn svc-btn--ghost" id="talent-prev">← قبلی</button>
                    <button type="submit" class="svc-btn svc-btn--primary">ادامه → معرفی حرفه‌ای</button>
                </div>
                <div class="svc-msg" id="talent-msg"></div>
            </form>
        </div>`;

        let idCount = identities.length;
        let certCount = certs.length;

        panel.querySelector('#talent-add-id')?.addEventListener('click', () => {
            panel.querySelector('#talent-identities')?.insertAdjacentHTML('beforeend', this._identityRow({ platform: 'portfolio' }, idCount++));
        });
        panel.querySelector('#talent-add-cert')?.addEventListener('click', () => {
            panel.querySelector('#talent-certs')?.insertAdjacentHTML('beforeend', this._certRow({}, certCount++));
        });
        panel.querySelector('#talent-prev')?.addEventListener('click', async () => { this.step = 1; await this._paint(); });

        panel.querySelector('#talent-id-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = panel.querySelector('#talent-msg');
            const fd = new FormData(e.target);
            const identities = this._collectIdentities(panel);
            const certificates = this._collectCerts(panel);
            try {
                const res = await this.request('PUT', `service/talent/apply/${this.token}/identity`, {
                    identities,
                    certificates,
                    video_intro_url: fd.get('video_intro_url'),
                });
                this.app = res?.data ?? res;
                this.step = 3;
                await this._paint();
            } catch (err) {
                msg.textContent = err.message;
                msg.className = 'svc-msg svc-msg--err';
            }
        });
    }

    _identityRow(id, i) {
        const platforms = this.meta?.platforms || { linkedin: 'LinkedIn', instagram: 'Instagram', portfolio: 'Portfolio' };
        return `<div class="svc-talent-row" data-id-row="${i}">
            <select name="platform_${i}" class="svc-inp">${this._opts(platforms, id.platform || 'linkedin')}</select>
            <input name="profile_url_${i}" class="svc-inp" placeholder="لینک پروفایل" value="${this._esc(id.profile_url || '')}">
            <input name="username_${i}" class="svc-inp" placeholder="@username" value="${this._esc(id.username || '')}">
        </div>`;
    }

    _certRow(c, i) {
        return `<div class="svc-talent-row svc-talent-row--cert" data-cert-row="${i}">
            <input name="cert_title_${i}" class="svc-inp" placeholder="عنوان گواهینامه" value="${this._esc(c.title || '')}">
            <input name="cert_issuer_${i}" class="svc-inp" placeholder="صادرکننده" value="${this._esc(c.issuer || '')}">
            <input name="cert_url_${i}" class="svc-inp" placeholder="لینک مدرک" value="${this._esc(c.cert_url || '')}">
            <input name="cert_year_${i}" class="svc-inp" type="number" placeholder="سال" value="${c.year || ''}">
        </div>`;
    }

    _collectIdentities(panel) {
        const rows = panel.querySelectorAll('[data-id-row]');
        const out = [];
        rows.forEach((row, i) => {
            out.push({
                platform: row.querySelector(`[name="platform_${i}"]`)?.value || 'other',
                profile_url: row.querySelector(`[name="profile_url_${i}"]`)?.value || '',
                username: row.querySelector(`[name="username_${i}"]`)?.value || '',
            });
        });
        return out;
    }

    _collectCerts(panel) {
        const rows = panel.querySelectorAll('[data-cert-row]');
        const out = [];
        rows.forEach((row, i) => {
            out.push({
                title: row.querySelector(`[name="cert_title_${i}"]`)?.value || '',
                issuer: row.querySelector(`[name="cert_issuer_${i}"]`)?.value || '',
                cert_url: row.querySelector(`[name="cert_url_${i}"]`)?.value || '',
                year: row.querySelector(`[name="cert_year_${i}"]`)?.value || 0,
            });
        });
        return out;
    }

    async _renderProfile(panel) {
        const a = this.app || {};
        const skills = (a.secondary_skills || []).join(', ');

        panel.innerHTML = `
        <div class="svc-talent-card">
            <h2>معرفی حرفه‌ای</h2>
            <p class="svc-talent-lead">تجربه، تخصص و انگیزه خود را بیان کنید — این بخش در مصاحبه مجازی بعدی مورد استفاده قرار می‌گیرد.</p>
            <form id="talent-prof-form" class="svc-talent-form">
                <div class="svc-talent-grid">
                    <label>سال‌های تجربه
                        <input name="years_experience" type="number" min="0" class="svc-inp" value="${a.years_experience || 0}">
                    </label>
                    <label>تخصص اصلی
                        <select name="primary_specialty" class="svc-inp">${this._opts(this.meta?.specialties || {}, a.primary_specialty || '')}</select>
                    </label>
                    <label>مهارت‌های جانبی (با ویرگول)
                        <input name="secondary_skills" class="svc-inp" value="${this._esc(skills)}" placeholder="VRF, BMS, الکتریک">
                    </label>
                    <label>نوع همکاری
                        <select name="preferred_work_type" class="svc-inp">${this._opts({ full_time: 'تمام‌وقت', contract: 'قراردادی', on_call: 'آن‌کال / پروژه‌ای' }, a.preferred_work_type || '')}</select>
                    </label>
                    <label>دسترسی زمانی
                        <input name="availability" class="svc-inp" value="${this._esc(a.availability || '')}" placeholder="شنبه تا چهارشنبه ۸–۱۷">
                    </label>
                </div>
                <label>بیوگرافی کوتاه
                    <textarea name="bio" class="svc-inp svc-talent-ta" rows="4" placeholder="حداقل ۱۰۰ کاراکتر برای امتیاز دیجیتال بهتر">${this._esc(a.bio || '')}</textarea>
                </label>
                <label>انگیزه‌نامه / معرفی
                    <textarea name="cover_letter" class="svc-inp svc-talent-ta" rows="4" placeholder="چرا می‌خواهید به شبکه ما بپیوندید؟">${this._esc(a.cover_letter || '')}</textarea>
                </label>
                <div class="svc-talent-actions">
                    <button type="button" class="svc-btn svc-btn--ghost" id="talent-prev">← قبلی</button>
                    <button type="submit" class="svc-btn svc-btn--primary">شروع ارزیابی آنلاین →</button>
                </div>
                <div class="svc-msg" id="talent-msg"></div>
            </form>
        </div>`;

        panel.querySelector('#talent-prev')?.addEventListener('click', async () => { this.step = 2; await this._paint(); });

        panel.querySelector('#talent-prof-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = panel.querySelector('#talent-msg');
            const fd = new FormData(e.target);
            const skillsRaw = String(fd.get('secondary_skills') || '');
            const body = {
                years_experience: fd.get('years_experience'),
                primary_specialty: fd.get('primary_specialty'),
                secondary_skills: skillsRaw.split(/[,،]/).map(s => s.trim()).filter(Boolean),
                preferred_work_type: fd.get('preferred_work_type'),
                availability: fd.get('availability'),
                bio: fd.get('bio'),
                cover_letter: fd.get('cover_letter'),
            };
            try {
                const res = await this.request('PUT', `service/talent/apply/${this.token}/profile`, body);
                this.app = res?.data ?? res;
                this.step = 4;
                await this._paint();
            } catch (err) {
                msg.textContent = err.message;
                msg.className = 'svc-msg svc-msg--err';
            }
        });
    }

    async _renderAssessment(panel) {
        panel.innerHTML = `<div class="svc-talent-card"><p class="svc-muted">در حال بارگذاری ارزیابی...</p></div>`;

        try {
            let res;
            try {
                res = await this.request('GET', `service/talent/apply/${this.token}/assessment`);
            } catch {
                res = await this.request('POST', `service/talent/apply/${this.token}/assessment/start`);
            }
            this.assessment = res?.data ?? res;
            this.answers = {};
            this._startTimer(this.assessment.expires_at);
        } catch (err) {
            panel.innerHTML = `<div class="svc-talent-card"><div class="svc-msg svc-msg--err">${this._esc(err.message)}</div></div>`;
            return;
        }

        const qs = this.assessment.questions || [];
        panel.innerHTML = `
        <div class="svc-talent-card svc-talent-assess">
            <div class="svc-talent-assess-head">
                <h2>ارزیابی تخصصی HVAC</h2>
                <div class="svc-talent-timer" id="talent-timer">⏱ ${this._fmtTime(this.remainingSec)}</div>
            </div>
            <p class="svc-talent-lead">${qs.length} سؤال · حد نصاب قبولی ${this.assessment.pass_threshold}% · ${this.meta?.time_limit_min || 30} دقیقه</p>
            <form id="talent-assess-form">
                ${qs.map((q, qi) => `
                    <div class="svc-talent-q" data-qid="${q.id}">
                        <div class="svc-talent-q__head">
                            <span class="svc-talent-q__num">${qi + 1}</span>
                            <span class="svc-talent-q__cat">${this._esc(q.category_label || q.category)}</span>
                        </div>
                        <p class="svc-talent-q__text">${this._esc(q.text)}</p>
                        <div class="svc-talent-q__opts">
                            ${(q.options || []).map(o => `
                                <label class="svc-talent-opt">
                                    <input type="radio" name="q_${q.id}" value="${o.id}">
                                    <span>${this._esc(o.text)}</span>
                                </label>
                            `).join('')}
                        </div>
                    </div>
                `).join('')}
                <div class="svc-talent-actions">
                    <button type="submit" class="svc-btn svc-btn--primary">ارسال پاسخ‌ها و مشاهده نتیجه</button>
                </div>
                <div class="svc-msg" id="talent-msg"></div>
            </form>
        </div>`;

        panel.querySelector('#talent-assess-form')?.addEventListener('submit', async (e) => {
            e.preventDefault();
            const msg = panel.querySelector('#talent-msg');
            const answers = {};
            (this.assessment.questions || []).forEach(q => {
                const sel = panel.querySelector(`input[name="q_${q.id}"]:checked`);
                if (sel) answers[q.id] = parseInt(sel.value, 10);
            });
            if (Object.keys(answers).length < (this.assessment.questions?.length || 0)) {
                msg.textContent = 'لطفاً به همه سؤالات پاسخ دهید.';
                msg.className = 'svc-msg svc-msg--err';
                return;
            }
            try {
                if (this.timerId) clearInterval(this.timerId);
                const res = await this.request('POST', `service/talent/apply/${this.token}/assessment/submit`, { answers });
                this.app = res?.data?.application ?? this.app;
                this.step = 5;
                this._resultData = res?.data ?? res;
                await this._paint();
            } catch (err) {
                msg.textContent = err.message;
                msg.className = 'svc-msg svc-msg--err';
            }
        });
    }

    async _renderResult(panel) {
        let data = this._resultData;
        if (!data) {
            try {
                const res = await this.request('GET', `service/talent/apply/${this.token}/result`);
                data = res?.data ?? res;
            } catch {
                data = { application: this.app, breakdown: [], next_steps: [] };
            }
        }

        const app = data.application || this.app || {};
        const assess = data.assessment;
        const passed = assess?.passed;
        const pct = assess?.percent ?? app.assessment_score ?? 0;

        panel.innerHTML = `
        <div class="svc-talent-card svc-talent-result">
            <div class="svc-talent-result-hero ${passed ? 'svc-talent-result--pass' : 'svc-talent-result--pending'}">
                <span class="svc-talent-result__badge">${passed ? '✅ قبول ارزیابی' : '📋 ثبت شد'}</span>
                <h2>${this._esc(app.full_name || 'کارشناس')}</h2>
                <p>کد پیگیری: <strong>${this._esc(app.applicant_no || '')}</strong></p>
            </div>
            <div class="svc-talent-kpis">
                <div class="svc-talent-kpi">
                    <span>امتیاز ارزیابی</span>
                    <strong>${pct}%</strong>
                </div>
                <div class="svc-talent-kpi">
                    <span>حضور دیجیتال</span>
                    <strong>${app.digital_presence_score || 0}</strong>
                </div>
                <div class="svc-talent-kpi">
                    <span>امتیاز کلی</span>
                    <strong>${app.overall_score || 0}</strong>
                </div>
            </div>
            ${(data.breakdown || []).length ? `
            <h3>عملکرد به تفکیک حوزه</h3>
            <div class="svc-talent-breakdown">
                ${data.breakdown.map(b => `
                    <div class="svc-talent-bd-row">
                        <span>${this._esc(b.category_label)}</span>
                        <div class="svc-progress"><div class="svc-progress__bar" style="width:${b.percent}%"></div></div>
                        <small>${b.correct}/${b.total}</small>
                    </div>
                `).join('')}
            </div>` : ''}
            <h3>گام‌های بعدی</h3>
            <div class="svc-talent-next">
                ${(data.next_steps || []).map(s => `
                    <div class="svc-talent-next-item">
                        <span>${s.icon}</span>
                        <div><strong>${this._esc(s.title)}</strong><p>${this._esc(s.text)}</p></div>
                    </div>
                `).join('')}
            </div>
            <div class="svc-talent-actions">
                <button class="svc-btn svc-btn--primary" id="talent-done">بازگشت به پورتال</button>
            </div>
        </div>`;

        panel.querySelector('#talent-done')?.addEventListener('click', () => {
            this.destroy();
            this.onBack();
        });
    }

    _startTimer(expiresAt) {
        if (this.timerId) clearInterval(this.timerId);
        const end = new Date(expiresAt).getTime();
        const tick = () => {
            this.remainingSec = Math.max(0, Math.floor((end - Date.now()) / 1000));
            const el = this.root.querySelector('#talent-timer');
            if (el) el.textContent = `⏱ ${this._fmtTime(this.remainingSec)}`;
            if (this.remainingSec <= 0 && this.timerId) {
                clearInterval(this.timerId);
            }
        };
        tick();
        this.timerId = setInterval(tick, 1000);
    }

    _fmtTime(sec) {
        const m = Math.floor(sec / 60);
        const s = sec % 60;
        return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
    }

    _opts(map, selected) {
        return Object.entries(map).map(([k, v]) =>
            `<option value="${this._esc(k)}" ${k === selected ? 'selected' : ''}>${this._esc(v)}</option>`
        ).join('');
    }

    _esc(t) {
        return String(t ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
    }
}
