import type { ButtonGroupColors, ButtonConfig } from '../components/button-group/index.type';
import { BaseManager } from '../core/base-manager';
import { BimButtonGroup } from '../components/button-group';
import { BimTree } from '../components/tree';
import { TreeNodeConfig } from '../components/tree/types';
import { BimDialog } from '../components/dialog';
import { BimTab } from '../components/tab';
import { getIcon } from '../utils/icon-manager';

function transformTreeData(apiData: any[]): TreeNodeConfig[] {
    if (!apiData || apiData.length === 0) return [];

    return apiData.map((model, modelIndex) => {
        const transformNode = (node: any, index: number): TreeNodeConfig => {
            const hasChildren = node.children && node.children.length > 0;
            return {
                id: node.id || `node-${modelIndex}-${index}`,
                label: node.name || node.label || '未命名',
                expanded: false,
                clickAction: hasChildren ? 'expand' : 'select',
                children: hasChildren
                    ? node.children.map((child: any, childIndex: number) => transformNode(child, childIndex))
                    : undefined,
                data: node
            };
        };

        const hasChildren = model.children && model.children.length > 0;
        return {
            id: `model-${modelIndex}`,
            label: model.name || '模型',
            expanded: true,
            clickAction: 'expand',
            children: hasChildren
                ? model.children.map((child: any, childIndex: number) => transformNode(child, childIndex))
                : undefined
        };
    });
}

export class ConstructTreeManagerBtn extends BaseManager {
    /** 按钮组实例 */
    private toolbar: BimButtonGroup | null = null;
    /** 按钮容器元素 */
    private toolbarContainer: HTMLElement | null = null;
    /** 主容器元素 */
    private container: HTMLElement;
    /** 构件树对话框实例 */
    private dialog: BimDialog | null = null;

    constructor(container: HTMLElement) {
        super();
        this.container = container;
        this.init();
    }

    /** 初始化按钮 */
    private init() {
        this.toolbarContainer = document.createElement('div');
        this.toolbarContainer.id = 'bim-construct-tree';
        this.container.appendChild(this.toolbarContainer);
        this.toolbar = new BimButtonGroup({
            container: this.toolbarContainer,
            showLabel: false,
            direction: 'column',
            position: 'top-left',
            align: 'vertical',
            expand: 'up'
        });
        this.toolbar.init();
        this.toolbar.addGroup('construct-tree');
        this.toolbar.addButton({
            id: 'construct-tree-btn',
            groupId: 'construct-tree',
            type: 'button',
            label: 'construct-tree',
            icon: getIcon('目录树'),
            onClick: () => {
                this.openConstructTreeDialog();
            }
        });
        this.toolbar.render();
    }

    public openConstructTreeDialog() {
        this.setVisible(false);

        const levelTreeData = this.registry.engine3d?.getLevelTreeData() ?? [];
        const typeTreeData = this.registry.engine3d?.getTypeTreeData() ?? [];
        const majorTreeData = this.registry.engine3d?.getMajorTreeData() ?? [];

        console.log('[ConstructTree] 构件树数据 (Level):', levelTreeData);
        console.log('[ConstructTree] 类型树数据 (Type):', typeTreeData);
        console.log('[ConstructTree] 专业树数据 (Major):', majorTreeData);

        const createTree = (data: any[]) => {
            const tree = new BimTree({
                data: transformTreeData(data),
                checkable: true,
                indent: 0,
                enableSearch: true,
                checkStrictly: true,
                defaultExpandAll: true,
                onNodeCheck: (node) => {
                    console.log('onNodeCheck', node);
                },
                onNodeSelect: (node) => {
                    console.log('onNodeSelect', node);
                },
                onNodeExpand: () => {
                    this.dialog?.fitWidth();
                },
            });
            tree.init();
            return tree;
        };

        const componentTree = createTree(levelTreeData);
        const typeTree = createTree(typeTreeData);
        const majorTree = createTree(majorTreeData);

        const componentPanel = document.createElement('div');
        componentPanel.className = 'construct-tab__panel-content';
        componentPanel.appendChild(componentTree.element);

        const typePanel = document.createElement('div');
        typePanel.className = 'construct-tab__panel-content';
        typePanel.appendChild(typeTree.element);

        const majorPanel = document.createElement('div');
        majorPanel.className = 'construct-tab__panel-content';
        majorPanel.appendChild(majorTree.element);

        const tabMount = document.createElement('div');
        tabMount.className = 'construct-tab__container';
        tabMount.style.height = '100%';
        tabMount.style.overflow = 'hidden';
        const tab = new BimTab({
            container: tabMount,
            tabs: [
                { id: 'component', title: 'tab.component', content: componentPanel },
                { id: 'type', title: 'tab.type', content: typePanel },
                { id: 'major', title: 'tab.major', content: majorPanel },
            ],
            activeId: 'component',
            onChange: () => {
                this.dialog?.fitWidth();
            }
        });
        tab.init();

        this.dialog = this.registry.dialog!.create({
            title: 'constructTree.title',
            minWidth: 320,
            height: 420,
            content: tabMount,
            position: { x: 20, y: 20 },
            resizable: false,
            onClose: () => {
                tab.destroy();
                componentTree.destroy();
                typeTree.destroy();
                majorTree.destroy();
                this.setVisible(true);
            }
        });
        this.dialog?.fitWidth();
    }

    /** 刷新渲染 */
    public refresh() {
        this.toolbar?.render();
    }

    /** 销毁管理器 */
    public destroy() {
        this.toolbar?.destroy();
        this.toolbar = null;
        super.destroy();
    }

    /**
     * 添加按钮组
     * @param groupId 组 ID
     * @param beforeGroupId 插入位置
     */
    public addGroup(groupId: string, beforeGroupId?: string) {
        this.toolbar?.addGroup(groupId, beforeGroupId);
        this.toolbar?.render();
    }

    /**
     * 添加按钮
     * @param config 按钮配置
     */
    public addButton(config: ButtonConfig) {
        this.toolbar?.addButton(config);
        this.toolbar?.render();
    }

    /**
     * 设置按钮可见性
     * @param id 按钮 ID
     * @param v 是否可见
     */
    public setButtonVisibility(id: string, v: boolean) {
        this.toolbar?.updateButtonVisibility(id, v);
    }

    /**
     * 设置是否显示标签
     * @param show 是否显示
     */
    public setShowLabel(show: boolean) {
        this.toolbar?.setShowLabel(show);
    }

    /**
     * 设置按钮组可见性
     * @param visible 是否可见
     */
    public setVisible(visible: boolean) {
        if (this.toolbarContainer) {
            this.toolbarContainer.style.visibility = visible ? 'visible' : 'hidden';
        }
    }

    /**
     * 设置背景颜色
     * @param color 颜色值
     */
    public setBackgroundColor(color: string) {
        this.toolbar?.setBackgroundColor(color);
    }

    /**
     * 设置按钮组颜色
     * @param colors 颜色配置
     */
    public setColors(colors: ButtonGroupColors) {
        this.toolbar?.setColors(colors);
    }
}