import { ComponentRegistry } from "../ComponentRegistry.js";

// ============================================================
// FieldListComponent.js  - نسخه نهایی
// ============================================================
// این کامپوننت برای نمایش فیلدها در کارت‌های پروژه استفاده می‌شود.
// برای فیلدهای Relation، ابتدا به دنبال کلید "_label" می‌گردد
// و اگر وجود داشت آن را نمایش می‌دهد، در غیر این صورت مقدار خام را نشان می‌دهد.
// این کار باعث می‌شود مقدار اصلی فیلد (مثلاً status: 5) دست‌نخورده باقی بماند
// و مودال ویرایش بدون مشکل کار کند.
// ============================================================

export const FieldListComponent = {

    type: "field-list",

    /**
     * مقدار یک فیلد را از داده پیدا می‌کند
     * @param {string} fieldName - نام فیلد
     * @param {object} data - داده‌های رکورد
     * @returns {*} مقدار فیلد
     */
    resolveValue(fieldName, data) {
        if (!data || !fieldName) {
            return "";
        }

        // 1️⃣ اول بررسی کن که آیا "_label" برای این فیلد وجود دارد
        // (این کلید توسط ProjectsTable._prepareRecord ساخته می‌شود)
        if (data[fieldName + "_label"] !== undefined) {
            return data[fieldName + "_label"];
        }

        // 2️⃣ اگر فیلد "_id" دارد و "_label" متناظر آن وجود دارد
        const idVariant = fieldName + "_id";
        if (idVariant in data && data[fieldName + "_id_label"] !== undefined) {
            return data[fieldName + "_id_label"];
        }

        // 3️⃣ بررسی مستقیم
        if (fieldName in data) {
            return data[fieldName];
        }

        // 4️⃣ بررسی "_id" واریانت
        if (idVariant in data) {
            return data[idVariant];
        }

        // 5️⃣ اگر فیلد به "_id" ختم می‌شود، بدون "_id" رو هم چک کن
        if (fieldName.endsWith("_id")) {
            const base = fieldName.replace(/_id$/, "");
            if (base in data) {
                return data[base];
            }
        }

        // 6️⃣ جستجوی case-insensitive
        const lower = fieldName.toLowerCase();
        for (const key of Object.keys(data)) {
            if (key.toLowerCase() === lower) {
                return data[key];
            }
        }

        // 7️⃣ تبدیل camelCase به snake_case
        const snake = fieldName.replace(/[A-Z]/g, m => "_" + m.toLowerCase());
        if (snake in data) {
            return data[snake];
        }

        // 8️⃣ تبدیل snake_case به camelCase
        const camel = fieldName.replace(/_([a-z])/g, function (_, c) { return c.toUpperCase(); });
        if (camel in data) {
            return data[camel];
        }

        return "";
    },

    /**
     * مقدار نمایشی یک فیلد Relation را پیدا می‌کند
     * @param {object} field - اطلاعات فیلد از schema
     * @param {object} data - داده‌های رکورد
     * @returns {string|null} مقدار نمایشی یا null
     */
    resolveRelationDisplayValue(field, data) {
        const rawValue = data[field.name];

        // 1️⃣ اول چک کن "_label" برای این فیلد وجود دارد
        // (ساخته شده توسط ProjectsTable._prepareRecord یا API)
        if (data[field.name + "_label"] !== undefined) {
            return data[field.name + "_label"];
        }

        // 2️⃣ اگر داده آبجکت کامل است (مثلاً {id: 5, title: 'تمام شده'})
        if (rawValue && typeof rawValue === "object") {
            const displayField = (field.config && field.config.displayField) || "title";
            if (rawValue[displayField] !== undefined) return rawValue[displayField];
            if (rawValue.title !== undefined) return rawValue.title;
            if (rawValue.name !== undefined) return rawValue.name;
            if (rawValue.label !== undefined) return rawValue.label;
        }

        // 3️⃣ جستجوی کلیدهای کمکی احتمالی
        const baseName = field.name.replace(/_id$/, "");
        const possibleKeys = [
            field.name + "_display",
            field.name + "_title",
            field.name + "_name",
            field.name + "_label",
            baseName + "_display",
            baseName + "_title",
            baseName + "_name",
            baseName + "_label"
        ];

        for (const key of possibleKeys) {
            if (data[key] !== undefined && data[key] !== null && data[key] !== "") {
                return data[key];
            }
        }

        // 4️⃣ اگر هیچکدام وجود نداشت، آبجکت خام رو برگردون
        // (ممکن است خود آبجکت relation باشد)
        if (rawValue && typeof rawValue === "object" && rawValue.id !== undefined) {
            return rawValue.title || rawValue.name || rawValue.label || rawValue.id;
        }

        return null;
    },

    /**
     * رندر کردن بخشی از کارت
     * @param {object} section - بخش شامل آرایه‌ای از فیلدها
     * @param {object} data - داده‌های رکورد
     * @returns {string} HTML رندر شده
     */
    render(section, data) {
        if (!section || !Array.isArray(section.fields) || section.fields.length === 0) {
            return '<div class="runtime-card-warning">⚠️ No visible fields defined</div>';
        }

        const rows = section.fields.map(field => {
            const name = field && field.name ? field.name : "";
            const label = field && field.label ? field.label : name;
            const type = field && field.type ? field.type : null;

            // مقدار فیلد را دریافت کن
            let value = this.resolveValue(name, data);

            // اگر فیلد از نوع Relation است، مقدار نمایشی را پیدا کن
            if (type === "relation") {
                const displayValue = this.resolveRelationDisplayValue(field, data);
                if (displayValue !== null) {
                    value = displayValue;
                }
            }

            // اگر مقدار خالی یا نامعتبر است، خط تیره نشان بده
            const displayValue = (value !== null && value !== undefined && value !== "") ? value : "—";

            return `
                <div class="runtime-field-row">
                    <div class="runtime-field-label">
                        ${label}
                    </div>
                    <div class="runtime-field-value">
                        ${displayValue}
                    </div>
                </div>
            `;
        }).join("");

        return `
            <div class="runtime-field-list">
                ${rows}
            </div>
        `;
    }
};

ComponentRegistry.register("field-list", FieldListComponent);
