import DynamicFormAdapter from "../forms/DynamicFormAdapter.js";
import SearchableSelect from "../components/SearchableSelect.js";

export default class ProjectEditModal {
    constructor({ api, table = null, schema, onSaved = null }) {
        this.api = api;
        this.table = table;
        this.schema = schema;
        this.onSaved = onSaved;

        this.modal = null;
        this.formAdapter = new DynamicFormAdapter({ api: this.api, schema: this.schema });

        this.context = null;
        this.relationInputs = {};

        // برای جلوگیری از race هنگام close/open سریع
        this._openSeq = 0;

        // cache
        this._mountEl = null;
        this._titleEl = null;
        this._formEl = null;
    }

    mount(container) {
        const modal = document.createElement("div");
        modal.className = "projects-dynamic-modal-backdrop";

        modal.innerHTML = `
            <div class="projects-dynamic-modal" role="dialog" aria-modal="true">
                <div class="projects-dynamic-modal-header">
                    <h2 class="projects-dynamic-modal-title">ویرایش پروژه</h2>
                    <button type="button" class="projects-dynamic-modal-close" aria-label="Close">×</button>
                </div>

                <form class="projects-dynamic-form">
                    <div class="projects-dynamic-modal-body">
                        <div class="dynamic-form-mount"></div>
                    </div>

                    <div class="projects-dynamic-modal-footer">
                        <button type="button" class="projects-dynamic-cancel">انصراف</button>
                        <button type="submit" class="projects-dynamic-save">ذخیره</button>
                    </div>
                </form>
            </div>
        `;

        container.appendChild(modal);
        this.modal = modal;

        this._injectStyles();

        // cache elements (کمتر querySelector در آینده)
        this._mountEl = this.modal.querySelector(".dynamic-form-mount");
        this._titleEl = this.modal.querySelector(".projects-dynamic-modal-title");
        this._formEl = this.modal.querySelector("form");

        this._bindEvents();
    }

    _bindEvents() {
        // submit
        this._formEl.addEventListener("submit", async (e) => {
            e.preventDefault();

            if (!this.context?.id) return;

            const values = this.formAdapter.getValue();
            for (const key in this.relationInputs) {
                values[key] = this.relationInputs[key]?.getValue?.() ?? values[key];
            }

            try {
                await this.api.put(`/runtime/projects/record/${this.context.id}`, values);
                if (typeof this.onSaved === "function") await this.onSaved();
                else if (this.table && typeof this.table.reload === "function") await this.table.reload();
                this.close();
            } catch (err) {
                console.error("Update error:", err);
                alert("خطا در ذخیره‌سازی تغییرات پروژه");
            }
        });

        // close buttons
        this.modal.querySelector(".projects-dynamic-modal-close").onclick = () => this.close();
        this.modal.querySelector(".projects-dynamic-cancel").onclick = () => this.close();

        // close on backdrop click (اختیاری ولی UX بهتر)
        this.modal.addEventListener("click", (e) => {
            if (e.target === this.modal) this.close();
        });

        // esc close
        document.addEventListener("keydown", (e) => {
            if (e.key === "Escape" && this.modal?.classList.contains("is-open")) this.close();
        });
    }

    async open({ id, record, title }) {
        this.context = { id };
        this.relationInputs = {};

        const seq = ++this._openSeq;

        this._titleEl.textContent = title || "ویرایش پروژه";
        this._mountEl.innerHTML = "";

        // 1) اول مودال را نشان بده
        this.modal.classList.add("is-open");

        // 2) اجازه بده مرورگر paint کند
        await new Promise((resolve) => requestAnimationFrame(resolve));
        if (seq !== this._openSeq) return; // اگر وسطش close شد

        // 3) mount فرم (بهتر است mount خودش async سنگین نداشته باشد)
        // اگر mount بهینه است، این await مشکلی ندارد. اگر می‌خواهی حتی سبک‌تر:
        // اینجا await را بردار.
        await this.formAdapter.mount(this._mountEl, record, this.schema);
        if (seq !== this._openSeq) return;

        // 4) enhance relationها را در پس‌زمینه شروع کن (ترجیحاً بدون await)
        // تا UI منتظر relationها نماند.
        this._enhanceRelationFields(record, seq);
    }

