/**
 * melk-services-panel.js — سفارش خدمات HVAC داخل پورتال اقتصاد ملک
 */
const SERVICE_TYPES = [
    { key: 'repair', icon: '🛠', title: 'تعمیر و سرویس' },
    { key: 'pm', icon: '📅', title: 'نگهداری PM' },
    { key: 'phone_consult', icon: '📞', title: 'مشاوره فنی' },
    { key: 'site_visit', icon: '🔍', title: 'بازدید کارشناس' },
    { key: 'parts_supply', icon: '🔩', title: 'تأمین قطعات' },
    { key: 'equipment_purchase', icon: '🏭', title: 'خرید تجهیزات' },
    { key: 'contract_support', icon: '📋', title: 'پشتیبانی قراردادی' },
];

export function renderServicesPanel(esc, siteUrl) {
    const cards = SERVICE_TYPES.map(s => `
        <button type="button" class="em-svc-card" data-svc="${s.key}">
            <span class="em-svc-icon">${s.icon}</span>
            <strong>${esc(s.title)}</strong>
        </button>`).join('');

    return `<div class="em-ext-panel" data-ref="servicesPanel">
        <div class="em-ext-toolbar">
            <h2 class="em-ext-title">🔧 خدمات میدانی — ثبت سفارش</h2>
            <a href="${esc(siteUrl)}service.php" class="red-btn" target="_blank" rel="noopener">پورتال کامل خدمات ↗</a>
        </div>
        <p class="em-svc-hint">نوع خدمت را انتخاب کنید — درخواست به سامانه خدمات HVAC ارسال می‌شود.</p>
        <div class="em-svc-grid">${cards}</div>
        <div class="em-svc-wizard" data-ref="svcWizard" style="display:none">
            <h3 data-ref="svcWizardTitle"></h3>
            <form data-ref="svcForm">
                <div class="em-ext-grid2">
                    <label>نام *<input class="red-inp" name="name" required></label>
                    <label>موبایل *<input class="red-inp" name="phone" type="tel" required dir="ltr"></label>
                    <label>آدرس / موضع *<input class="red-inp" name="site_label" required></label>
                </div>
                <label>شرح درخواست *<textarea class="red-inp" name="complaint_text" rows="4" required></textarea></label>
                <div class="em-ext-actions">
                    <button type="submit" class="red-btn red-btn--primary">📤 ارسال درخواست</button>
                    <button type="button" class="red-btn" data-ref="svcCancel">انصراف</button>
                </div>
            </form>
            <div data-ref="svcResult" class="em-svc-result"></div>
        </div>
        <div class="em-svc-track">
            <h4>📋 پیگیری با کد</h4>
            <div class="em-ext-grid2">
                <input class="red-inp" data-ref="trackCode" placeholder="کد پیگیری" dir="ltr">
                <button type="button" class="red-btn" data-ref="trackBtn">پیگیری</button>
            </div>
            <div data-ref="trackResult"></div>
        </div>
    </div>`;
}

export function bindServicesPanel(root, { apiBase, esc, toast }) {
    const $ = (n) => root.querySelector(`[data-ref="${n}"]`);
    let currentType = '';

    root.querySelectorAll('[data-svc]').forEach(btn => {
        btn.addEventListener('click', () => {
            currentType = btn.dataset.svc;
            const svc = SERVICE_TYPES.find(s => s.key === currentType);
            $('svcWizardTitle').textContent = svc ? `${svc.icon} ${svc.title}` : '';
            $('svcWizard').style.display = '';
            $('svcResult').innerHTML = '';
        });
    });

    $('svcCancel')?.addEventListener('click', () => { $('svcWizard').style.display = 'none'; });

    $('svcForm')?.addEventListener('submit', async (e) => {
        e.preventDefault();
        const fd = new FormData(e.target);
        const payload = {
            service_type: currentType,
            name: fd.get('name'),
            phone: fd.get('phone'),
            site_label: fd.get('site_label'),
            complaint_text: fd.get('complaint_text'),
            source_portal: 'melk',
        };
        try {
            const r = await fetch(`${apiBase}/service/visitor/request`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
                body: JSON.stringify(payload),
            });
            const j = await r.json();
            if (!r.ok) throw new Error(j.message || 'خطا');
            const code = j.tracking_code || j.data?.tracking_code || '';
            $('svcResult').innerHTML = `<div class="em-svc-ok">✅ درخواست ثبت شد — کد پیگیری: <strong dir="ltr">${esc(code)}</strong></div>`;
            toast('درخواست ثبت شد');
            e.target.reset();
        } catch (err) {
            $('svcResult').innerHTML = `<div class="em-svc-err">${esc(err.message)}</div>`;
        }
    });

    $('trackBtn')?.addEventListener('click', async () => {
        const code = $('trackCode')?.value?.trim();
        if (!code) return;
        try {
            const r = await fetch(`${apiBase}/service/visitor/track?code=${encodeURIComponent(code)}`);
            const j = await r.json();
            const d = j.data || j;
            $('trackResult').innerHTML = d
                ? `<div class="em-svc-ok">وضعیت: <strong>${esc(d.status_label || d.status || '—')}</strong></div>`
                : `<div class="em-svc-err">کد یافت نشد</div>`;
        } catch (e) {
            $('trackResult').innerHTML = `<div class="em-svc-err">${esc(e.message)}</div>`;
        }
    });
}
