// components/trrc/core/trrc-renderer.js

export class TRRCRenderer {

    constructor() {
        console.log("[TRRC] TRRCRenderer initialized");
    }

    _findNodeById(node, id) {
        if (!node) return null;
        if (String(node.id) === String(id)) return node;
        if (node.children) {
            for (let child of node.children) {
                const found = this._findNodeById(child, id);
                if (found) return found;
            }
        }
        return null;
    }

    render(state) {
        const node = state.current;
        if (!node) return `<div class="acx-error">خطا: دیتایی یافت نشد</div>`;

        const isRoot = (node.id === "root" || node.isRoot || !node.parent);

        if (isRoot) {
            return this.renderRoot(node.children || []);
        }
        return this.renderNode(node, node.children || []);
    }

    renderRoot(children) {
        return `
            <div class="acx-root-grid">
                ${children.map(child => `
                    <div class="acx-root-card acx-flashcard" data-node="${child.id}" style="cursor:pointer">
                        <div class="acx-fc-header acx-root-header">
                            <div class="acx-fc-icon"><i class="fas fa-folder-tree"></i></div>
                            <div class="acx-root-title-box">
                                <h3 class="acx-fc-title">${child.name}</h3>
                                <span class="acx-fc-code">${child.code || ""}</span>
                            </div>
                        </div>
                        <div class="acx-fc-body">
                            <p class="acx-fc-desc">${child.description || ""}</p>
                        </div>
                        <div class="acx-fc-footer">
                            <div class="acx-fc-stat">
                                <i class="fas fa-sitemap"></i>
                                <span>${child.children?.length || 0} زیرشاخه</span>
                            </div>
                        </div>
                    </div>
                `).join("")}
            </div>
        `;
    }

    renderNode(node, children) {
        return `
            <div class="acx-node-card acx-flashcard" data-node="${node.id}">
                <div class="acx-fc-header">
                    <button class="acx-btn acx-btn-home"><i class="fas fa-home"></i></button>
                    <button class="acx-btn acx-btn-back"><i class="fas fa-arrow-right"></i></button>

                    <div class="acx-node-title">
                        <h2 class="acx-fc-title">${node.name}</h2>
                        <span class="acx-fc-code">${node.code || ""}</span>
                    </div>
                </div>

                <div class="acx-breadcrumb">${this.renderBreadcrumb(node)}</div>

                <div class="acx-fc-body">
                    <p class="acx-fc-desc">${node.description || ""}</p>
                </div>

                <div class="acx-children-title">
                    <i class="fas fa-layer-group"></i> زیرشاخه‌ها
                </div>

                <div class="acx-children">
                    ${this.renderChildren(node, children)}
                </div>
            </div>
        `;
    }

    renderChildren(node, children) {
        return `
            <div class="acx-children-grid">
                ${children.map(child => `
                    <div class="acx-child acx-flashcard" data-node="${child.id}" style="cursor:pointer">
                        <div class="acx-fc-header">
                            <div class="acx-fc-icon"><i class="fas fa-folder"></i></div>
                            <h3 class="acx-fc-title">${child.name}</h3>
                        </div>
                        <div class="acx-fc-body">
                            <p>${child.description || ""}</p>
                        </div>
                        <div class="acx-fc-footer">
                            <span>${child.children?.length || 0} زیرشاخه</span>
                        </div>
                    </div>
                `).join("")}
            </div>
        `;
    }

    renderBreadcrumb(node) {
        let list = [];
        let current = node;
        while (current) {
            list.unshift(current.name);
            current = current.parent;
        }
        return list.join(" / ");
    }
}