    async _enhanceRelationFields(record, seq) {
        if (!this.schema?.fields?.length) return;

        const tasks = [];

        for (const field of this.schema.fields) {
            if (field.field_type !== "relation") continue;

            // محدود به mount container (سریع‌تر و دقیق‌تر)
            const input = this._mountEl.querySelector(`[name="${CSS.escape(field.field_name)}"]`);
            if (!input) continue;

            input.style.display = "none";
            const wrapper = input.parentNode;
            if (!wrapper || wrapper.querySelector(".search-select")) continue;

            const combo = new SearchableSelect({
                api: this.api,
                source: `/runtime/${field.source_entity}/records`,
                valueField: "id",
                labelField: "name",
            });

            const p = combo
                .mount(wrapper, record?.[field.field_name])
                .then(() => {
                    // اگر مودال بسته/دوباره باز شد، نتیجه را اعمال نکن
                    if (seq !== this._openSeq) return;
                    this.relationInputs[field.field_name] = combo;
                })
                .catch((err) => {
                    if (seq !== this._openSeq) return;
                    console.error("Relation load error:", err);
                });

            tasks.push(p);
        }

        // موازی؛ ولی UI را بلاک نکن.
        // اگر لازم داری بعداً مطمئن باشی همه mount شدند، این await را برگردان.
        await Promise.all(tasks);
    }

    close() {
        // توکن را عوض کن تا asyncهای قبلی بی‌اثر شوند
        this._openSeq++;

        this.modal.classList.remove("is-open");
        this.context = null;
        this.relationInputs = {};
        // اگر SearchableSelect destroy دارد، اینجا صدا بزن
        // Object.values(this.relationInputs).forEach(x => x?.destroy?.());
    }

    _injectStyles() {
        if (document.getElementById("projects-dynamic-modal-style")) return;

        const style = document.createElement("style");
        style.id = "projects-dynamic-modal-style";
        style.textContent = `
            .projects-dynamic-modal-backdrop{
                position: fixed; inset: 0;
                background: rgba(0,0,0,0.45);
                display: flex; align-items: center; justify-content: center;
                padding: 24px;
                z-index: 9999;
                opacity: 0; visibility: hidden;
                transition: opacity .2s ease;
                direction: rtl;
            }
            .projects-dynamic-modal-backdrop.is-open{ opacity: 1; visibility: visible; }

            .projects-dynamic-modal{
                width: min(960px,100%);
                max-height: 90vh;
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 20px 50px rgba(0,0,0,0.18);
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }

            .projects-dynamic-modal-header{
                display: flex; justify-content: space-between; align-items: center;
                padding: 20px 24px;
                border-bottom: 1px solid #e5e7eb;
                background: #f8fafc;
            }
            .projects-dynamic-modal-title{ margin: 0; font-size: 18px; font-weight: 700; }
            .projects-dynamic-modal-close{ border: none; background: transparent; font-size: 24px; cursor: pointer; }

            /* نکته مهم برای اسکرول داخل flex */
            .projects-dynamic-modal-body{
                padding: 24px;
                overflow-y: auto;
                flex: 1 1 auto;
                min-height: 0;
            }

            .dynamic-form-mount{ display: flex; flex-direction: column; gap: 20px; }
            .dynamic-form-mount input, .dynamic-form-mount .search-select{ width: 100%; box-sizing: border-box; }

            .projects-dynamic-modal-footer{
                display: flex; justify-content: flex-end; gap: 12px;
                padding: 16px 24px;
                border-top: 1px solid #e5e7eb;
                background: #f8fafc;
            }

            .projects-dynamic-save{
                background: #2563eb; color: #fff;
                border: none; padding: 10px 20px;
                border-radius: 10px; cursor: pointer;
            }
            .projects-dynamic-cancel{
                background: #e5e7eb;
                border: none; padding: 10px 20px;
                border-radius: 10px; cursor: pointer;
            }
        `;
        document.head.appendChild(style);
    }
}
