import {CssType, HtmlPanel} from '@deep/engine';

/**
 * 隧道数据接口
 */
export interface ITunnelData {
    type: string;
    position: {
        x: number;
        y: number;
        z: number;
    };
    depth: number;
    radius: number;
}

/**
 * 隧道面板类
 */
export class TunnelHtmlPanel extends HtmlPanel {
    private tunnelData: ITunnelData;

    private onDeleteCallback: (() => void) | null = null;
    private uuid: string;

    /**
     * 构造函数
     * @param data 隧道数据
     * @param type CSS渲染类型
     */
    constructor(data: ITunnelData, type: CssType = CssType.CSS3DSprite) {
        super(type);
        this.tunnelData = data;
        this.uuid = this.getUniqueId();
        this.initContent();
        this.attachDeleteEvent();
    }

    /**
     * 设置删除回调函数
     * @param callback 删除时的回调函数
     */
    public onDelete(callback: () => void): void {
        this.onDeleteCallback = callback;
    }

    /**
     * 处理删除按钮点击
     */
    private handleDelete(): void {
        this.hide();
        if (this.onDeleteCallback) {
            this.onDeleteCallback();
        }
    }

    /**
     * 初始化内容结构
     */
    private initContent(): void {
        const content = `
            <div style="
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
                background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
                border-radius: 12px;
                padding: 20px;
                color: white;
                box-shadow: 0 8px 32px rgba(0,0,0,0.12);
                position: relative;
                min-width: 300px;
                backdrop-filter: blur(10px);
            ">
                <!-- 删除按钮 -->
                <button id="delete-btn-${this.uuid}" style="
                    position: absolute;
                    top: 12px;
                    right: 12px;
                    background: rgba(255, 255, 255, 0.2);
                    border: none;
                    border-radius: 50%;
                    width: 32px;
                    height: 32px;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    color: white;
                    transition: all 0.2s ease;
                    padding: 0;
                    pointer-events: auto;
                " onmouseover="this.style.background='rgba(255, 255, 255, 0.3)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.2)'">
                    ✕
                </button>

                <div style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 16px;
                    padding-bottom: 16px;
                    border-bottom: 1px solid rgba(255,255,255,0.2);
                ">
                    <div style="
                        width: 48px;
                        height: 48px;
                        background: rgba(255,255,255,0.2);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 24px;
                        margin-right: 16px;
                    ">
                        🚇
                    </div>
                    <div style="flex: 1; padding-right: 30px;">
                        <div style="font-size: 18px; font-weight: 700; margin-bottom: 4px;">
                            ${this.tunnelData.type}
                        </div>
                        <div style="font-size: 13px; opacity: 0.85;">
                            隧道信息
                        </div>
                    </div>
                </div>

                <div style="
                    background: rgba(255,255,255,0.15);
                    border-radius: 8px;
                    padding: 16px;
                    backdrop-filter: blur(10px);
                    margin-bottom: 12px;
                ">
                    <div style="font-size: 11px; opacity: 0.85; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;">
                        坐标位置
                    </div>
                    <div style="
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 12px;
                        font-family: 'Courier New', monospace;
                    ">
                        <div style="text-align: center;">
                            <div style="font-size: 11px; opacity: 0.75; margin-bottom: 4px;">X</div>
                            <div style="font-size: 16px; font-weight: 700;">${this.tunnelData.position.x.toFixed(2)}</div>
                        </div>
                        <div style="text-align: center;">
                            <div style="font-size: 11px; opacity: 0.75; margin-bottom: 4px;">Y</div>
                            <div style="font-size: 16px; font-weight: 700;">${this.tunnelData.position.y.toFixed(2)}</div>
                        </div>
                        <div style="text-align: center;">
                            <div style="font-size: 11px; opacity: 0.75; margin-bottom: 4px;">Z</div>
                            <div style="font-size: 16px; font-weight: 700;">${this.tunnelData.position.z.toFixed(2)}</div>
                        </div>
                    </div>
                </div>

                <div style="
                    background: rgba(255,255,255,0.15);
                    border-radius: 8px;
                    padding: 16px;
                    backdrop-filter: blur(10px);
                ">
                    <div style="font-size: 11px; opacity: 0.85; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;">
                        隧道参数
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                        <span style="font-size: 13px; opacity: 0.85;">深度</span>
                        <span style="font-size: 15px; font-weight: 700;">${this.tunnelData.depth} m</span>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <span style="font-size: 13px; opacity: 0.85;">半径</span>
                        <span style="font-size: 15px; font-weight: 700;">${this.tunnelData.radius} m</span>
                    </div>
                </div>
            </div>
        `;
        this.updateContent(content);
    }

    /**
     * 附加删除按钮事件
     */
    private attachDeleteEvent(): void {
        setTimeout(() => {
            const deleteBtn = document.getElementById(`delete-btn-${this.uuid}`);
            if (deleteBtn) {
                deleteBtn.addEventListener('click', () => this.handleDelete());
            }
        }, 0);
    }
}