// مسیر: src/views/SidebarView.js
import BaseView from "../core/BaseView.js";
import { viewRegistry } from "../core/registries.js";
import acl from "../core/AclService.js";

export default class SidebarView extends BaseView {

    constructor(options = {}) {
        super(options);
        this.api = options.api;   // ✅ این خط مهم است

        this.constructor.title = "سیستم منو هلدینگ";

        this.cacheKey = "acc_sidebar_menus";
        this.cacheTTL = 5 * 60 * 1000;
        this.menuTree = [];

    }


    async render(container) {

        await super.render(container);
        const body = this.ref("body");
        if (!body) return this;

        const menus = await this.loadMenus();
        this.menuTree = this.buildTree(menus);

        body.innerHTML = `
            <div class="acc-menu-wrapper">
                ${this.renderLevel(this.menuTree, null)}
            </div>
        `;

        this.bindEvents();
        return this;
    }

    /**
     * منوها را از کش یا API لود می‌کند و همیشه یک آرایه برمی‌گرداند
     */
    /**
 * منوها را از کش یا API لود می‌کند و همیشه یک آرایه برمی‌گرداند
 */
    async loadMenus() {
    const token = this.store?.get("session")?.token || sessionStorage.getItem("acc_token");

    if (!token) {
        this.setCache([]);
        return [];
    }

    // اول از ACL یکپارچه استفاده کن
    try {
        if (!acl._loaded) {
            await acl.load(this.api);
        }

        const items = (acl.menus ?? []).map(m => ({
            id:          m.id,
            parent_id:   m.parent_key ? this._findParentId(acl.menus, m.parent_key) : 0,
            title:       m.title,
            description: '',
            icon:        m.icon,
            route:       m.route,
        }));

        if (items.length) {
            this.setCache(items);
            return items;
        }
    } catch (e) {
        console.error("ACL Load failed, switching to fallback menus:", e);
    }

    // Fallback: مسیر معتبر موجود در بک‌اند
    try {
        const data = await this.api.get("acl/menus");

        const rawItems = Array.isArray(data)
            ? data
            : Array.isArray(data?.items)
                ? data.items
                : Array.isArray(data?.data)
                    ? data.data
                    : [];

        const items = rawItems.map(m => ({
            id:          m.id,
            parent_id:   m.parent_id ?? (m.parent_key ? this._findParentId(rawItems, m.parent_key) : 0),
            title:       m.title ?? m.name ?? '',
            description: m.description ?? '',
            icon:        m.icon ?? '',
            route:       m.route ?? m.url ?? '',
        }));

        this.setCache(items);
        return items;
    } catch (e) {
        console.error("Fallback menus load failed:", e);
        this.setCache([]);
        return [];
    }
}


    _findParentId(menus, parentKey) {
        const p = menus.find(m => m.menu_key === parentKey);
        return p?.id ?? 0;
    }




    getCache() {
        try {
            const raw = sessionStorage.getItem(this.cacheKey);
            if (!raw) return null;

            const parsed = JSON.parse(raw);

            if (Date.now() > parsed.expire) {
                sessionStorage.removeItem(this.cacheKey);
                return null;
            }

            // اینجا data خود آرایه‌ی منوهاست
            return Array.isArray(parsed.data) ? parsed.data : null;

        } catch {
            return null;
        }
    }

    setCache(data) {

        try {

            const payload = {
                expire: Date.now() + this.cacheTTL,
                // فقط آرایه را ذخیره می‌کنیم
                data: Array.isArray(data) ? data : []
            };

            sessionStorage.setItem(this.cacheKey, JSON.stringify(payload));

        } catch {
            // خطای کش را نادیده می‌گیریم؛ فیچر کمکی است
        }
    }

    /**
     * items: آرایه‌ای از منوها با ساختار:
     * { id, parent_id, title, description?, icon?, route? }
     */
    buildTree(items) {

        const map = {};
        const roots = [];

        if (!Array.isArray(items)) {
            console.warn("[SidebarView] buildTree called with non-array items:", items);
            return roots;
        }

        items.forEach(item => {
            item.children = [];
            map[item.id] = item;
        });

        items.forEach(item => {

            if (item.parent_id && map[item.parent_id]) {
                map[item.parent_id].children.push(item);
            } else {
                roots.push(item);
            }

        });

        return roots;
    }

