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

export default class ProjectEditModal_01 {
    constructor({ api, table }) {
        this.api = api;
        this.table = table;
        this.modal = null;
        this.formAdapter = new DynamicFormAdapter();
        this.context = null;
    }

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

        modal.innerHTML = `
            <div class="projects-dynamic-modal">
                <div class="projects-dynamic-modal-header">
                    <h2 class="projects-dynamic-modal-title">ویرایش پروژه</h2>
                    <button class="projects-dynamic-modal-close" title="بستن">×</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();
        this.bindEvents();
    }

    bindEvents() {
        const form = this.modal.querySelector("form");

        form.addEventListener("submit", async (e) => {
            e.preventDefault();

            const values = this.formAdapter.getValue();
            const id = this.context.id;

            try {
                await this.api.put(`/runtime/projects/record/${id}`, values);

                if (this.table && typeof this.table.reload === "function") {
                    this.table.reload();
                }

                this.close();
            } catch (err) {
                console.error("Update error:", err);
                alert("خطا در ذخیره‌سازی تغییرات پروژه");
            }
        });

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

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

        const titleEl = this.modal.querySelector(".projects-dynamic-modal-title");
        titleEl.textContent = title || "ویرایش پروژه";

        const mount = this.modal.querySelector(".dynamic-form-mount");
        this.formAdapter.mount(mount, record);

        this.modal.classList.add("is-open");
    }

    close() {
        this.modal.classList.remove("is-open");
        this.context = null;
    }

    destroy() {
        this.modal?.remove();
    }

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

        const style = document.createElement("style");
        style.id = "projects-dynamic-modal-style";
        style.innerHTML = `
        .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 0.2s ease, visibility 0.2s ease;
        }
    
        .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);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transform: translateY(8px);
            transition: transform 0.2s ease;
        }
    
        .projects-dynamic-modal-backdrop.is-open .projects-dynamic-modal {
            transform: translateY(0);
        }
    
        .projects-dynamic-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 20px 24px;
            border-bottom: 1px solid #e5e7eb;
            background: #f8fafc;
            flex: 0 0 auto;
        }
    
        .projects-dynamic-modal-title {
            margin: 0;
            font-size: 18px;
            font-weight: 700;
            color: #111827;
        }
    
        .projects-dynamic-modal-close {
            border: none;
            background: transparent;
            color: #6b7280;
            font-size: 24px;
            line-height: 1;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 8px;
        }
    
        .projects-dynamic-modal-close:hover {
            background: #eef2f7;
            color: #111827;
        }
    
        .projects-dynamic-form {
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1 1 auto;
        }
    
        .projects-dynamic-modal-body {
            padding: 24px;
            overflow: auto;
            flex: 1 1 auto;
        }
    
        .projects-dynamic-modal-body,
        .projects-dynamic-modal-body * {
            box-sizing: border-box;
        }
    
        .projects-dynamic-modal-body .dynamic-form-mount {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;
            min-width: 0;
        }
    
        .projects-dynamic-modal-body .form-field-group,
        .projects-dynamic-modal-body .field-group,
        .projects-dynamic-modal-body .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            min-width: 0;
        }
    
        .projects-dynamic-modal-body .form-field-group > *,
        .projects-dynamic-modal-body .field-group > *,
        .projects-dynamic-modal-body .form-group > * {
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }
    
        .projects-dynamic-modal-body label {
            display: block;
            width: 100%;
            min-width: 0;
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #374151;
        }
    
        .projects-dynamic-modal-body input[type="text"],
        .projects-dynamic-modal-body input[type="number"],
        .projects-dynamic-modal-body input[type="email"],
        .projects-dynamic-modal-body input[type="date"],
        .projects-dynamic-modal-body input[type="datetime-local"],
        .projects-dynamic-modal-body input[type="time"],
        .projects-dynamic-modal-body input[type="search"],
        .projects-dynamic-modal-body input[type="url"],
        .projects-dynamic-modal-body input:not([type]),
        .projects-dynamic-modal-body select,
        .projects-dynamic-modal-body textarea {
            display: block;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            padding: 12px 14px;
            margin: 0;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            background: #fff;
            color: #111827;
            font: inherit;
            line-height: 1.4;
            outline: none;
            box-sizing: border-box;
            appearance: none;
        }
    
        .projects-dynamic-modal-body textarea {
            min-height: 120px;
            resize: vertical;
        }
    
        .projects-dynamic-modal-body input:focus,
        .projects-dynamic-modal-body select:focus,
        .projects-dynamic-modal-body textarea:focus {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }
    
        .projects-dynamic-modal-body input[type="checkbox"],
        .projects-dynamic-modal-body input[type="radio"] {
            width: auto !important;
            min-width: auto !important;
            max-width: none !important;
        }
    
        .projects-dynamic-modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            padding: 16px 24px;
            border-top: 1px solid #e5e7eb;
            background: #f8fafc;
            flex: 0 0 auto;
        }
    
        .projects-dynamic-modal-footer button {
            border: none;
            border-radius: 10px;
            padding: 10px 18px;
            font: inherit;
            font-weight: 600;
            cursor: pointer;
        }
    
        .projects-dynamic-modal-footer .btn-cancel {
            background: #e5e7eb;
            color: #111827;
        }
    
        .projects-dynamic-modal-footer .btn-submit {
            background: #2563eb;
            color: #fff;
        }
    
        .projects-dynamic-modal-footer .btn-submit:hover {
            background: #1d4ed8;
        }
    
        @media (max-width: 640px) {
            .projects-dynamic-modal-backdrop {
                padding: 12px;
            }
    
            .projects-dynamic-modal {
                width: 100%;
                max-height: 94vh;
                border-radius: 10px;
            }
    
            .projects-dynamic-modal-header,
            .projects-dynamic-modal-body,
            .projects-dynamic-modal-footer {
                padding-left: 16px;
                padding-right: 16px;
            }
    
            .projects-dynamic-modal-footer {
                flex-direction: column-reverse;
            }
    
            .projects-dynamic-modal-footer button {
                width: 100%;
            }
        }
        `;
        document.head.appendChild(style);
    }

}
