/**

 * ServicePartsSection.js — سفارشات قطعات و عملیات تأمین‌کننده

 */

import SectionBase from "../../accounting/SectionBase.js";



const STATUS = {

    supplier_pending: "در انتظار تأمین",

    ready: "آماده ارسال",

    shipped: "ارسال شده",

    delivered: "تحویل شده",

    cancelled: "لغو",

};



export default class ServicePartsSection extends SectionBase {



    async template() {

        return `

        <div class="acc-section-wrap">

            <div class="acc-toolbar">

                <h2 class="acc-section-title">📦 سفارش قطعات</h2>

                <button class="acc-btn acc-btn--secondary" data-ref="refreshBtn">🔄</button>

            </div>

            <div data-ref="wrap"><div class="acc-loading">⏳</div></div>

        </div>`;

    }



    async afterRender() {

        await this._load();

        this.on(this.ref("refreshBtn"), "click", () => this._load());

    }



    async _load() {

        this.ref("wrap").innerHTML = `<div class="acc-loading">⏳</div>`;

        try {

            const res = await this.api.get("service/parts/orders");

            this._rows = res?.data ?? [];

            this._render();

        } catch (e) {

            this.ref("wrap").innerHTML = `<div class="acc-error">❌ ${this.escape(e.message)}</div>`;

        }

    }



    _render() {

        if (!this._rows.length) {

            this.ref("wrap").innerHTML = `<div class="acc-empty">سفارش قطعه‌ای ثبت نشده — از ویجت «تأمین قطعات» ثبت کنید.</div>`;

            return;

        }

        this.ref("wrap").innerHTML = `

        <table class="acc-table">

            <thead><tr>

                <th>کد</th><th>قطعه</th><th>مشتری</th><th>قیمت</th><th>ETA</th><th>وضعیت</th><th></th>

            </tr></thead>

            <tbody>

            ${this._rows.map(o => `<tr data-id="${o.id}">

                <td><b dir="ltr">${this.escape(o.tracking_code || "—")}</b></td>

                <td>${this.escape(o.part_number)} × ${o.part_qty}${o.in_stock ? " ✅" : ""}</td>

                <td>${this.escape(o.customer_name)}<br><small dir="ltr">${this.escape(o.phone)}</small></td>

                <td>${Number(o.quote_price || 0).toLocaleString("fa-IR")}</td>

                <td>${o.eta_days} روز</td>

                <td>

                    <select class="acc-input" data-status style="font-size:12px;width:auto;">

                        ${Object.entries(STATUS).map(([k, v]) =>

                            `<option value="${k}" ${o.status === k ? "selected" : ""}>${v}</option>`

                        ).join("")}

                    </select>

                </td>

                <td><button class="acc-btn acc-btn--sm acc-btn--primary" data-save>💾</button></td>

            </tr>`).join("")}

            </tbody>

        </table>

        <p style="font-size:12px;color:#64748b;margin-top:10px;">تغییر وضعیت به «تحویل شده» امتیاز تأمین‌کننده را فعال می‌کند.</p>`;



        this.ref("wrap").querySelectorAll("tr[data-id]").forEach(tr => {

            tr.querySelector("[data-save]").addEventListener("click", async () => {

                const id = +tr.dataset.id;

                const status = tr.querySelector("[data-status]").value;

                try {

                    await this.api.put(`service/parts/orders/${id}`, { status });

                    await this._load();

                } catch (e) { alert(e.message); }

            });

        });

    }

}