    renderLevel(nodes, parentNode = null) {

        return `
            <div class="acc-card-grid">
                ${parentNode ? this.renderBackCard(parentNode) : ""}
                ${this.renderTree(nodes)}
            </div>
        `;
    }

    renderBackCard(parentNode) {

        const parentTitle = parentNode.title || "";

        return `
            <div class="acc-card-item acc-card-back">
                <div class="acc-card-link"
                     data-back="1"
                     data-parent="${parentNode.parent_id || 0}">
                     
                    <span class="acc-card-title">برگشت به قبل</span>
    
                    <div class="acc-card-desc acc-back-desc">
                        با زدن این دکمه به مرحله قبل بر می گردید
                    </div>
    
                    <div class="acc-card-meta acc-back-parent">
                        بازگشت به: ${parentTitle}
                    </div>
    
                </div>
            </div>
        `;
    }

    renderTree(nodes) {

        if (!Array.isArray(nodes) || nodes.length === 0) {
            return `
                <div class="acc-card-item">
                    <div class="acc-card-link">
                        <span class="acc-card-title">هیچ منویی تعریف نشده است</span>
                    </div>
                </div>
            `;
        }

        return nodes.map(node => {

            const hasChildren = node.children && node.children.length > 0;
            const childCount = hasChildren ? node.children.length : 0;

            return `
                <div class="acc-card-item ${hasChildren ? "has-children" : ""}">
                    
                    <div class="acc-card-link"
                         data-id="${node.id}"
                         data-route="${node.route || ''}"
                         data-has-children="${hasChildren ? "1" : "0"}"
                    >
    
                        <!-- ردیف اول -->
                        <div class="acc-card-row acc-card-header">
                            ${node.icon ? `<span class="acc-card-icon dashicons dashicons-${node.icon}"></span>` : ""}
                            <span class="acc-card-title">${node.title}</span>
                        </div>
    
                        <!-- ردیف دوم -->
                        ${node.description ? `
                            <div class="acc-card-desc">
                                ${node.description}
                            </div>
                        ` : ""}
    
                        <!-- ردیف سوم -->
                        ${hasChildren ? `
                            <div class="acc-card-meta">
                                ${childCount} زیرمنو
                            </div>
                        ` : ""}
    
                    </div>
    
                </div>
            `;

        }).join("");
    }


    findNode(id, nodes = this.menuTree) {

        for (const node of nodes) {

            if (node.id == id) return node;

            const f = this.findNode(id, node.children);

            if (f) return f;
        }

        return null;
    }

    bindEvents() {

        const wrapper = document.querySelector(".acc-menu-wrapper");
        if (!wrapper) return;

        wrapper.addEventListener("click", (e) => {

            const link = e.target.closest(".acc-card-link");
            if (!link) return;

            /* کارت برگشت */

            if (link.dataset.back === "1") {

                const parentId = link.dataset.parent;

                if (!parentId || parentId === "0") {

                    wrapper.innerHTML = this.renderLevel(this.menuTree, null);
                    return;

                }

                const parentNode = this.findNode(parentId);

                if (parentNode) {
                    wrapper.innerHTML = this.renderLevel(parentNode.children, parentNode);
                }

                return;
            }

            /* کارت‌های معمولی */

            const id = link.dataset.id;
            const hasChildren = link.dataset.hasChildren === "1";
            const route = link.dataset.route;

            if (hasChildren) {

                const node = this.findNode(id);

                wrapper.innerHTML = this.renderLevel(node.children, node);
                return;
            }

            if (route) {
                const aliases = { access: "acl", roles: "acl", permissions: "acl" };
                const key = viewRegistry.getByTabKey?.(route)
                    ? route
                    : (aliases[route] && viewRegistry.getByTabKey?.(aliases[route]) ? aliases[route] : null);

                if (key) {
                    this.eventBus?.emit("tab:open", { key });
                } else {
                    console.warn("ERP module view not registered:", route);
                    alert("ماژول هنوز ثبت نشده: " + route);
                }
            }

        });
    }
}

viewRegistry.registerByTabKey("sidebar", SidebarView);
